<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin:0; padding:0; } .head{ width:100%; height:100px; background:black; } .logo{ width:300px; height:100px; line-height:100px; background:url(http://climg.mukewang.com/58c0d2d900016ce303000100.png); float:left; } .banner ul{ float:right; } .banner ul li{ list-style:none; font:20px "微软雅黑"; color:white; float:left; margin-right:60px; height:100px; line-height:100px; cursor: pointer; } .container{ height:800px; font-size:16px; line-height:50px; background:skyblue; overflow: hidden; zoom:1; padding:0 250px 0 200px; } .left,.middle,.right{ position:relative; float:left; } .left{ width:200px; margin-left: -100%; left:-200px; padding:10% 5%; height:800px; } .middle{ width:100%; height:800px; } .img{ position:relative; left:10%; top:5%; } .right{ width:250px; margin-left: -250px; right:-250px; padding:10% 5%; height:800px; } .container h3{ font-size:25px; } .left p span{ background:pink; } input{ width:230px; height:30px; } .landing{ background:red; border:none; } .footer{ width:100%; height:100px; background:black; text-align: center; } .footer ul li{ list-style: none; font:20px "微软雅黑"; color:white; display:inline-block; height:100px; line-height:100px; margin:0 80px; cursor: pointer; } </style></head><body> <div class="head"> <div class="logo"> </div> <div class="banner"> <ul> <li>课程</li> <li>职业路径</li> <li>实战</li> <li>猿问</li> <li>手记</li> </ul> </div> </div> <div class="container"> <div class="middle"> <img src="http://climg.mukewang.com/590037e00001fab706000400.jpg"> </div> <div class="left"> <h3>课程推荐</h3> <p><span>职业路径</span> HTML与CSS3实现动态网页</p> <p><span>职业路径</span> 零基础入门</p> <p><span>职业路径</span> ios基础语法</p> <p><span>职业路径</span> PHP基础入门</p> <p><span>职业路径</span> JAVA入门开发</p> </div> <div class="right"> <h3>登录</h3> <input type="text" name="username" placeholder="请输入登陆邮箱/手机号"/> <br/> <input type="password" name="paw" placeholder="6-16位密码，区分大小写，不能用空格"/> <br/> <input type="button" name="landing" value="登录" class="landing"/> </div> </div> <div class="footer"> <ul> <li>网站首页</li> <li>企业合作</li> <li>人才招聘</li> <li>联系我们</li> <li>常见问题</li> <li>友情链接</li> </ul> </div> </body></html>
1 回答
- 1 回答
- 0 关注
- 1480 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消