会员可以在此提问，百战程序员老师有问必答

对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题，会帮你学得更全面

截止目前，同学们一共提了 132359个问题

时间排序推荐排序

name和value又有什么区别呢

WEB前端全系列/第一阶段：HTML5+CSS3模块/表单 361楼

设置—Emment里面没有use online completions

WEB前端全系列/第一阶段：HTML5+CSS3模块/前端入门与基础知识 362楼

什么时候需要使用ie盒模型呀？有时候我不使用他们也可以达到效果，那什么时候应该使用他们呢？

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS3新特性 363楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>米课</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="images/favicon.ico">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/mike.css">
</head>
<body>
    <div class="nav">
        <div class="wrap">
            <div class="logo"></div>
            <div class="search">
                <form action="">
                    <input type="text" placeholder="查找课程..." class="text-input">
                    <button class="iconfont">&#xe64d;</button>
                </form>
            </div>
            <div class="nav-bar"></div>
        </div>
    </div>
</body>
</html>

.search button{
    width: 40px;
    height: 34px;
    background-color: #f5f5f5;
    color: #54abd4;
    font-weight: 900;
    position: absolute;
    top: 16px;
    right: 2px;
    border: none;
}


老师您好，请问我的代码哪里有问题呢，为什么button里面的方大镜图标显示不出来？

WEB前端全系列/第一阶段：HTML5+CSS3模块/商城官网项目 364楼

demo-

老师，这节课讲的不太明白,麻烦您给能解决一下吗

WEB前端全系列/第一阶段：HTML5+CSS3模块/HTML5基础元素 365楼

也没搜索到

WEB前端全系列/第一阶段：HTML5+CSS3模块/前端入门与基础知识 366楼

我只用了绝对定位left，没有用margin-left,动画也没有用display，而是给颜色设置透明，最后效果差不多，这样可以吗？

            <div class="tria"></div>

.tria{
    width: 0;
    height: 0;
    border-bottom: 8px solid transparent;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    position: absolute;
    bottom: 0;
    left: 33%;
    transition: all 0.05s;
}
.black-nav-left li:hover>.tria{
    border-bottom: 8px solid #fff;
}

WEB前端全系列/第一阶段：HTML5+CSS3模块/商城官网项目 367楼

没啥要问答的，就是想给后面的同学留言

成长的过程是苦涩的，但我们实毋须害怕，因为在每一次哀伤的背后，都有一份成长的喜悦，就如松柏凌霜雪而弥劲，春天总是伴随在严冬之后。

WEB前端全系列/第一阶段：HTML5+CSS3模块/商城官网项目 368楼

我想让网页整出三个一行排列的图加字。用那些代码呀

WEB前端全系列/第一阶段：HTML5+CSS3模块/HTML5基础元素 369楼

<!DOCTYPE html>

<head>

<title>xiaomi</title>

<style>

.black-nav {

height: 40px;

width: 100%;

line-height: 40px;

font-size: 12px;

color: #b0b0b0;

background-color: #333;

}

.wap {

width: 1226px;

margin: 0 auto;

}

.black-nav-left {

float: left;

list-style: none;

}

.black-nav-right {

float: right;

list-style: none;

}

.wap a {

text-decoration: none;

}

.black-nav li {

float: left;

}

.black-nav a {

color: #b0b0b0;

}

.black-nav a:hover {

color: #fff;

}

.black-nav span {

margin: 0 3.6px;

color: #424242;

}

.cart {

width: 120px;

height: 40px;

background-color: #424242;

margin-left: 25px;

position: relative;

}

</style>

</head>

<body>

<li><a href="#">小爱开放平台</a> <span>|</span></li>

<li><a href="#">下载app </a> <span>|</span></li>

<li><a href="#"> Select Location</a> <span>|</span></li>

</ul>

</ul>

</div>

</body>

</html>

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS3新特性 370楼

input标签一定要放在from容器里么

