效果图貌似实现了,不知道代码是否规范,有没有需要注意的地方呢
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{
margin:0;
padding:0;
}
.con{
width:1200px;
height:100px;
background:black;
position:fixed;
top:0px;left:50%;
margin-left:-600px;
overflow:hidden;
z-index: 9999;
}
.navback{
width:300px;height:100%;
background:url(
http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png
);
float:left;
}
div.con:hover .navback{
cursor: pointer;
}
.nav-1{
width:600px;height:100px;
float:right;margin-right:20px;
}
.nav-1 ul{
list-style-type: none;
}
.nav-1 ul li{
height:100px;
margin:auto 20px;
font:20px "微软雅黑";color:white;
line-height:100px;
float:right;
}
.nav-1:hover ul li{
cursor: pointer;
}
.footer{
width:1200px;
height:100px;
background:black;
position:fixed;
bottom:0px;left:50%;
margin-left:-600px;
overflow:hidden;
}
.footer ul{
width:1000px;
margin:0 auto;
list-style-type: none;
text-align: center;
}
.footer ul li{
height:100px;
margin:auto 20px;
font:20px "微软雅黑";color:white;
line-height:100px;
display: inline-block;
}
.footer:hover ul li{
cursor: pointer;
}
.pic{
width:1200px;height:1300px;
position:relative;
top:100px;left:50%;
margin-left:-600px;
}
.pic1{
width:1200px;height:400px;
background: url(
http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg
) no-repeat top center;
}
.pic2{
width:1200px;height:400px;
background: url(
http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg
) no-repeat;
}
.pic3{
width:1200px;height:400px;
background: url(
http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg
) no-repeat;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="con">
<div class="navback"></div>
<div class="nav-1">
<ul>
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
</div>
<div class=pic>
<div class="pic1"></div>
<div class="pic2"></div>
<div class="pic3"></div>
</div>
<div class="footer">
<ul>
<li>网站首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</div>
</body>
</html>0
收起
正在回答 回答被采纳积分+1
2回答
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星