HTML5的快速使用和css3的入门知识汇总

各位开发者朋友和技术大神大家好！博主刚开始学习html5 ，自本周开始会每周更新技术博客，与大家分享每周所学。鉴于博主水品有限，如发现有问题的地方欢迎大家指正，有更好的意见和建议可在评论下方发表，我会第一时间回复。好了，话不多说，下面开始我的分享！

第一章 HTML的初识

一、HTML的基本结构

<!DOCTYPE html>

<html>
<head>


<meta name="autor" content="www.jredu100.com" />

<meta name="keywords" content="html5,网页,Web前端开发" />

<meta name="description" content="这是我在杰瑞教育开发的第一个网页" />
<meta charset="UTF-8">


<link rel="icon" type="image/x-icon" href="img/gouwuche.png">
<title>我的第一个网页</title>

</head>
<body>

</body>
</html>

二、常见的块级标签

<!DOCTYPE html>
<html>
<head>

<hr />

<p>p标签是段落标签，这里是一段文字p标签是段落标签，这里是一段文字p标签是段落标签，<br />这里是一段文字p标签是段落标签，这里是一段文字p标签是段落标签，这里是一段文字p标签是段落标签，这里是一段文字p标签是段落标签，这里是一段文字</p>
<p>p标签是段落标签，<br />这里是第二段文字</p>

<blockquote cite="http://www.jredu100.com">
横      眉冷对千夫指，俯首甘为孺子牛。
</blockquote>

<pre>哈哈哈哈哈哈哈哈
啊哈哈哈哈哈哈啊哈
</pre>

<pre>1
2
3
4
5
</pre>

<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>

<ul>
<li>无序第一项</li>
<li>无序第二项</li>
<li>无序第三项</li>
</ul>

<dl>
<dt>这是定义列表的标题</dt>
<dd>描述项1</dd>
<dd>描述项2</dd>
<dd>描述项3</dd>
</dl>
<!--
组合标签：<figure></figure> 用于显示图片及图片标题
两个子标签：<img /> 图片
<figcaption></figcaption> 图片的标题

浏览器显示效果为：图片与标题上下排列，且整体向后缩进一个单位。
-->
<figure>
<img src="img/shouye.png" />

<figcaption>这是图片标题</figcaption>
</figure>

<div style="width: 100%; height: 100px; background-color: red;">
这是div里边的文字
<h1>这是div的标题</h1>
</div>

</body>
</html>

三、常见的行级标签

<!DOCTYPE html>
<html>
<head>
<a name="top"></a>
<meta charset="UTF-8">
<title>行级标签</title>
</head>
<body>


<span style="color: blue; font-size: 36px;">大家好</span>，
我是<span style="color: red; font-size: 36px;">Span</span>中的文字
<br />

<em>我被em标签强调了</em>
<br />

<strong>我被strong标签强调了</strong>

<i>我被i标签倾斜了！！</i>
<br />

<b>我被b标签加粗了！！！！</b>
<br />

<q cite="http://www.jredu100.com">这是短引用标签q中的文字</q>
<br />

<small><small>我被small缩小了一号。</small></small><br />
<big>我被big标签放大了</big>
<br />
<br />
<!--img（图片）
1、src：表示图片引用路径。
src常见路径地址的写法：
# ① 相对路径：以当前文件为准，去寻找图片地址。
a、与当前文件处于同一层的图片，直接写图片名
b、图片在当前文件下一层：文件夹名/图片名,如 img/shouye.png
c、图片在当前文件上一层：../图片名,如 ../shouye.jpg(png)
使用相对路径时，图片所能放的最外层只能放到网站根目录（图片必须在项目文件夹中）
② 绝对路径：写法：<img src="file:///盘符:/文件夹/图片.后缀名">。但是，严禁使用!!!
③ 网络链接：网络上的图片链接。但是，一般不使用。但是图片在别人服务器，不可控，不建议使用。

