问下，老师，看下代码实现是否简洁？右侧登录框中文本的颜色和样式怎么设置？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding:0;
margin:0;
list-style:none;
}
.head{
height:100px;
background:black;
width:100%;
}
a{
text-decoration:none;
color:white;
}
.logo{
float:left;
/*height:100px;*/
}
.head .list{
float:right;
margin-right:30px;
}
.head .list li{
float:left;
line-height:100px;
margin-left:40px;
cursor:pointer;
}
.foot{
background:black;
height:100px;
width:100%;
/*position:fixed;
bottom:0;*/
text-align:center;
}
.foot .list2{
display:inline-block;
}
.foot .list2 li{
/*display:inline-block;*/
padding:0px 20px;
float:left;
line-height:100px;
}
.con{
width:100%;
background:skyblue;
height:1000px;
}
.con .left{
width:35%;
float:left;
height:1000px;
line-height:3em;
/*border:1px black solid;*/
}
.con .left .con-left .list3{
}
.con .left .con-left{
/*margin:100px 0px 0px 100px;*/
/*border:1px black solid;*/
padding:100px 0px 0px 100px;
}
.con .middle{
/*width:30%;*/
float:left;
/*border-right:2px orange solid;*/
height:1000px;
line-height:3em;
/*border:1px black solid;*/
}
.con .middle .con-mid{
margin:100px 50px 0px 0px;
}
.con .middle .list4{
}
.con .right{
width:40%;
float:right;
height:1000px;
line-height:3em;
/*border-left:2px orange solid;*/
}
.con .right .con-rig{
margin:100px 0px 0px 0px;
}
input{
border:1px #aaaaaa solid;
height:30px;
width:200px;
}
input.go{
color:white;
background:red;
}
input.user{
/*color:red;*/
text-indent:1em;
/*letter-spacing:1em;*/
}
span{
background:pink;
}
.con .line{
width:5px;
height:1000px;
background:orange;
float:left;
margin-left:50px ;
}
img{display:block;}
}
</style>
</head>
<body>
<div class="head">
<div class="logo"><a href="#"><img src="http://img1.sycdn.imooc.com/climg//59093e9c00016ce303000100.png"/></a></div>
<ul class="list">
<li><a href="#">课程</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">课程</a></li>
</ul>
</div>
<div class="con">
<div class="left">
<div class=con-left>
<h2>课程推荐</h2>
<ul class="list3">
<li><span>职业路径</span> 啊是看和给我人噶我看</li>
<li><span>职业路径</span> 啊是看和给我人噶我看</li>
<li><span>职业路径</span> 啊是看和给我人噶我看</li>
<li><span>职业路径</span> 啊是看和给我人噶我看</li>
</ul>
</div>
</div>
<div class="middle">
<div class="con-mid">
<h2>相关课程</h2>
<ul class="list4">
<li>HTML CSS JavaScript</li>
<li>HTML CSS JavaScript</li>
<li>HTML CSS JavaScript</li>
</ul>
</div>
</div>
<div class="line"></div>
<div class="right">
<div class="con-rig">
<h3>登录</h3>
<form>
<input type="text" name="user" placeholder="请输入昵称"><br/>
<input type="password" name="pwd" placeholder="请输入密码"><br/>
<input class="go" type="submit" name="go" value="登录">
</form>
</div>
</div>
</div>
<div class="foot">
<ul class="list2">
<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
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星