请教老师为什么设置不了导航颜色为白色呢？
来源：2-12 编程练习
慕仰2158348
2018-12-05 22:05:19
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,div,ul,li,span{
margin: 0;
padding: 0;
}
.header{
width: 100%
height: 100px;
background: black;
overflow: hidden;
}
img{
float: left;
}
.nav{
width: 600px;
height: 100px;
float: right;
color: white;
}
.ul1{
display: none;
}
.li1{
list-style-type: none;
}
a{
text-decoration: none;
}
.container{
width: 100%;
height: 1000px;
margin: 0 auto;
color: black;
}
.tuijian{
width: 40%;
height: 1000px;
background: #add8e6;
float: left;
}
.span1{
background: yellow;
}
.kecheng{
width: 30%;
height: 1000px;
background: #add8e6;
float: left;
}
.kongbai{
width: 1%;
height: 1000px;
background: red;
float: left;
}
.denglu{
width: 29%;
height: 1000px;
background: #add8e6;
float: right;
}
form{
padding-left: 50px;
}
.submit{
background: red;
text-align: center;
}
h1,p{
padding-left: 20px;
}
</style>
</head>
<body>
<div class="header">
<div class="logo">
<img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png">
</div>
<div class="nav">
<ul class="ul1">
<li class="li1"><a href="#">免费课程</a></li>
<li class="li1"><a href="#">职业路径</a></li>
<li class="li1"><a href="#">实战</a></li>
<li class="li1"><a href="#">猿问</a></li>
<li class="li1"><a href="#">手记</a></li>
</ul>
</div>
</div>
<div class="container">
<div class="tuijian">
<h1>课程推荐</h1>
<p><span class="span1">职业路径</span> <span>HTML与CSS3实现动态网页</span></p>
<p><span class="span1">职业路径</span> <span>零基础入门Android语法与界面</span></p>
<p><span class="span1">职业路径</span> <span>IOS基础语法与常用控件</span></p>
<p><span class="span1">职业路径</span> <span>PHP入门开发</span></p>
<p><span class="span1">职业路径</span> <span>JAVA入门开发</span></p>
</div>
<div class="kecheng">
<h1>相关课程</h1>
<p>HTML CSS JavaScript</p>
<p>HTML5 CSS3 Jquery</p>
<p>移动端基础 移动端APP开发</p>
</div>
<div class="kongbai"></div>
<div class="denglu">
<form>
<h1>登录</h1>
<input type="text" name="username" placeholder="请输入登录邮箱/手机号" /><br/><br/>
<input type="password" name="word" placeholder="6-16位密码，区分大小写，不能用空格"><br/><br/>
<input type="buttom" name="submit" value="登录" class="submit">
</form>
</div>
</div>
</body>
</html>
1回答
-
好帮手慕星星
2018-12-06
1、顶部右侧导航，代码中设置了隐藏：
所以文字显示不出来，去掉即可。去掉隐藏之后显示如下：
文字没有在一行显示，需要将li设置浮动或者是变为inline-block，显示在一行；并且文字颜色为a标签默认颜色，虽然在.nav中设置了字体颜颜色为白色，但是并不能改变a标签的样式，因为a标签本身就有颜色，所以根据就近原则，显示的就是自己本身的，需要具体到a标签才可以改变颜色。参考：
2、中间左侧内容有些太靠边了，建议留有些间距：
可以将内容的padding-left设置的大一些：
3、中间右侧输入框：
建议适当增加些宽度，让默认的文本显示出来。登录按钮是没有边框的，可以添加border:none;去掉。
4、底部的导航效果还没有完成，可以完善添加下。
祝学习愉快！
0
相似问题