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. QT5之三大重要窗体

    当创建项目时,会发现编辑器提供三个基类,分别为:QMainWindow.QWidget.QDialog,三个基类的区别说明如下.1.QMainWindowQMainWindow类提供一个有菜单条.锚接 ...

  2. topcoder SRM 628 DIV2 BracketExpressions

    先用dfs搜索所有的情况,然后判断每种情况是不是括号匹配 #include <vector> #include <string> #include <list> # ...

  3. 区间DP LightOJ 1422 Halloween Costumes

    http://lightoj.com/volume_showproblem.php?problem=1422 做的第一道区间DP的题目,试水. 参考解题报告: http://www.cnblogs.c ...

  4. HDU Cow Sorting (树状数组)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2838 Cow Sorting Problem Description Sherlock's N (1  ...

  5. 设计模式(十三) 职责链(chain of responsibility)

    软件领域中的设计模式为开发人员提供了一种使用专家设计经验的有效途径.设计模式中运用了面向对象编程语言的重要特性:封装.继承.多态,真正领悟设计模式的精髓是可能一个漫长的过程,需要大量实践经验的积累.最 ...

  6. javascript 执行上下文的理解

    首先,为什么某些函数以及变量在没有被声明以前就可以被使用,javascript引擎内部在执行代码以前到底做了些什么?这里,想信大家都会想到,变量声明提前这个概念: 但是,以下我要讲的是,声明提前的这个 ...

  7. touchstart、touchmove、touchend 实现移动端上的触屏拖拽

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. WebClient 数据传输

    数据提交 post  ,get public string WebClientPost(string PostData, string PostUrl, string Type) { string p ...

  9. Unity - 接入Android SDK

    在网络上,关于Unity与Android如何进行交互,雨松MOMO大神已经有两篇文章简单介绍了如何操作(1)Unity3D研究院之打开Activity与调用JAVA代码传递参数(2)Unity3D研究 ...

  10. Delphi XE5 支持的Android 版本

    Delphi XE5 已经支持Android应用开发.  那XE5支持Android的哪些版本呢?Delphi编译的APP能部署到Gingerbread (2.3.3-2.3.7), Ice Crea ...