CSS中的尺寸、导航栏、下拉菜单、图片透明度、媒介类型，相关的语法属性及实例
第7章 CSS高级
一、CSS 尺寸(Dimension)
1、定义
尺寸属性允许你控制元素的高度和宽度。同样，它允许增加行间距。
2、属性
二、CSS导航栏
1、导航栏 = 链接列表
导航栏需要标准的 HTML 作为基础。
在我们的例子中，将用标准的 HTML 列表来构建导航栏。
导航栏基本上是一个链接列表，因此使用 <ul> 和 <li> 元素是非常合适的
2、实际开发中常见的导航栏
实例（2.2）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航栏</title>
<style type="text/css" media="screen">
ul{
list-style-type: none;/*去掉无序列表的圆点*/
}
li{
margin: auto;/*居中显示*/
float: left;
/*通过浮动使li水平显示*/
}
a{
display: block; /*把链接显示为块元素可使整个链接区域可点击（不仅仅是文本）*/
width: 100px;/*规定链接块的宽度*/
text-decoration:none;/*去掉超链接的下划线*/
}
</style>
</head>
<body>
<div>
<ul>
<li><a href="#" title="">首页</a></li>
<li><a href="#" title="">第一页</a></li>
<li><a href="#" title="">第二页</a></li>
<li><a href="#" title="">第三页</a></li>
</ul>
</div>
</body>
</html>
在web中显示为：
三、CSS下拉菜单实例
使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。
实例（3.1）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航栏</title>
<style type="text/css" media="screen">
/*下拉按钮样式 */
.dropbtn {
background-color: #FF0000;/*背景色*/
color: white;/*字体色*/
font-size: 16px;/*字体大小*/
border: none;/*边框样式*/
cursor: pointer; /**/
}
.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);
}
/*下拉菜单的链接*/
.dropdown-content a {
color: black;/*字体颜色*/
padding: 12px 16px;/*外边距*/
text-decoration: none;
display: block;/*显示*/
}
/*当鼠标移动到下拉菜单时的颜色 */
.dropdown-content a:hover {
color: #FFF;
background-color: pink;
}
/*当鼠标移动到下拉按钮时,显示下拉菜单*/
.dropdown:hover .dropdown-content {
display: block;
}
/*当鼠标移动到下拉按钮时的颜色 */
.dropdown:hover .dropbtn {
background-color: #60C5F1;/*背景颜色*/
color: #000;/*字体颜色*/
}
</style>
</head>
<body>
<div class="dropdown">
<button class="dropbtn">下拉菜单</button>
<div class="dropdown-content">
<a href="#">下拉菜单 1</a>
<a href="#">下拉菜单 2</a>
<a href="#">下拉菜单 3</a>
</div>
</div>
</body>
</html>
在web中显示为：
四、CSS图片透明
1、透明度属性—— opacity
- opacity 的值为0到1之间的整位小数，1为正常显示。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航栏</title>
<style type="text/css" media="screen">
img{
width: 100px;
height: 100px;
opacity:0.5;
}
img:hover{
opacity:1.0;
}
</style>
</head>
<body>
<img src="D://Pictures/1.jpg" alt="">
</body>
</html>
在web中显示：
（1）鼠标没在图片上时
（2）鼠标移动到图片上时
五、CSS媒介类型
1、媒介含义
媒介类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上，在纸张上，或听觉浏览器等等。
2、@media 规则
@media 规则允许在相同样式表为不同媒体设置不同的样式。
3、媒介类型的语法
示例：
@media mediatype and|not|only (media feature) {
CSS-Code;
}
- 目前没有被弃用的媒介类型的值：