<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin:0; padding:0; } body{ min-width: 800px; font-family: "pingfangSC-Regular","微软雅黑"; } .head ul li, .footer ul li{ list-style-type: none; display:inline; } ul li:hover{ cursor: pointer; color:orange; } .logo:hover{ cursor:pointer;} .head{ width:100%; height:100px; color:white; background-color:black; text-align: right; position: fixed; top:0px; } .head img{ position:absolute; left:0px; } .head ul{ position: relative; right:5%; line-height: 100px; } .head ul li{ margin-right:10px; } .mLeft{ width:300px; height: 100%; position:fixed; left:0; background-color:yellow; float:left; margin-top:100px; margin-bottom: 100px; } .mRight div, .mLeft ul li:nth-child(1){ font-size:16px; font-weight: bold; } .mLeft ul li{ display:block; list-style-type: none; margin-right:5px; font-size:14px; margin-top: 20px; } .mLeft span{ background-color:#f08080; margin-right:5px; } .mRight{ width:200px; height: 100%; position:fixed; right:0; background-color:#add8e6; float:right; margin-top:100px; margin-bottom: 100px; } .mMiddle{ width:100%; height:100%; min-width: 400px; position:fixed; margin-top:100px; margin-left: 300px; margin-right: 200px; margin-bottom: 100px; background-color:pink; overflow:auto; } .mMiddle img{ width:400px; height:300px; left:50%; margin-left:-450px; } .mRight input,.mRight div{ display:block; margin: 20px 0px 0px 5px; height:30px; width:160px } #submit{ background-color:red; color:white; } .course,.login,.mMiddle img { position: relative; top:100px; } .footer{ width:100%; height:100px; color:white; background-color:black; text-align: center; position:fixed; bottom:0px; z-index: 1; } .footer ul{ line-height: 100px; } .footer ul li{ margin-right:20px; } </style></head><body> <div class="middle"> <div class="mLeft"> <div class="course"> <ul> <li>课程推荐</li> <li><span>职业路径</span>HTML与CSS3实现动态网页</li> <li><span>职业路径</span>零基础入门Android语法与界面</li> <li><span>职业路径</span>iOS的基础语法与常用控件</li> <li><span>职业路径</span>PHP入门开发</li> <li><span>职业路径</span>JAVA入门开发</li> </ul> </div> </div> <div class="mMiddle"> <img src="http://climg.mukewang.com/590037e00001fab706000400.jpg"> </div> <div class="mRight"> <div class="login"> <div>登录</div> <input type="text" id ="userId" placeholder="请输入登录邮箱/手机号"/> <input type="password" id = "passwd" placeholder="请输入密码"/> <input type= "button" id ="submit" value="登录"></input> </div> </div> <div class="head"> <div class="logo"><img src="http://climg.mukewang.com/590037f600016ce303000100.png"></div> <ul> <li>课程</li> <li>职业路径</li> <li>实战</li> <li>猿问</li> <li>手记</li> </ul> </div> <div class="footer"> <ul> <li>网站首页</li> <li>企业合作</li> <li>人才招聘</li> <li>联系我们</li> <li>常见问题</li> <li>友情链接</li> <ul> </div> </body></html>
- 1 回答
- 1 关注
- 6477 浏览
添加回答
举报
0/150
提交
取消