<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title><style type="text/css"> *{padding=0;margin=0} body{min-width:900px;} #hd{background-color:black;width:100%;height:80px;position: relative;} #hd .logo{float:left;margin:10px 0 10px 10px;} #hd .logo img{height:60px;width:200px;} #hd .nav{float:right;margin:0 auto;} #hd .nav li{float:left;padding-right:20px; color:white; list-style:none} #hd .nav ul li hover:{color:orange;} a:link,a:visited{color:#eee;text-decoration:none;} a:hover{color:orange;} #content{float:left;height:1000px;position:relative;} #content .middle{width:100%;height:1000px;background-color:pink;} #content .middle img{height:100px;width:100px;} #content .left{width:220px;height:1000px;margin-left:-100%;left:-220px;background-color:yellow;} #content .left div h1{padding-bottom:30px;} #content .left div p{padding-top:20px} #content .left div span{color:pink} #content .right{width:200px;height:1000px;margin-left:-100%;right:-200px;background-color:blue} #footer{background:black;color:white;height:80px;width:100%;float:left;text-align: center;line-height: 80px}</style></head><body> <!--头部--> <div id="hd"> <div class="logo"><img src="http://climg.mukewang.com/590037f600016ce303000100.png"></div> <div class="nav"> <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> <!--内容--> <div id="content"> <div class="middle"> <img src="http://climg.mukewang.com/590037e00001fab706000400.jpg" </div> <div class="left"> <div> <h1>课程推荐</h1> <p><span>职业路径</span> HTML5与CSS3实现动态网页</p> <p><span>职业路径</span> 零基础入门Android语法与界面</p> <p><span>职业路径</span> ios基础语法与常用控件</p> <p><span>职业路径</span> PHP入门开发</p> <p><span>职业路径</span> JAVA入门开发</p> </div> </div> <div class="right"> <div> <h1>登录</h1> <input type="" name="" placeholder="请输入登录账号/手机号"> <input type="" name="" placeholder="6-16位密码区分大小写不能有空格"> <button>登录</button> </div> </div> </div> <!--页脚--> <div id="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 回答
尼称已占用
TA贡献3条经验 获得超0个赞
*{padding:0;margin:0}
#hd > .logo {margin:0;}
#content {width: 100%;}
#content .middle .left {float:left;margin:0;}
#content .middle .right {float:right;margin:0;}
#footer li {display:inline-block;}
把样式加在最后就行了，你 * 的样式写成了 =
要设置宽度100%，必须要先设置它的父元素为100%才生效，因为它是相对于父级元素的- 1 回答
- 0 关注
- 911 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消