有效沟通问答-【官方】百战程序员_IT在线教育培训机构

JAVA 全系列

Python 全系列

Python入门

Python 深入与提高

Hadoop 分布式文件系统：HDFS（扩展）

Hadoop 分布式计算框架：Mapreduce（扩展）

AIGC人工智能工具全能班

Stable Diffusion（自选模型）AI绘图

大模型全系列

【AI科普】深入浅出人工智能

【AI理论】提示词工程：高效对话与优化技巧

【职场AI】AI在职场中的高效应用场景

【办公AI】DeepSeek接入办公工具实战

【Python入门】零基础快速掌握Python编程

【Java入门】从零开始学Java：基础到实践

【企业实战】如何在项目中集成智能聊天机器人

【AI社交】在微信中接入DeepSeek打造AI女友

【大模型框架】LangChain 与基于RAG构建医疗问答系统

【AI助手与数据可视化】Assistants 与 Streamlit

【大模型本地部署与微调】训练属于你的Deepseek

【编程探秘】解锁AI智能编程工具奥秘

【图像绘图】走进Midjourney图像AI绘图世界

【模绘解析】洞悉Stable Diffusion（自选模型）AI绘图原理

大厂算法特训班

C++特训班

鸿蒙应用开发

大数据全系列

Hadoop 分布式计算MapReduce和资源管理Yarn

人工智能

人工智能基础-Python科学计算和可视化

深度学习-目标检测YOLO(V8正在更新中)实战

微服务

SpringBoot与MybatisPlus

Spring Cloud Alibaba技术栈

租房网（Spring Cloud最新架构）

软件测试全系列

Java编程基础和Java Web开发基础

7u职场软实力

毕设项目

软考中级

软考初级

ROS2机器人开发

计算机考研408

百战万词考研英语

考研英语7000词汇精讲1（1-1000）

考研英语7000词汇精讲2（1000-2000）

考研英语7000词汇精讲3（2000-3000）

考研英语7000词汇精讲4（3000-4000）

考研英语7000词汇精讲5（4000-5000）

考研英语7000词汇精讲6（5000-6000）

考研英语7000词汇精讲7（6000以上）

英文原版报刊选题：《经济学人》选题

英文原版报刊选题：《纽约时报》选题

英文原版报刊选题：《自然nature》选题

英文原版报刊选题：《时代周刊times》选题

英文原版教材：《柏拉图：理想国，西方哲学源头》

考研英语

考研政治

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

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

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

时间排序推荐排序

不知道老师是否能看到，如果能看到，麻烦老师帮我解答下

WEB前端全系列/第一阶段：HTML5+CSS3模块/初识CSS 571楼

这里的二维码被下面的导航覆盖了，加了z-index为啥还是被覆盖了。

|MIUI|LoT||||||||APP|APP|SelectLocation|||(0)105299105299105299105299Redmi

.{
    : %: : : : }
.{
    : : : %: (-%)}
.{
    : %: : : : : }
.{
    : }
.{
    : : }
.{
: }
.{
    : }
.{
    : : }
.{
    : }
.:{
    : }
.{
    : : }
.{
    : : : : : : }
.:{
    : }
.:>{
    : }
.{
    : : : : (): : : : : : }
.:>.{
    : : }
.{
    : : : : : : : %: -: : : }
.>{
    : : }
.>{
    : : : }
.>:>.{
    : }
.{
    : : : : : : : : %: -: }
.>:>.{
    : }
.{
    : %: : : }
.{
    : : : : : : : }
.{
    : : : : }
.{
    : : : : }
.>{
    : %: %: : : }
.{
    : -}
.{
    : }
.:>.{
    : }
.:>.{
    : }
.{
    : }
.>>>{
    : : }
.>>>:{
    : }
.>>:{
    : }
.{
    : %: : : : (): : : : : }
.{
    : %: : : : : }
.{
    : : }
.{
    : }
.{
    : }
.{
    : }
.:.{
    : }
.:.{
    : }
.>{
    : : : : : : : : : : }
.>{
    : : : : : : : : }
.>:.>:+{
    : }
.>:.>:+{
    : }
.>:{
    : : : }
.{
    : : : : : : : : : : }
.>:~.{
    : }

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

老师我想问一下，在视频中提到的比如需要一个50px的padding，内容为300就会把元素撑大，说成为了400*400，我这段一直没理解，是为什么

