2-10图片效果中对齐方法怎样写更规范？css样式中是否有冗长多余的，怎么写更少代码量？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
margin: 0;
padding: 0;
text-align: center;
}
.nav {
background-color: black;
width: 100%;
height: 100px;
margin: 0 auto;
line-height: 100px;
position: fixed;
top: 0;
}
}
.content {
width: 100%;
height:800px;
overflow:hidden;
}
.left{
width:50%;
height:1000px;
background-color:#99CCCC;
float:left;
padding-top:100px;
}
.h3{
position:absolute;
top:150px;
left:380px;
}
table{
position:absolute;
top:200px;
left:360px;
}
.bold{
font-weight:bold;
background:red;
}
.right{
width:50%;
height:1000px;
background-color:#99CCCC;
float:right;
padding-top:100px;
}
li{
list-style-type:none;
}
.h4{
position:absolute;
top:150px;
}
ul{
position:absolute;
top:200px;
right:760px;
}
li{
padding-bottom:24px;
}
.foot {
background-color: black;
width: 100%;
height: 100px;
margin: 0 auto;
line-height: 100px;
position: fixed;
bottom: 0;
}
.img1 {
position: fixed;
top:0;
left:0;
}
.nav2 {
position: fixed;
right:100px;
}
a {
text-decoration: none;
line-height:100px;
text-align:center;
margin-right:50px;
font-family:"微软雅黑";
color:#ffffff;
}
</style>
</head>
<body>
<div class="nav">
<img class="img1" src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png">
<div class="nav2">
<a href="#">课程</a>
<a href="#">职业路径</a>
<a href="#">实战</a>
<a href="#">猿问</a>
<a href="#">手记</a>
</div>>
</div>
<div class="content">
<div class="left">
<h3 class="h3">课程有推荐</h3>
<table cellspacing="20";>
<tr align="left">
<td class="bold">职业路径</td>
<td>HTML和CSS实现动态网页</td>
</tr align="left">
<tr>
<td class="bold">职业路径</td>
<td>零基础入门Android语法和界面</td>
</tr >
<tr align="left">
<td class="bold">职业路径</td>
<td>ios基础语法和常用控件</td>
</tr>
<tr align="left">
<td class="bold">职业路径</td>
<td>PHP入门开发</td>
</tr>
<tr align="left">
<td class="bold">职业路径</td>
<td>JAVA入门开发</td>
</tr>
</table>
</div>
<div class="right">
<h3 class="h4">相关课程</h3>
<ul>
<li>html css java-scrip </li>
<li>html css java-scrip </li>
<li>html css java-scrip </li>
</ul>
</div>
</div>
<div class="foot">
<a href="#">网站首页</a>
<a href="#">企业合作</a>
<a href="#">人才招聘</a>
<a href="#">联系我们</a>
<a href="#">常见问题</a>
<a href="#">友情链接</a>
</div>
</body>
</html>
正在回答 回答被采纳积分+1
同学你好， 实现的方式没有一个固定的标准， 只要代码规范，效果实现了，就是可以的，你这里效果的实现的不错。 代码中需要注意的问题如下
1、如下图所示位置， 多写了一个花括号“}”， 建议修改：删除多余的括号， 让代码更加符合规范
2、如下所示， 选择一样， 可以将样式设置合并在一起，建议优化：
3、 代码中可以通过margin或者padding值控制a链接的左右距离， 所以可以删去HTML结构中的 这里给你举出一个例子， 页脚的部分， 同学可以自己下去调整哦，
另， 如下图所示的div结束标签后面多写了一个“>”，可以删除了。
4、页脚内容需要居中显示， 所以可以给a链接设置左右margin值， 让每一个a链接的左右间距一致， 另，text-align和line-height属性会继承先辈元素， 所以可以不用再给a链接设置， 简化代码量
5、如下图所示， 页面滚动过程中， 中间绝对定位的内容会覆盖顶部栏
建议修改： 可以给顶部添加z-index属性， 提升顶部的显示层级
6、 如下图所示， HTML标签中，属性后面不需要添加分号， 建议：删除， 让代码更符合规范
同学在写代码的过程中，可以在细心一点哦
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星