3-3编程练习 老师帮忙看一下 谢谢
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
font-size: 16px;
}
ul,li{
list-style-type: none;
}
body{
min-width: 1300px;
}
.header{
background: black;
width: 100%;
height: 104px;
line-height: 104px;
}
.header .logo{
float: left;
}
.header ul{
float: right;
}
.header ul li{
float: left;
margin-right: 100px;
}
.header a{
color: #fff;
text-decoration: none;
}
.header,
.footer{
float: left;
background: black;
width: 100%;
height: 104px;
line-height: 104px;
}
.footer{
text-align: center;
}
.footer ul li{
display: inline-block;
margin: 0 20px;
}
.footer a{
color: #fff;
text-decoration: none;
}
.container{
padding: 0 400px 0 450px;
/*min-width: 500px;*/
overflow: hidden;
}
.middle,
.left,
.right{
position: relative;
float: left;
min-height: 800px;
}
.container .middle{
background: pink;
width: 100%;
}
.container img{
position: absolute;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -300px;
}
.container .left{
background: lightyellow;
width: 450px;
margin-left: -100%;
left: -450px;
}
.container .left ul{
margin: 200px 0 0 70px;
/*background: red;*/
}
.container .left h2{
font-size: 25px;
padding-bottom: 40px;
}
.container .left b{
background: pink;
}
.container .left a{
padding-left: 10px;
text-decoration: none;
color: black;
}
.container .left ul li{
padding-bottom: 40px;
}
.container .right{
background: skyblue;
width: 400px;
margin-left: -400px;
right: -400px;
}
.container .right h2{
font-size: 25px;
margin-top: 200px;
margin-left: 40px;
margin-bottom: 20px;
}
.container .right form input{
margin-left: 40px;
margin-bottom: 20px;
width: 70%;
height: 50px;
outline: none;
}
.container .right form input[type=submit]{
background: red;
}
</style>
</head>
<body>
<div class="header">
<div class="logo"><img src="http://img1.sycdn.imooc.com/climg//590037f600016ce303000100.png"></div>
<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 class="container">
<div class="middle">
<img src="http://img1.sycdn.imooc.com/climg//590037e00001fab706000400.jpg">
</div>
<div class="left">
<ul>
<h2>课程推荐</h2>
<li><b>职业路径</b><a href="">html5与css3实现动态网页</a></li>
<li><b>职业路径</b><a href="">html5与css3实现动态网页</a></li>
<li><b>职业路径</b><a href="">html5与css3实现动态网页</a></li>
<li><b>职业路径</b><a href="">html5与css3实现动态网页</a></li>
<li><b>职业路径</b><a href="">html5与css3实现动态网页</a></li>
</ul>
</div>
<div class="right">
<h2>登陆</h2>
<form>
<input type="text" name="" placeholder="请输入登陆邮箱/手机号"><br />
<input type="password" name="" placeholder="6-16位密码，区分大小写，不能用空格"><br />
<input type="submit" name="" value="登录">
</form>
</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>
<li><a href="">网站首页</a></li>
</ul>
</div>
</body>
</html>
正在回答
同学你好，1、鼠标移入文字的时候，字体颜色要改变，建议：可以设置hover的时候，改变字体颜色。
2、右侧的登录按钮可以设置没有边框哦，即：border:none;
希望能帮助到你，祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星