HTML+css实例代码片段
好啦,废话不多说,我们来看代码!!!
css彩虹状态栏:
#ztl{ background:linear-gradient(#F00,#F60,#FF0,#0F0,#00F,#90F); } /*彩虹状态栏*/
html手机端自适应网页:
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
这句话是自动设置缩放,然而,它并不能完全适应所有的手机,并且你在用浏览器手机模式调试的时候可能正常,但是换到真实的手机端其实是不正常的。所以我们还要进行改动。
自动页面刷新:
<meta http-equiv="Refresh" content="1";/> <!--页面每1秒刷新一次-->
css3 渐变:
CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。
语法:
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
css3圆角:
使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角"。
实例:
#rcorners1 { border-radius: 25px; background: #8AC007; padding: 20px; width: 200px; height: 150px; }
css3 border-radius-指定每个圆角:
如果你在 border-radius 属性中只指定一个值,那么将生成 4 个 圆角。
但是,如果你要在四个角上一一指定,可以使用以下规则:
- 四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。
- 三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角。
- 两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角。
- 一个值:四个圆角值相同。
以下3个实例:
1. 四个值 - border-radius: 15px 50px 30px 5px:
2. 三个值 - border-radius: 15px 50px 30px:
3. 两个值 - border-radius: 15px 50px:
css3 图片边框:
border-image 属性允许你指定一个图片作为边框!
实例:
div { border-image:url(border.png) 30 30 round; -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */ -o-border-image:url(border.png) 30 30 round; /* Opera */ }
css3文本效果
- 文字阴影
- 盒子阴影
- 文字溢出
- 自动换行
- 断字
css3文本阴影:
CSS3中,text-shadow属性适用于文本阴影。
您指定了水平阴影,垂直阴影,模糊的距离,以及阴影的颜色:
h1 { text-shadow: 5px 5px 5px #FF0000; }
CSS3 Text Overflow属性
CSS3文本溢出属性指定应向用户如何显示溢出内容。
实例:
p.test1 { white-space: nowrap; width: 200px; border: 1px solid #000000; overflow: hidden; text-overflow: clip; } p.test2 { white-space: nowrap; width: 200px; border: 1px solid #000000; overflow: hidden; text-overflow: ellipsis; }
CSS3的换行
CSS3中,自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字。
实例:
p {word-wrap:break-word;}
CSS3 单词拆分换行
CSS3 单词拆分换行属性指定换行规则。
实例:
p.test2 { word-break: break-all; }
css按钮
鼠标移动到按钮上后添加箭头标记实例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> <style> .button { display: inline-block; border-radius: 4px; background-color: #f4511e; border: none; color: #FFFFFF; text-align: center; font-size: 28px; padding: 20px; width: 200px; transition: all 0.5s; cursor: pointer; margin: 5px; } .button span { cursor: pointer; display: inline-block; position: relative; transition: 0.5s; } .button span:after { content: '»'; position: absolute; opacity: 0; top: 0; right: -20px; transition: 0.5s; } .button:hover span { padding-right: 25px; } .button:hover span:after { opacity: 1; right: 0; } </style> </head> <body> <h2>按钮动画</h2> <button class="button" style="vertical-align:middle"><span>Hover </span></button> </body> </html>
点击时添加“波纹”效果:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> <style> .button { position: relative; background-color: #4CAF50; border: none; font-size: 28px; color: #FFFFFF; padding: 20px; width: 200px; text-align: center; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; text-decoration: none; overflow: hidden; cursor: pointer; } .button:after { content: ""; background: #90EE90; display: block; position: absolute; padding-top: 300%; padding-left: 350%; margin-left: -20px!important; margin-top: -120%; opacity: 0; transition: all 0.8s } .button:active:after { padding: 0; margin: 0; opacity: 1; transition: 0s } </style> </head> <body> <h2>按钮动画 - 波纹效果</h2> <button class="button">Click Me</button> </body> </html>
点击时添加“压下”效果:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> <style> .button { display: inline-block; padding: 15px 25px; font-size: 24px; cursor: pointer; text-align: center; text-decoration: none; outline: none; color: #fff; background-color: #4CAF50; border: none; border-radius: 15px; box-shadow: 0 9px #999; } .button:hover {background-color: #3e8e41} .button:active { background-color: #3e8e41; box-shadow: 0 5px #666; transform: translateY(4px); } </style> </head> <body> <h2>按钮动画 - "按压效果"</h2> <button class="button">Click Me</button> </body> </html>