2-10作业
来源：2-10 编程练习
慕勒1326373
2018-06-27 10:30:57
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
*{padding: 0;
margin: 0;}
.content{width: 100%;
height: 100px;
text-align: center;
margin: 0 auto;
background-color: black;
position: fixed;
top: 0;}
div img{float: left;
}
.content ul{float: right;
list-style: none;
line-height: 100px;
word-spacing: 35px;
font-size: 23px;
margin-right: 30px;}
.content ul li {
vertical-align: middle;
display:inline;
}
.content ul li a{text-decoration: none;
color: white;}
.continer{width: 100%;
height: 1800px;
margin: 0 auto;
padding-top: 100px;
background-color: #66ccaa;
text-align: center;
}
.continer .left{float: left;
width: 50%;
height: 1200px;
text-align: center;
margin-top: 160px;
}
.continer .left .left-1{margin: 0 auto;
margin-left: 235px;
}
.continer .left .left-1 .left-2{border: 1px solid pink;
background-color: pink;
font-size: 15px;
}
.continer .right{float: right;
width: 50%;
height: 1200px;
text-align: center;
margin-top: 150px;
}
.continer .right dt{font-size: 20px;}
.footer{width: 100%;
height: 100px;
background-color: black;
margin: 0 auto;
text-align: center;
font-size: 20px;
word-spacing: 40px;}
.footer ul li{list-style: none;
display: inline;
}
.footer ul li a{color: white;
margin: 0 auto;
vertical-align: middle;
text-decoration: none;
line-height: 100px;
}
</style>
</head>
<body>
<div class="content">
<div> <img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"/></div>
<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>
</ul>
</div>
<div class="continer">
<div class="left">
<table class="left-1">
<h3>课程推荐</h3> <br/>
<tr>
<td class="left-2">职业路径</td>
<td>html5与css3实现动态网页</td>
</tr>
<tr>
<td class="left-2">职业路径</td>
<td>零基础入门android语法与界面</td>
</tr>
<tr>
<td class="left-2">职业路径</td>
<td>ios基础语法与常用控件</td>
</tr>
<tr>
<td class="left-2">职业路径</td>
<td>php入门开发</td>
</tr>
<tr>
<td class="left-2">职业路径</td>
<td>java入门开发</td>
</tr>
</table>
</div>
<div class="right">
<dl>
<dt>相关课程</dt>
<br/>
<dd>html css javascript</dd>
<br/>
<dd>html5 css3 jauery</dd>
<br/>
<dd>移动端基础 移动端app开发</dd>
</dl>
</div>
</div>
<div class="footer">
<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="#">友情链接</a></li>
</ul>
</div>
</body>
</html>
1回答
-
好帮手慕夭夭
2018-06-27
经过测试 ,代码问题与建议如下:
中间内容太高 ,建议设置如下:
设置html,body高度100%
2. 去掉.left与.right的margin-top后 ,为内容的标题h3设置margin-top:150px
3.尾部如下设置效果更好:
4.建议背景色与效果图保持一致效果更好哦
5.中间内容的列表建议设置左对齐 .
完善一下吧 ,祝学习愉快 !
0
相似问题