CSS3实现超酷的黑猫警长首页
作者：互联网
2026-03-30
HTML教程
先看看效果图：
具体代码：
XML/HTML Code复制内容到剪贴板- <html>
- <head>
- <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
- <title>text-shadowtitle>
- <styletype="text/css">
- body{/*清除页边距，设计主色调*/
- padding:0px;
- margin:0px;
- color:#666;
- }
- #text-shadow-box{/*设计盒子外框样式*/
- position:relative;/*让内部的定位元素以这个框为参照物*/
- width:598px;
- height:406px;
- background:#666;
- overflow:hidden;/*禁止内容超过设定的区域*/
- border:#3331pxsolid;
- }
- #text-shadow-boxdiv.wall{/*设置背景墙样式*/
- position:absolute;
- width:100%;
- top:175px;
- left:0px
- }
- #text{/*设计导航文本样式*/
- text-align:center;
- line-height:0.5em;
- margin:0px;
- font-family:helvetica,arial,sans-serif;
- height:1px;
- color:#999;
- font-size:80px;
- font-weight:bold;
- text-shadow:5px-5px16px#000;/*设计右上偏移的阴影，适当进行模糊处理，产生色晕效果，阴影色为深色，营造静谧的效果*/
- }
- div.walldiv{/*设计前面挡风板样式*/
- position:absolute;
- width:100%;
- height:300px;
- top:42px;
- left:0px;
- background:#999;
- }
- #spotlight{/*设计覆盖在上面的探照灯效果图*/
- position:absolute;/*设计一个层，让其覆盖在页面上，并使其满窗口显示，通过前期设计好的一个探照灯背景来营造神秘效果*/
- width:100%;
- height:100%;
- top:0px;
- left:0px;
- background:url(images/spotlight.png)center-300px;
- }
- #spotlighta{
- color:#ccc;
- text-decoration:none;
- position:absolute;
- left:47%;
- top:56%;
- float:left;
- }
- aimg{border:none;}
- style>
- head>
- <body>
- <divid="text-shadow-box">
- <divclass="wall">
- <pid="text">黑猫警长p>
- <div>div>
- div>
- <divid="spotlight"><ahref="index.htm"><imgsrc="images/cat1.png"/>a>div>
- div>
- body>
- html>
以上就是本文的全部内容，希望对大家的学习有所帮助。
相关标签:
黑猫警长
相关推荐
专题
+ 收藏
+ 收藏
+ 收藏
+ 收藏
+ 收藏
最新数据
相关文章
CSS3色彩模式有哪些？CSS3 HSL色彩模式的定义
03/30
基于CSS实现元素融合效果
03/30
css动画效果之animation的常用样式
03/30
CSS中使用text-align、margin：0 auto居中的示例代码
03/30
解决line-height=height元素高度但是文字并没有垂直居中的问题
03/30
CSS八种让人眼前一亮的HOVER效果的示例代码
03/30
flex是什么及flex布局语法教程详解
03/30
CSS 实现内容高度不够的时候底部(footer)自动贴底
03/30
CSS中flex和inline-flex的区别详解
03/30
利用纯css做一个下拉菜单功能的示例代码
03/30
AI精选
