<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>圣杯布局</title> <style type="text/css"> *{ margin:0; padding:0; list-style:none; text-decoration:none; color:orange; font-size:16px; } body{ min-width:40%; min-height:40%; } .header,.footer{ width:100%; height:100px; background:#000; line-height:100px; } .header ul{ float:right; margin-right:120px; } .footer ul{ margin-left:25%; } .header ul li,.footer ul li{ float:left; margin-right:55px; } .main{ background:#e4e5e9; padding:0 382px 0 320px; overflow:hidden; } .main .left{ float:left; width:320px; margin-left:-100%; position:relative; left:-320px; } .main .left .course{ margin:96px 30px; line-height:30px; } .main .left .course h4{ font-size:20px; } .main .left .course ul li span{ background:red; margin-right:5px; } .main .left .course ul li a{ display:inline-block; font-size:14px; } .main .left .course h4,.main .left .course ul li span,.main .left .course ul li a,.main .right form h4,.main .right form input{ color:#000; } .main .right{ float:left; width:382px; position:relative; margin-left:-382px; left:382px; color:#000; } .main .center{ width:100%; float:left; position:relative; } .main .center img{ position:absolute; top:50%; margin-top:-200px; } .main .right form{ margin:100px 35px; line-height:30px; } .main .right form input{ display:block; line-height:30px; margin-top:10px; width:100%; height:30px; } .main .center{ height:480px; } </style></head><body> <div class="header"> <img src="http://climg.mukewang.com/590037f600016ce303000100.png"> <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="main"> <div class="center"> <img src="http://climg.mukewang.com/590037e00001fab706000400.jpg"> </div> <div class="left"> <div class="course"> <h4>课程推荐</h4> <ul> <li><span>职业路径</span><a href="#">HTML与CSS实现动态网页</a></li> <li><span>职业路径</span><a href="#">零基础入门Android语法与界面</a></li> <li><span>职业路径</span><a href="#">iOS基础语法和常用控件</a></li> <li><span>职业路径</span><a href="#">PHP入门开发</a></li> <li><span>职业路径</span><a href="#">JAVA入门开发</a></li> </ul> </div> </div> <div class="right"> <form action="#"> <h4>登录</h4> <input type="text" placeholder="请输入登录邮箱/手机号" /> <input type="password" placeholder="6-16位密码,区分大小写,不能用空格" /> <input type="submit" style="background:red" value="登录"> </form> </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 回答
- 0 关注
- 816 浏览
添加回答
举报
0/150
提交
取消