本帖最后由 clearwater 于 2019-12-19 21:54 编辑
有大神教教我1个问题吗？
为什么式样表中，108行，我在subnav 的li 写了color 不管用。
非得在subnav a 写color 字才能变色？113行
（我自己做了一个简单的实验，没有写得这么复杂，但是在li中就能修改文字的颜色。）
P.S. 这是我跟着视频做的练习，麻烦大神不要讲得太高超的技术。刚开始学习。我把代码和图片也上传到百度了。
链接：https://pan.baidu.com/s/1rDX45XW_FlUGdAE8EUjxtQ
提取码：ikmf
谢谢大神。
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学而成</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 第一个大盒子包在外面 -->
<div class="header w ">
<!-- 光标放在div上，就会显示上下div 是哪个组的。 -->
<!-- 把光标放在行数边上的小三角可以折叠 -->
<!-- 第二个盒子logo -->
<div class="logo">
<img src="images/logo.png" alt="">
</div>
<!-- 第三个盒子nav -->
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">职业规化</a></li>
</ul>
</div>
<!-- 第四个盒子search -->
<div class="search">
<input type="text" value ="输入关键词">
<!-- <input type="button" value=""> 与下面的功能是一样的， 快捷imput:button -->
<!-- <button>搜索</button> -->
<button></button>
</div>
<!-- 第五个盒子user -->
<div class="user">
<img src="images/user.jpg" alt="">
Tom
</div>
</div>
<!-- banner starts -->
<div class="banner">
<!-- 必须先写版心，才能与左右两侧 -->
<div class="w">
<div class="subnav">
<ul>
<li><a href="#">前端开发 <span>></span></a></li>
<li><a href="#">前端开发 <span>></span></a></li>
<li><a href="#">前端开发 <span>></span></a></li>
<li><a href="#">前端开发 <span>></span></a></li>
<li><a href="#">前端开发 <span>></span></a></li>
<li><a href="#">前端开发 <span>></span></a></li>
<li><a href="#">前端开发 <span>></span></a></li>
<li><a href="#">前端开发 <span>></span></a></li>
<li><a href="#">前端开发 <span>></span></a></li>
</ul>
</div>
</div>
</div>
<!-- banner ends -->
</body>
</html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[HTML] 纯文本查看 复制代码 * {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
button {
border: none;
}
.w {
width: 1200px;
margin: auto;
}
body {
background-color: #f3f5f7;
}
.header {
width: 1200px;
height: 42px;
background-color: pink;
margin: 30px auto;
}
.logo {
float: left;
margin-right: 60px;
}
.nav {
float: left;
}
.nav ul li {
float: left;
}
.nav ul li a {
display: block;
height: 40px;
line-height: 40px;
/*导航栏字不一样多，不要给宽度，用padding挤开*/
padding: 0 10px;
margin-right: 20px;
font-size: 18px;
color: #050505;
text-decoration: none;
}
.nav ul li a:hover {
border-bottom: 2px solid #00a4ff;
}
.search {
float: left;
/* m:l70;*/
margin-left: 70px;
}
.search input {
/*行内块有三个：图片、表单、td单元格。这些之间都会有空隙的。这是个表单，和button 之间会有空隙。所以要浮动，才会与button挨在一起。*/
float: left;
/*由于padding-left: 20px 因为设置了盒子的宽度，会把盒子撑大，所以360px -20px;*/
/*width: 360px;*/
width: 340px;
height: 38px;
border: 1px solid #00a4ff;
/*border-right: none; 也可以。br+tab =border-right*/
border-right: 0;
padding-left: 20px;
color: #ccc;
}
.search button {
/*行内块有三个：图片、表单、td单元格。这些之间都会有空隙的。这是个表单，和input 之间会有空隙。所以要浮动，才会与input挨在一起。*/
float: left;
/*w50+h42+tab*/
width: 50px;
height: 42px;
/*background-color: purple;*/
/*因为少了2像素，所以用repeat, 正常用no-repeat*/
background-image: url(images/btn.png);
}
.user {
float: left;
height: 42px;
line-height: 42px;
margin-left: 30px;
font-size: 14px;
color: #666;
}
/*banner starts*/
.banner {
height: 420px;
background: #1c036c url(images/banner2.jpg) no-repeat top center;
}
/*banner ends*/
.subnav {
/*width: 190px; */
/*padding会撑大盒子 190-20*2*/
width: 150px;
height: 420px;
padding: 0 20px;
background-color: rgba(0,0,0,0.3);
}
.subnav ul li {
height: 45px;
line-height: 45px;
color: white;
}
.subnav li a {
/*color: white;*/
}
/*可简写为.subnav span*/
.subnav ul li a span {
float: right;
} | 
发表于 2019-12-19 21:32
|
发表于 2019-12-19 21:51