2、height="" width="" 图片的宽度高度。可以用css样式(style="width: ; height: ;")代替

3、title:图片标题。当鼠标指上后显示的文字。

4、alt:当图片无法加载的时候，显示的文字。

5、align：设置图片周围文字相对于图片的位置。top， center ，bottom
-->
<img src="img/shouye.png" height="100px" width="100px" title="鼠标指上时显示的文字"
alt="当图片没有加载成功时显示的文字" align="center"/>

<br />

<!--a标签：超链接
属性：
1、href：超链接跳转的地址。可以写网络连接，或本地HTML文件的相对路径，确定方式同img的src路径。
2、target：设置超链接打开窗口的位置。_self 自身页面打开（默认） _blank 新页面打开。
3、title：鼠标指上后显示的文字
4、rel：表明即将跳转的页面，以当前页面的关系。
rel="prev" 即将跳转的页面，是当前页面的前一篇文章
rel="next" 即将跳转的页面，是当前页面的后一篇文章
【记住】rel="icon" 被链接图片是当前文档的图标 rel="stylesheet" 被链接文档是当前文档的样式表
rel="prefetch" 预加载。在当前文档加载完成后，利用空余时间，预加载即将链接的文档

[target功能性链接]
mailto://jianghao@jerei.com
tencent://message/?uin=529169579
[锚链接]
1、本页面的锚链接
（1）设置一个锚点：<a name="top"></a>用name属性表示锚点名称
（2）在超链接的href属性中，使用#name 跳到指定的锚点位置。
2、其他页面锚链接
(1)需跳转的页面设置锚链接
(2)在超链接的href属性,文件名.html#name。
<a href="aaaa.html#top">其他页面锚链接</a>
注：由于谷歌/IE的兼容问题，需在锚点中，插入一个坑空格才能生效，
<a name="top">&nbsp</a>
-->
<a href=" mailto://jianghao@jerei.com" title="鼠标指上后显示的文字" target="_self">这是一个超链
接到邮箱自身页面打开</a>
<br /><br />
<a href="https://www.baidu.com" title="鼠标指上后显示的文字" target=" _blank">这是一个超链接到新
  百度</a>
<br /><br />
<a href="tencent://message/?uin=529169579" title="鼠标指上后显示的文字" target=" _blank">跳
到qq聊天</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br />
<a href="#top">跳到本业锚链接top</a><br /><br />
<a href="唐诗三百首.html#top" target=" _blank" >其他页面锚链接top</a><br /<br /

<s>这是s标签中的文字</s>
<br />

<cite>这是cite标签</cite>
<br />

<pre>
<code>
StringBuffer sb = new StringBuffer();
for(String s : arr){
sb.append(s);
}
</code>
</pre>
<br />

<bdo dir="ltr">1234567</bdo>
<br />

请输入“<kbd>Esc</kbd>”退出系统。
<br />

X<sup>2</sup>
X²
<br />

© 空格  
<br />

<u>这是u标签</u>
<br />

<mark>哈哈哈哈哈</mark>

</html>

第二章表格及表单

一、表格

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

<tr>
<td align="center">1.1</td>
<td>1.2</td>
<td>1.3</td>
<td>1.4</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
<td>3.4</td>
</tr>
</table> <br />
<table width="500" border="5" bordercolor="red" cellspacing="4"
style="border-collapse: collapse;" cellpadding="10" align="left" bgcolor="#0000FF"
background="img/shouye.png" >
<tr>
<th>学号</th>
<th>姓名</th>
<th>数学成绩</th>
<th>语文成绩</th>
<th>英语成绩</th>
</tr>
<tr>
<td>1001</td>
<td>张三</td>
<td>100分</td>
<td>120分</td>
<td>120分</td>
</tr>
<tr>
<td>1002</td>
<td>李四</td>
<td>110分</td>
<td>123分</td>
<td>124分</td>
</tr>
<tr>
<td>1003</td>
<td>王五</td>
<td>150分</td>
<td>120分</td>
<td>120分</td>
</tr>
</table>
<!-- 【表格table】
表格<table></table>
表格的行<tr></tr>
表格的列<td></td>
表格的表头列<th></th> (将tr中的td，替换为th，表示本行为表头)
th 默认加粗，且在单元格居中显示

