整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
果图
html部分：先写用div画好六个导航的卡片，再利用css添加响应效果
<div class='card-holder'>
<div class='card-wrapper'>
<a href='#'>
<div class='card bg-01'>
<span class='card-content'>item #1</span>
</div>
</a>
</div>
<div class='card-wrapper'>
<a href='#'>
<div class='card bg-02'>
<span class='card-content'>long menu item #2</span>
</div>
</a>
</div>
<div class='card-wrapper'>
<a href='#'>
<div class='card bg-03'>
<span class='card-content'>menu item #3</span>
</div>
</a>
</div>
<div class='card-wrapper'>
<a href='#'>
<div class='card bg-04'>
<span class='card-content'>item #4</span>
</div>
</a>
</div>
<div class='card-wrapper'>
<a href='#'>
<div class='card bg-05'>
<span class='card-content'>menu item #5</span>
</div>
</a>
</div>
<div class='card-wrapper'>
<a href='#'>
<div class='card bg-06'>
<span class='card-content'>long menu item #1</span>
</div>
</a>
</div>
</div>css部分：通过hover选择器和transition属性实现导航响应式操作，即可实现如图效果
a:link,
a:hover,
a:visited,
a:active {
color: #fff;
text-decoration: none;
}
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #fff;
}
.card-holder {
position: fixed;
width: 0px;
overflow: visible;
}
.card-wrapper {
display: inline-block;
float: right;
clear: both;
}
.card {
position: relative;
left: 32px;
padding: 16px 32px 16px 64px;
margin: 8px;
background: #fff;
transition: all 0.3s ease-in-out 0.1s;
}
//添加导航的响应式效果
.card:hover {
position: relative;
left: 100%;
margin-left: -32px;
transition: all 0.3s ease-in-out;
}
.card-content {
display: inline-block;
color: #fff;
font-family: 'Droid Sans', sans-serif;
font-size: 16px;
font-weight: bold;
white-space: nowrap;
}
.bg-01 { background: #539770; }
.bg-02 { background: #4B7D74; }
.bg-03 { background: #8DC2BC; }
.bg-04 { background: #EDD6B4; }
.bg-05 { background: #BE7467; }
.bg-06 { background: #E2AE63; }然后就能实现我们这个实用又美观的侧边导航栏啦
1）字体的属性
字体属性用于定义字体的类型、字号大小、加粗、斜体等方面样式。常用的字体属性如下表所示：
属 性 | 可 取 值 | 描 述 |
font | font-style、font-variant、font-weight、font-size（或 line-height）、font-family | 在一个声明中设置所有的字体属性 |
font-family | 字体名称、inherit | 设置字体类型 |
font-size | xx-small、x-small、small、medium（默认）、large、x-large、xx-large smaller、larger length、%、inherit | 设置字体大小 |
font-weight | normal（默认）、bold、bolder、lighter、inherit 100、200…900（400=normal，700=bold） | 设置字体粗细 |
font-style | normal、italic、oblique、inherit | 设置字体风格 |
例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
h3 {
font-size: 20px;
font-family: 隶书;
line-height: 28px;
}
span {
font: italic 16px 华文彩云;
}
</style>
</head>
<body>
<h3>Web 前端技术</h3>
<span
>在当今社会中，Web 已经成为网络信息共享和发布的主要形式。要想开发 Web 应用
系统，就必须掌握 Web 前端技术。</span
>
</body>
</html>显示为，
（2）CSS 中链接标签可用的伪类：
CSS 中，伪类是添加到选择器的关键字，给指定元素设置一些特殊状态，我们以 : 开头。
链接有以下四个状态。这四种状态也称之为超链接的伪类。
状态 | 效果 |
a:link | 普通的、未被访问的链接。 |
a:hover | 鼠标指针位于链接的上方。 |
a:active | 链接被单击的时刻。 |
a:visited | 用户已访问的链接。 |
针对超链接的上述四种状态设置样式规则，能起到美化超链接的作用。例如，为了完成下对超链接的显示要求，编写的 CSS 样式代码如下。
状 态 | 颜 色 | 背 景 色 | 文 本 修 饰 |
未访问 | 蓝色 | 无 | 无下画线 |
鼠标移到 | 黑色 | #DDDDDD | 下画线 |
正单击 | 红色 | #AAAAAA | 删除线 |
已访问 | 绿色 | 无 | 无下画线 |
对于超链接的伪类，我们推荐的使用顺序是：:link - :visited - :hover - :active。
例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
text-decoration: none;
}
a:link {
color: red;
}
a:visited {
color: blue;
}
a:hover {
color: green;
}
a:active {
color: yellow;
}
</style>
</head>
<body>
<a href="#">这是一个链接</a>
</body>
</html>
显示为，
为什么要按照这样的顺序来使用呢？ 调整几个伪类的顺序，看看会发生什么。
我们把 a:link 放到最后，效果如下：
从图中可以发现其中的样式属性都被覆盖了。
（3）列表相关的样式属性：
属 性 | 可 取 值 | 描 述 |
list-style | list-style-type、list-style-position、list-style-image | 在一个声明中设置所有的列表属性 |
list-style-image | URL、none | 设置图像为列表项标志 |
list-style-position | inside、outside、inherit | 设置列表中列表项标志的位置 |
list-style-type | disc（默认）、circle、square、decimal 等 | 设置列表项标志的类型 |
例子，
wget https://labfile.oss.aliyuncs.com/courses/2841/list.gifTML5基础
CSS3基础
CSS3高级
JAVASCRIPT基础
*请认真填写需求信息，我们会在24小时内与您取得联系。
