HTML从入门到入土 - 导航栏和一点有趣的CSS实例

最新推荐文章于 2021-10-13 09:19:14 发布

BluePROT

最新推荐文章于 2021-10-13 09:19:14 发布

阅读量441

点赞数

分类专栏：前端文章标签： html css css3 html5

本文链接：https://blog.csdn.net/qq_41037945/article/details/106889503

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章目录

date: 2018-07-27 02:28:36
HTML是静态的，可以利用CSS来制作各种特效，今天我在美化页面的时候想到可以制作各种页面效果，特别是很多动态特效，需要js或者css都可以实现。

DIV标签阴影

可以制作卡片效果，原文点击此处
使用边框阴影box-shadow属性可以制作出光晕、浮雕等PS才能实现的特效。
IE6~8不支持box-shadow，IE9+FireFox4.0、Chrome、Opera及Safari5.1.1支持该属性。

基本语法

box-shadow：color h-shadow v-shadow blur spread inset；

color：阴影颜色 ------------ 可选
h-shadow ：水平偏移量 ----必选
v-shadow：垂直偏移量-----必选
blur：模糊距离 -------------可选
spread：阴影尺寸---------- 可选
inset：内阴影 --------------可选

.div1{
            width:200px;
            height:200px;
            margin:20px auto;
            line-height: 200px;
            text-align: center;
            background: cadetblue;
            border:2px solid darkslategray;
            box-shadow: darkgrey 10px 10px 30px 5px ;//边框阴影
        }
...
<div class="div1">边框阴影示例</div>

上面就是一个简单的栗子，效果是类似卡片的立体背景阴影效果。
inset参数可选可不选，选择该参数则表示为内阴影，不选则默认为外阴影。
偏移量即阴影在x和y方向的移动距离，也可以说是立体感。
阴影尺寸决定了阴影的长度，模糊程度即为阴影最重要的。
具体使用搭配可以亲自尝试感受这个效果。

导航栏特效一

这里好像有很多导航栏Demo
原文出处
这个特效可以仅借助CSS完成，当然js也可以实现。
首先需要制作横向导航栏，使用position绝对布局，此处不多赘述，借助伪元素，将下划线作用于每一个li标签。

li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-bottom: 2px solid #000;
}

接下来考虑动画第一步，下划线从一侧展开，使用绝对定位，设置li的宽度为0，hover的时候宽度由0->100%

li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  border-bottom: 2px solid #000;
}
li:hover::before {
    width: 100%;
}

而此时可以发现从第二个选项划至第一个的时候，第一个选项下划线回收方向是从右向左，可是我们需要它从左向右回收，这时候修改一下left值，设为100%，这样第一个选项的回收就好了。

li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 0;
  height: 100%;
  border-bottom: 2px solid #000;
}
li:hover::before {
  left: 0;
  width: 100%;
}

但是第一个好了第二个又出问题了，现在需要在不修改hover的li移动方向的情况下改变下一个移动方式。
使用**~**选择符
对于当前 hover 的 li ，其对应伪元素的下划线的定位是 left: 100%，而对于 li:hover ~ li::before，它们的定位是 left: 0。

li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 0;
  height: 100%;
  border-bottom: 2px solid #000;
  transition: 0.2s all linear;
}
li:hover::before {
  width: 100%;
  left: 0;
}
li:hover ~ li::before {
  left: 0;
}