【table的常用属性】
1、Border：当使用border="?"设置边框时，会在所有td以及table上嵌套边框，当border加
大时，只有table最外层框线加粗，td单元格上的框线不会变化。

2、Cellspacing：单元格与单元格之间的间隙。当cellspacing="0"时，单元格之间的间隙为0，
但边框线并没有合并（边框线还是两条线的宽度）

##[合并边框的写法] style="border-collapse:collapse;" 使用边框合并后，无需设置
cellspacing。

3、Cellpadding：单元格中文字与单元格边框之间的距离（单元格内边距）
4、Width ：表格的宽高。
Height
5、Align:设置表格在父容器中的对齐方式：left居左，center居中，right居右。
【注意】当表格使用align属性时，相当于使表格浮动，可能导致表格后面的元素受表格浮动影
响，导致布局错乱。
6、Bgcolor：背景色
Background：背景图片，后接相对路径。当背景图和背景色同时生效时，背景图会覆盖背景色。
Bordercolor：边框颜色
-->

<br /><br /><br />
<table width="800" border="1" bordercolor="red" cellspacing="2"
cellpadding="5" align="center"
>
<tr>
<td align="center" colspan="3">杰瑞教育</td>
</tr>
<tr>
<td >HTML5</td>
<td rowspan="2">Android</td>
<td >IOS</td>
</tr>
<tr>
<td >java</td>

</tr>
<tr>

</tr>
<tr>

</tr>
<tr>

</tr>
</table>
<table width="500" border="5" style="border-collapse: collapse;" bordercolor="pink">
<tr>
<td rowspan="6">111</td>
<td rowspan="3">111</td>
<td rowspan="2">111</td>
<td>111</td>
</tr>
<tr>
<td>111</td>
</tr>
<tr>
<td rowspan="2">111</td>
<td>111</td>
</tr>
<tr>
<td rowspan="3">111</td>
<td>111</td>
</tr>
<tr>
<td rowspan="2">111</td>
<td>111</td>
</tr>
<tr>
<td>111</td>
</tr>
</table>

</body>
</html>

二、表单

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--[form表单]
1、两个重要属性：
action:表单需要提交的服务器地址
method:表单提交数据使用的方法：get/post
>>>get和post的区别
(1)get传参使用URL传递，所有参数在地址栏可见，不安全；get传参数据量有限
(2)post传参使用http请求传递，比较安全；post可传递大量数据；
但是，get请求传输速率要比post快

>>>URL的传参形式：链接URL地址？name1=value1&name2=value2

2、input的常用属性：
(1)type：设置input的输入类型
(2)name：给input输入框起名，一般情况下，name属性必不可少，因为，传输数据时使
用name=value(输入内容) 的传形式传递
(3)value：input输入框的默认值。
(4)placeholder：输入框的提示内容。当input有默认的value输入值时，placeholder消失。

