整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

html+css写出响应式侧边导航栏

果图

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; }

然后就能实现我们这个实用又美观的侧边导航栏啦

情提示:以下代码是我们邀请的前端架构师基于天猫门户编写的css相关代码,现在免费分享给大家,获取的方式为:

关注此头条号“互联网IT信息”——>私信发送 “天猫css” ,(注意:css全是小写)即可得到源代码的获取方式。

1. 此篇文章讲解目录:

  • 案例和由此案例重点讲解的知识点介绍

  • 案例代码实现

  • css三大特性知识点详解

2. 案例和相关知识点介绍

此案例是页面,效果如下:

此页面的技术实现解析:

使用标签选择器定义通用样式,通过css层叠性和继承性来让通用标签的样式被继承到类选择器上

此案例中主要用到了,基于此,我们会系统的将如下知识点全部讲解:

css三大特性:层叠性、继承性、优先级

3. 此案例的代码实现

第一步:使用块级标签和无序列表编写导航侧边栏的html

第二步:通过标签选择器定义ul li a的通用样式

第三步:定义外层div样式

第四步:通过类选择器定义无序列表样式,其中li和a标签的基本样式继承自第二步的标签选择器

4. 此案例的知识点详解

CSS三大特性:

层叠性、继承性、优先级

1)层叠性:

1. 给一个标签设置的样式发生冲突的时候即样式的覆盖

2. 浏览器的渲染机制是从上到下的,当有冲突的时候就采用最后的那个样式

例如:

h2.grape {color: purple;}

h2 {color: siver;}

层叠性代码实例:

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<title>Document</title>

<styletype="text/css">

.two{

color: green;

}

.one{

color: red;

font-size: 30px;

}

.tree{

color: yellow;

font-size: 40px;

}

</style>

</head>

<body>

<pclass="one two tree">

一段文字

</p>

</body>

</html>

2)继承性:继承就是子标签继承了上级标签的CSS样式的属性

1,发生的前提是:标签之间属于一种嵌套关系

2,文字颜色可以之间继承

3,字体大小可以继承

4,字体可以继承

5,行高也可以实现继承

6, 与文字有关的属性都可以,实现继承

特殊注意:

a标签超链接不能实现字体颜色的继承,字体大小可以继承

h1不可以继承文字的大小,继承过来还会做一个计算

继承性代码实例:

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<title></title>

<style>

div{

color: red;

font-size: 30px;

}

</style>

</head>

<body>

<div>

<ahref="">a</a>

</div>

</body>

</html>

3) 优先级

具体解释如下:

内联样式最大,内联样式的优先级最高。

ID选择器的优先级,仅次于内联样式。

类选择器优先级低于ID选择器

标签选择器低于类选择器。

补充:

权重相同时,CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级,或者说排在最后的样式优先级最大。

所有都相同时,声明靠后的优先级大。

CSS定义了一个!important命令,该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近,!important都具有最大优先级。

综述:

-行内样式 > 页内样式 > 外部引用样式 > 浏览器默认样式

important > 内联 > ID > 伪类|类 | 属性选择 > 标签 > 伪对象 > 通配符 > 继承

css优先级代码实例:

<!DOCTYPE>

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>

<title>无标题文档</title>

<style>

*{ font-size:56px;}

p{ font-size:32px; color:#60C;}

.d{ color:#F0F;}

#hei{ color:#96F;}

</style>

</head>

<body>

<h1>我是标题</h1>

<p>我是段落</p>

<p>我是段落2</p>

<pclass="d"id="hei"style="color:#FF0;">我是段落3</p>

<ahref="#">我是超链接</a>

<span>我是备胎标签</span>

</body>

</html>

大家好接下来我们会邀请前端架构师以连载的方式,并且结合阿里天猫商城的门户,系统讲解Css的专业知识,欢迎大家关注头条号“互联网IT信息”。

果想开发一个网站,除了要精通后端开发语言(如:php)外,还要精通HTML代码。那么,什么是HTML呢?HTML是一种超文本标记语言,它包含有众多的标签,我们可以通过这些标签,把不同的internet资源(如:文字、图片、视频、音频、表单等等)整合在一个统一的文档中,这就形成了我们可以看得见的网页。那么,HTML都有哪些常用的标签呢?

一、文档类型声明。

html5文档类型声明:<!doctype html>

html4文档类型声明:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

二、html主标签。

这个标签是html最外层的标签,所有其它的HTML标签都要放在这个标签的内部。

<html>

<head></head>

<body></body>

</html>

三、双标签和单标签。

在HTML标签中,有的标签是成双成对的,如:<html></html>(如下图);而有的标签是单个的,如:<hr>横线标签。

四、head头部标签。

head头部有以下几种常用标签:

meta:主要提供有关页面的元信息。

link:用来定义文档与外部资源的关系,最常用的是调用CSS样式文件。

title:页面标题的标签。

script:用来调用JS文件或JS代码。当然,script标签也可以在body主体中使用。

五、body主体标签。

1、块级标签。

块级标签的特性是:独自占有一行;标签的高与宽、边距可以修改;没有设置宽与高时,默认继承父标签。例如:


<div>div1</div>

<div>div2</div>

<style>

.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }

.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }

</style>


前端页面显示的效果如下图:

常用的块级标签有:div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。

2、内联标签。

内联标签与块级标签不同,它不能独自占有一行,会与其它内联标签在同一样展示;内联标签的高与宽、上下边距是不能修改的,它里面的文字或图片有多高,它就是多高。例如如下代码:


<style>

.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }

.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }

</style>

<span>span1</span>

<span>span2</span>


CSS样式代码跟块级标签的例子是一样的,而显示的效果就不一样了,宽与高、上下边距没有效果。如下图:

常用的内联标签有:span、a、b、strong、i、em 。

3、内联块级标签。

内联块级标签,既有一些内联标签的特性,也有一些块级标签的特点:它不能独自占有一行,但是可以修改它的宽度和高度。例如下面这段代码:


<style>

.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }

.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }

</style>

<img src="w5.jpg" alt="">

<img src="w5.jpg" alt="">


CSS样式代码跟块级标签的那个例子仍然是一样的,图片的宽和高、上下边距修改成功,而2个图片不能独自占有一行,而是在同一行。如下图:

常用的内联块级标签有:img、input、textarea。

4、区域标签。

所谓区域标签,就是主要用来划分布局页面区域的。如:头部、主体内容、侧边栏、底部。这样划分的好处是:让页面布局更加清晰明了。

常用的区域标签有:header(头部)、footer(底部)、nav(导航)、aside(侧边栏)、section(主体)、article(独立内容)。

5、表单标签。

这个表单标签我们也是会经常用到的,如:登录网站的时候、提交数据的时候。如下图的评论表单:

​表单常用的标签有:form、input、select、option、textarea 。

以上就是我们开发网页时,会常用到的HTML标签。当然,HTML标签远不止这些,尤其是html5出来后,新增了许多的新标签。但是,有些标签在我们开发中很少用到,所以,这里就没有做相应的介绍。