效果勉强实现。请问老师哪里需要改进。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{margin:0;padding:0;}
.div1{width:auto;height:100px;background:black;color:white;line-height:100px;}
.ul1{display:inline-block;float:right;}
.ul1 li{display:inline-block;margin:0px 20px;}
.zhuti{width:100%;height:430px;background:#87CEEB;}
.wenben1{width:40%;line-height: 40px;float: left;margin: 100px 0px 0px 150px;}
.wenben2{width:20%;line-height:40px;float: left;margin: 100px 0px 0px 50px;}
span{margin: 20px 10px 20px 0px;}
.yejiao li{display:inline-block;margin: 0px 10px;}
.div2{width:auto;height:80px;background:black;color:white;line-height:80px;text-align: center;}
a{text-decoration:none;}.span1{background: pink;}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="div1">
<img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png">
<ul class="ul1">
<a href="#"><li>课程</li></a>
<a href="#"><li>职业路径</li></a>
<a href="#"><li>实战</li></a>
<a href="#"><li>猿问</li></a>
<a href="#"><li>手记</li></a>
</ul>
</div>
<div class="zhuti">
<div class="wenben1">
<h1>课程推荐</h1>
<a href="#"><span class="span1">职业路径</span></a><a href="#"><span>HTML5与CSS3实现动态网页</span></a><br/>
<a href="#"><span class="span1">职业路径</span></a><a href="#"><span>零基础入门Android语法与界面</span></a><br/>
<a href="#"><span class="span1">职业路径</span></a><a href="#"><span>ios基础语法与常用控件</span></a><br/>
<a href="#"><span class="span1">职业路径</span></a><a href="#"><span>PHP入门开发</span></a><br/>
<a href="#"><span class="span1">职业路径</span></a><a href="#"><span>JAVA入门开发</span></a><br/>
</div>
<div class="wenben2">
<h1>相关课程</h1>
<a href="#"><span>HTML</span></a><a href="#"><span>CSS</span></a><a href="#"><span>javaScript</span></a><br/>
<a href="#"><span>HTML5</span></a><a href="#"><span>CSS3</span></a><a href="#"><span>jquery</span></a><br/>
<a href="#"><span>移动端基础</span></a><a href="#"><span>移动端app开发</span></a><br/>
</div>
</div>
<div class="div2">
<ul class="yejiao">
<a href="#"><li>网站首页</li></a>
<a href="#"><li>企业合作</li></a>
<a href="#"><li>人才招聘</li></a>
<a href="#"><li>联系我们</li></a>
<a href="#"><li>常见问题</li></a>
<a href="#"><li>友情链接</li></a>
</ul>
</div>
</body>
</html>
正在回答 回答被采纳积分+1
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星