WEB前端全系列/第一阶段：HTML5+CSS3模块/表单 371楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城</title>
    <link rel="icon" href="image/icon.png">
    <link rel="stylesheet" href="css/test.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <!-- 头部的开始 -->
    <div class="header">
        <a href="#">
            <img src="image/a2a9e6db5e3c5374301827435d8595c6.jpg" alt="">
        </a>
    </div>
    <!-- 头部的结束 -->
    <!-- 导航开始 -->
    <div class="headerNav">
         <!-- 水平居中DIV -->
        <div class="nav">           
            <lu class="nav_ul_left">
                <li><a href="" herf="#">小米商城</a> <span>|</span></li>
                <li><a href="" herf="#">MIUI</a> <span>|</span></li>
                <li><a href="" herf="#">loT</a> <span>|</span></li>
                <li><a href="" herf="#">云服务</a> <span>|</span></li>
                <li><a href="" herf="#">天星数科</a> <span>|</span></li>
                <li><a href="" herf="#">有品</a> <span>|</span></li>
                <li><a href="" herf="#">小爱开放平台</a> <span>|</span></li>
                <li><a href="" herf="#">企业团购</a> <span>|</span></li>
                <li><a href="" herf="#">资质证照</a> <span>|</span></li>
                <li><a href="" herf="#">协议规则</a> <span>|</span></li>
                <li><a href="" herf="#">下载app</a> <span>|</span></li>
                <li><a href="" herf="#">智能生活</a> <span>|</span></li>
                <li><a href="" herf="#">Select Location</a></li>
            </lu>
            <ul class="nav_ul_right">
                <li><a href="" herf="#">登录</a><span>|</span></li>
                <li><a href="" herf="#">注册</a><span>|</span></li>
                <li><a href="" herf="#">消息通知</a></li>
                <li class="cart">
                    <a href="" herf="#">购物车(0)</a>
                    <div class="cart_list">购物车中还没有商品，赶紧选购吧！</div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 导航结束 -->
</body>
</html>

/* 头部css开始 */
.header{
    width: 100%;
    height: 100px;
    /* background-color: red; */
    overflow: hidden;
    /* 父元素定位 */
    position: relative;
}
.header img{    
    height: 100px;
    /* 子元素定位 */
    position: absolute;
    /* 子元素左边距离父元素50% */
    left: 50%;
    /* 子元素向左移50% 这样图片就跟父元素水平居中了*/
    transform: translateX(-50%);
}
/* 头部css结束 */

/* 导航样式开始 */
.headerNav{
    width: 100%;
    height: 40px;
    background-color: #333; 
    line-height: 40px;
    font-size: 12px;
    color: #b0b0b0;
}
/* 水平居中DIV  */
.nav{
    width: 1226px;      
    margin:0 auto;   
}
.nav_ul_left{
    float: left;
}
.nav_ul_right{
    float: right;
}
.nav li{
    float: left;
}
.nav a{
    color: #b0b0b0;
}
.nav span{
    color: #424242;
    margin: 0.3em;
}
/* 导航上所有a标签 */
.nav a:hover{
    color: #fff;
}
/* 购物车 */
.cart{
    width: 120px;
    height: 40px;
    background-color: #424242;
    margin-left: 25px;
    position: relative;
}
/* 购物车背景 */
.cart:hover{
    background-color: #fff;
    /* 鼠标移动到li变成小手 */
    cursor: pointer;    
}
/* 购物车字体 */
.cart:hover>a{   
    color: #ff6700;
    font-weight: 500;
}
/* 购物车下拉内容 */
.cart_list{
    width: 316px;
    height: 0;    
    background-color: #fff;
    color: #424242;
    position: absolute;
    right: 0;
    top: 40px;
    display: none;
    overflow: hidden;
    /* 动画过渡 */
    transition: all 0.3s;
    /* 设置边框 */
    box-shadow: 0 2px 10px rgb(0 0 0 / 15%);
}
.cart:hover>.cart_list{
    height: 100px;
    line-height: 100px;
    display: block;  
    
}
/* 导航样式结束 */

在购物车下拉内容里面动画过渡那里设备了过渡效果没起作用。

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS3新特性 372楼

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.box1{

width: 150px;

height: 150px;

background-color: wheat;

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

}

</style>

</head>

<body>

<p>

大家好，我是xxx!大家好，我是xxx!大家好，我是xxx!

大家好，我是xxx!大家好，我是xxx!

</p>

</div>

</body>

</html>

