2-11练习题提交
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin:0;
}
.header{
background-color: black;
width:100%;
height:100px;
line-height: 100px;
}
img{
float: left;
height:100px;
}
.nav{
float: right;
height:100px;
}
.nav a{
margin-right: 40px;
font-size: 24px;
color:#fff;
text-decoration: none;
}
.content{
background-color: rgb(200,225,255);
width:60%;
height: 600px;
float: left;
}
.left{
width:50%;
height:100%;
float: left;
}
.right{
width:50%;
height:100%;
float: right;
}
.left_content{
padding: 100px 0 0 120px;
font-size: 20px;
line-height: 36px;
}
.ul_title{
font-size: 28px;
font-weight: bold;
}
.ul_content ul {
list-style: none;
}
.ul_content ul div{
float: left;
margin-right:30px;
line-height: 20px;
background-color:pink;
margin-top: 8px;
}
.right_content{
padding: 100px 0 0 100px;
font-size: 20px;
line-height: 36px;
}
.right_title{
font-weight: bold;
font-size: 28px;
}
.right_list div{
float: left;
margin-right:20px;
}
.footer{
clear: both;
background-color: black;
height:100px;
width: 100%;
line-height: 100px;
text-align: center;
}
.footer a{
text-decoration: none;
color: #fff;
font-size: 24px;
margin-right:30px;
}
.all_content{
width:100%;
height:600px;
}
.middle_content{
width:1%;
background-color: pink;
height:600px;
float: left;
}
.right_content_{
background-color: rgb(200,225,255);
width:39%;
float: right;
height:600px;
}
.right_content_form{
margin: 100px 0 0 100px;
}
h1{
margin-bottom: 20px;
}
.user_input{
width:200px;
height:30px;
margin-bottom: 20px;
}
.submit_input{
background-color: red;
width:202px;
height:40px;
color: #fff;
font-weight: bold;
}
</style>
</head>
<body>
<div class="header">
<img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png" alt="">
<div class="nav">
<a href="#">课程</a>
<a href="#">职业路径</a>
<a href="#">实战</a>
<a href="#">猿问</a>
<a href="#">手机</a>
</div>
</div>
<div class="all_content">
<div class="content">
<div class="left">
<div class="left_content">
<div class="ul_title">
课程推荐
</div>
<div class="ul_content">
<ul>
<div>职业路径</div><li>HTML与CSS实现动态网页</li>
<div>职业路径</div><li>零基础入门ANDROID语法与界面</li>
<div>职业路径</div><li>IOS基础语法与常用控件</li>
<div>职业路径</div><li>PHP入门开发</li>
<div>职业路径</div><li>JAVA入门开发</li>
</ul>
</div>
</div>
</div>
<div class="right">
<div class="right_content">
<div class="right_title">
相关课程
</div>
<div class="right_list">
<div>HTML</div>
<div>CSS</div>
<div>javaScript</div><br/>
<div>HTML5</div>
<div>CSS3</div>
<div>jquery</div><br/>
<div>移动端基础</div>
<div>移动端APP开发</div>
</div>
</div>
</div>
</div>
<div class="middle_content"></div>
<div class="right_content_">
<div class="right_content_form">
<h1>登录</h1>
<div right_content_form_input>
<input class="user_input" type="text" name="user" placeholder="请输入邮箱/手机号" /><br>
<input class="user_input" type="text" name="pwd" placeholder="请输入密码" />
</div>
<div right_content_form_button>
<input class="submit_input" type="submit" value="登录"/>
</div>
</div>
</div>
</div>
<div class="footer">
<a href="#">网站首页</a>
<a href="#">企业合作</a>
<a href="#">人才招聘</a>
<a href="#">联系我们</a>
<a href="#">常见问题</a>
<a href="#">友情链接</a>
</div>
</body>
</html>
注：希望老师看看我的代码，帮我分析一下，看看到底有没有什么问题或者改进。
正在回答
你好，整体效果实现的是挺好的，1、右侧的提交按钮，可以设置没有边框哟，例：border: none;
2、第二部分与第三部分之间的线，.middle_content由于屏幕分辨率的不同，在我这里显示有点宽哟，建议：这部分可把背景设置给大盒子（.all_content），这个竖条的部分可以设置固定的宽度哦。
祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星