至此这个特效就实现了，完整代码如下，但是我发现如果这个导航栏有背景色，不管什么颜色他都没有效果了，很奇怪，还有其实我不怎么能看懂这玩意，我现在觉得我能用上已经不错了

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        *{margin:0;padding:0;}
        a{text-decoration:none;color:#000;}
        ul{margin-top:100px;}
        li{float:left;list-style:none;padding:0 20px;cursor:pointer;position:relative;}
        li::before {
          content: "";
          position: absolute;
          top: 0;
          left: 100%;
          width: 0;
          height: 100%;
          border-bottom: 2px solid #4C7C9C;
          transition: 0.2s all linear;
          z-index:-1;
        }
        li:hover::before {
          width: 100%;
          left: 0;
        }
        li:hover ~ li::before {
          left: 0;
        }        
    </style>
    <body>
        <ul>
            <li><a href="http://www.baidu.com">11111</a></li>
            <li><a href="http://www.taobao.com">22222</a></li>
            <li><a href="http://www.sina.com">33333</a></li>
            <li><a href="http://www.jd.com">44444</a></li>
            <li><a href="http://www.360.com">55555</a></li>
        </ul>
    </body>
</html>

导航栏特效二

原文地址
效果图如下

CSS代码如下

#nav{margin:50px}
.box{width:0;height:0}
.btn{text-align:center;width:100px;height:50px;background-color:#663399}
.btn span{line-height:50px;color:#fff;font-size:16px;font-weight:700}
.btn:hover{background-color:#ffab8e}
.link_list{display:none;width:100px;background-color:#B6B684;text-align:center}
.btn:hover .link_list{display:block}
.link_list ul{margin:0;padding:0;list-style:none}
.link_list ul a{font-size:16px;text-decoration:none}
.link_list li:hover{color:#fff;background-color:brown}

Html代码如下

<div id="nav">
    <div class="box">
        <div class="btn">
            <span>今日热卖</span>
            <div class="link_list">
                <ul>
                    <li><a href="#"><span>超链接</span></a></li>
                    <li><a href="#"><span>超链接</span></a></li>
                    <li><a href="#"><span>超链接</span></a></li>
                    <li><a href="#"><span>超链接</span></a></li>
                    <li><a href="#"><span>超链接</span></a></li>
                    <li><a href="#"><span>超链接</span></a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

导航栏特效三

原文出自牛图库

相关素材图片我已经上传云存储，直接载入链接即可使用。
顺序分别为上下两个链接
紫色

http://my-web-image.oss-cn-beijing.aliyuncs.com/18-8-17/70132085.jpg
http://my-web-image.oss-cn-beijing.aliyuncs.com/18-8-17/69547621.jpg

绿色

http://my-web-image.oss-cn-beijing.aliyuncs.com/18-8-17/28643869.jpg
http://my-web-image.oss-cn-beijing.aliyuncs.com/18-8-17/79245850.jpg

红色

http://my-web-image.oss-cn-beijing.aliyuncs.com/18-8-17/91673116.jpg
http://my-web-image.oss-cn-beijing.aliyuncs.com/18-8-17/14933803.jpg

CSS代码如下，将相应图片的存储链接替换即可

.blue #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(http://my-web-image.oss-cn-beijing.aliyuncs.com/18-8-17/60056145.jpg) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
.blue #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.blue #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.blue #slatenav ul li a{display:block;float:left;color:#D5F1FF;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.blue #slatenav ul li a:hover,.blue #slatenav ul li a.current{color:#fff;background:transparent url(http://my-web-image.oss-cn-beijing.aliyuncs.com/18-8-17/46106443.jpg) no-repeat top center;}

Html代码如下

<div class="blue">
<div id="slatenav">
<ul>
<li><a href="" title="css menus" class="current">Home</a></li>
<li><a href="http://www.niutuku.com/" title="css menus">About Us</a></li>
<li><a href="http://www.niutuku.com/" title="css menus">Services</a></li>
<li><a href="http://www.niutuku.com/" title="css menus">Our Work</a></li>
<li><a href="http://www.niutuku.com/" title="css menus">Contact Us</a></li>
</ul>
</div>
</div>

导航栏特效四

出自百度经验，鼠标滑过效果是选项颜色改变，同时下方有指示图标，这个图标是一个背景图，可以更改的，你做出好看的指示图后直接替换background中url的地址即可，我用的箭头图片已经放到图床了，可以直接使用。
CSS代码如下

<style type="text/css">
		.nav ul li{
			margin:0px;
			padding:0px;
			list-style:none;
			float:left;
		}
		.nav ul{
			position:absolute;
			border-bottom:2px solid red;
			padding-left:30px;
			padding-right:30px;
		}
		.nav ul li a{
			font-size:24px;
			color:#000;
			text-decoration: none;
			padding:20px 	30px;
			float:left;
		}
		.nav ul li span{
			border-left:1px solid #ccc;
			height:25px;
			margin-top:22px;
			float:left;
		}
		.nav ul li a:hover{
			color:red;
			background:url("http://my-web-image.oss-cn-beijing.aliyuncs.com/18-8-27/3518495.jpg") no-repeat center 50px;
			background-size: 30px 20px;
		}
</style>

Html代码如下

<div class="nav">
		<ul>
			<li><a href="#">首页</a><span></span></li>
			<li><a href="#">一</a><span></span></li>
			<li><a href="#">二</a><span></span></li>
			<li><a href="#">三</a><span></span></li>
		</ul>
	</div>

导航栏特效五

使用CSS和Jqery实现可收缩的三级菜单，要想使用新需要将对应版本的jq文件复制到当前目录下。

CSS以及JQuery代码

<script>
ul,li{list-style: none;}
a:link,a:visited{text-decoration: none;}
.list{width: 210px;border-bottom:solid 1px #316a91;margin:40px auto 0 auto;}
.list ul li{background-color:#467ca2; border:solid 1px #316a91; border-bottom:0;}
.list ul li a{padding-left: 10px;color: #fff; font-size:12px; display: block; font-weight:bold; height:36px;line-height: 36px;position: relative;
}
.list ul li .inactive{ background:url(http://my-web-image.oss-cn-beijing.aliyuncs.com/18-8-23/97911310.jpg) no-repeat 184px center;}
.list ul li .inactives{background:url(http://my-web-image.oss-cn-beijing.aliyuncs.com/18-8-23/8662614.jpg) no-repeat 184px center;} 
.list ul li ul{display: none;}
.list ul li ul li { border-left:0; border-right:0; background-color:#6196bb; border-color:#467ca2;}
.list ul li ul li ul{display: none;}
.list ul li ul li a{ padding-left:20px;}
.list ul li ul li ul li { background-color:#d6e6f1; border-color:#6196bb; }
.last{ background-color:#d6e6f1; border-color:#6196bb; }
.list ul li ul li ul li a{ color:#316a91; padding-left:30px;}
</style>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('.inactive').click(function(){
		if($(this).siblings('ul').css('display')=='none'){
			$(this).parent('li').siblings('li').removeClass('inactives');
			$(this).addClass('inactives');
			$(this).siblings('ul').slideDown(100).children('li');
			if($(this).parents('li').siblings('li').children('ul').css('display')=='block'){
				$(this).parents('li').siblings('li').children('ul').parent('li').children('a').removeClass('inactives');
				$(this).parents('li').siblings('li').children('ul').slideUp(100);

			}
		}else{
			//控制自身变成+号
			$(this).removeClass('inactives');
			//控制自身菜单下子菜单隐藏
			$(this).siblings('ul').slideUp(100);
			//控制自身子菜单变成+号
			$(this).siblings('ul').children('li').children('ul').parent('li').children('a').addClass('inactives');
			//控制自身菜单下子菜单隐藏
			$(this).siblings('ul').children('li').children('ul').slideUp(100);

			//控制同级菜单只保持一个是展开的（-号显示）
			$(this).siblings('ul').children('li').children('a').removeClass('inactives');
		}
	})
});
</script>

Html代码

<div class="list">
	<ul class="yiji">
		<li><a href="#">中国美协章程</a></li>
		<li><a href="#" class="inactive">团体会员</a>
			<ul style="display: none">
				<li><a href="#" class="inactive active">美协机关</a>
					<ul>
						<li><a href="#">办公室</a></li>
						<li><a href="#">人事处</a></li>
						<li><a href="#">组联部</a></li>
						<li><a href="#">外联部</a></li>
						<li><a href="#">研究部</a></li>
						<li><a href="#">维权办</a></li>
					</ul>
				</li> 
				<li class="last"><a href="#">《美术》杂志社</a></li> 
			</ul>
		</li>
		<li><a href="#" class="inactive">组织机构</a>
			<ul style="display: none">
				<li><a href="#" class="inactive active">美协机关</a>
					<ul>
						<li><a href="#">办公室</a></li>
						<li><a href="#">人事处</a></li>
						<li><a href="#">组联部</a></li>
						<li><a href="#">外联部</a></li>
						<li><a href="#">研究部</a></li>
						<li><a href="#">维权办</a></li>
					</ul>
				</li> 
				<li><a href="#" class="inactive active">中国文联美术艺术中心</a>   
					<ul>
						<li><a href="#">综合部</a></li>
						<li><a href="#">大型活动部</a></li>
						<li><a href="#">展览部</a></li>
						<li><a href="#">艺委会工作部</a></li>
						<li><a href="#">信息资源部</a></li>
						<li><a href="#">双年展办公室</a></li>
					</ul>
				</li> 
				<li class="last"><a href="#">《美术》杂志社</a></li> 
			</ul>
		</li>
	</ul>
</div>

CSS列表特效六

这个常用于新闻、下载列表等列表的制作，很常见很简洁，使用时只需要修改位置距离即可。

CSS代码如下

ul, li { list-style:none;} 
a{ text-decoration:none; color:#3381BF;} 
a:hover{ text-decoration:underline;} 
#movie_rank { height:260px;} 
.box2 { border:1px solid #ADDFF2; text-align:left; overflow:hidden; color:#9C9C9C; text-align:left;} 
.box2 { margin-bottom:7px;} 
.box2 h2{ background:#EEF7FE; height:21px; line-height:21px; overflow-y:hidden; border-bottom:1px solid #ADDFF2; color:#1974C8; font-size:12px; padding:0px 8px;} 
.box2 h2 a.more{ float:right; text-decoration:underline; background:url() no-repeat 100% -123px; padding-right:8px; font-weight:normal;} 
.box2 h2 span{ margin-left:5px; font-weight:normal; color:#B9B7B8;} 
.box2 .inner{ padding:8px; line-height:18px; overflow:hidden; color:#3083C7;} 
.box2 a{ color:#3083C7; white-space:nowrap;} 
.rank_list{ line-height:14px; margin:auto; padding-top:5px;} 
.rank_list li{ height:14px; margin-bottom:8px; width:290px; padding-left:20px; white-space:nowrap; overflow:hidden; position:relative;} 
.rank_list li.top3 em{ background:#FFE4B7; border:1px solid #FFBB8B; color:#FF6800;} 
.rank_list em{ position:absolute; left:0; top:0; width:12px; height:12px; border:1px solid #B1E0F4; color:#6298CC; font-style:normal; font-size:10px; font-family:Arial; background:#E6F0FD; text-align:center; line-height:12px; overflow:hidden;} 
.rank_list span{ position:absolute; width:60px; color:#B7B7B7; text-align:right; height:14px; background:#fff; left:250px;} 
#movie_rank .rank_list span{ position:absolute; width:40px; color:#B7B7B7; text-align:right; height:14px; background:#fff; left:260px;}

Html代码如下

<p class="box2" id="movie_rank"> 
<h2><a href="#" class="more">更多</a>源码排行</h2> 
<p class="inner"> 
<ul class="rank_list"> 
<li class="top3"><em>1</em><a href="#">艾恩An-Upload 无组件上传类</a><span>21</span></li> 
<li class="top3"><em>2</em><a href="#">EasySlide jQuery图片轮显</a><span>528</span></li> 
<li class="top3"><em>3</em><a href="#">通用Ajax无刷新表彰验证类</a><span>232</span></li> 
<li><em>4</em><a href="#">支持中文的鼠标取词VB源码</a><span>74</span></li> 
<li><em>5</em><a href="#">通用Ajax无刷新表彰验证类</a><span>56</span></li> 
<li><em>6</em><a href="#">EasySlide jQuery图片轮显</a><span>85</span></li> 
<li><em>7</em><a href="#">支持中文的鼠标取词VB源码</a><span>25</span></li> 
<li><em>8</em><a href="#">多样式链接提示框组件</a><span>85</span></li> 
<li><em>9</em><a href="#">类似lightbox的无刷新图片显示插件</a><span>41</span></li> 
<li><em>10</em><a href="#">通用Ajax无刷新表彰验证类</a><span>62</span></li> 
</ul> 
</p> 
</p>

CSS好玩特效七

这个特效是抖动，有好玩使用又简单，非常棒！
点击此处，查看效果预览页面
使用时只需要链接.css文件后，在div中使用对应类即可，有多种抖动方式。
但是就很奇怪我链接了css没有用，等以后再说这个问题吧，现在先放一放。

OK,THANKS FOR READING.BYE BYE~

BluePROT

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML从入门到入土 - 导航栏和一点有趣的CSS实例

文章目录DIV标签阴影基本语法导航栏特效一导航栏特效二导航栏特效三导航栏特效四导航栏特效五CSS列表特效六CSS好玩特效七OK,THANKS FOR READING.BYE BYE~date: 2018-07-27 02:28:36HTML是静态的，可以利用CSS来制作各种特效，今天我在美化页面的时候想到可以制作各种页面效果，特别是很多动态特效，需要js或者css都可以实现。DIV标签阴影可以制作卡片效果，原文点击此处使用边框阴影box-shadow属性可以制作出光晕、浮雕等PS才能
复制链接

扫一扫