老师，麻烦帮忙检查一下代码，谢谢！
老师好，麻烦帮忙检查下这一节的代码，看看还有哪些可以优化的地方好吗？代码如下：
HTML代码：
<!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>HTML页面练习</title> <link rel="stylesheet" href="css/css.css"> </head> <body> <!-- 页面头部 --> <header> <div class="logo_nav"> <!-- logo --> <div class="logo"> <img src="images/logo.png" alt=""> </div> <!-- 导航区域 --> <div class="nav"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">GALLERY</a></li> <li><a href="#">FACULTY</a></li> <li><a href="#">EVENTS</a></li> <li><a href="#">CONTACT</a></li> </ul> </div> </div> </header> <!-- Banner --> <section class="banner"> <!-- banner图片 --> <div class="banner_images"> <img src="images/banner3.jpg" alt=""> </div> <!-- banner遮罩层 --> <div class="banner_cover"></div> <!-- banner表单 --> <div class="banner_form"> <form action=""> <div class="enter_content"> <input type="text" placeholder="your Name"> <input type="text" placeholder="your Phone"> <input type="email" placeholder="your Email"> <textarea cols="60" rows="5" placeholder="Write Your Comment Here"></textarea> </div> <div class="send_message"> <input type="submit" value="SEND MESSAGE"> </div> </form> </div> </section> <!-- about区域 --> <section class="about_section"> <!-- about上半部分 --> <div class="upper_section"> <h2>ABOUT</h2> <p class="line"></p> <p class="para">Lorem Ipsum is simply dummy text of the printing and typesetting<br> industry. Lorem Ipsum has been the industry's standard dummy<br> text ever since the 1500s.</p> </div> <!-- about下半部分 --> <div class="about_lower_section"> <!-- about下半部分左 --> <div class="about_lower_section_left"> <h3>A WORD<br> ABOUT US</h3> <div class="para_box"> <p>Praesent dignissim viverra est, sed bibendum ligula congue non. Sed ac nisl et felis gravida commodo? Suspendisse eget ullamcorper ipsum. Suspendisse diam amet. </p> <button>EXPLORE</button> </div> </div> <!-- about下半部分中 --> <div class="about_lower_section_middle"> <img src="images/bb3.jpg" alt=""> </div> <!-- about下半部分右 --> <div class="about_lower_section_right"> <div class="box1"> <p class="r1">70000</p> <p class="line"></p> <p class="r3">Students</p> </div> <div class="box2"> <p class="r1">600</p> <p class="line"></p> <p class="r3">Faculty</p> </div> </div> </div> </section> <!-- 图文混排区域 --> <section class="images_texts"> <!-- 图片1 --> <div class="img_1"> <img src="images/b1.jpg" alt=""> </div> <!-- 文字2 --> <div class="tx_2"> <h3>Library</h3> <p class="para1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p> <p class="para2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <button>EXPLORE</button> </div> <!-- 图片3 --> <div class="img_3"> <img src="images/b2.jpg" alt=""> </div> <!-- 文字4 --> <div class="tx_4"> <h3>Library</h3> <p class="para1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p> <p class="para2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <button>EXPLORE</button> </div> <!-- 文字5 --> <div class="tx_5"> <h3>Library</h3> <p class="para1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p> <p class="para2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <button>EXPLORE</button> </div> <!-- 图片6 --> <div class="img_6"> <img src="images/b3.jpg" alt=""> </div> <!-- 文字7 --> <div class="tx_7"> <h3>Library</h3> <p class="para1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p> <p class="para2">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <button>EXPLORE</button> </div> <!-- 图片8 --> <div class="img_8"> <img src="images/b4.jpg" alt=""> </div> </section> <!-- gallery区域 --> <section class="gallery_section"> <!-- gallery上半部分 --> <div class="upper_section"> <h2>Gallery</h2> <p class="line"></p> <p class="para">Lorem Ipsum is simply dummy text of the printing and typesetting<br> industry. Lorem Ipsum has been the industry's standard dummy<br> text ever since the 1500s.</p> </div> <!-- gallery下半部分 --> <div class="lower_section"> <dl class="r1"> <dt> <img src="images/03-01.jpg" alt=""> </dt> <dd>Science Lab</dd> </dl> <dl class="r1"> <dt> <img src="images/03-02.jpg" alt=""> </dt> <dd>Indoor Stadium</dd> </dl> <dl class="r1"> <dt> <img src="images/03-03.jpg" alt=""> </dt> <dd>Transportation</dd> </dl> <dl> <dt> <img src="images/03-04.jpg" alt=""> </dt> <dd>Kids Room</dd> </dl> <dl> <dt> <img src="images/03-05.jpg" alt=""> </dt> <dd>Meditation Classes</dd> </dl> <dl> <dt> <img src="images/03-06.jpg" alt=""> </dt> <dd>Kids Play Ground</dd> </dl> </div> </section> <!-- 页脚 --> <footer> <p>© 2016 imooc.com 京ICP备13046642号</p> </footer> </body> </html>
CSS代码：
/* 以这个css为准 */
*{
padding: 0;
margin: 0;
}
ul,ol{
list-style: none;
}
a{
text-decoration: none;
}
header{
width: 100%;
height: 80px;
background-color: #07cbc9;
}
header .logo_nav{
width: 1200px;
margin: 0 auto;
}
header .logo_nav .logo{
float: left;
width: 260px;
height: 48px;
padding: 16px 0;
}
header .logo_nav .nav{
float: right;
width: 720px;
height: 80px;
margin-left: 160px;
margin-right: 40px;
}
header .logo_nav .nav ul{
}
header .logo_nav .nav ul li{
float: left;
width: 100px;
height: 80px;
margin-right: 20px;
}
header .logo_nav .nav ul li a{
display: block;
width: 100px;
height: 80px;
color: white;
font-size: 16px;
text-align: center;
line-height: 80px;
}
header .logo_nav .nav ul li a:hover{
background-color: gold;
}
.banner{
width: 100%;
height: 600px;
position: relative;
}
.banner .banner_images img{
width: 100%;
height: 600px;
}
.banner .banner_cover{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 600px;
background-color: rgba(0, 0, 0, 0.5);
}
.banner .banner_form form{
position: absolute;
width: 506px;
left: 50%;
margin-left: -252px;
top: 100px;
}
.banner .banner_form form .enter_content input,textarea{
display: block;
width: 504px;
border: 1px solid #808080;
background: none;
color: #808080;
}
.banner .banner_form form .enter_content input{
height: 40px;
margin-bottom: 20px;
}
.banner .banner_form form .enter_content textarea{
height: 110px;
}
.banner .banner_form form .send_message input{
display: block;
width: 200px;
height: 40px;
border: 1px solid #808080;
background: none;
margin: 20px auto;
color: #808080;
}
.about_section{
width: 100%;
margin-top: 30px;
}
/* 写成这样可以让about和gallery区域的上半部分都复用此样式 */
.upper_section{
margin-bottom: 30px;
}
/* 写成这样可以让about和gallery区域的h2都复用此样式 */
h2{
font-size: 32px;
text-align: center;
}
/* 写成这样可以让about和gallery区域的line都复用此样式 */
.line{
width: 60px;
height: 3px;
background-color: #07cbc9;
margin: 10px auto;
}
/* 写成这样可以让about和gallery区域的文本段落都复用此样式 */
.para{
text-align: center;
color: grey;
font-size: 14px;
}
.about_section .about_lower_section{
position: relative;
width: 1201px;
height: 464px;
margin: 0 auto;
}
.about_section .about_lower_section .about_lower_section_left{
float: left;
background-color: azure;
}
.about_section .about_lower_section .about_lower_section_middle{
width: 650px;
height: 435px;
margin: 0 auto;
padding-top: 30px;
}
.about_section .about_lower_section .about_lower_section_right{
position: absolute;
top: 30px;
right: 0;
/* float: right; */
width: 262px;
}
.about_section .about_lower_section .about_lower_section_left h3{
position: absolute;
top: 40px;
font-size: 25px;
}
.about_section .about_lower_section .about_lower_section_left .para_box{
position: absolute;
left: 0;
top: 50%;
margin-top: -93px;
width: 300px;
height: 186px;
padding: 20px;
font-size: 18px;
border: 1px solid grey;
background-color: rgba(255, 255, 255, 0.5);
}
.about_section .about_lower_section .about_lower_section_left .para_box button{
width: 140px;
height: 40px;
background-color: #000;
color: white;
font-size: 20px;
margin-top: 20px;
border: none;
}
.about_section .about_lower_section .about_lower_section_right .box1,.box2{
width: 260px;
text-align: center;
border: 1px solid #07cbc9;
margin-bottom: 30px;
padding: 40px 0;
background-color: #fff;
}
.about_section .about_lower_section .about_lower_section_right .r1{
font-size: 28px;
font-weight: bold;
}
.about_section .about_lower_section .about_lower_section_right .line{
width: 60px;
height: 3px;
background-color: #07cbc9;
margin: 10px auto;
}
.images_texts{
width: 100%;
height: 760px;
margin-top: 20px;
}
.images_texts div{
float: left;
width: 25%;
height: 50%;
}
.images_texts .tx_2,.tx_4,.tx_5,.tx_7{
background-color: #07cbc9;
}
.images_texts img{
height: 380px;
}
.images_texts h3{
font-size: 24px;
color: white;
margin-top: 20px;
margin-left: 20px;
margin-bottom: 30px;
}
.images_texts .para1{
font-size: 16px;
color: white;
margin-bottom: 20px;
margin-left: 20px;
}
.images_texts .para2{
font-size: 14px;
color: gray;
margin-bottom: 30px;
margin-left: 20px;
}
.images_texts button{
display: block;
width: 138px;
height: 40px;
background-color: #000;
color: white;
border: none;
margin: 0 auto;
}
.gallery_section{
margin-top: 30px;
width: 100%;
}
.gallery_section .lower_section{
width: 1160px;
height: 613px;
margin: 0 auto;
padding: 20px;
}
.gallery_section .lower_section dl{
position: relative;
float: left;
width: 360px;
height: 290px;
margin-right: 40px;
}
/* 为什么这里一定要第3个dl和第6个dl的样式分开写才生效呢？我之前试过用并集选择器合起来写，但是发现并不生效，觉得很奇怪，具体代码如下： */
/* .gallery_section .lower_section dl:nth-child(3),dl:last-child{
margin-right: 0;
} */
.gallery_section .lower_section dl:nth-child(3){
margin-right: 0;
}
.gallery_section .lower_section dl:last-child{
margin-right: 0;
}
.gallery_section .lower_section dl dd{
position: absolute;
bottom: 0;
width: 340px;
height: 50px;
padding-left: 20px;
background-color: #000;
color: #fff;
line-height: 50px;
}
.gallery_section .lower_section dl.r1{
margin-bottom: 30px;
}
footer{
width: 100%;
height: 80px;
background-color: #07cbc9;
text-align: center;
line-height: 80px;
}我还有个疑问，我想给gallery下半部分的第3个和第6个盒子（即第3个和第6个dl标签）同时设置margin-right:0，使用了并集选择器，可是测试发现并不生效，要把两个dl的样式分开写才生效，想问这是什么原因呢？感到很疑惑。使用并集选择器的测试代码在CSS标有如下注释的地方：
/* 为什么这里一定要第3个dl和第6个dl的样式分开写才生效呢？我之前试过用并集选择器合起来写，但是发现并不生效，觉得很奇怪，具体代码如下： */
/* .gallery_section .lower_section dl:nth-child(3),dl:last-child{
margin-right: 0;
} */麻烦老师查看解答一下，谢谢！
19
收起
正在回答
1回答
同学你好，首先代码确实可以实现需求，很不错。
优化建议如下：
红色边框标注的区域上下我看同学使用了定位，实则是不需要的。
另外同学要注意一点，定位一般来说在正常文档流的布局中尽量避免使用，也就是说非标准围挡刘才可以搞定的时候，我们再去考虑使用定位。在标准文档流我们尽量用正常文档流的方式进行书写结构。
取消dl的相对定位如下：
然后将dd的绝对定位取消：
然后我们会发现dt与dd中存在缝隙如下：
这里存在新的知识点，img在原本它的父级中并没有占据全部。如下：
那么这里同学记住需要给img宽度设置100%并将display设置为block，这里是bug，记住即可。如下：
关于同学的问题解答如下：
因为同学使用并集选择器，其实是生效的，但是由于css权重值的问题，高权重的样式覆盖了dl:last-child的样式如下：
为了避免这样的情况建议如下：
并集选择器左右权重一致以后就不会出现问题了。如下：
总结：
1、定位问题要注意，定位虽然好用但是它是一把双刃剑，同学尽量不要使用定位去做布局，定位一般来说再非标准布局下在使用，也就是说非标准文档流才能搞定的时候，我们再去使用定位。
2、css权重值的问题，这里一定要记住，因为项目中css会很多。不光是并集选择器这种问题，如某一块我们需要多个css去书写时，就更要注意权重的问题了。
祝学习愉快！
-
桐子酱Virginia #1
谢谢老师耐心解答！已修改~
有个问题还想再确认一下，当并集选择器逗号左右两侧权重不一致的时候，系统会以小的一边为准是吗？比如像这次出现的这种情况，系统好像是以逗号右边的dl:last child的权重为准，导致红框中的这个选择器整体权重变为了0,0,1，比上面的小，从而导致其被覆盖是吗？（但是不用并集，分开写就生效了）
2022-11-26 11:50:48 -
同学你好，系统不是会以小的为准，而是发挥作用的标签上。
同学在观察css样式的时候可以打开控制台，然后将需要查看的元素点击一下，然后看看右侧的css样式是否生效。
这次出现的情况是，第三个dl生效了，最后一个dl没有生效，那么逗号右侧才是最后一个dl的样式。
因为最后一个dl的样式权重值小于之前赋予的dl样式，则dl最后一个样式被覆盖了。
老师说的左右两侧建议权重相等是因为可以避免诸如此类的情况，比如说我们需要同时调整一个已经赋予css样的元素，那么我们在做调整的时候需要覆盖之前的样式，那么就需要权重提升来做到这个需求。
同学分开写的时候生效解答如下：
祝学习愉快！
2022-11-26 12:05:14 -
谢谢老师耐心解答！
我可以这样理解吗，就是并集选择器在执行时其实也并不是按一个整体来执行的，而是逗号两侧的样式分别执行，如果一侧的样式因为权重或其他原因失效的话，并不会影响另一侧的执行，另一侧的样式还是照样可以生效。比如这次，就是右侧的样式因为权重低失效了，但并没有影响到左侧的样式，左侧（也就是第3个dl的样式）还是生效了。
除非两侧样式都失效，并集选择器样式才会整体失效，这样的理解对吗？
2022-11-26 15:30:56
相似问题
老师好，麻烦帮忙检查下代码，谢谢~
9
0
2
老师麻烦看一下 调试不出来 代码如下
6
0
2
请老师帮忙检查一下代码谢谢。
13
0
6
老师 麻烦帮忙看下我的全部购物车的问题 谢谢
15
0
3
老师请您帮忙看一下代码谢谢
7
0
1
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星