前端学习之路css(06)-基础知识

来源：互联网发布：营销人员数据统计分析编辑：程序博客网时间：2024/05/21 09:32

CSS 导航栏

在CSS中我们利用链接列表来表示导航栏，给出一些常见简易的导航栏。

这里写图片描述

CSS 下拉菜单

下拉菜单我们需要在style中定义以下属性；

.dropdown，包含下拉按钮的块样式；
.dropbtn，下拉按钮的默认样式；
.dropdown-content，下拉菜单样式，默认隐藏；
.dropdown:hover .dropdown-content，鼠标移动到下拉按钮时，显示下拉菜单；
.dropdown:hover .dropbtn，当下拉菜单显示时，下拉按钮的样式；
.dropdown:hover a，鼠标放到下拉菜单时显示链接样式；
.dropdown-content a:hover，鼠标放到下拉菜单的链接上时链接样式。

一个例子

<!doctype html><html><head><meta charset="utf-8"><title>CSS 下拉菜单</title><style type="text/css">/* 包含下拉按钮的块 */.dropdown{    position: relative;    background-color: #000000;}/* 下拉按钮的样式 */.dropbtn{    color: #ffffff;    background-color: #000000;    display: inline-block;    padding: 10px;    font-size: 16px;    text-decoration: none;    border: none;    cursor: pointer;}/* 鼠标移动到下拉按钮时显示下拉菜单 */.dropdown:hover .dropdown-content{    display: block;}/* 当下拉菜单显示时下拉按钮的样式 */.dropdown:hover .dropbtn{    color: yellow;}/* 下拉菜单，默认隐藏 */.dropdown-content{    display: none;    position: absolute;    color: yellow;    background-color: #dddddd;    min-width: 100px;}/* 下拉菜单，鼠标移动到下拉按钮上展示 */.dropdown:hover a{    color: black;    text-decoration: none;    display: block;    padding: 10px}/* 下拉菜单，鼠标移动到链接时展示 */.dropdown-content a:hover {    color: yellow;    background-color: #000000;}</style></head><body><div class="dropdown">    <button class="dropbtn">频道</button>    <div class="dropdown-content">    <a href="#">体育</a>    <a href="#">娱乐</a>    <a href="#">热点</a>    </div>  </div></div></body></html>

这里写图片描述

导航栏配合下拉菜单请参照

CSS Tooltip（提示工具）

最基础的提示框，我们可以想到应该设置这三个属性，设置提示的来源.tooltip，设置提示的内容属性.tooltip .tooltiptext，设置鼠标移动到需要展示提示的位置.tooltip:hover .tooltiptext。

举个简单的例子

那么如果我们需要指定提示工具出现的位置，就需要用到定位，我们觉得例子，指定提示在其右边出现。

/* 定位 */position: absolute;z-index: 1;top: -5px;left: 105%;

absolute含义是相对于其父元素的位置，”top: -5px”意思是离父元素顶部-5px，即在其顶部上移5px，“left: 105%”意思是离父元素最左侧1.05倍距离远，即离最右侧0.05倍远。我们通过同样的道理可以指定提示框出现在其任何位置。

我们还可以设置一个带箭头的提示框

我们还可以设置一个淡入效果提示框

CSS 图片廊/透明/拼合

CSS图片廊实例

CSS图片的透明用属性opacity和filter表示；
opacity，是透明度属性，0-1，0完全透明，1完全不透明。
filter，IE8及更早版本用滤镜(alpha(opacity=x))来表示透明度，0-100。1透明，100不透明。
opacity=0.4; filter:alpha(opacity=40);

CSS图片透明示例

此外，我们可以通过透明度来设置div透明，来给图片做一个水印。

CSS图片拼合参照

CSS 属性选择器

属性选择器就是将一类有规律的属性值得样式统一设定。

具体参见

0 0