Html分层的box-shadow效果的示例代码


Posted in HTML / CSS onMarch 30, 2021

Html分层的box-shadow效果的示例代码

先上图:今天我们做这个效果!

Html分层的box-shadow效果的示例代码

其实也没什么,就是分享一下大家在做网页的时候经常会遇到要做导航栏之类的,可能会觉得自己的导航栏总是少了点立体的感觉,今天我们就来看看!

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style>
			body{
				margin: 0;
			}
			.clearfix {
			  overflow: auto;
			}
			.shadow_box{
				box-shadow: 0px 3px 10px 1px #888888;
			}
			div.sticky{
				
				position: sticky;
				top: 0;
				
				background:azure;
				text-align: center;
				
				
			}
			.img1{
				float: left;
				clear: both;
				margin-left:100px;
				opacity: 0.8;
				overflow: auto;
				
			}
			
			ul{
				list-style-type: 0;
				margin: 0;
				padding: 0;
				width: 7%;
				height: 100%;
				background-color:rgb(147, 171, 235) ;
				position:fixed;
				overflow: auto;
				border-radius: 25px;
				
				
			}
			li a{
				display: block;
				color:#000;
				padding: 8px 16px;
				text-decoration: none;
				font-family:"黑体";
				
			}
			li:hover{
				background-color: #555;
				color: white;
				
			}
			
		</style>
		<title>XR官网</title>
	</head>
	
	
	<body>
		
		<div class="sticky clearfix shadow_box">
			<img class="img1" src="img/4.png" width="60px" height="60px "  />
			
		</div>
		<div>
			<ul>
				<li><a href="index.html">核心科技</a></li>
				<li><a href="index.html">党政板块</a></li>
				<li><a href="index.html">经营情况</a></li>
				<li><a href="index.html">未来发展</a></li>
				<li><a href="index.html">联系我们</a></li>
			</ul>
		</div>
		<div style="padding-bottom: 2000px;"></div>
		
	</body>
</html>

直接上完整代码,这也是大家最喜欢的方式,不磨磨唧唧了,我们主要看这个
 

Html分层的box-shadow效果的示例代码

这就是阴影效果的“罪魁祸首”,因为我定义了box-shadow,然后指定了相关的参数,就可以设置成这样啦,有朋友问,你这个参数啥意思,我怎么知道?没关系,我来用一张图告诉你!

Html分层的box-shadow效果的示例代码

这就是box-shadow的所有参数。相信你可以设置好的,如果你还是不太会,可以给我留言,我帮你一起设置!感谢支持!

到此这篇关于Html分层的box-shadow效果的文章就介绍到这了,更多相关HTML分层box-shadow内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
利用CSS3实现毛玻璃效果示例源码
Sep 25 HTML / CSS
不同浏览器对CSS3和HTML5的支持状况
Oct 31 HTML / CSS
css3圆角边框和边框阴影示例
May 05 HTML / CSS
浅析与CSS3的loading动画加载相关的transition优化
May 18 HTML / CSS
利用CSS3实现文本框的清除按钮相关的一些效果
Jun 23 HTML / CSS
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
Jun 01 HTML / CSS
纯HTML5+CSS3制作生日蛋糕代码
Nov 16 HTML / CSS
HTML5 canvas实现雪花飘落特效
Mar 08 HTML / CSS
用HTML5实现鼠标滚轮事件放大缩小图片的功能
Jun 25 HTML / CSS
在HTML5中使用MathML数学公式的简单讲解
Feb 19 HTML / CSS
微信小程序“圣诞帽”的实现思路详解
Dec 28 HTML / CSS
css实现文章分割线样式的多种方法总结
Apr 21 HTML / CSS
原生CSS实现文字无限轮播的通用方法
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
CSS3通过var()和calc()函数实现动画特效
CSS3实现模糊背景的三种效果示例
使用css样式设计一个简单的html登陆界面的实现
CSS实现漂亮的时钟动画效果的实例代码
CSS3点击按钮圆形进度打钩效果的实现代码
You might like
php设计模式 Facade(外观模式)
2011/06/26 PHP
PHP的魔术常量__METHOD__简介
2014/07/08 PHP
php商品对比功能代码分享
2015/09/24 PHP
php 读取输出其他文件的实现方法
2016/07/26 PHP
事件绑定之小测试  onclick &amp;&amp; addEventListener
2011/07/31 Javascript
广泛收集的jQuery拖放插件集合
2012/04/09 Javascript
js实现从数组里随机获取元素
2015/01/12 Javascript
cookie的secure属性详解
2015/04/08 Javascript
JQuery显示隐藏页面元素的方法总结
2015/04/16 Javascript
使用JavaScript制作一个简单的计数器的方法
2015/07/07 Javascript
js捕捉键盘事件和按键键值的方法
2016/10/10 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
基于JS递归函数细化认识及实用实例(推荐)
2017/08/07 Javascript
详解async/await 异步应用的常用场景
2019/05/13 Javascript
[13:21]DOTA2国际邀请赛采访专栏:RSnake战队国士无双,Fnatic.Fly
2013/08/06 DOTA
[42:04]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第一局
2016/03/03 DOTA
django实现前后台交互实例
2017/08/07 Python
Python设计模式之命令模式简单示例
2018/01/10 Python
Python基础学习之类与实例基本用法与注意事项详解
2019/06/17 Python
python实现人机五子棋
2020/03/25 Python
Anaconda+vscode+pytorch环境搭建过程详解
2020/05/25 Python
用python实现一个简单计算器(完整DEMO)
2020/10/14 Python
python FTP编程基础入门
2021/02/27 Python
马来西亚在线时尚女装商店:KEI MAG
2017/09/28 全球购物
Move Free官方海外旗舰店:美国骨关节健康专业品牌
2017/12/06 全球购物
ParcelABC西班牙:包裹运送和快递服务
2019/12/24 全球购物
日本最大的购物网站乐天市场国际版:Rakuten Global Market(支持中文)
2020/02/03 全球购物
求职简历中个人的自我评价
2013/12/01 职场文书
化学专业自荐信
2014/05/28 职场文书
警示教育片观后感
2015/06/17 职场文书
大学优秀学生主要事迹材料
2015/11/04 职场文书
导游词之香港-太平山顶
2019/10/18 职场文书
竞选稿之小学班干部
2019/10/31 职场文书
CSS实现多个元素在盒子内两端对齐效果
2021/03/30 HTML / CSS
golang语言指针操作
2022/04/14 Golang
MySQL数据库 任意ip连接方法
2022/05/20 MySQL