老师想问一下，就是按照上面代码：实现单行文本,超出容器大小，使用 ... 代替，但是为什么会没有. . .了。

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS常用属性 373楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>魅族</title>
    <style>
        .box-header{
            width: 100%;
            height: 680px;
            background: url("魅族images/444c6b0f-a71c-4e91-8c17-6745223228c5.jpg") no-repeat center ;
            background-size: cover;
        }
        .box-phone{
            width: 100%;
            height: 450px;
            background: url("魅族images/a6c64f8f-6ab5-4a93-8139-2a893eb2a2a5.jpg") no-repeat center;
            background-size: cover;
        }
        .box-header-bottom{
            width: 1262px;
            height: 277px;
            /*background: red;*/
        }
        .box-top{
            width: 25%;
            height: 100%;
            /*background: orange;*/
            float: left;
        }
        .img1{
            width: 130px;
            height: 130px;
        }
        .box-top>p:first-of-type,.phone-top-left>p:first-of-type,.phone-top-right>p:first-of-type,.phone-bottom-items>p:first-of-type{
            font-size: 20px;
            font-weight: bold;
            width: 310px;
            height: 30px;
        }
        .box-top>p:last-child,.phone-top-left>p:first-of-type+p,.phone-top-right>p:first-of-type+p,.phone-bottom-items>p:last-of-type{
            color: #999999;
            font-size: 14px;
            width: 310px;
            height: 21px;
        }
        .title{
            text-align: center;
            font-weight: bold;
            font-size: 2em;
        }
        .box-phone-bottom{
            width: 1262px;
            height: 1005px;
        }
        .box-phone-bottom-center{
            width: 1230px;
            height:1220px;
        }
        .phone-top{
            width:1230px;
            height: 610px;
        }
        .phone-bottom{
            width: 1212px;
            height: 375px;
        }
        .phone-top-left,.phone-top-right{
            width: 615px;
            height: 610px;
            float: left;
        }
        .phone-bottom-items{
            width: 303px;
            height: 375px;
            float: left;
        }
        .img2{
            width: 460px;
            height: 460px;
        }
        .price{
            width: 71px;
            height: 33px;
            color: red;
            font-size: 28px;
        }
        .price1{
            width: 14px;
            height: 21px;
            font-size: 12px
        }
        .img3{
         width: 230px;
            height: 230px;
        }
/*.img+p{
    font-size: 20px;
    font-weight: bold;
}*/
    </style>
</head>
<body>
<div class="box-header">
    <a href="https://www.meizu.com/">
    </a>
</div>
<div class="box-header-bottom">
    <div class="box-top" align="center">
        <img src="魅族images/5f896683-d2f2-487d-a296-722fc9e17f1e.png" alt="" class="img1">
        <p>魅族 18</p>
        <p>立省900 + 12 期免息 + 赠手机壳</p>
    </div>
    <div class="box-top" align="center">
        <img src="魅族images/5f896683-d2f2-487d-a296-722fc9e17f1e.png" alt="" class="img1">
        <p>魅族 18</p>
        <p>立省900 + 12 期免息 + 赠手机壳</p>
    </div>
    <div class="box-top" align="center">
        <img src="魅族images/5f896683-d2f2-487d-a296-722fc9e17f1e.png" alt="" class="img1">
        <p>魅族 18</p>
        <p>立省900 + 12 期免息 + 赠手机壳</p>
    </div>
    <div class="box-top" align="center">
        <img src="魅族images/5f896683-d2f2-487d-a296-722fc9e17f1e.png" alt="" class="img1">
        <p>魅族 18</p>
        <p>立省900 + 12 期免息 + 赠手机壳</p>
    </div>
</div>
<h3 class="title">手机</h3>
<div class="box-phone">
</div>
<div class="box-phone-bottom">
    <div class="box-phone-bottom-center">
        <div class="phone-top" >
            <div class="phone-top-left" align="center">
                <p>魅族 18</p>
                <p>限时领券至高立省900 | 赠手机壳</p>
                <p class="price"><span class="price1">￥</span>3999</p>
                <img src="魅族images/de87d38d-3785-4605-a211-71364ded123f.png" alt=""  class="img2">
            </div>
            <div class="phone-top-right" align="center">
                <p>魅族 18</p>
                <p>限时领券至高立省900 | 赠手机壳</p>
                <p class="price"><span class="price1">￥</span>3999</p>
                <img src="魅族images/de87d38d-3785-4605-a211-71364ded123f.png" alt=""  class="img2">
            </div>
        </div>
        <div class="phone-bottom">
            <div class="phone-bottom-items" align="center">
                <img src="魅族images/Cgbj0F6zwMuANEeWAAw6yQFAJXM097.png" alt="" class="img3">
                <p>魅族 17「AG梦幻独角兽」</p>
                <p>高通骁龙 865 | 120 Hz尝鲜模式</p>
                <p class="price"><span class="price1">￥</span> 3699</p>
            </div>
            <div class="phone-bottom-items" align="center">
                <img src="魅族images/Cgbj0F6zwMuANEeWAAw6yQFAJXM097.png" alt="" class="img3">
                <p>魅族 17「AG梦幻独角兽」</p>
                <p>高通骁龙 865 | 120 Hz尝鲜模式</p>
                <p class="price"><span class="price1">￥</span>3699</p>
            </div>
            <div class="phone-bottom-items" align="center">
                <img src="魅族images/Cgbj0F6zwMuANEeWAAw6yQFAJXM097.png" alt="" class="img3">
                <p>魅族 17「AG梦幻独角兽」</p>
                <p>高通骁龙 865 | 120 Hz尝鲜模式</p>
                <p class="price"><span class="price1">￥</span> 3699</p>
            </div>
            <div class="phone-bottom-items" align="center">
                <img src="魅族images/Cgbj0F6zwMuANEeWAAw6yQFAJXM097.png" alt="" class="img3">
                <p>魅族 17「AG梦幻独角兽」</p>
                <p>高通骁龙 865 | 120 Hz尝鲜模式</p>
                <p class="price"><span class="price1">￥</span> 3699</p>
            </div>
        </div>
    </div>
