HTML5与CSS3经典代码
1)全屏背景
body { background: url(../img/pic.jpg) no-repeat center center fixed; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; }
2)图片缩放居中
.div{width:100px;height:100px;position:relative;}
.div img{max-height: 100%; width: auto; max-width: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} /*头像一般左右撑开*/
.div{width:100px;height:100px;position:relative;border-radius:50%; overflow:hidden;}
.div img{width: 100%; height: auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
3)flex等比例布局
/*垂直等比例*/
#flex { display:flex; }
#flex > div { flex:; } /*横向等比例*/
#flex { display: flex; flex-direction: row; }
#flex > div { flex:; }
4)强制换行与不换行
/*强制不换行,文本溢出显示省略号*/
div { width: 300px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } /*多行文本溢出显示省略号*/
div { display: -webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:; overflow: hidden; } /*强制英文换行,以字母作为换行依据*/
div { word-break:break-all; } /*强制英文换行,以单词作为换行依据*/
div { word-wrap:break-word; }
5)圆与三角
A)正圆
div {width: 100px; height: 100px; border-radius: 50%;}
B)三角(本例接近正三角)
div1 { border: transparent solid 100px; border-top-width: 0px; border-bottom: red solid 173px; width:; } /*三角向上*/
div2 { border: transparent solid 100px; border-bottom-width: 0px; border-top: blue solid 173px; width:; }/*三角向下*/
div3 { border: transparent solid 100px; border-left-width: 0px; border-right: red solid 173px; width:; } /*三角向左*/
div4 { border: transparent solid 100px; border-right-width: 0px; border-left: blue solid 173px; width:; }/*三角向右*/
6)1px的点
div { height: 1px; width: 1px; line-height: 1px; overflow: hidden;}
7)上标与下标,高亮
<sup>上标</sup><sub>下标</sub><mark>高亮</mark>
8)首字符样式
div:first-letter { font-size: 30px; color:red;}
9)动画效果(规定时间内按要求变化)
<div class="dong">我的英文名字叫:Yimi</div>
.dong {animation: act_id 5s infinite; -webkit-animation: act_id 5s infinite; animation-timing-function: linear;}
A)定义起始:顺滑360度自转
@keyframes act_id {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@-webkit-keyframes act_id{同上}
B)定义间隔:顺滑左右跳动
@keyframes act_id {
0% { margin-left: 0px; }
10% { margin-left: 200px; }
40% { margin-left: 220px; }
50% { margin-left: 400px; }
60% { margin-left: 220px; }
90% { margin-left: 200px; }
100% { margin-left: 0px; }
}
@-webkit-keyframes act_id{同上}
10)简单的图标(更多图标,请访问:http://nicolasgallagher.com/pure-css-gui-icons/demo/#non)
A)电话(三块合一)
#phone { width: 15px; height: 15px; border-left: 2px solid red; border-radius: 20%; position: relative; -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o-transform: rotate(-30deg); transform: rotate(-30deg); margin-left: 2px; display: inline-block; }
#phone:before, #phone1:after { width: 3px; height: 4px; background: red; border-radius: 20%; content: ""; position: absolute; }
#phone:before { left: 0px; top: 0px; }
#phone:after { left: 0px; top: 11px; } <div id="phone"></div>
B)电话(一块搞定)
#phone { position: relative; }
#phone:before { content: ""; position: absolute; left: 5px; width: 4px; height: 8px; border-width: 5px 0 5px 2px; border-style: solid; border-color: #c55500; background: transparent; -webkit-border-radius: 3px 0px 0px 3px / 5px 0px 0px 5px; -moz-border-radius: 3px 0px 0px 3px / 5px 0px 0px 5px; border-radius: 3px 0px 0px 3px / 5px 0px 0px 5px; -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o-transform: rotate(-30deg); transform: rotate(-30deg); } <div id="phone"></div>
C)展开与收缩
#plus,#less { width: 9px; height: 9px; border: 1px silver solid; margin: 10px; position: relative;display: inline-block; }
#plus:before { content: '+'; color: silver; position: absolute; top: -3px; left: 0px; height:15px; line-height:15px;}
#less:before { content: '-'; color: silver; position: absolute; top: -5px; left: 1px; height:15px; line-height:15px;} <div id="less"></div>
<div id="plus"></div>
11)背景色渐变(向上,向右,向下,向左)
.bg{background: linear-gradient(to top, #333, #ccc);
background: -webkit-repeating-linear-gradient(to right, #333, #ccc);
background: -o-repeating-linear-gradient(to bottom, #333, #ccc);
background: -moz-repeating-linear-gradient(to left, #333, #ccc);}
12)放大(缩小)效果
div{ transform: scale(1.2); } --1.2倍
13)元素倾斜
divX{-webkit-transform: skewX(45deg); transform: skewX(45deg);}
divY{-webkit-transform: skewY(45deg); transform: skewY(45deg);}
divXY{-webkit-transform: skew(45deg,45deg); transform: skew(45deg,45deg);}
14)边框不计算高度
div{border: 1px solid #000;box-sizing: border-box;}
15)页面横屏
html { width: 100vmin; height: 100vmax; }
body { width: 100vmin; height: 100vmax; }
div { width: 100vmax; height: 100vmin; transform-origin: top left; transform: rotate(90deg) translate(0,-100vmin); }
16)content内文字换行
div:empty:before{
content: "暂无数据\a您可以去首页添加";
white-space: pre;
}
17)棋盘(类似黑白相间)
div{
background:#fafafa;
background-image:linear-gradient(45deg,rgba(0,0,0,.2) 25%,transparent 0,transparent 75%,rgba(0,0,0,.2) 0),linear-gradient(45deg,rgba(0,0,0,.2) 25%,transparent 0,transparent 75%,rgba(0,0,0,.2) 0);
background-size:20px 20px;
background-position:0 0,10px 10px;
}
HTML5与CSS3经典代码的更多相关文章
- HTML5 CSS3 经典案例:无插件拖拽上传图片 (支持预览与批量) (二)
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/31513065 上一篇已经实现了这个项目的整体的HTML和CSS: HTML5 C ...
- HTML5&CSS3经典动态表格
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列十七】
<Web 前端开发精华文章推荐>2013年第五期(总第十七期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...
- Web 开发精华文章集锦(jQuery、HTML5、CSS3)【系列二十七】
<Web 前端开发精华文章推荐>2014年第6期(总第27期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...
- Web 前端开发精华文章推荐(HTML5、CSS3、jQuery)【系列二十二】
<Web 前端开发精华文章推荐>2014年第一期(总第二十二期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML ...
- Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列十八】
<Web 前端开发精华文章推荐>2013年第六期(总第十八期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...
- 《HTML5与CSS3基础教程(第8版)》
<HTML5与CSS3基础教程(第8版)> 基本信息 原书名:HTML and CSS:visual quickstart guide 作者: (美)Elizabeth Castro ...
- HTML5与CSS3基础教程(第8版) PDF扫描版
<HTML5与CSS3基础教程(第8版)>自第1版至今,一直是讲解HTML和CSS入门知识的经典畅销书,全面系统地阐述HTML5和CSS3基础知识以及实际运用技术,通过大量实例深入浅出地分 ...
- Web 前端开发精华文章推荐(jQuery、HTML5、CSS3)【系列十二】
2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HT ...
随机推荐
- 关于近期项目代码整理(iOS)
近期对项目中所经常使用到的封装代码进行整理,并将其上传至网络保存,本人会在后期不间断的更新其内容.具体链接地址为代码封装 关于代码 这些代码为从学习iOS来到现在实际项目开发中,精炼出来的封装代码,使 ...
- php操作redis简单例子
<?php //在PHP里操作Redis //Redis就是php的一个功能类 //创建Redis对象 $redis = new Redis(); //链接redis服务器 $redis -&g ...
- linux cat 命令详解
linux cat 命令详解 http://linux.chinaunix.net/techdoc/system/2007/11/16/972467.shtml adb shell su //这个不一 ...
- springmvc接收JSON类型的数据
1.在使用AJAX传递JSON数据的时候要将contentType的类型设置为"application/json",否则的话会提示415错误 2.传递的data需要时JSON类型的 ...
- VS后台程序无法调用App_Code里的公共类解决方案
在Web应用程序中不能通过右键项目-〉”添加“-〉”添加ASP.NET文件夹“方式添加 .因为Web应用程序中App_Code就不存在 .不过可以通过手动的方式创建,添加一个文件夹命名为App_Cod ...
- IDEA建立---- java web项目
1.新建一个javaweb项目 2.给项目命名 3.建立完的项目结构大概是这样(在web 下新建 两个目录lib 和 classes) 4.找到project Structure---------&g ...
- 关于如何使用Identity的文献
有几篇文件,深入浅出地讲解了如何一步一步的使用Identity,感觉十分有用,留下链接,备查. 1. Configuring Db Connection and Code-First Migratio ...
- 支撑双十一的,不仅仅是AliSQL,也不仅仅是Oceanbase
全棉时代,作为稳健医疗集团的全资子公司,传承了稳健医疗集团在医用棉制品行业20年的专业技术和生产经验,以其独创的 "全棉水刺无纺布专利工艺"为核心技术载体,成功实现了医用产品向民用 ...
- SSH框架搭建
1.建项目 2.添加Struts 3.添加String 注意:这里一共是五个包 4.添加Hibernate 添加完成,然后导入数据库 这时候是这样的 把小绿叶放到WEB-INF 5.简单写struts ...
- SQLite3中自增主键归零方法
当SQLite数据库中包含自增列时,会自动建立一个名为 sqlite_sequence 的表.这个表包含两个列:name和seq.name记录自增列所在的表,seq记录当前序号(下一条记录的编号就是当 ...