2-12编程问题
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
*{margin: 0;padding: 0;}
ul{list-style: none;}
a{text-decoration: none;color: white;}
.header{width: 100%;
height: 80px;
background: black;
overflow: hidden;
position: fixed;
top: 0;
}
.header img{height: 80px;position: absolute;margin-left: 30px;}
.nav{float: right;
overflow: hidden;
line-height: 80px;
margin-right: 35px;
}
.nav li{float: left;padding: 0 25px;}
.container{width: 100%;
height: 1000px;
background: #afeeee;
margin-top: 80px;
overflow: hidden;
}
.left{width: 30%;
float: left;
margin-top: 100px;
margin-left: 80px;
}
.left h1,.right h1,.middle h1{line-height: 60px;}
span{background: #ff6666}
.left ul{font-size: 16px;line-height: 32px;}
.right{float: right;
width: 30%;
margin-top: 100px;
margin-left: 80px;
}
.right input{font-size: 16px;line-height: 32px;}
.middle{
float: left;
margin-top: 100px;
margin-left: 50px;
height: 500px;
border-right :5px solid orange;
}
.middle ul li{
font-size: 16px;line-height: 30px;
}
.footer{
background: black;width: 100%;height:80px;
position: fixed;
bottom: 0;
}
.footer ul li{
display: inline-block;color: white;line-height: 80px;
text-align: center;padding: 0 10px;
}
.footer ul{
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<img src="http://img1.sycdn.imooc.com/climg//59093e9c00016ce303000100.png"/>
<ul class="nav">
<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="container">
<div class="left">
<h1>课程推荐</h1>
<ul>
<li><span>职业路径</span> HTML5与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 class="right">
<h1>登录</h1>
<form>
<input type="text" name="user" placeholder="请输入登录邮箱/手机号" size="35px"/>
</br></br>
<input type="password" name="pass" placeholder="6-16位密码，区分大小写，不能用空格" size="35px"/>
</br></br>
<input type="submit" name="key" value="登录" size="60px"/>
</form>
</div>
<div class="middle">
<h1>相关课程</h1>
<ul>
<li>HTML CSS JavaScript</li>
<li>HTML5 CSS3 Jquery</li>
<li>移动端基础 移动端APP开发</li>
</ul>
</div>
</div>
<div class="footer">
<ul>
<li>网站首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</div>
</body>
</html>老师，请帮我看看我的代码，可以优化么？另外有几个问题。1，右侧的竖线 我的离文本很近，请问怎么设置才能向效果图？2，那个登录按钮，是怎么写的？
14
收起
正在回答
2回答
同学你好，关于你的问题，回答如下：
1、竖线这里没有挨着顶部，是从半截开始显示的。所以需要修改下。
可以将上外边距，改为上内边距，因为边框里是包含内边距的，但是不包括外边距。
2、但是下面又没有到页脚部分，是因为设置的高度不够，所以建议：将高度改为100%。
同学可以在对照的修改之后的对照下。若还是无法解决，可以将修改之后的代码粘贴过来，便于准确的定位与解决问题。
祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星