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绘制出各种几何图形
Aug 17 HTML / CSS
举例详解CSS3中的Transition
Jul 15 HTML / CSS
CSS3 linear-gradient线性渐变生成加号和减号的方法
Nov 21 HTML / CSS
css3实现蒙版弹幕功能
Jun 18 HTML / CSS
Html5中的桌面通知Notification的实现
Sep 25 HTML / CSS
Canvas与Image互相转换示例代码
Aug 09 HTML / CSS
详解HTML5中的元素与元素
Aug 17 HTML / CSS
HTML5新增form控件和表单属性实例代码详解
May 15 HTML / CSS
前后端结合实现amazeUI分页效果
Aug 21 HTML / CSS
Html5移动端div固定到底部实现底部导航条的几种方式
Mar 09 HTML / CSS
基于CSS3画一个iPhone
Apr 21 HTML / CSS
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
Dec 06 HTML / CSS
原生CSS实现文字无限轮播的通用方法
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
CSS3通过var()和calc()函数实现动画特效
CSS3实现模糊背景的三种效果示例
使用css样式设计一个简单的html登陆界面的实现
CSS实现漂亮的时钟动画效果的实例代码
CSS3点击按钮圆形进度打钩效果的实现代码
You might like
PHP 一个随机字符串生成代码
2010/05/26 PHP
php下正则来匹配dede模板标签的代码
2010/08/21 PHP
PHP 中 DOMDocument保存xml时中文出现乱码问题的解决方案
2016/09/19 PHP
Yii 2中的load()和save()示例详解
2017/08/03 PHP
PHP两个n位的二进制整数相加问题的解决
2018/08/26 PHP
PHP 命名空间和自动加载原理与用法实例分析
2020/04/29 PHP
表单的焦点顺序tabindex和对应enter键提交
2013/01/04 Javascript
Extjs单独定义各组件的实例代码
2013/06/25 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
2015/09/19 Javascript
浅析AngularJS Filter用法
2015/12/28 Javascript
js简单判断移动端系统的方法
2016/02/25 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
2016/06/12 Javascript
利用Angular.js限制textarea输入的字数
2016/10/20 Javascript
微信小程序实现折叠与展开文章功能
2018/06/12 Javascript
vue-cli2 构建速度优化的实现方法
2019/01/08 Javascript
实例分析编写vue组件方法
2019/02/12 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
2019/09/11 Javascript
[05:02]2014DOTA2 TI中国区预选赛精彩TOPPLAY第三弹
2014/06/25 DOTA
python实现简单爬虫功能的示例
2016/10/24 Python
利用python生成一个导出数据库的bat脚本文件的方法
2016/12/30 Python
Python如何实现远程方法调用
2020/08/07 Python
python 密码学示例——理解哈希(Hash)算法
2020/09/21 Python
HTML5 video 视频标签使用介绍
2014/02/03 HTML / CSS
如何提高SQL Server的安全性
2016/07/25 面试题
财务会计应届生求职信
2013/11/24 职场文书
推广普通话演讲稿
2014/05/23 职场文书
企业贷款委托书格式
2014/09/12 职场文书
个人遵守党的政治纪律情况对照检查材料思想汇报
2014/09/25 职场文书
员工工作及收入证明
2014/10/28 职场文书
班主任工作总结范文
2015/08/13 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书
2019员工保密协议书(3篇)
2019/09/23 职场文书
SpringBoot 集成Redis 过程
2021/06/02 Redis
python图像处理基本操作总结(PIL库、Matplotlib及Numpy)
2021/06/08 Python
OpenCV-Python实现轮廓拟合
2021/06/08 Python