检查代码，看看是否有优化的地方，还有就是看看我CSS的注释
来源：2-10 编程练习
weixin_慕的地5241954
2019-08-14 06:18:19
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
* {
margin: 0;
padding: 0;
}
.headernav {
width: 100%;
height: 100px;
background: black;
/*绝对定位和浮动的组合，概念，应用还不熟练*/
position: fixed;
top: 0;
}
.logo {
float: left;
width: 300px;
height: 100px;
margin: auto 0;
}
.nav {
float: right;
}
.nav ul li {
font: 16px "微软雅黑";
color: white;
list-style: none;
display: inline-block;
margin: auto 40px;
line-height: 100px;
}
.content{
font: 16px "微软雅黑"; /*字体和字体颜色该如何设置：当整个页面有不同的字体大小和颜色要求时，特别是超链接字体要去除样式时，不能在全局样式设置，因为后代元素都会继承，而且涉及到优先级的问题，一个个去查找和计算优先级很麻烦，最好每个不一样的样式分开设置*/
color: black;
background: lightblue;
position: relative;
top: 100px;
width: 100%;
height: 780px; /*高度的问题：如果不设置高度，就会出现塌陷，因为content的子元素设置了绝对定位，脱离了常规留文档，没有元素能撑起高度*/
}
/*.left-con{
width: 50%;
position: absolute;
top: 100px;
left: 250px;
}
.right-con{
width: 50%;
padding: 0 100px;
position: absolute;
top: 100px;
left: 50%;
(因为content设置了相对定位，左侧右侧都设置了绝对定位，且content是它们的父元素，所以它们以content的位置来定位。)
}
.left-con p,.right-con p{
margin: 30px 0;
} 这两段代码效果虽然一样，但是用下面一段代码定位文本内容，不容易出现整个宽度溢出，导致右侧出现小空白的问题（设置padding: 0 100px; 与left: 60%时，都会出现），更加利于后期文本内容的添加与维护。*/
.left-con{
width: 50%;
float: left;
}
.right-con{
width: 50%;
float: left;
}
.left-con p,.right-con p{
margin: 30px 150px;
}
.left-con h2,.right-con h2{
margin-top: 100px;
margin-left: 150px;
}
.left-con p span{
background: pink;/*上下没有分开距离，因为span标签是行内元素，没有宽高，设置margin没用,试过转换成block，排版错乱*/
}
.footer {
width: 100%;
height: 100px;
line-height: 100px;
text-align: center;
background: black;
position: fixed;
bottom: 0;
}
.footer ul li {
font: 16px "微软雅黑";
color: white;
display: inline-block;
margin: 40px;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="headernav">
<div class="logo">
<a href="#1"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png" alt="logo" /></a>
</div>
<div class="nav">
<ul>
<a href="#2">
<li>课程</li>
</a>
<a href="#3">
<li>职业路径</li>
</a>
<a href="#4">
<li>实战</li>
</a>
<a href="#5">
<li>猿问</li>
</a>
<a href="#6">
<li>手记</li>
</a>
</ul>
</div>
</div>
<div class="content">
<div class="left-con">
<h2>课程推荐</h2>
<p><span>职业路径</span> HTML5与CSS3实现动态网页</p>
<p><span>职业路径</span> 零基础入门Android语法与界面</p>
<p><span>职业路径</span> IOS基础语法与常用控件</p>
<p><span>职业路径</span> PHP入门开发</p>
<p><span>职业路径</span> JAVA入门开发</p>
</div>
<div class="right-con">
<h2>相关课程</h2>
<p>HTML CSS JaveScript</p>
<p>HTML5 CSS3 Jquery</p>
<p>移动端基础 移动端APP开发</p>
</div>
</div>
<div class="footer">
<ul>
<a href="#7">
<li>网站首页</li>
</a>
<a href="#8">
<li>企业合作</li>
</a>
<a href="#9">
<li>人才招聘</li>
</a>
<a href="#10">
<li>联系我们</li>
</a>
<a href="#11">
<li>常见问题</li>
</a>
<a href="#12">
<li>友情链接</li>
</a>
</ul>
</div>
</body>
</html>帮我看看CSS注释总结的地方对不对，特别是两段代码效果相同的地方，看看我总结的对不对，两种方法哪种会更好，麻烦了，谢谢。
写回答
1回答
-
同学你好！
代码效果实现的是可以的。其中con的地方两种方法都比较常用，看同学的编程喜好选择哦。代码中可以优化：导航栏建议使用li标签包含a标签，块级元素包含内联元素比较规范。
如果帮助到了你 欢迎采纳 祝学习愉快~
0
相似问题