老师麻烦帮忙检查下作业,谢谢!

来源:2-12 编程练习

李小圆_

2019-07-23 15:14:09

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}

.header {
width: 100%;
position: fixed;
background-color: #000;
top: 0;
}

.header img {
display: block;
float: left;
}

.header a {
text-decoration: none;
color: #fff;
font-size: 20px;
line-height: 100px;
float: right;
margin: 0 25px;
}

.container {
width: 100%;
height: 1000px;
margin: 100px auto;
background-color: #a8d8eb;
}

.container p {
height: 30px;
line-height: 30px;
font-size: 14px;
}

.container .title {
height: 40px;
line-height: 40px;
font-size: 20px;
margin-left: 10px;
}

.container span {
margin: 10px;
}

.content_left .describe {
background-color: pink;
}

.content_left {
width: 20%;
height: 1000px;
float: left;
padding-left: 10%;
padding-top: 100px;
}

.content_middle {
width: 20%;
height: 1000px;
float: left;
padding-left: 10%;
padding-top: 100px;
}

.content_right{
width: 25%;
height: 1000px;
border-left: 10px orange solid;
float: right;
padding-top: 100px;
padding-left: 5%;
}
.content_right .title{
margin-left: -5px;
}
.content_right input{
display: block;
width: 200px;
height: 30px;
line-height: 30px;
font-size: 10px;
margin: 20px 0;
}
.content_right .login{
background-color: red;
color: #fff;
text-align: center;
border: none;
font-size: 14px;
height: 35px;
line-height: 35px;
}
.footer {
width: 100%;
height: 100px;
position: fixed;
bottom: 0;
background-color: #000;
text-align: center;
}

.footer a {
text-decoration: none;
color: #fff;
line-height: 100px;
margin: 0 10px;
}
</style>
</head>

<body>
<!-- 此处写代码 -->
</body>
<div class="header">
<img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png" alt="">
<a href="#">手记</a>
<a href="#">猿问</a>
<a href="#">实战</a>
<a href="#">职业路径</a>
<a href="#">课程</a>
</div>
<div class="container">
<div class="content_left">
<p class="title">课程推荐</p>
<p><span class="describe">职业路径</span><span>HTML5与CSS3实现动态网页</span></p>
<p><span class="describe">职业路径</span><span>零基础入门Android语法与界面</span></p>
<p><span class="describe">职业路径</span><span>iOS基础语法与常用控件</span></p>
<p><span class="describe">职业路径</span><span>PHP入门开发</span></p>
<p><span class="describe">职业路径</span><span>JAVA入门开发</span></p>
</div>
<div class="content_middle">
<p class="title">相关课程</p>
<p><span>HTML</span>
<span>CSS</span>
<span>Javascript</span></p>
<p><span>HTML5</span>
<span>CSS3</span>
<span>Jquery</span></p>
<p><span>移动端基础</span>
<span>移动app开发</span></p>
</div>
<div class="content_right">
<p class="title">登录</p>
<input type="text" placeholder="请输入登陆邮箱/手机号"><input type="text" placeholder="6-16位密码,区别大小写,不能用空格">
<input type="button" value="登录" class="login">
</div>
</div>
<div class="footer">
<a href="#">网站首页</a>
<a href="#">企业合作</a>
<a href="#">人才指导</a>
<a href="#">联系我们</a>
<a href="#">常见问题</a>
<a href="#">友情链接</a>
</div>

</html>

谢谢老师!

写回答

1回答

好帮手慕慕子

2019-07-23

同学你好, 整体效果实现不错, 有个细节需要注意一下, 如下图所示,输入框和按钮右侧没有对齐显示哦。 浏览器会给input标签添加2px的边框

http://img.mukewang.com/climg/5d36d44e0001ae5203610233.jpg

建议修改: 可以统一给input标签设置border样式, 然后调整按钮的width值哦

http://img.mukewang.com/climg/5d36d5120001620205170516.jpg

如果帮助到了你, 欢迎采纳!

祝学习愉快~~~~~

0

0 学习 · 40143 问题

查看课程