<!DOCTYPE html><html><head><meta charset="UTF-8"><title>两列布局</title><style type="text/css"> body{margin:0;padding:0;}.head{width:100%;background:black;overflow:hidden;margin-bottom:0;}.logo{float:left;}.nav{color:white;float:right;overflow:hidden;list-style:none;line-height:100%;margin-top:0;margin-bottom:0;padding-right:30px;line-height:104px;}.nav li{float:left;margin-right:90px;}.body{margin-top:0;width:100%;height:1100px;background:#87CEEB;overflow:hidden;}.left li{list-style: none;}.left{width:50%;float:left;padding-top:50px;}span{border:solid 1px orange;background:orange;}.right{width:50%;float:right;padding-top:50px;}.left ul{margin-left:240px;}.right h3,.right p{margin-left:60px;}.foot{width:100%;height:100px;background:black;margin-top:0;overflow:hidden;text-align:center;}.foot ul{float:right;overflow:hidden;display:;line-height:100px;margin:0;display:inline-block;}.foot ul li{color:white;float:right;list-style:none;margin-left:50px;}</style></head><body><div class="container"><div class="head"><div class="logo"> <img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"/> </div><ul class="nav"><li>课程</li><li>职业路径</li><li>实战</li><li>猿问</li><li>手记</li></ul></div><div class="body"><div class="left"> <ul><h3>课程推荐</h3><li><span>职业路径</span> HTML与CSS3实现动态网页</li></br><li><span>职业路径</span> 零基础入门Android语法与界面</li></br><li><span>职业路径</span> IOS基础语法与常用控件</li></br><li><span>职业路径</span> PHP入门开发</li></br><li><span>职业路径</span> JAVA入门开发</li></br></ul></div><div class="right"><h3>相关课程</h3><p>HTML CSS javaScript</p><p>HTML5 CSS3 Jquery</p><p>移动端基础 移动端APP开发</p></div></div><div class="foot"><ul><li>网站首页</li><li>企业合作</li><li>人才招聘</li><li>联系我们</li><li>常见问题</li><li>友情链接</li></ul></div></div></body></html>
- 1 回答
- 0 关注
- 1201 浏览
添加回答
举报
0/150
提交
取消