3、input-type属性的常用值：
(1)text：文本输入框
(2)password：密码输入框，输入内容默认显示小黑点。
(3)radio：单选框 checkbox：复选框
>>>使用radio时，value属性必填，提交时，提交的内容为value中的默认值，
>>>radio凭借name属性确定是否属于同一组，name相同为同组，只能选一个。
>>>使用checked="checked"属性，设置默认选中项。
(4)file:文件上传
>>>使用accept="类型"，设置只能上传上传的文件类型，image/*任意格式图片。

(5)submit：提交按钮。将所有表单数据，提交至后台服务器。
(6)reset：重置表单数据。将表单数据恢复至默认状态。
(7)image：图形提交按钮。跟submit一样，具有表单提交功能。
使用src属性，选择图片路径。
(8)button：普通按钮，没有任何卵用。
4、属性名等于属性名的情况：
① checked="checked" 设置radio/checkbox的默认选中项
② multiple="multiple" 设置select控件为多选控件
③ selected="selected" 设置select控件默认选中的option选项
④ readonly="readonly" 设置为texearea只读模式，不允许编辑。
⑤ disabled="disabled" 禁用控件。当input被disabled时，该input的name和value将无法向后台传递。
⑥ hidden="hidden" 隐藏控件。等效于<input type="hidden"/>
(7)nowrap="nowrap"设置单元格文字行末不断行（属性值可以不写）

5、【下拉选择控件 select】
① 写法：<select>
<option></option> //可以有N多个
</select>
② name属性，应该写在<select>上，所有选项只有一个name
③ multiple="multiple" 设置select控件为多选，可在界面使用Ctrl+鼠标，进行多选。一般不用。
④ option常用属性：
value="":当option没有value属性时，往后台传递的是<option></option>标签中的文字；
当option有value属性时，往后台传递的是value属性的值。
title="":鼠标指上后显示的文字。
selected="selected":默认选中。

⑤ <optgroup label="山东省"></optgroup> :用于将option标签进行分组，label属性表示分组名。
6、【文本域 textarea】
① 写法：<textarea></textarea>
② 设置宽高style="width: 200px; height: 150px;" 自身有cols="" rows=""两个属性，但不常用
③ readonly="readonly" 设置为只读模式，不允许编辑。
④ style="resize: none;" 设置为宽高不允许修改。
⑤ style="overflow: ;" 设置当文字超出区域时，如何处理。
>>> 也可以通过overflow-x/overflow-y分别设置水平垂直方向的显示方式。
>>> 常用属性值:hidden 超出区域的文字，隐藏无法显示
scroll 无论文字多少，均会显示滚动
auto 自动，根据文字多少自动决定是否显示滚动条（默认样式）
7、表格的边框与标题
<form>
<fieldest>表格的边框
<legend>表格的标题</legend>
。。。N多个表单元素（input/select/textarea）
</fieldest>
</form>
注：一个表单，可以有多组边框+标题
-->

<!--【html5智能表单】
① H5新增input的form属性，用于指向特定form表单的id，实现input无需放在form标签之中，即可通过表单进行提交。
<FORM id=foo>
…
</FORM>

<INPUT … form="foo">
② 新增N多个type新属性，详见表格

③ 新增input的属性：
Autocomplete：自动完成功能。
>>> 记忆之前输入过的内容，在下次输入时，根据以前的内容提示，自动完成。
>>> 绝大部分浏览器自动开启。
>>> 有两个属性值：off/on
>>> 可以在<form>标签上设置Autocomplete，控制整张表单的自动完成开关。但可以在
个别input上单独设置，覆盖form的整体设置。

Autofocus：自动获得焦点.autofocus="autofocus"

Form：所属表单，通过form表单的id,指向特定表单。

Required：必填。required="required" 设置input为必填。

Placeholder：输入框的提示内容。当input有默认的value输入值时，placeholder消失。

-->
<form action="" method="get" id="form1" autocomplete="on">
<fieldset>
<legend>用户注册</legend>
<table>
<tr>
<td>用户名：</td>
<td>
<input type="text" name="username" placeholder="请输入用户名" value="11111"
autocomplete="on"/>
<input type="hidden" name="username" value="11111" />
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type="password" name="password" placeholder="请输入密码" />
</td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" value="男" checked="checked"/>男
<input type="radio" name="sex" value="女"/>女
</td>
</tr>
<tr>
<td>爱好：</td>
<td>
<input type="checkbox" name="hobby" value="男" checked="checked"/>男
<input type="checkbox" name="hobby" value="女" checked="checked"/>女
</td>
</tr>
<tr>
<td>头像：</td>
<td>
<input type="file" name="head"/>
</td>
</tr>
<tr>
<td>城市：</td>

<tr>
<td>用户协议</td>
<td></td>
</tr>
<tr>
<td colspan="2">
<textarea style="width: 200px; height: 100px; resize: none; overflow-y: scroll;"
readonly="readonly">这是服务协议！这是服务协议！这是服务协议！</textarea>
</td>
</tr>

</body>

</html>

第三章 CSS样式表

一、CSS常用选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS常用选择器</title>

<style type="text/css">
/*CSS语法必须写在<style>标签中*/
/*CSS注释*/