WEB前端全系列/第一阶段：HTML5+CSS3模块/初识CSS 573楼

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>小米商城 - 小米11、Redmi Note 9、小米MIX Alpha，小米电视官方网站</title>
    <link rel="icon" href="images/favicon.ico">
    <link rel="stylesheet" href="iconfont.css">
    <link rel="stylesheet" href="index.xiaomi.style.css">
</head>
<body>
    <!-- 头部开始 -->
    <div>
        <a href="#">
            <img src="images/bb3c06a430689ba2357dd7d1fbfa6bab.jpg" alt="广告">
        </a>
    </div>
    <!-- 头部结束 -->
    <!-- 黑色导航开始 -->
    <div>
        <div>
            <ul>
                <li>
                    <a href="#">小米商城</a>
                    <span>|</span>
                </li>
                <li>
                    <a href="#">MIUI</a>
                    <span>|</span>
                </li>
                <li>
                    <a href="#">loT</a>
                    <span>|</span>
                </li>
                <li>
                    <a href="#">云服务</a>
                    <span>|</span>
                </li>
                <li>
                    <a href="#">天星科技</a>
                    <span>|</span>
                </li>
                <li>
                    <a href="#">有品</a>
                    <span>|</span>
                </li>
                <li>
                    <a href="#">小爱开放平台</a>
                    <span>|</span>
                </li>
                <li>
                    <a href="#">企业团购</a>
                    <span>|</span>
                </li>
                <li>
                    <a href="#">资质证照</a>
                    <span>|</span>
                </li>
                <li>
                    <a href="#">协议规则</a>
                    <span>|</span>
                </li>
                <li>
                    <a href="#">下载app</a>
                    <span>|</span>
                    <div>
                        <img src="images/download.png" alt="">
                        <p>小米商城APP</p>
                    </div>
                    <div></div>
                </li>
                <li>
                    <a href="#">智能生活</a>
                    <span>|</span>
                </li>
                <li>
                    <a href="#">Select Location</a>
                    <span>|</span>
                </li>
            </ul>
            <ul>
                <li>
                    <a href="#">登录</a>
                    <span>|</span>
                </li>
                <li>
                    <a href="#">注册</a>
                    <span>|</span>
                </li>
                <li>
                    <a href="#">消息通知</a>
                </li>
                <li>
                    <a href="#">购物车(0)</a>
                    <div>
                        购物车中还没有商品,赶紧选购吧!
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 黑色导航结束 -->

    <!-- 白色导航开始 -->
    <div>
        <div>
            <div>
                <img src="images/mi-logo.png" alt="">
                <img src="images/mi-home.png" alt="">
            </div>
            <div>
                <ul>
                    <div></div>
                    <li>
                        <a href="">小米手机</a>
                        <div>
                            <div>
                                <ul>
                                    <li>
                                        <a href="#">
                                            <div>
                                                <img src="images/963679eaf3937351e154600ab3448460.png" alt="">
                                                <p>小米11</p>
                                                <p>3999元起</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div>
                                                <img src="images/963679eaf3937351e154600ab3448460.png" alt="">
                                                <p>小米11</p>
                                                <p>3999元起</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div>
                                                <img src="images/963679eaf3937351e154600ab3448460.png" alt="">
                                                <p>小米11</p>
                                                <p>3999元起</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div>
                                                <img src="images/963679eaf3937351e154600ab3448460.png" alt="">
                                                <p>小米11</p>
                                                <p>3999元起</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div>
                                                <img src="images/963679eaf3937351e154600ab3448460.png" alt="">
                                                <p>小米11</p>
                                                <p>3999元起</p>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li>
                        <a href="">Redmi红米</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="">智能硬件</a>
                    </li>
                    <li>
                        <a href="">服务</a>
                    </li>
                    <li>
                        <a href="">社区</a>
                    </li>
                </ul>
            </div>
            <div>
                <input type="text" placeholder="赢手机,分一亿!">
                <button>&#xe63d;</button>
                <div></div>
            </div>
        </div>
    </div>
    <!-- 白色导航结束 -->
    <!-- banner部分开始 -->
    <div>
        <div>
            <img src="images/01d048d6ca5fea696b60c0431e24fbf3.jpg" alt="">
            <div>
                <ul>
                    <li>
                        <a href="#">手机 电话卡</a>
                        <i>&#xe50c;</i>
                        <div>
                            <ul>
                                <li>
                                    <a href="#">
                                        <img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
                                        <span>小米11</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
                                        <span>小米11</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
                                        <span>小米11</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
                                        <span>小米11</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
                                        <span>小米11</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
                                        <span>小米11</span>
                                    </a>
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <a href="#">
                                        <img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
                                        <span>小米11</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
                                        <span>小米11</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
                                        <span>小米11</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
                                        <span>小米11</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
                                        <span>小米11</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
                                        <span>小米11</span>
                                    </a>
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <a href="#">
                                        <img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
                                        <span>小米11</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
                                        <span>小米11</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
                                        <span>小米11</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
                                        <span>小米11</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
                                        <span>小米11</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
                                        <span>小米11</span>
                                    </a>
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <a href="#">
                                        <img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
                                        <span>小米11</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
                                        <span>小米11</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
                                        <span>小米11</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
                                        <span>小米11</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
                                        <span>小米11</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.png" alt="">
                                        <span>小米11</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href="#">手机 电话卡</a>
                        <i>&#xe50c;</i>
                    </li>
                    <li>
                        <a href="#">手机 电话卡</a>
                        <i>&#xe50c;</i>
                    </li>
                    <li>
                        <a href="#">手机 电话卡</a>
                        <i>&#xe50c;</i>
                    </li>
                    <li>
                        <a href="#">手机 电话卡</a>
                        <i>&#xe50c;</i>
                    </li>
                    <li>
                        <a href="#">手机 电话卡</a>
                        <i>&#xe50c;</i>
                    </li>
                    <li>
                        <a href="#">手机 电话卡</a>
                        <i>&#xe50c;</i>
                    </li>
                    <li>
                        <a href="#">手机 电话卡</a>
                        <i>&#xe50c;</i>
                    </li>
                    <li>
                        <a href="#">手机 电话卡</a>
                        <i>&#xe50c;</i>
                    </li>
                    <li>
                        <a href="#">手机 电话卡</a>
                        <i>&#xe50c;</i>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- banner部分结束 -->
