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

最新推荐文章于 2023-06-18 18:10:45 发布

戚继光

最新推荐文章于 2023-06-18 18:10:45 发布

阅读量765

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/weixin_36244867/article/details/64922239

web前端专栏收录该内容

25 篇文章

订阅专栏

本文介绍如何使用CSS创建下拉菜单，并演示了透明度和拼合等图片处理技巧。

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图片拼合参照