您的位置：首页 > Web前端 > CSS

CSS中的尺寸、导航栏、下拉菜单、图片透明度、媒介类型，相关的语法属性及实例

2019-02-25 16:39 351 查看
版权声明：本文为博主原创文章，转载请附上博文链接！ https://blog.csdn.net/weixin_43638892/article/details/87914383

第7章 CSS高级

  • 二、CSS导航栏
  • 三、CSS下拉菜单实例
  • 四、CSS图片透明
  • 五、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;
}
    • 目前没有被弃用的媒介类型的值：

    内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
    标签： 
    相关文章推荐
    新的分享
    章节导航