</body>
</html>

*{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
}
li{
    list-style-type: none;
}

/*头部样式开始*/
.header{
    width: 100%px;
    height: 120px;
    /*background-color: red;*/
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.header img{
    height: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
/*头部样式结束*/


/*黑色导航样式开始*/
.black-nav{
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: #333;
    color: #b0b0b0;
    font-size: 12px;
}
.wrap{
    width: 1226px;
    margin: 0 auto;
}
.black-nav-left{
    float: left;
}
.black-nav-right{
    float: right;
}
.black-nav li{
    float: left;
    position: relative;
}
.black-nav a{
    color:#b0b0b0;
}
.black-nav a:hover{
    color: #fff;
}
.black-nav span{
    color: #424242;
    margin: 0 3.6px;
}
.cart{
    width: 120px;
    height: 40px;
    background-color: #424242;
    text-align: center;
    margin-left: 25px;
    transition: all .2s;
    position: relative;
}
.cart:hover{
    background-color: #fff;
}
.cart:hover>a{
    color: #ff6700;
}
.cart-list{
    width: 316px;
    height: 0;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
    position: absolute;
    right: 0;
    top: 40px;
    color: #424242;
    line-height: 100px;
    overflow: hidden;/*隐藏溢出的文字*/
    transition: all .3s;
    z-index: 999;
}
.cart:hover>.cart-list{
    height: 100px;
}
/*下载app*/
.download{
    width: 124px;
    height: 0;
    background-color: #fff;
    box-shadow: 0 1px 5px #aaa;
    position: absolute;
    top: 40px;
    left: 50%;
    margin-left: -62px;
    transition: all .3s;
    overflow: hidden;
    z-index: 999;
}
.download>img{
    width: 90px;
    margin: 18px 17px -5px;
}
.download>p{
    color: #333;
    font-size: 14px;
    line-height: 14px;
    text-align: center;
}
.black-nav-left>li:hover>.download{
    height: 148px;
}
.stri{
    width: 0;
    height: 0;
    border-bottom: 8px solid #fff;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -8px;
    display: none;
}
.black-nav-left>li:hover>.stri{
    display: block;
}
/*黑色导航样式结束*/

/*白色导航样式开始*/
.white-nav{
    width: 100%;
    height: 100px;
    /*background-color: skyblue;*/
    position: relative;
}
.logo{
    width: 55px;
    height: 55px;
    background-color: #ff6700;
    float: left;
    margin-top: 22.5px;
    position: relative;
    overflow: hidden;
}
.nav-bar{
    width: 875px;
    height: 100px;
    line-height: 100px;
    /*background-color: pink;*/
    float: left;
}
.search{
    width: 296px;
    height: 100px;
    /*background-color: purple;*/
    float: left;
    position: relative;
}
.logo>img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    transition: all .2s;
}
.mi-home{
    left: -55px;
}
.mi-logo{
    left: 1px;
}
.logo:hover>.mi-home{
    left: 1px;
}
.logo:hover>.mi-logo{
    left: 55px;
}
.nav-bar li{
    float: left;
}
/*白色导航空白*/
.nav-bar .blank{
    width: 200px;
    height: 100px;
    /*background-color: red;*/
    float: left;
}
.nav-bar>ul>li>a{
    font-size: 16px;
    color: #333;
    padding: 0 10px;
}
.nav-bar>ul>li>a:hover{
    color: #ff6700;
}
.nav-bar-list{
    width: 100%;
    height: 229px;
    background-color: #fff;
    border-top: 1px solid #eee;
    box-shadow: 0 3px 4px rgba(0,0,0,.1);
    position: absolute;
    top: 100px;
    left: 0;
    display: none;
    z-index: 999;
}
.img-box{
    width: 100%;
    height: 110px;
    margin-top: 25px;
    border-right: 2px solid #eee;
    box-sizing: border-box;
    text-align: center;
}
.name1{
    color: #333;
    font-size: 12px;
    line-height: 20px;
    margin-top: -35px;
}
.price{
    color: #ff6700;
    font-size: 12px;
    line-height: 20px;
}
.nav-bar-list li{
    width: 204px;
}
.nav-bar-list li:last-child .img-box{
    border-right: none;
}
.nav-bar li:hover .nav-bar-list{
    display: block;
}
.search>input{
    width: 244px;
    height: 50px;
    /*background-color: red;*/
    border: 1px solid #e0e0e0;
    box-sizing: border-box;
    padding: 0 10px;
    outline: none;
    float: left;
    border-right: none;
    margin-top: 25px;
    transition: all .2s;
}
.search>button{
    width: 52px;
    height: 50px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    float: left;
    margin-top: 25px;
    outline: none;
    transition: all .2s;
}
.search>input:hover,.search>input:hover+button{
    border-color: #b0b0b0;
}
.search>input:focus,.search>input:focus+button{
    border-color: #ff6700;
}
.search>button:hover{
    background-color: #ff6700;
    border-color: #ff6700;
    color: #fff;
}
.search-list{
    width: 245px;
    height: 241px;
    background-color: #fff;
    border: 1px solid #ff6700;
    border-top: none;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 75px;
    display: none;
}
.search>input:focus~.search-list{
    display: block;
}
/*白色导航样式结束*/


/*banner部分样式开始*/
.banner{
    width: 100%;
    height: 460px;    
}
.banner .banner-img{
    width: 100%;
}
.banner>.wrap{
    position: relative;
}
.slide{
    width: 234px;
    height: 420px;
    padding: 20px 0;
    background-color: rgba(105,101,101,.6);
    position: absolute;
    left: 0;
    top: 0;
}
.slide>ul>li{
    height: 42px;
    line-height: 42px;
    text-align: left;
    padding-left: 30px;
    font-size: 14px;
}
.slide>ul>li:hover{
    background-color: #ff6700;
}
.slide>ul>li>a{
    color: #fff;
}
.slide i{
    float: right;
    padding-right: 20px;
    color: #fff;
}
.slide-list{
    width: 992px;
    height: 460px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-left: none;
    box-shadow: 0 8px 16px rgba(0,0,0,.18);
    padding-top: 2px;
    position: absolute;
    top: 0;
    left: 234px;
    display: none;
}
.slide-list>ul{
    float: left;
    width: 247.75px;
}
.slide-list li{
    width: 100%;
    height: 76px;
    padding: 18px 0 18px 20px;
    box-sizing: border-box;
}
.slide-list img{
    margin-right: 10px;
    width: 40px;
    height: 40px;
}
.slide-list span{
    color: #333;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    top: -14px;
}
.slide-list li:hover span{
    color: #ff6700;
}
.slide li:hover .slide-list{
    display: block;
}
/*banner部分样式结束*/

老师好，我这个小米手机的下拉框加过渡怎么也加不上是咋回事呀

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

<div class="black-nav">
    <div class="wrap">
        <ul class="black-nav-left">
            <li><a href="#">小米商城</a><span>|</span></li>
            <li><a href="#">MUI</a><span>|</span></li>
            <li><a href="#">LOT</a><span>|</span></li>
            <li><a href="#">云服务</a><span>|</span></li>
            <li><a href="#">天星科技</a><span>|</span></li>
            <li><a href="#">有品</a><span>|</span></li>
            <li><a href="#">小爱开放平台</a><span>|</span></li>
            <li><a href="#">企业团购</a><span>|</span></li>
            <li><a href="#">资质证照</a><span>|</span></li>
            <li><a href="#">协议规则</a><span>|</span></li>
            <li class="list-code">
                <a href="#">下载app</a><span>|</span>
                <div class="download">
<!--                    <img src="image/download.png" alt="">-->
<!--                    <p>小米商城App</p>-->
                </div>
                
            </li>
            <li><a href="#">智能生活</a><span>|</span></li>
            <li><a href="#">Select Location</a><span>|</span></li>
        </ul>
        <ul class="black-nav-right">
            <li><a href="#">登录</a><span>|</span></li>
            <li><a href="#">注册</a><span>|</span></li>
            <li><a href="#">消息通知</a></li>
            <li class="cart">
                <a href="#">购物车（0）</a>
                <div class="cart-list">购物车中还没有商品，赶紧选购吧</div>
            </li>
        </ul>

    </div>
</div>

重置样式表

body,div,di,dd,ui,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,input,button,textera,p,blockquote,th,td
{
    margin:0;
    padding:0;}
body{text-align:center}
li{list-style:none;}
a{text-decoration:none}
img{border:none;}

样式

.black-nav{
    width:100%;
    height:40px;
    line-height:40px;
    background-color: #333333;
    color:#b0b0b0;
    font-size: 12px;
}
.wrap{
    width:1224px;
    margin:0 auto;
}
.black-nav-left{
    float:left;
}
.black-nav-right{
    float:right;
}
.black-nav li{
    float:left;
}
.black-nav a{
    color:#b0b0b0;
}
.black-nav a:hover{
    color: #fff;
}
.black-nav span{
    color: #424242;
    margin: 0 3.6px;
}
/*设置购物车*/
.cart{
    width: 120px;
    height: 40px;
    background-color: #424242;
    margin-left: 25px;
    position: relative;

}

结果截图

第一个·问题：

line-height是使一行文字垂直居中，我这里实现不了

第二个问题：

给购物车设置完宽高后应该在父元素里面，这里怎么有部分在父元素外面

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

老师，我想请问两个问题：

1、为什么我广告部分第一块容器ad-aside会向左偏移（如下图），而不是和上面banner这一块对齐？

2、我是直接用了视频里矢量图，但是没有视频里的效果，是哪里有问题？

小米.rar

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米首页</title>
    <link rel="icon" href="image/favicon.ico">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--头部-->
<div class="header">
    <img src="image/bb3c06a430689ba2357dd7d1fbfa6bab.jpg" alt="">
</div>
<!--黑色导航条-->
<div class="header-wrapper">
    <div class="topbar-wrapper">
        <ul class="topbar-nav">
            <li><a href="#">小米商城</a></li>
            <li><a href="#">MUI</a></li>
            <li><a href="#">LOT</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="#">企业团购</a></li>
            <li><a href="#">资质证照</a></li>
            <li><a href="#">协议规则</a></li>
            <li><a href="#">下载app</a></li>
            <li><a href="#">智能生活</a></li>
            <li><a href="#">Select Location</a></li>
        </ul>
        <ul class="inf">
            <li><a href="#">登录</a></li>
            <li><a href="#">注册</a></li>
            <li><a href="#">消息通知</a></li>
        </ul>

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


/*头部样式*/
.header{
    width:100%;
    height:120px;
    background-color:red;
    overflow:hidden;
    position:relative;
}
.header img{
    height:120px;
    position: absolute;
    left:50%;
    transform:translateX(-50%);
}
/*黑色导航条*/
.header-wrapper{
    width:100%;
    height:40px;
    background-color: #333333;
}
.topbar-wrapper{
    margin:0 auto;
}
.top-bar{
    width:794.13px;
    height:40px;
    background-color: #cc0000;
    float:left;
}
.topbar-nav li {
    float: left;
}
.topbar-nav a{
    color:#b0b0b0;
    font-size:12px ;
    line-height:40px;
    margin:10px;
}
.inf{
    width:142.48px;
    height:40px;
    background-color: blue;
    float:left;
}
.inf li{
    float:left;
}
.inf a{
    color:#b0b0b0;
    font-size:12px ;
    line-height:40px;

}

截图

两个ul是兄弟元素，给他们设置浮动后应该水平排列，这里蓝色部分为什么是这样能呢？

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

老师，为什么“技术·共享·娱乐”这张图片的高度变高了呢？

<!--第一块开始-->
<div class="one box">
    <video src="images/201702241034284066.mp4" autoplay loop muted>
        您的浏览器不支持视频，请升级！
    </video>
    <div class="text">
        <img src="images/video_txt.png" alt="">
        <a href="#">下载迅雷产品</a>
        <i class="iconfont">&#xe60c;</i>
    </div>
</div>
<!--第一块结束-->

/*第一块样式开始*/
.one{
    /*垂直方向溢出部分隐藏 不出现滚动条*/
    overflow: hidden;
    position: relative;
}
.one>video{
    width: 100%;
}
.text{
    width: 716px;
    height: 193px;
    position: absolute;
    /*相对于父元素one往下走50%*/
    top: 50%;
    /*相对于父元素one往右走50%*/
    left: 50%;
    /*往左上走自己宽高的一半*/
    transform: translate(-50%,-50%);
}
.text>img{
    width: 100%;
}
.text>a{
    width: 180px;
    height: 50px;
    margin: 30px auto 20px;
    color: #fff;
    /*z转换为块级元素 样式才会生效*/
    display: block;
    border: 1px solid #fff;
    /*水平居中 行高等于高*/
    line-height: 50px;
}
.text>a:hover{
    background-color: rgba(255,255,255,.5);
}
.text>i{
    font-size: 40px;
    color: #fff;
    animation: updown 1s linear infinite;
    /*转换为块级元素 实现动画*/
    display: block;
}
@keyframes updown{
    0%{
        transform: translateY(0);
    }
    33%{
        transform: translateY(-3px);
    }
    66%{
        transform: translateY(0);
    }
    100%{
        transform: translateY(3px);
    }
}
/*第一块样式结束*/

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS应用技巧 578楼

f58837161090e2e04bf687088b2ffe77.gif

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

老师，为什么我的图片在设置“小米手机”这行字的时候就居中了，然后跟着视频中再设置margin-top的时候，就成下图这样了，这是什么问题

小米.rar

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

    
        .{: %;: ;: ;
        }
        .{: ;: ;: ;:}
        .>{: ;: ;: ;: ;: ;: ;}
        .>:(){: ;}
        .{: ;: }
        {: ;: }





    



    
        
            1111

WEB前端全系列/第一阶段：HTML5+CSS3模块/初识CSS 581楼

第四个：空Div法清除浮动，为什么能找到父级高度，只是在浮动元素后面加了一个空盒子而已，为什么还要给这个空盒子加clear属性，是为了清除浮动元素的影响吗？这个空盒子是和父级并列的吗？还是在父盒子里面？

第五个：css法清除浮动影响疑问同上，另如果使用：：before清除浮动可以吗？

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

问题：表单的不完美

a、今天学习了表单但是效果很是不理想下面是自己找的表单练习和效果图的对比

b、问：如何像效果图一样美丽？表单如何对齐？

c、代码区：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="ok.html" align="center">
      
       <p>* 会 员 名 <input type="text"></p>

       <p>*登录密码<input type="password"></p>

       <p>*重复密码<input type="password"></p>

       <p>*联系人姓名<input type="text"></p>

       <p>*企业名称<input type="text"></p>

       <p>
        *贸易身份
        <input type="checkbox">我要销售
        <input type="checkbox">我要采购
        <input type="checkbox">两者都是
       </p>
     
       <p>
           电话号码
           <select name="" id="">
             <option value="" selected>中国大陆+86</option>
             <option value="">hello word</option>
             <option value="">hello word</option>
             <input type="text">
           </select>




       </p>









    </form>
</body>
</html>

d、效果图：（自己做的效果图展示）

e、理想图：

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

问题一：

a、描述：表单之间不能套表单，那么表格里面是否可以套用表单或者说表单里面是否可以套一个表格？

b、如果可以套用那么表单的重置按钮是否可以达到清除表格里面已经填写的内容？是否有效？

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            weight:1000px;
            height:600px;
            /*第一种写法*/
            background-color: crimson;
           background-image: url("images/小新.jpg");
            background: no-repeat center;
            /*第二种写法*/
            /*background: crimson  url("images/小新.jpg") no-repeat center;*/
        }
    </style>

</head>
<body>
<div class="box"></div>
</body>
</html>

程序中第一种写法运行不成功，这是为什么?

单个属性写在简写属性前面了

WEB前端全系列/第一阶段：HTML5+CSS3模块/HTML5新增元素 585楼

同学您好