请检查，布局作业3
来源：2-12 编程练习
一个文艺的IT青年
2020-08-13 15:33:26
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
* {
padding: 0;
margin: 0;
}
.top {
width: 100%;
height: 100px;
overflow: hidden;
zoom: 1;
background-color: black;
color: white;
}
.logo {
float: left;
cursor: pointer;
height: 100px;
line-height: 100px;
}
.top .logo img {
display: block;
}
.nav {
float:right;
}
.nav ul li {
list-style: none;
display: inline-block;
height: 100px;
font-size: 24px;
padding: 0 40px;
cursor: pointer;
line-height: 100px;
text-align: center;
}
.footer {
width:100%;
bottom: 0;
text-align: center;
background-color: black;
color: white;
}
.footer ul li{
display: inline-block;
list-style:none;
font-size:22px;
text-align: center;
height:100px;
padding:0 40px;
line-height: 100px;
cursor:pointer;
}
.content{
width:100%;
color: black;
height: 720px;
overflow: hidden;
zoom: 1;
background:#A4D3EB;
margin: 0 auto;
}
.left{
width:30%;
float: left;
height: 720px;
/* margin:0 auto;*/
margin-left: 150px;
}
.left p{
margin-bottom: 20px;
}
.left span{
background-color:#E4A877;
margin-right: 20px;
}
h1{
height: 100px;
line-height: 100px;
margin-top: 50px;
}
.mid{
width:25%;
float: left;
height: 720px;
/* margin:0 auto;*/
}
.mid p{
margin-bottom: 20px;
}
.right{
width: 30%;
height: 720px;
float: right;
/* margin:0 auto;*/
border-left: 10px solid orange;
padding-left: 100px;
}
.right input{
width:280px;
height: 50px;
}
.right button{
width:280px;
height: 50px;
background-color: orangered;
color: white;
border: none;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="top">
<div class="logo">
<img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png">
</div>
<div class="nav">
<ul>
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
</div>
<div class="content">
<div class="left">
<h1 class="tit1">课程推荐</h1>
<p><span>职业路径</span>HTML5与CSS3实现动态网页</p>
<p><span>职业路径</span>零基础入门Andriod语法界面</p>
<p><span>职业路径</span>iOS基础语法与常用控件</p>
<p><span>职业路径</span>PHP入门开发</p>
<p><span>职业路径</span>JAVA入门开发</p>
</div>
<div class="mid">
<h1 class="tit2">相关课程</h1><p>HTML CSS JavaScript</p><p>HTML5 CSS3 Jquery</p>
<p>移动端基础 移动端APP开发</p>
</div>
<div class="right">
<form>
<h1>登录</h1>
<input type="text" placeholder=" 请输入登录邮箱/手机号">
<br/><br/>
<input type="password" placeholder=" 6-16位密码，区分大小写，不能用空格">
<br/><br/>
<button type="submit">登录</button>
</form>
</div>
</div>
<div class="footer">
<ul>
<li>网站首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</div>
</body>
</html>
3回答
-
同学你好，主体区域的登陆按钮的宽度，如果和上方输入框的宽度保持一致，效果会更美观。
按钮是IE盒子模型(box-sizing:border-box)，宽度是包括边框的，建议：可以给按钮设置box-sizing: content-box;再给按钮设置2px的红色边框。例如：
其他地方实现的不错，继续加油，祝学习愉快~
0 -
一个文艺的IT青年
提问者
2020-08-13
我改了一下，把表单里面元素的宽度改成了百分比，然后再把两侧版块的边距也改成了百分比，好像就解决了我说的缩小后的问题。麻烦老师看下这个改过的版本吧：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
* {
padding: 0;
margin: 0;
}
.top {
width: 100%;
height: 100px;
overflow: hidden;
zoom: 1;
background-color: black;
color: white;
}
.logo {
float: left;
cursor: pointer;
height: 100px;
line-height: 100px;
}
.top .logo img {
display: block;
}
.nav {
float:right;
}
.nav ul li {
list-style: none;
display: inline-block;
height: 100px;
font-size: 24px;
padding: 0 40px;
cursor: pointer;
line-height: 100px;
text-align: center;
}
.footer {
width:100%;
bottom: 0;
text-align: center;
background-color: black;
color: white;
}
.footer ul li{
display: inline-block;
list-style:none;
font-size:22px;
text-align: center;
height:100px;
padding:0 40px;
line-height: 100px;
cursor:pointer;
}
.content{
width:100%;
color: black;
height: 720px;
overflow: hidden;
zoom: 1;
background:#A4D3EB;
margin: 0 auto;
}
.left{
width:30%;
float: left;
height: 720px;
/* margin:0 auto;*/
margin-left: 5%;
}
.left p{
margin-bottom: 20px;
}
.left span{
background-color:#E4A877;
margin-right: 20px;
}
h1{
height: 100px;
line-height: 100px;
margin-top: 50px;
}
.mid{
width:25%;
float: left;
height: 720px;
/* margin:0 auto;*/
}
.mid p{
margin-bottom: 20px;
}
.right{
width: 30%;
height: 720px;
float: right;
/* margin:0 auto;*/
border-left: 10px solid orange;
padding-left: 5%;
}
.right input{
width:60%;
height: 50px;
}
.right button{
width:60%;
height: 50px;
background-color: orangered;
color: white;
border: none;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="top">
<div class="logo">
<img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png">
</div>
<div class="nav">
<ul>
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
</div>
<div class="content">
<div class="left">
<h1 class="tit1">课程推荐</h1>
<p><span>职业路径</span>HTML5与CSS3实现动态网页</p>
<p><span>职业路径</span>零基础入门Andriod语法界面</p>
<p><span>职业路径</span>iOS基础语法与常用控件</p>
<p><span>职业路径</span>PHP入门开发</p>
<p><span>职业路径</span>JAVA入门开发</p>
</div>
<div class="mid">
<h1 class="tit2">相关课程</h1><p>HTML CSS JavaScript</p><p>HTML5 CSS3 Jquery</p>
<p>移动端基础 移动端APP开发</p>
</div>
<div class="right">
<form>
<h1>登录</h1>
<input type="text" placeholder=" 请输入登录邮箱/手机号">
<br/><br/>
<input type="password" placeholder=" 6-16位密码，区分大小写，不能用空格">
<br/><br/>
<button type="submit">登录</button>
</form>
</div>
</div>
<div class="footer">
<ul>
<li>网站首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</div>
</body>
</html>
0 -
一个文艺的IT青年
提问者
2020-08-13
我好像发现了一个问题 就是把页面缩小以后右边就没了……
其实我也不是很确定中间3个版块的布局对不对，如果宽度百分比设置成和是100的那是看不见右边的……所以就没有那样设置。
而且用margin：0 auto好像都没用一样………………
0
相似问题