中国红客联盟国际站联盟介绍联盟架构联盟文化联盟事记联盟邮箱购买特权捐助我们收藏本站
请登录
立即注册
首页Portal
资讯
圈子Group
贡献榜
关于我们
红客起源事记
搜索
当前位置:»交流社区 › 中国红客联盟【技术分享区】 › 编程代码交流 › Html分层的box-shadow效果的示例代码

[前端] Html分层的box-shadow效果的示例代码

1897 0
Honkers 2022-10-19 16:12:05 | 显示全部楼层 |阅读模式


先上图：今天我们做这个效果！


其实也没什么，就是分享一下大家在做网页的时候经常会遇到要做导航栏之类的，可能会觉得自己的导航栏总是少了点立体的感觉，今天我们就来看看！
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8" />
  5.                 <style>
  6.                         body{
  7.                                 margin: 0;
  8.                         }
  9.                         .clearfix {
  10.                           overflow: auto;
  11.                         }
  12.                         .shadow_box{
  13.                                 box-shadow: 0px 3px 10px 1px #888888;
  14.                         }
  15.                         div.sticky{
  17.                                 position: sticky;
  18.                                 top: 0;
  20.                                 background:azure;
  21.                                 text-align: center;
  23.                         }
  24.                         .img1{
  25.                                 float: left;
  26.                                 clear: both;
  27.                                 margin-left:100px;
  28.                                 opacity: 0.8;
  29.                                 overflow: auto;
  31.                         }
  33.                         ul{
  34.                                 list-style-type: 0;
  35.                                 margin: 0;
  36.                                 padding: 0;
  37.                                 width: 7%;
  38.                                 height: 100%;
  39.                                 background-color:rgb(147, 171, 235) ;
  40.                                 position:fixed;
  41.                                 overflow: auto;
  42.                                 border-radius: 25px;
  44.                         }
  45.                         li a{
  46.                                 display: block;
  47.                                 color:#000;
  48.                                 padding: 8px 16px;
  49.                                 text-decoration: none;
  50.                                 font-family:"黑体";
  52.                         }
  53.                         li:hover{
  54.                                 background-color: #555;
  55.                                 color: white;
  57.                         }
  59.                 </style>
  60.                 <title>XR官网</title>
  61.         </head>
  63.         <body>
  65.                 <div class="sticky clearfix shadow_box">
  66.                         <img class="img1" src="img/4.png" width="60px" height="60px "  />
  68.                 </div>
  69.                 <div>
  70.                         <ul>
  71.                                 <li><a href="index.html">核心科技</a></li>
  72.                                 <li><a href="index.html">党政板块</a></li>
  73.                                 <li><a href="index.html">经营情况</a></li>
  74.                                 <li><a href="index.html">未来发展</a></li>
  75.                                 <li><a href="index.html">联系我们</a></li>
  76.                         </ul>
  77.                 </div>
  78.                 <div style="padding-bottom: 2000px;"></div>
  80.         </body>
  81. </html>
复制代码
直接上完整代码，这也是大家最喜欢的方式，不磨磨唧唧了，我们主要看这个



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


这就是box-shadow的所有参数。相信你可以设置好的，如果你还是不太会，可以给我留言，我帮你一起设置！感谢支持！
到此这篇关于Html分层的box-shadow效果的文章就介绍到这了,更多相关HTML分层box-shadow内容请搜索中国红客联盟以前的文章或继续浏览下面的相关文章，希望大家以后多多支持中国红客联盟！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

×
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Honkers

特级红客

关注
  • 3147
    主题
  • 36
    粉丝
  • 0
    关注
这家伙很懒，什么都没留下！

中国红客联盟公众号

联系站长QQ：5520533

admin@chnhonker.com
Copyright © 2001-2025 Discuz Team. Powered by Discuz! X3.5 ( 粤ICP备13060014号 )|天天打卡 本站已运行天