/* 【通用选择器】
* 1、写法： *{}
* 2、作用：选中页面中的所有HTML标签
* 3、优先级：最低！
*/
*{
/*background-color: red;*/
}

/* 【标签选择器】
* 1、写法： HTML标签名{ }
* 2、作用：选中所有对应的HTML标签，并修改其样式
*/
li{
color: red;
font-size: 36px;
}

/* 【类选择器 class选择器】
* 1、写法： .选择器名{}
* 2、调用：在需要修改样式的HTML标签上，使用class="选择器名"
* 3、优先级：当作用于同一层时，class选择器>标签选择器
*/
.list{
color: blue;
}

/* 【ID选择器】
* 1、写法： #选择器名{}
* 2、调用：在需要修改样式的HTML标签上，使用id="选择器名"
* 3、优先级：同一层时，id选择器>class选择器
* 4、ID选择器是唯一的！同一页面严禁出现同名ID！！！
*/
#first{
color: green;
}

/* 【后代选择器】
* 1、写法：选择器1 选择器2 …… 选择器N {}
* 2、生效规则：选择器2必须是选择器1的【后代】……以此类推
*
* 【子代选择器】
* 1、写法：选择器1>选择器2>……>选择器N{}
* 2、生效规则：选择器2必须是选择器1的【直接子代】……
*/
div>ul>li{
/*background-color: yellow;*/
}

/* 【交集选择器】
* 1、写法：选择器1选择器2……选择N{}
* 2、生效规则：必须同时满足所有选择器，才会生效
*/
li.list#first{
background-color: yellowgreen;
}

/* 【并集选择器】
* 1、写法：选择器1,选择器2,……,选择N{}
* 2、生效规则：满足任意一个选择器，均可生效
*/
.list,#first{
color: darkslategray;
}

/* 【选择器命名规范】
* 1、只能有字母、数字、下划线组成；
* 2、开头不能是数字。
*/
.ul_1{
background: red;
}

/* 【选择器优先级】
* 1、就近原则：近者优先。
* 2、当作用于同一层时：可有权重计算
* 权重划分：标签选择器 1
* class选择器 10
* id选择器 100
* 行级样式表style="" 1000
* #ul .li .li2 li{} 优先级权重121
* li .li1 .li2 .lis2 {} 优先级权重31
* #ul #li li{} 优先级201
*
*/

float：left（悬浮）

/*伪类选择器：
1.写法：选择器名：伪类状态{}
常见的伪类状态：
：link未访问
：visited已访问
：hover鼠标指上状态
：active激活选定状态
注，当超链接同时具有以上四种状态则选择器必须按照上述顺序排列
：focus获得焦点
*/

a:link{
color:burlywood;
text-decoration: none;
}
a:visited{
color: red;
}
a:hover{
color: green;
text-decoration: underline
}
a:active{
color: deepskyblue;
}

</style>

<!-- 【三种使用CSS的方式】
1、行内样式表：直接在HTML开始标签中使用style=""的方式引用；
特点：将CSS代码与HTML代码完全糅杂在一起，不符合W3C关于内容与表现分离的要求。不利于样式复用；
优先级：最高。

2、内部样式表：在<head></head>中，使用<style type="text/css"></style>方式引用；
特点：将CSS代码与HTML代码分离，但是没有彻底分离CSS文件与HTML文件，不利于多页面复用样式。

3、外部样式表：使用link标签链接CSS文件。
<link rel="stylesheet" type="text/css" href="css/01css.css" />
特点：实现了CSS与HTML的彻底分离，有利于样式复用及后期维护。

