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 相关文章推荐
如何用border-image实现文字气泡边框的示例代码
Jan 21 HTML / CSS
html5中localStorage本地存储的简单使用
Jun 16 HTML / CSS
HTML5 File接口在web页面上使用文件下载
Feb 27 HTML / CSS
HTML5 device access 设备访问详解
May 24 HTML / CSS
20佳惊艳的HTML5应用程序示例分享
May 03 HTML / CSS
html5-websocket基于远程方法调用的数据交互实现
Dec 04 HTML / CSS
使用html5制作loading图的示例
Apr 14 HTML / CSS
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
Jan 27 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
Mar 02 HTML / CSS
Html5之webcoekt播放JPEG图片流
Sep 22 HTML / CSS
CSS3常见动画的实现方式
Apr 14 HTML / CSS
HTML 里 img 元素的 src 和 srcset 属性的区别详解
May 21 HTML / CSS
原生CSS实现文字无限轮播的通用方法
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
CSS3通过var()和calc()函数实现动画特效
CSS3实现模糊背景的三种效果示例
使用css样式设计一个简单的html登陆界面的实现
CSS实现漂亮的时钟动画效果的实例代码
CSS3点击按钮圆形进度打钩效果的实现代码
You might like
PHP集成FCK的函数代码
2008/09/27 PHP
php面象对象数据库操作类实例
2014/12/02 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
通过JS 获取Mouse Position(鼠标坐标)的代码
2009/09/21 Javascript
js中更短的 Array 类型转换
2011/10/30 Javascript
Nodejs极简入门教程(二):定时器
2014/10/25 NodeJs
jQuery插件slides实现无缝轮播图特效
2015/04/17 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
2015/11/30 Javascript
Bootstrap按钮组简单实现代码
2017/03/06 Javascript
mpvue项目中使用第三方UI组件库的方法
2018/09/30 Javascript
Vue 框架之动态绑定 css 样式实例分析
2018/11/14 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
2019/02/22 Javascript
vue中get请求如何传递数组参数的方法示例
2019/11/08 Javascript
小程序如何定位所在城市及发起周边搜索
2020/02/11 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
JavaScript实现横版菜单栏
2020/03/17 Javascript
Python实现的检测网站挂马程序
2014/11/30 Python
Python中类的定义、继承及使用对象实例详解
2015/04/30 Python
用python写个自动SSH登录远程服务器的小工具(实例)
2017/06/17 Python
详解Python import方法引入模块的实例
2017/08/02 Python
Pycharm 设置自定义背景颜色的图文教程
2018/05/23 Python
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
python PIL和CV对 图片的读取,显示,裁剪,保存实现方法
2019/08/07 Python
pygame用blit()实现动画效果的示例代码
2020/05/28 Python
keras-siamese用自己的数据集实现详解
2020/06/10 Python
html5新增的定时器requestAnimationFrame实现进度条功能
2018/12/13 HTML / CSS
银行会计职员个人的自我评价
2013/09/29 职场文书
绩效专员岗位职责
2013/12/02 职场文书
经典安踏广告词
2014/03/21 职场文书
学生安全责任书
2014/04/15 职场文书
班组长安全工作职责
2014/07/15 职场文书
幼儿园大班开学寄语
2014/08/02 职场文书
公安机关正风肃纪剖析材料
2014/10/10 职场文书
吃空饷专项整治方案
2014/10/27 职场文书
pytorch损失反向传播后梯度为none的问题
2021/05/12 Python
Python 操作pdf pdfplumber读取PDF写入Exce
2022/08/14 Python