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的实用的更多相关文章

  1. 前端特效demo | 值得收藏的6个 HTML5 Canvas 实用案例

    HTML5 动画在Canvas 上得到了充分的发挥,我们 VIP 视频也分享过很多相关的动画特效制作视频,这次给大家带来 6 款超炫酷的HTML5 canvas 动画的 demo,一起来看看吧~ 文内 ...

  2. HTML5漂亮实用的电子书

    效果体验:http://hovertree.com/texiao/html5/2.htm 点击这里下载 支持多种系统Mac,PC,Android,iPhone,iPad和Windows Phone 支 ...

  3. HTML5比较实用的代码

    增强IE兼容性 <!--[if IE]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js&q ...

  4. Web前端资源汇总

    本文地址:http://www.cnblogs.com/jihua/p/webfront.html 网页特效库 2017新年快乐特效 CSS3+jQuery实现时钟插件 Html5入门实例" ...

  5. 网站开发中很实用的 HTML5 & jQuery 插件

    这篇文章挑选了15款在网站开发中很实用的 HTML5 & jQuery 插件,如果你正在寻找能优化网站,使其更具创造力和视觉冲击,那么本文正是你需要的.这些优秀的 jQuery 插件能为你的网 ...

  6. 精选19款华丽的HTML5动画和实用案例

    下面是本人收集的19款超酷HTML5动画和实用案例,觉得不错,分享给大家. 1.HTML5 Canvas火焰喷射动画效果 还记得以前分享过的一款HTML5烟花动画HTML5 Canvas烟花特效,今天 ...

  7. 绝对应当收藏的10个实用HTML5代码片段(转)

    HTML5绝对是一个流行元素,受到如此多的公司组织的追捧,作为极客来说,岂能错过呢?在今天这篇文章中,我们将分享一些超实用的HTML5的代码片段,相信大家一定会喜欢! 正确的嵌入flash 如果你经常 ...

  8. web前端炫酷实用的HTML5应用和jQuery插件

    又开始了新的一天,我们也将继续为大家分享许多优秀的HTML5应用和jQuery插件,作为前端开发者来说,这些资源可以帮助你在项目开发上派上用场.下面一起来看看这些炫酷而实用的HTML5应用和jQuer ...

  9. 9款大气实用的HTML5/CSS3注册登录表单

    1.HTML5/CSS3仿Facebook登录表单 利用CSS3制作的登录表单的确很漂亮,我们在html5tricks网站上也分享过几款了,比如CSS3密码强度验证表单可以显示密码的强度,这款纯CSS ...

随机推荐

  1. [转] nodemon 基本配置与使用

    在开发环境下,往往需要一个工具来自动重启项目工程,之前接触过 python 的 supervisor,现在写 node 的时候发现 supervisior 在很多地方都有他的身影,node 也有一个 ...

  2. [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 ...

  3. day3 Linux基础

    1.正文处理命令及tar命令 1) 将用户信息数据库文件和组信息数据库文件纵向合并为一个文件/1.txt(覆盖) cat /etc/passwd /etc/group >1.txt2) 将用户信 ...

  4. POJ2369 Permutations(置换的周期)

    链接:http://poj.org/problem?id=2369 Permutations Time Limit: 1000MS   Memory Limit: 65536K Total Submi ...

  5. 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 ...

  6. Unity小游戏制作 - 暗影随行

    用Unity制作小游戏 - 暗影惊吓 最近玩了一个小游戏,叫做暗影惊吓,虽然是一个十分简单的小游戏,但是感觉还是十分有趣的.这里就用Unity来实现一个类似的游戏. 项目源码:DarkFollow 主 ...

  7. Android课程---远程服务器存储

    在使用Volley进行获取数据时,需要事先准备环境:在libs里面导入一个Volley.jar包,在网上都有,可以下载下来导入,或者自己电脑上有DT的,自己合成一个包也行. WebActivity.j ...

  8. javascript中的内置对象总结

    内置对象 标准内置对象 Object Object.create Object.prototype.toString Object.prototype.hasOwnProperty Boolean S ...

  9. Lisk沙箱漏洞分析及解决方案

    背景 比特股的创始人Daniel Larimer质疑了lisk系统中的一系列问题,绝大多数都被lisk的创始人之一Max正面回应过了,具体可以看看这个http://ethereum.stackexch ...

  10. Git ignore UserInterfaceState.xcuserstate

    1. 退出xcdoe, 打开终端(Terminal),进入到你的项目目录下 2. 在终端键入  git rm --cached [YourProjectName].xcodeproj/project. ...