混合布局 2-11 编程练习
来源：2-13 混合布局
写额外飞1
2018-01-12 11:30:51
效果实现。
问题一：表单按钮的样式应该如何编写css代码进行控制？
问题二：type=“text”可以直接使用width和height直接控制吗？
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk123">
<title></title>
<style type="text/css">
/*此处写代码*/
body,ul,li,a,h1{margin:0;padding:0;list-style:none;text-decoration:none;}
.header{
width:100%;
height:100px;
background:#000;
}
.logo{
width:200px;
height:100px;
line-height:100px;
float:left;
}
.nav{
width:500px;
height:100px;
float:right;
}
.nav ul{
width:500px;
height:100px;
text-align:center;
line-height:100px;
}
.nav ul li{
display:inline;
padding:10px;
}
.nav ul li a{
color:#fff;
font-size:20px;
}
.footer{
width:100%;
height:100px;
background:#000;
}
.footer ul{
width:800px;
height:100px;
margin:0 auto;
text-align:center;
line-height:100px;
}
.footer ul li{
display:inline;
padding:15px;
}
.footer ul li a{
color:#fff;
font-size:20px;
}
.main{
width:100%;
height:1000px;
background:#00E3E3;
}
.left{
float:left;
width:30%;
height:1000px;
position:relative;
}
.left_coninter{
position:absolute;
top:100px;
left:100px;
}
.middle{
float:left;
width:30%;
height:1000px;
position:relative;
border-right:5px solid #f75000;
}
.middle_coninter{
position:absolute;
top:100px;
left:100px;
}
.right{
float:right;
width:35%;
height:1000px;
position:relative;
}
.right_coninter{
position:absolute;
top:100px;
left:0;
}
.left_coninter span{
width:100px;
height:30px;
line-height:30px;
display:inline-block;
font-size:15px;
background:#d9006c;
text-align:center;
}
.right_coninter input{
width:250px;
height:30px;
margin-top:20px;
}
.ys{
background:red;
border:none;
color:#fff;
font-size:20px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="header">
<div class="logo">
<img
src="http://climg.mukewang.com/59093e9c00016ce303000100.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 class="main">
<div class="left">
<div class="left_coninter">
<h1>课程推荐</h1>
<p><span>职业路径</span> HTML5和CSS3实
现动态页面</p>
<p><span>职业路径</span> 零基础入门系列</p>
<p><span>职业路径</span> CSS基础实现</p>
<p><span>
职业路径</span> PHP入门教程</p>
<p><span>职业路径
</span> JAVA入门教程</p>
</div>
</div>
<div class="middle">
<div class="middle_coninter">
<h1>相关课程</h1>
<p>HTML CSS javascript</p>
<p>HTML5 CSS3 jquery</p>
<p>移动端基础 移
动APP开发</p>
</div>
</div>
<div class="right">
<div class="right_coninter">
<h1>登录</h1>
<form>
<input type="text" name="name" placeholder="请输入账号"
/><br />
<input type="password" name="paw" placeholder="6-16位密
码，区分大小写" /><br />
<input class="ys" type="button" name="entry" value="登录" />
</form>
</div>
</div>
</div>
<div class="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>
</ul>
</div>
</body>
</html>
1回答
-
小于飞飞
2018-01-12
分辨率发生变化时，布局会出现异常，可以给body添加最小宽度min-width: 1000px;。
按钮和type="text",都可以设置高、宽，其它样式同样。
希望对你有帮助，祝学习愉快。
0
相似问题