2-11练习问题

来源：2-13 混合布局

nouse

2017-09-04 23:16:15

除了给nav设置 overflow:hidden;还有什么办法可以解决异位问题.以及button提交按钮为什么宽度和我设的不一样.

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/

* {
margin: 0;
padding: 0;
}

.clear {
clear: both;
width: 0;
height: 0;
}

h2 {
font-family: "宋体";
}

li {
list-style: none;
display: inline-block;
}

a:link {
color: #000;
text-decoration: none;
}

.nav {
background-color: #000;
height: 100px;
width: 100%;
position: relative;
overflow: hidden;
}

.logo {
float: left;
}

.link a:link {
color: #fff;
}

.content a:visited {
color: #000;
}

.link a:visited {
color: #fff;
}

.nav-dom {
float: right;
font-size: 20px;
margin-right: 40px;
}

.nav-dom li {
margin-left: 50px;
line-height: 100px;
}

.content {
background-color: #add8e6;
height: 750px;
width: 100%;
}

span {
background: #ff7575;
margin-right: 20px;
}

.left li {
display: block;
margin-top: 20px;
}

.left {
float: left;
width: 30%;
margin: 10% 0 0 10%;
}

.right li {
margin-top: 20px;
margin-right: 20px;
}

.right {
float: left;
width: 20%;
margin: 10% 0 0 0;
}

h1,
        input,
        .submit {
margin: 20px 40px;
}

input,
        .submit {
width: 304px;
height: 40px;
}
.submit{
background: red;
border: none;
font-size: 20px;
color: #fff;
}


.login {
float: right;
border-left: 20px solid #ff7575;
height: 750px;
width: 38%;
}


.footer {
background: #000;
height: 100px;
width: 100%;
text-align: center;
line-height: 100px;
}

.footer li {
margin: 0 60px;
}
</style>
</head>

<body>
<!-- 此处写代码 -->
<div class="nav">
<div class="logo">
<img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png">
</div>
<div class="nav-dom link">
<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 class="content">
<div class="clear"></div>
<div class="left">
<h2>课程总结</h2>
<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 class="right">
<h2>相关课程</h2>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
<ul>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">Jquery</a></li>
</ul>
<ul>
<li><a href="#">移动端基础</a></li>
<li><a href="#">移动端APP开发</a></li>
</ul>
</div>

<div class="login">
<form>
<h1>登录</h1>
<input type="text" placeholder="请输入登录邮箱/手机号" />
<br />
<input type="password" placeholder="请输入密码" />
<br />
<label><button class="submit" type="submit">登录</button></label>
</form>
</div>
</div>

<div class="footer link">
<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回答