-->
<link rel="stylesheet" type="text/css" href="css/01css.css" />

</head>

<body>

<div>
<ul class="ul_1">
<li class="list" id="first">这是列表项1</li>
<li>这是列表项2</li>
<li class="list">这是列表项3</li>
<li>这是列表项4</li>
<li class="list">这是列表项5</li>
</ul>
</div>

<ul>
<li class="list" id="first">这是列表项1</li>
<li>这是列表项2</li>
<li class="list">这是列表项3</li>
<li>这是列表项4</li>
<li class="list">这是列表项5</li>
</ul>

</body>
</html>

二、CSS常用文本属性

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*
* /* [CSS常用文本属性]
* 1、字体、字号：
font-weight:字体的粗细，可选属性值：bold加粗 lighter细体
100~900数值(400正常，700 bold)

font-size:字体大小 **PX **%（浏览器默认字体大小的百分比，绝大部分默认16px）

font-family:字体族，设置字体。
>>>多个字体样式间用逗号分隔，浏览器解析时，会从左往右依次解析，选择可用字体。
>>>一般前面使用具体字体名称，最后一个使用字体族类名称。
（常用字体族名称：衬线体serif 非衬线体sans-serif(常用) 等宽体Monospace）
>>>例如：font-family:Arial, 'Microsoft Yahei', sans-serif;

font-style:字体样式,正常(normal) 斜体(italic)

* font-variant：small-caps; 将字母转为小型大写字体。

(了解)font缩写形式：font-style font-variant font-weight font-size line-height font-family
>>> 使用注意事项：
① 顺序必须严格按照上述顺序；
② 多个样式之间用空格分割，而且font-size/line-height 必须作为一对用/分割
③ font-size和font-family必须指定，其他样式不指定将采用默认样式显示；
>>> 例如：font:italic bold 75%/1.8 'Microsoft Yahei', sans-serif;
斜体加粗字号/行高字体族(微软雅黑，非衬线字体族)

2、字体颜色：
color:字体颜色
opacity:透明度,0~1之间的数字。调整时控件以及子控件均会透明，而使用rgba调整时，
只会时本控件透明，子控件不会发生透明度变化。

3、行距、对齐等：
line-height:行高 ① 像素单位 48px ② 不带px 正常行高的倍数 ③百分数同2
>>> 典型应用，调整控件中文垂直居中的方式：控件的height=控件的line-height

text-align:块级元素中文字的水平对齐方式 left center right

letter-spacing:字符间距,字与字之间的间距

text-decoration:文本修饰下划线underline、删除线line-through、上划线overline、none

overflow:控制超出范围文本的显示方式(auto 根据文字多少自动显示滚动条，scroll始终显示滚动条，
hidden 超出范围文本隐藏) 可以通过overflow-x overflow-y分别设置水平垂直方向

text-overflow:设置多余文字的显示方式 clip裁剪掉 ellipsis省略号
>>>【重点】让每行多余文字显示省略号：
① white-space: nowrap; 如果是中文，需设置行末不断行
② overflow: hidden; 设置控件超出范围隐藏
③ text-overflow: ellipsis; 设置多余文本省略号显示

white-space: nowrap; 设置行末不断行显示

word-break: 浏览器默认在空格处断行，当一个单词长度超出范围时，
会不断行显示， break-all 允许在单词内换行。

text-shadow:文本阴影，有四个属性值：
①水平阴影距离必选，数值越大，阴影右移
②垂直阴影距离必选，数值越大，阴影下移
③阴影模糊距离可选，数值越大，阴影越模糊。默认为0，不模糊
④阴影颜色可选，默认为黑色

text-indent:首行缩进，可用像素值调整缩进大小

* text-stroke: -webkit-text-stroke: 0.2px #008000; 描边的粗细，描边的颜色

*{font:italic bold 16px/20px 'Microsoft Yahei', sans-serif;
white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}

.div1{width: 200px;height: 300px;background-color: #CCCCCC;}

</style>

</head>

<body>
<div class="div1">
<p>
这是列表项1这是列表项1这是列表项1这是列表项1这是列表项1这是列表项1
这是列表项1这是列表项1
</p>
</div>
<br /> <br /> <br /><br /><br />

</body>
</html>

三、CSS常用背景属性

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/* 【CSS常用背景属性】
background

background-color:背景色

background-image:背景图, 写法：background-image: URL(图片地址相对路径);背景图和背景色同时存在时，
背景图会覆盖背景色

background-repeat：背景图重复方式，no-repeat不平铺 repeat平铺(默认) repeat-x水平平铺
repeat-y垂直平铺

background-size:背景图大小。
【指定宽度高度】
>>> 宽高的写法，第一个属性值为宽度，第二个属性值为高度，可以：①直接写像素
②写百分比（父容器宽高的百分比）
>>> 当只有一个属性值时，默认为宽度。高度等比缩放。
当有两个属性值时，会按照指定的高度宽度进行压缩/拉伸显示。
【其他属性值】
>>> contain:图片等比缩放，缩放到宽或高的某一边等于父容器的宽高，另一边按照图片大小缩放
（可能导致部分空余区域无法覆盖）
>>> cover:图片等比缩放，使背景图像完全覆盖背景区域。(可能导致背景图部分区域无法显示)

background-position：位置坐标、偏移量
>>> 指定位置：left/center/right top/center/bottom
当只写一个属性值时，另一个默认居中
>>> 填写坐标：水平位置垂直位置 (像素或百分比形式)
① 当只写一个属性值时，默认写的为水平方向，则垂直居中
② 当使用像素时：图片的左上角往各个方向移动的实际距离
水平方向：正数右移负数左移垂直方法：正数下移负数上移
(左负有正上负下正)
③ 当使用百分数时，一般只能是正数。代表去掉图片后，剩余空白距离的分布比例。
例如 background-position：30%;
水平方向去掉图片后，剩余区域3:7分

*/
div{
width: 27px;
height: 27px;
background-image: url(css/icon.gif);
/*background-color: red;*/
background-repeat: no-repeat;
/*background-size: 100% 100%;*/
background-position: -165px -27px;
white-space: nowrap;
text-indent: 30px;
line-height: 27px;}

