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属性box-shadow使用详细教程
Jan 21 HTML / CSS
CSS3感应鼠标的背景闪烁和图片缩放动画效果
May 14 HTML / CSS
纯CSS3代码实现文字描边
Apr 25 HTML / CSS
详解HTML5通讯录获取指定多个人的信息
Dec 20 HTML / CSS
使用Html5、CSS实现文字阴影效果
Jan 17 HTML / CSS
html5 canvas 使用示例
Oct 22 HTML / CSS
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
Jan 30 HTML / CSS
HTML5的download属性详细介绍和使用实例
Apr 23 HTML / CSS
HTML5 input placeholder 颜色修改示例
May 30 HTML / CSS
Canvas多边形绘制的实现方法
Aug 05 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
Jun 23 HTML / CSS
什么是css原子化,有什么用?
Apr 24 HTML / CSS
原生CSS实现文字无限轮播的通用方法
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
CSS3通过var()和calc()函数实现动画特效
CSS3实现模糊背景的三种效果示例
使用css样式设计一个简单的html登陆界面的实现
CSS实现漂亮的时钟动画效果的实例代码
CSS3点击按钮圆形进度打钩效果的实现代码
You might like
收音机另类DIY - 纸巾盒做外壳
2021/03/02 无线电
BBS(php &amp; mysql)完整版(五)
2006/10/09 PHP
用PHP进行MySQL删除记录操作代码
2008/06/07 PHP
一道求$b相对于$a的相对路径的php代码
2010/08/08 PHP
PHP数据类型的总结分析
2013/06/13 PHP
浅析PHP中的字符串编码转换(自动识别原编码)
2013/07/02 PHP
如何让CI框架支持service层
2014/10/29 PHP
PHP strip_tags保留多个HTML标签的方法
2016/05/22 PHP
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
js确定对象类型方法
2012/03/30 Javascript
JS下拉框内容左右移动效果的具体实现
2013/07/10 Javascript
JavaScript之IE的fireEvent方法详细解析
2013/11/20 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
JavaScript实现经典排序算法之选择排序
2016/12/28 Javascript
理解javascript中的闭包
2017/01/11 Javascript
JavaScript中三种常见的排序方法
2017/02/24 Javascript
JS实现列表页面隔行变色效果
2017/03/25 Javascript
vuex操作state对象的实例代码
2018/04/25 Javascript
nodejs基础之常用工具模块util用法分析
2018/12/26 NodeJs
[03:27]《辉夜杯》线下训练营 导师CU和海涛指点迷津
2015/10/23 DOTA
[00:48]DOTA2国际邀请赛公开赛报名开始 扫码开启逐梦之旅
2018/06/06 DOTA
Python 2.7.x 和 3.x 版本的重要区别小结
2014/11/28 Python
Python 自动化表单提交实例代码
2017/06/08 Python
Python实现破解猜数游戏算法示例
2017/09/25 Python
centos 安装python3.6环境并配置虚拟环境的详细教程
2018/02/22 Python
对python:循环定义多个变量的实例详解
2019/01/20 Python
Python实战购物车项目的实现参考
2019/02/20 Python
Python实现平行坐标图的两种方法小结
2019/07/04 Python
在SQLite-Python中实现返回、查询中文字段的方法
2019/07/17 Python
Keras实现DenseNet结构操作
2020/07/06 Python
利用CSS3的border-radius绘制太极及爱心图案示例
2016/05/17 HTML / CSS
澳大利亚墨尔本的在线时装店:LORETA
2018/09/14 全球购物
木马的传播途径主要有哪些
2016/04/08 面试题
远程研修随笔感言
2014/02/10 职场文书
2014年“四风”问题个人整改措施
2014/09/17 职场文书
个人贷款收入证明
2014/10/26 职场文书