2-11写的很乱请老师检查一下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin:0;
}
.yemian{
background-color:#00ffff;
min-width:1000px;
width: 100%;
height: 1000px;
}
.nav{
min-width:1000px;
height:100px;
width: 100%;
background-color: black;
color:white;
position: fixed;
top: 0;
z-index: 999;
}
.nav .logo{
height:100px;
float: left;
}
.nav span{
float: right;
height: 100px;
text-align: center;
line-height: 100px;
word-spacing: 50px;
padding-right: 100px;}
.container{
width: 70%;
min-width:700px;
height: 800px;
margin:0 auto;
padding-top: 100px;
padding-bottom: 100px;
}
.one{
min-width:245px;
width: 35%;
margin-top: 50px;
float: left;
}
.one1{
width: 500px;
height: 50px;
margin:10px 0;
margin-left:-100px;
word-spacing: 10px;
}
.one1 span{
background-color:#d2691e;
}
.two{
min-width:245px;
width: 35%;
height: 700px;
margin-top: 50px;
float: left;
word-spacing: 10px;}
.two div{
margin: 15px 0;
font-weight: 700;
}
.footer{
text-align: center;
height: 100px;
width: 100%;
line-height: 100px;
word-spacing: 15px;
background-color: black;
color:white;
position: fixed;
bottom: 0px;
}
.three{
width: 25%;
min-width:210px;
height: 800px;
float: left;
background-color:#00ffff;
border-left: thick solid orange;
}
.three .biaodan{
margin-left: 50px;
margin-top: 50px;
width: 300px;
height: 500px;
}
.sub{
background-color: red;
color: white;
display: inline-block;
width:100px;
height:50px;
text-align: center;
}
.biaodan h1,input{
margin: 10px auto;
}
</style>
</head>
<body>
<div class="yemian">
<div class="nav">
<div class="logo"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"/></div>
<span>课程 职业路径 实战 猿问 手记</span>
</div>
<div class="container">
<div class="one">
<h1>课程推荐</h1>
<div class="one1"><span>职业路径</span> HTML5与CSS3实现动态网页</div>
<div class="one1"><span>职业路径</span> 零基础入门Android语法与界面</div>
<div class="one1"><span>职业路径</span> Ios基础语法与常用控件</div>
<div class="one1"><span>职业路径</span> PHP入门开发</div>
<div class="one1"><span>职业路径</span> Java入门开发</div>
</div>
<div class="two">
<h1>相关课程</h1>
<div>HTML CSS JAVAScript</div>
<div>HTML CSS5 Jquery</div>
<div>移动端基础 移动端app开发</div>
</div>
<div class="three">
<form>
<div class="biaodan">
<h1>登录</h1>
<input type="text" name="name" placeholder="请输入登录邮箱/手机号" /><br/>
<input type="password" name="pd" placeholder="请输入密码"/><br/>
<input type="submit" name="sub" class="sub" />
</div>
</form>
</div>
</div>
<div class="footer">
<span>网站首页 企业合作 人才招聘 联系我们 常见问题 友情链接</span><br/>
</div>
</div>
</body>
</html>
请问老师我的效果是实现了，但是为什么我缩小了网页three不会正常显示出来？我明明设置了最小宽度min-width:210px;啊
|
正在回答
测试了你的代码，实现的效果还可以。
右侧区域的按钮宽度可以再大些，跟上面的输入框宽度保持一致，可以参考效果图；另外，按钮的border可以设置为none，这样就可以取消按钮的默认边框了。
css相关样式比较多，刚开始学，会有些乱，比较正常，要多练习，多敲代码，这样能够再不断的实践中，作出总结，自己的技术也会提升比较快。
祝学习愉快！
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星