.first{background-position: -45px 0px;}

</style>
</head>
<body>

帮助中心
</div>

</body>
</html>

本周的分享就到这里，下周再见！

HTML5的快速使用和css3的入门知识汇总的更多相关文章

HTML入门知识汇总
1. HTML认识 1.1 什么是HTML HTML是描述(制作)网页的语言,指的是超文本标记语言(Hyper Text Markup Language). 超文本:就是指页面内可以包含图片.链接.甚 ...
CSS入门知识汇总
1.CSS认识在谈论CSS的概念之前,我们先说一说web标准的目的——其在于创建一个统一的用于web表现层的技术标准,以便通过不同浏览器或终端设备向最终用户展示信息内容.一个网页的呈现是由三部分组成 ...
nginx服务器入门知识汇总
IP-hash 就是根据IP进行hash计算,然后分配到对应的服务器,好处就是不用session同步,固定IP会固定访问一台服务器,缺点就是恶意攻击,会造成某台服务器压垮.提供的服务不同,面向的地区不 ...
redis入门知识汇总
1.什么是redis? Redis 是一个基于内存的高性能key-value数据库. 2.Reids的特点 Redis本质上是一个Key-Value类型的内存数据库,很像memcached,整个数据库 ...
Solr搜索引擎入门知识汇总
1.技术选型,为什么用solr而不用lucene,或者其他检索工具 lucene:需要开发者自己维护索引文件,在多机环境中备份同步索引文件很是麻烦 Lucene本质上是搜索库,不是独立的应用程序.而S ...
MyBatis入门知识汇总
为什么要使用MyBatis? 我们都知道,在学习mybatis之前,要在Java中操作数据库,需要用到JDBC,但是在使用JDBC时会有许多缺陷. 比如: 1.使用时需要先进行数据库连接,不用后要立 ...
HTML5+CSS3从入门到精通随书光盘 ISO 镜像视频教程
HTML5+CSS3从入门到精通(清华社“视频大讲堂”大系)通过基础知识+中小实例+综合案例的方式,讲述了用HTML5+ CSS3设计构建网站的必备知识,相对于权威指南.高级程序设计.开发指南同类图书 ...
HTML5+CSS3从入门到精通中文pdf版
HTML5+CSS3从入门到精通是通过基础知识+中小实例+综合案例的方式,讲述了用HTML5+ CSS3设计构建网站的必备知识,相对于专业指南.高级程序设计.开发指南同类图书,本书是一本适合快速入手的 ...
HTML5 & CSS3编程入门经典 ((美)Rob Larsen) pdf扫描版
HTML和CSS是构建网页所需要了解的两种核心编程语言,拉尔森编著的这本<HTML5&CSS3编程入门经典>详细介绍了这两种语言. <HTML5&CSS3编程入门经典 ...

