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)可以让你在两个或多个指定的颜色之间显示平稳的过渡。
语法:
1 | background-image : linear-gradient(direction, color-stop 1 , color-stop 2 , ...); |
css3圆角:
使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角"。
实例:
1 2 3 4 5 6 7 | #rcorners 1 { 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 属性允许你指定一个图片作为边框!
实例:
1 2 3 4 5 6 | 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属性适用于文本阴影。
您指定了水平阴影,垂直阴影,模糊的距离,以及阴影的颜色:
1 2 3 4 | h 1 { text-shadow : 5px 5px 5px #FF0000 ; } |
CSS3 Text Overflow属性
CSS3文本溢出属性指定应向用户如何显示溢出内容。
实例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | p.test 1 { white-space : nowrap ; width : 200px ; border : 1px solid #000000 ; overflow : hidden ; text- overflow : clip; } p.test 2 { white-space : nowrap ; width : 200px ; border : 1px solid #000000 ; overflow : hidden ; text- overflow : ellipsis; } |
CSS3的换行
CSS3中,自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字。
实例:
1 | p {word-wrap:break-word;} |
CSS3 单词拆分换行
CSS3 单词拆分换行属性指定换行规则。
实例:
1 2 3 | p.test 2 { word-break: break- all ; } |
css按钮
鼠标移动到按钮上后添加箭头标记实例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | <! 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 > |
点击时添加“波纹”效果:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | <! 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 > |
点击时添加“压下”效果:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <! 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 > |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步