</div>
</body>
</html>

老师，我写魅族官网写了一部分，为什么价格哪里class都一样，但是设置不出来同样的样式呢？

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS常用属性 374楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>金立手机官网—金立手机及配件官方正品专卖网站_金立全面全面屏s11新品首发</title>
    <link rel="icon" href="https://shop.gionee.com/favicon.ico">
    <link rel="stylesheet" href="css/jinli.css">
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
<div class="nav">
    <div class="wrap">
        <div class="logo">
            <img src="image/logo.png" alt="">
        </div>
        <div class="nav_right">
            <div class="enter">
                <ul>
                    <li><a href="#">amigo账号登录</a><span>|</span></li>
                    <li><a href="#">原账号登录</a><span>|</span></li>
                    <li><a href="#">注册</a></li>
                    <li><a href="#">购物车(0)</a></li>
                </ul>
            </div>
            <div class="phone">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">手机</a></li>
                    <li><a href="#">配件</a></li>
                    <li><a href="#">服务</a></li>
                    <li><a href="#">下载</a></li>
                    <li><a href="#">amigoOS</a></li>
                    <li class="search" >
                        <input type="text" placeholder="请输入搜索内容" autofocus>
                        <button>搜</button>
                    </li>
                </ul>

            </div>
        </div>
    </div>

</div>
</body>
</html>

.nav{
    width: 100%;
    height: 104px;
    border-bottom: 1px solid #d5d5d5;
    position: fixed;
    left: 0px;
    top: 0px;
    /*background-color: #cc0000;*/
}
.wrap{
    width: 1084px;
    height: 104px;
    margin: 0px auto;
    /*background-color: #42c3ee;*/
}
.logo img{
    width: 205px;
    margin-top: 25px;
}
.logo,.nav_right{
    float: left;
}
.nav_right{
    width:879px;
    height: 104px;
}
.enter{
    width: 100%;
    height: 30px;
    line-height: 30px;
}
.enter ul li a{
    text-decoration: none;
}
.enter ul li a:hover{
    color: #ef4222;
}
.enter ul li{
   list-style-type: none;
}
.nav_right ul{
    float: right;
}
.nav_right ul li{
    float: left;
}
.nav_right ul a{
    margin:0px 10px;
    color: #9f9f9f;
}
.enter ul li:first-child a{
    color:#ef4222 ;
}
.phone{
    width:100%;
    height: 73px;
    line-height: 73px;
}
.phone ul li a{
    text-decoration: none;
}
.phone ul li{
    list-style-type: none;
}
.phone ul li a{
    margin-left: 40px;
    font-size: 16px;
    color: black;
    /*font-weight: bolder;*/
}
.phone ul li a:hover{
    color: #ef4222;
}
.search{
    width: 170px;
    height: 30px;
    /*border: 1px solid #fff;*/
    box-sizing: border-box;
    /*padding-left: 5px;*/
    margin-top:18.5px;
    margin-left: 120px;

}
.search input{
    width: 138px;
    height: 28px;
    float: left;
}
.search button{
    width: 25px;
    height: 28px;
    float: left;
    background-color: #ffff;
    border: none;
}

老师我的搜索按钮怎么不在这个框里面呀

WEB前端全系列/第一阶段：HTML5+CSS3模块/前端入门与基础知识 375楼

没啥要问答的，就是想给后面的同学留言

成长的过程是苦涩的，但我们实毋须害怕，因为在每一次哀伤的背后，都有一份成长的喜悦，就如松柏凌霜雪而弥劲，春天总是伴随在严冬之后。

同学您好