2-9编程练习
来源：2-10 编程练习
徐一刀
2017-07-18 12:46:14
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{
margin:0;
padding:0;
}
.header{
width:100%;
height:100px;
background-color:black;
position: fixed;
}
.header .ul-li{
float: right;
color: white;
margin:0px 20px 0px 0px;
}
.header .ul-li li{
list-style: none;
float: left;
line-height: 100px;
margin: auto 30px;
font-size:16px;
font-family: "微软雅黑";
cursor: pointer;
}
.foot{
width: 100%;
height: 100px;
background-color: black;
text-align: center;
position: fixed;
bottom: 0;
}
.ul-foot{
color: white;
}
.ul-foot li{
display: inline;
font-size:16px;
font-family: "微软雅黑";
line-height: 100px;
padding:0 20px;
cursor: pointer;
}
.container{
width: 100%;
height:800px;
background-color: #ADD8E6;
margin:0 auto;
}
.left{
padding-top: 150px;
width:30%;
height: 500px;
float: left;
margin-left: 15%;
line-height: 40px;
}
.left p{
font-weight: bold;
font-size: 16px;
font-family: "微软雅黑";
}
.left ul li{
list-style: none;
font-size: 14px;
font-family: "微软雅黑";
}
.left span{
background-color: #DB7093 ;
}
.right{
padding-top: 150px;
width:40%;
margin-right: 5%;
float: right;
height: 500px;
line-height: 40px;
}
.right p{
font-weight: bold;
font-size: 16px;
font-family: "微软雅黑";
}
.right ul li{
list-style: none;
font-size: 14px;
font-family: "微软雅黑";
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="header">
<img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"/>
<ul class="ul-li">
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
<div class="container">
<div class="left">
<p>课程推荐</p>
<ul>
<li><span>职业路径</span> HTML5与CSS3实现动态网页</li>
<li><span>职业路径</span> 零基础入门Android语法与界面</li>
<li><span>职业路径</span> ios基础语法与常用控件</li>
<li><span>职业路径</span> PHP入门开发</li>
<li><span>职业路径</span> JAVA入门开发</li>
</ul>
</div>
<div class="right">
<p>相关课程</p>
<ul>
<li>HTML CSS JavaScript</li>
<li>HTML5 CSS3 Jquery</li>
<li>移动端基础 移动端APP开发</li>
</ul>
</div>
</div>
<div class="foot">
<ul class="ul-foot">
<li>网站首页</li>
<li>网站合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</div>
</body>
</html>请老师帮忙看看实现的怎么样?代码有没有要改进的
写回答
1回答
-
Miss路
2017-07-18
基本上还可以，但是这里没有要求要用固定定位来固定头部和底部，你在这里用了也没关系，但是，用了之后就要处理好，代码中，中间部分和地步之间有一条白色的缝隙，把这个处理一下。编码都是灵活的，没有什么固定的答案，不能说只要实现了就可以，但是基本上只要按照基本的规则，只要能实现效果一般都是可以的。加油！
0
