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. Coffeescript实现canvas时钟

    前言 参照Mozilla 官方教程,要在Canvas上画动画时钟,思路非常有意思. 把动画看作是多个帧组成,定时每个时间点在Canvas上画一帧来实现动画.而Mozilla 官方教程画图实现的思路有意 ...

  2. jQuery.zTree的跳坑记录

    最近项目用到树型结构的交互,一开始并不打算选择zTree,为了项目进度我妥协了,这一妥协后果就是我进坑了,在2天的挣扎中,我终于跳出坑了,活了下来,有一些感慨纪录下来. 有一个业务场景需要2个树型结构 ...

  3. Mac使用总结

    显示隐藏文件 终端输入:defaults write com.apple.finder AppleShowAllFiles -bool true; KillAll Finder 添加SSHKey Ma ...

  4. SOAPUI使用教程-REST源和方法

    1. 添加REST服务.源和方法 一个REST服务包含任意数量相应的路径的可用源. 资源本身可以有尽可能多的子资源;子资源路径和所有的父路径链接起来. 首先创建一个新的REST服务在您的项目. 在导航 ...

  5. 第二章 Matlab面向对象编程基础

    DeepLab是一款基于Matlab面向对象编程的深度学习工具箱,所以了解Matlab面向对象编程的特点是必要的.笔者在做Matlab面向对象编程的时候发现无论是互联网上还是书店里卖的各式Matlab ...

  6. C# Listview 数据绑定

    今天搞Winform,有串数据需要绑定到TabControl里面,原来用datatable,组长说这玩意会有问题不让用,菜鸟实在不会,百度查的Listview用法,写了个数组进去绑定 using Sy ...

  7. Python 爬虫2——环境配置

    关于环境配置的操作,其实非常简单,假如不使用第三方的框架的话,只需要安装Python即可完成后续的操作. 一.Python的安装和配置: windows系统的安装配置过程如下,假如是Mac系统,可参考 ...

  8. 响应式web网站设计制作方法

    在研究响应式的时候,记录了一些感想,分享出来,抛砖引玉,希望可以和大家一起讨论.总结下来,响应式比之前想象的要复杂得多.1. ie9以下(不包括ie9)采用ie条件注释,为ie8以及一下单独开一个样式 ...

  9. 利用js查找页面中的内链,外链

    起初没听说过内链外链,只有链接锚文本,在面试中被问到如何查找到页面中的内链和外链,就在想,什么是内链和外链啊??????? 后来面试官给我解释了一下他们的区别,自己稍微懂了,自己当时回答的是通过获取a ...

  10. DirectX游戏编程(一):创建一个Direct3D程序

    一.环境 Visual Studio 2012,DirectX SDK (June 2010) 二.准备 1.环境变量(如没有配置请添加) 变量名:DXSDK_DIR 变量值:D:\Software\ ...