随机推荐

Extjs4.2+webAPI+EF实现分页以及webapi的数据传值(续）
现在领导又要增加功能,需要分页的时候,每页显示N条信息.由于是每个页面都要改,所有需要声明了一个扩展类代码如下: // Copyright : 欧蓝德畅电子技术有限公司. All rights res ...
oracle 外连接以及用on和where 的区别
Oracle 外连接(OUTER JOIN)包括以下: 左外连接(左边的表不加限制) 右外连接(右边的表不加限制) 全外连接(左右两表都不加限制) 对应SQL:LEFT/RIGHT/FULL OUT ...
CMD下进入MYSQL的命令
CMD下进入MYSQL的命令 mysql -h localhost -u root -p 切到MYSQL的bin目录下,输入上面命令,回车然后输入密码回车
Nullable<System.DateTime>日期格式转换（转载）
一.问题 1.html页面中时间显示出错,数据库中时间是正确的. 原因:没有把DateTime转成String类型. 2. 在C#中,发现不能直接使用ToString("yyyy-MM-d ...
[Hadoop异常处理] Namenode和Datanode都正常启动,但是web页面不显示
异常 namenode和data都正常启动但是web页面却不显示,都为零解决办法一: 在hdfs-site.xml配置文件中,加入 <property> <name>dfs ...
外边距塌陷 margin collapsing
块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距,其大小是组合到其中的最大外边距, 这种行为称为外边距塌陷(margin collapsing),有的地方翻译为外边距合并. 1.相邻的兄弟姐妹 ...
CSS 实现隐藏滚动条同时又可以滚动
方法1: 利用 css 3 的新特性 -webkit-scrollbar, 但是这种方式只兼容chrome,不兼容火狐和 IE. /* for Chrome */ .content::-webk ...
Mobile First！ Wijmo 5 之架构
CSDN移动开发频道率先报道的<Mobile First!jQuery UI组件集Wijmo五年最大更新>引起开发者极大关注. 本文就开发者关心的话题之一架构,展开叙述. Wijmo 5是 ...
Java:构造代码块，静态代码块
本文内容: 局部代码块构造代码块静态代码块补充首发日期:2018-03-28 局部代码块: 局部代码块用于限制变量的生命周期,如果希望某些变量在某一过程之后直接失效而不希望被后面继续操作时,可 ...
JS笔记（一）：基础知识
(一) 标识符标识符就是一个名字,在JS中,标识符用来对变量和函数命名,或者用做JS代码中某些循环语句中的跳转位置的标记.JS的标识符必须以字母._或$符号开始,后续字符可以是字母.数字._或$符号 ...

HTML5的快速使用和css3的入门知识汇总

HTML5的快速使用和css3的入门知识汇总的更多相关文章

随机推荐

热门专题