接着CSS样式表的学习：
(45条消息) CSS样式表的学习_one day321的博客-CSDN博客
第二部分（续）：
透明度opacity
opacity表示透明度，一般为：opacity:1 。这个是默认透明度，也就是不透明。
取值一般为0~1。值越小，透明度越高。
它可以和img：hover 标签一起使用。表示鼠标悬浮时，图片会改变样式。
例如：
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}导航栏：（有意思捏）
导航栏，前面介绍了各种各样的，框架、属性、标签。但，最合适的方式，还是使用<ul>、<li>元素标签。
分为垂直侧边导航栏和水平导航栏：
垂直侧边导航栏：
最重要的是这两个点击链接的颜色变化。 表示在此活动链接时的样式，和为在此活动页面的样式。注意这两个缺一不可。
li a.active {
background-color: #04AA6D;
color: white;
}
li a:hover:not(.active) { //如果缺少：not(.active)这个元素，会导致，当我们悬停在此活动页面时，它的样式也会发生改变。
background-color: #555;
color: white;
}
注意：需要设置position：fixed。这个元素很重要。大概只有侧边栏会用到这个元素。
例子：
ul {
list-style-type: none; //设置样式无列表
margin: 0;
padding: 0; //位置是左上。
width: 25%; //宽度是25%
background-color: #f1f1f1;
position: fixed; //固定此位置，这个多琢磨一下。和position:sticky进行比较。
height: 100%;
overflow: auto;
}
li a {
display: block; 设置标签为块级元素，一个占据一行
color: #000;
padding: 8px 16px;
text-decoration: none; 设置链接无下划线。
}
li a.active {
background-color: #04AA6D;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
水平导航栏：
水平导航栏和上述的区别，就是方式设置方法多了。设置浮点方式：float:left。设置内联方式：display：inline。设置粘性导航：display：sticky。
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: -webkit-sticky; /* Safari */
position: sticky; //设置粘贴性的水平导航栏
top: 0;
}
li {
float: left; //这个是关键，使用浮点式的方法设置水平导航栏。
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
</style>
</head>
<body>
<div class="header">
<h2>Scroll Down</h2>
<p>Scroll down to see the sticky effect.</p>
</div>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
</ul>扩展示例：
具有下拉列表的导航栏：在这个链接的最后面有一个这样的示例。
下拉列表
.dropdown-content {
display: none;} 这个元素，隐藏了dropdown-content样式。通过下面的浮点式，可以启用这个样式。
.dropdown:hover .dropdown-content { 在伪类的方式下可以重启被隐藏的元素。
display: block;
}
示例：
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute; //这个很重要的，决定了它会单独成为一个样式。
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the text below to open the dropdown content.</p>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
图片（小图标）样式、属性选择器
图像精灵：
background: url(img_navsprites.gif) 0 0;- 定义背景图像及其位置（左0px，顶部0px）
其实就是类似于一个长图片，然后单独提取其中的一部分。在很多app上就是这样的长图片。
例如导航栏的图片：
background:url(" ") -47px -47px；后面一个像素是阴影部分的取值像素
属性选择器：
【attribute】 例如：【a】 这样所有链接的属性样式都发生改变。
【attribute="value"】 例如： a[target="_blank"]
[attribute~="value"] 例如：[title~="flower"] 指定，title里面含有flower的属性。完整单词！
[attribute|="value"] 例如：[class|="top"] 和前面的用法差不多。区别，它后面可以跟“-”。
[attribute^="value"] 例如：[class^="top"] 首部含有top属性。 该值不必是整个单词！
[attribute$="value"] 例如：[class$="test"] 尾部含有test属性。同上。
[attribute*="value"] 只要属性包含此内容，就可以。[class*="te"]
表单、计数器
input[ type=text ]：focus //这是一个焦点按钮，当点击的时候，它的样式发生改变。
resize：none。 设置这个属性，则表单属性，不允许改变大小。（有些浏览器可以拖取大小，设置这个属性，则禁用拖取。）
计数器：
它存在以下属性：
counter-reset- 创建或重置计数器counter-increment- 递增计数器值content- 生成的插入物 内容counter()或函数 - 添加 元素计数器的值counters()
例如： 这个定义了h2的个数。以h2的个数计数。
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}这个属性最重要的就是嵌套计数器：例如1.1 、1.2、1.3这种样式。需要用到两个计数器。并且后一个计数器里面的content里面的内容，是前一个计数器。
由于时间性问题，我需要修改一下我的学习计划，之前的方式，还是太慢了。因为没有实际应用，我不过是阅览一遍，然后再将这些内容做笔记到这个里面，就好比只是copy一遍。不能这样子下去。建议：只看，有题目训练的知识点。其它知识点，不做笔记，想看可以看。尽量不看。等到真正需求的时候再看。