HTML5的实用
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "PingFang SC"; color: #ffffff }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "PingFang SC"; color: #eb905a }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #4bd156 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #eb905a }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #ffffff; min-height: 21.0px }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #ffffff }
p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "PingFang SC"; color: #4bd156 }
p.p8 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #ff4647 }
p.p9 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "PingFang SC"; color: #ff4647 }
span.s1 { font: 18.0px Menlo; color: #8b87ff }
span.s2 { }
span.s3 { font: 18.0px Menlo }
span.s4 { color: #8b87ff }
span.s5 { font: 18.0px "PingFang SC" }
1.盒子模型
# 01.可以拿到当前网页当中所有的标签: 去掉当前网页当中所有标签的内边距和外边距
// * { margin: 0 padding: 0 }
# 02.内边距
// padding: 10px 8px 5px 15px;(上, 右, 下, 左)
# 03.边框
// border: 5px solid red;(宽度, 样式, 颜色)
# 04.外边距
// margin: 50px 10px 20px 8px;(上, 右, 下, 左)
# 05.盒子模型
// box-sizing: border-box
2-CSS3的属性
# 01.阴影
// box-shadow: 10px, 10px, 10px, oringe;(必需。水平阴影的位置, 必需。垂直阴影的位置, 可选。模糊的距离, 可选。阴影的颜色)
# 02.圆角
// border-top-left-radius: 100px;
// border-radius: 100px;
# 03.透明度
// background-color: rgba(255, 0, 0, 1.0);(红色值, 绿色值, 蓝色值, 透明度)
3-CSS的布局
# 01.float,会将标签修改成行内块级标签,脱离标准流
// float: left;
// 在便签内定义id和类:
// <div id="main">
// <div class="test1">我要左浮动</div>
# 02.定位(子绝父相)
// position: relatie;(生成相对定位的元素->子元素)
// position: fixed;(生成绝对定位的元素->浏览器)
// position: absolute;(生成绝对元素的定位->父元素)
# 03.行内标签和行内块级标签居中
// 水平居中: 在父标签中添加: text-align: center
// 垂直居中: 在父标签中添加: align: height
# 04.块级标签居中
" 水平居中: 在自身中设置margin: 0 auto;
" 垂直居中: 通过形变来实现:
// position: absolute;
// top: 50%;
// left: 50%;
// transform: translate(-50%, -50%);
" <p>: 块级标签, <span>: 行内标签, <button>: 行内块级标签
04-高仿百度首页
# 01.id和class的使用位置
// <div id="content">
// <div class="logo">
# 02.设置背景尺寸
// background-size: cover;(平铺)
# 03设置字体加粗
// font-weight: bolder;
# 04.设置字体不加粗
// font-weight: lighter;
# 05.去掉下划线
// text-decoration: none;
# 06.伪类
// #header a.more-product:hover { color: red; }
# 07.改变标签的类型
// display: inline-block;
# 08.设置不透明度
// opacity: 0.6;
HTML5的实用的更多相关文章
- 前端特效demo | 值得收藏的6个 HTML5 Canvas 实用案例
HTML5 动画在Canvas 上得到了充分的发挥,我们 VIP 视频也分享过很多相关的动画特效制作视频,这次给大家带来 6 款超炫酷的HTML5 canvas 动画的 demo,一起来看看吧~ 文内 ...
- HTML5漂亮实用的电子书
效果体验:http://hovertree.com/texiao/html5/2.htm 点击这里下载 支持多种系统Mac,PC,Android,iPhone,iPad和Windows Phone 支 ...
- HTML5比较实用的代码
增强IE兼容性 <!--[if IE]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js&q ...
- Web前端资源汇总
本文地址:http://www.cnblogs.com/jihua/p/webfront.html 网页特效库 2017新年快乐特效 CSS3+jQuery实现时钟插件 Html5入门实例" ...
- 网站开发中很实用的 HTML5 & jQuery 插件
这篇文章挑选了15款在网站开发中很实用的 HTML5 & jQuery 插件,如果你正在寻找能优化网站,使其更具创造力和视觉冲击,那么本文正是你需要的.这些优秀的 jQuery 插件能为你的网 ...
- 精选19款华丽的HTML5动画和实用案例
下面是本人收集的19款超酷HTML5动画和实用案例,觉得不错,分享给大家. 1.HTML5 Canvas火焰喷射动画效果 还记得以前分享过的一款HTML5烟花动画HTML5 Canvas烟花特效,今天 ...
- 绝对应当收藏的10个实用HTML5代码片段(转)
HTML5绝对是一个流行元素,受到如此多的公司组织的追捧,作为极客来说,岂能错过呢?在今天这篇文章中,我们将分享一些超实用的HTML5的代码片段,相信大家一定会喜欢! 正确的嵌入flash 如果你经常 ...
- web前端炫酷实用的HTML5应用和jQuery插件
又开始了新的一天,我们也将继续为大家分享许多优秀的HTML5应用和jQuery插件,作为前端开发者来说,这些资源可以帮助你在项目开发上派上用场.下面一起来看看这些炫酷而实用的HTML5应用和jQuer ...
- 9款大气实用的HTML5/CSS3注册登录表单
1.HTML5/CSS3仿Facebook登录表单 利用CSS3制作的登录表单的确很漂亮,我们在html5tricks网站上也分享过几款了,比如CSS3密码强度验证表单可以显示密码的强度,这款纯CSS ...
随机推荐
- [转] nodemon 基本配置与使用
在开发环境下,往往需要一个工具来自动重启项目工程,之前接触过 python 的 supervisor,现在写 node 的时候发现 supervisior 在很多地方都有他的身影,node 也有一个 ...
- [8.1] Triple Step
A child is running up a staircase with n steps and can hop either 1 step, 2 steps, or 3 steps at a t ...
- day3 Linux基础
1.正文处理命令及tar命令 1) 将用户信息数据库文件和组信息数据库文件纵向合并为一个文件/1.txt(覆盖) cat /etc/passwd /etc/group >1.txt2) 将用户信 ...
- POJ2369 Permutations(置换的周期)
链接:http://poj.org/problem?id=2369 Permutations Time Limit: 1000MS Memory Limit: 65536K Total Submi ...
- nginx-(/usr/local/nginx/conf/nginx.conf)更改配置文件
user www www; worker_processes ; error_log /usr/local/nginx/logs/error.log info ; pid /var/run/nginx ...
- Unity小游戏制作 - 暗影随行
用Unity制作小游戏 - 暗影惊吓 最近玩了一个小游戏,叫做暗影惊吓,虽然是一个十分简单的小游戏,但是感觉还是十分有趣的.这里就用Unity来实现一个类似的游戏. 项目源码:DarkFollow 主 ...
- Android课程---远程服务器存储
在使用Volley进行获取数据时,需要事先准备环境:在libs里面导入一个Volley.jar包,在网上都有,可以下载下来导入,或者自己电脑上有DT的,自己合成一个包也行. WebActivity.j ...
- javascript中的内置对象总结
内置对象 标准内置对象 Object Object.create Object.prototype.toString Object.prototype.hasOwnProperty Boolean S ...
- Lisk沙箱漏洞分析及解决方案
背景 比特股的创始人Daniel Larimer质疑了lisk系统中的一系列问题,绝大多数都被lisk的创始人之一Max正面回应过了,具体可以看看这个http://ethereum.stackexch ...
- Git ignore UserInterfaceState.xcuserstate
1. 退出xcdoe, 打开终端(Terminal),进入到你的项目目录下 2. 在终端键入 git rm --cached [YourProjectName].xcodeproj/project. ...