首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

CSS3实现超酷的黑猫警长首页

Posted in HTML / CSS onApril 26, 2016

先看看效果图：

CSS3实现超酷的黑猫警长首页

具体代码：

XML/HTML Code复制内容到剪贴板
  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  4. <title>text-shadow</title>  
  5. <style type="text/css">  
  6. body {/*清除页边距，设计主色调*/   
  7.     padding: 0px;   
  8.     margin: 0px;   
  9.     color: #666;   
  10. }   
  11. #text-shadow-box {/*设计盒子外框样式*/   
  12.     position: relative;/*让内部的定位元素以这个框为参照物*/   
  13.     width: 598px;   
  14.     height: 406px;   
  15.     background: #666;   
  16.     overflow: hidden;/*禁止内容超过设定的区域*/   
  17.     border: #333 1px solid;   
  18. }   
  19. #text-shadow-box div.wall {/*设置背景墙样式*/   
  20.     position: absolute;   
  21.     width: 100%;   
  22.     top: 175px;   
  23.     left: 0px   
  24. }   
  25. #text {/*设计导航文本样式*/   
  26.     text-align: center;   
  27.     line-height: 0.5em;   
  28.     margin: 0px;   
  29.     font-family: helvetica, arial, sans-serif;   
  30.     height: 1px;   
  31.     color: #999;   
  32.     font-size: 80px;   
  33.     font-weight: bold;   
  34.     text-shadow: 5px -5px 16px #000;/*设计右上偏移的阴影，适当进行模糊处理，产生色晕效果，阴影色为深色，营造静谧的效果*/   
  35. }   
  36. div.wall div {/*设计前面挡风板样式*/   
  37.     position: absolute;   
  38.     width: 100%;   
  39.     height: 300px;   
  40.     top: 42px;   
  41.     left: 0px;   
  42.     background: #999;   
  43. }   
  44. #spotlight {/*设计覆盖在上面的探照灯效果图*/   
  45.     position: absolute;/*设计一个层，让其覆盖在页面上，并使其满窗口显示，通过前期设计好的一个探照灯背景来营造神秘效果*/   
  46.     width: 100%;   
  47.     height: 100%;   
  48.     top: 0px;   
  49.     left: 0px;   
  50.     background: url(images/spotlight.png) center -300px;   
  51. }   
  52. #spotlight a {   
  53.     color:#ccc;   
  54.     text-decoration:none;   
  55.     position:absolute;   
  56.     left:47%;   
  57.     top:56%;   
  58.     float:left;   
  59. }   
  60. a img { border:none; }   
  61. </style>  
  62. </head>  
  63.   
  64. <body>  
  65. <!--本案例的结构外套-->  
  66. <div id="text-shadow-box">  
  67.     <!--墙体外结构-->  
  68.     <div class="wall">  
  69.         <p id="text">黑猫警长</p>  
  70.         <div></div>  
  71.     </div>  
  72.      <!--外罩，通过他可以为页面覆盖一层桌纸，添加特殊的艺术效果-->  
  73.     <div id="spotlight"><a href="index.htm"><img src="images/cat1.png" /></a></div>  
  74. </div>  
  75. </body>  
  76. </html>  

以上就是本文的全部内容，希望对大家的学习有所帮助。

CSS3实现超酷的黑猫警长首页

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
CSS3制作ajax loader icon实现思路及代码
Aug 25 HTML / CSS
css3中检验表单的required,focus,valid和invalid样式
Feb 21 HTML / CSS
html5+css3之CSS中的布局与Header的实现
Nov 21 HTML / CSS
一款基于css3和jquery实现的动画显示弹出层按钮教程
Jan 04 HTML / CSS
使用HTML5捕捉音频与视频信息概述及实例
Aug 22 HTML / CSS
HTML5中语义化 b 和 i 标签
Oct 17 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
Jan 09 HTML / CSS
HTML5中判断用户是否正在浏览页面的方法
May 03 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
May 07 HTML / CSS
html5简介及新增功能介绍
May 18 HTML / CSS
Html5饼图绘制实现统计图的方法
Aug 05 HTML / CSS
详解CSS伪元素的妙用单标签之美
May 25 HTML / CSS
CSS3实现千变万化的文字阴影text-shadow效果设计
Apr 26 #HTML / CSS
什么是CSS3 HSLA色彩模式？HSLA模拟渐变色条
Apr 26 #HTML / CSS
CSS3 RGBA色彩模式使用实例讲解
Apr 26 #HTML / CSS
CSS3不透明度实例讲解
Apr 26 #HTML / CSS
CSS3弹性盒模型开发笔记（二）
Apr 26 #HTML / CSS
CSS3色彩模式有哪些？CSS3 HSL色彩模式的定义
Apr 26 #HTML / CSS
纯CSS3代码实现文字描边
Apr 25 #HTML / CSS
活动总结(790) 感谢信(72) 倡议书(159) 决心书(42) 责任书(145) 保证书(97) 评语(336) 寄语(276) 建议书(203) 请假条(31)
You might like
PHP面向对象的使用教程 简单数据库连接
2006/11/25 PHP
php实现的支持断点续传的文件下载类
2014/09/23 PHP
Yii2 如何在modules中添加验证码的方法
2017/06/19 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
PHP PDOStatement::columnCount讲解
2019/01/30 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
PHP基于进程控制函数实现多线程
2020/12/09 PHP
用jscript实现列出安装的软件列表
2007/06/18 Javascript
js 跨域和ajax 跨域问题小结
2009/07/01 Javascript
HTA版JSMin（省略修饰语若干）基于javascript语言编写
2009/12/24 Javascript
javascript中substr,substring,slice.splice的区别说明
2010/11/25 Javascript
javascript数组输出的两种方式
2015/01/13 Javascript
js与jquery回车提交的方法
2015/02/03 Javascript
JavaScript中的parse()方法使用简介
2015/06/12 Javascript
Node.js 条形码识别程序构建思路详解
2016/02/14 Javascript
Dojo获取下拉框的文本和值实例代码
2016/05/27 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
2016/09/14 Javascript
详解js中Json的语法与格式
2016/11/22 Javascript
javascript删除html标签函数cIsHTML
2017/01/09 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
2017/04/13 Javascript
BootStrap中Table隐藏后显示问题的实现代码
2017/08/31 Javascript
解决koa2 ctx.render is not a function报错问题
2018/08/07 Javascript
vue element table 表格请求后台排序的方法
2018/09/28 Javascript
vue中@change兼容问题详解
2019/10/25 Javascript
vue data恢复初始化数据的实现方法
2019/10/31 Javascript
Vue退出登录时清空缓存的实现
2019/11/12 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
2020/01/19 Javascript
[50:11]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第三场
2018/04/09 DOTA
windows系统中python使用rar命令压缩多个文件夹示例
2014/05/06 Python
python使用pymysql实现操作mysql
2016/09/13 Python
浅谈Django中的数据库模型类-models.py(一对一的关系)
2018/05/30 Python
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
Python字典常见操作实例小结【定义、添加、删除、遍历】
2019/10/25 Python
澳大利亚购买太阳镜和眼镜网站：Glamoureyes
2020/09/22 全球购物
golang elasticsearch Client的使用详解
2021/05/05 Golang
Java实现房屋出租系统详解
2021/10/05 Java/Android