1.表单标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 1.表单标签：form
form
-->
<form action="" method="">
</form>
</body>
</html>
2.input标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- input标签会因为type属性值不同功能完全不一样 -->
<!-- 1.文本输入框: text
name属性：对输入框输入的数据进行说明和区分的(类似字典的key)
value属性：就是输入框中输入和显示的内容(和输入框中的内容是双向绑定)
placeholder属性：输入框中的提示信息
maxlength属性：最大输入的文字的个数
-->
<label for="tel">手机号:</label>
<input id="tel" type="text" name="tel" value="15300022703" placeholder="请输入手机号码" maxlength="11"/>
<br>
<br>
<label for="uname">用户名:</label>
<input id="uname" type="text" name="username" value="" placeholder="请输入用户名"/>
<br>
<br>
<!-- 2.密码输入框：password
name属性：对输入框输入的数据进行说明和区分的(类似字典的key)
value属性：就是输入框中输入和显示的内容(和输入框中的内容是双向绑定)
placeholder属性：输入框中的提示信息
maxlength属性：最大输入的文字的个数
-->
<label for="pw">密码:</label>
<input id="pw" type="password" name="pw" value="123456" placeholder="请输入密码"/>
<br>
<br>
<!-- 3.单选按钮: radio
name属性：同一组选项的name属性必须相同，才能做到单选的效果
value属性：指定按钮选中的时候对应的值
checked属性：设置默认选中
-->
<font>性别：</font>
<input checked="checked" type="radio" name="sex" value="男" id="boy"/><label for="boy">男</label>
<input type="radio" name="sex" value="女" id="girl"/><label for="girl">女</label>
<br><br>
<!-- 4.复选按钮: checkbox
name属性：同一组选项的name属性必须相同
value属性：指定按钮选中的时候对应的值
checked属性：设置默认选中
-->
<font size="" color="">爱好：</font>
<input type="checkbox" name="hobby" id="b" value="篮球" /><label for="b">篮球</label>
<input checked="checked" type="checkbox" name="hobby" id="p" value="乒乓球" /><label for="p">乒乓球</label>
<input type="checkbox" name="hobby" id="y" value="羽毛球" /><label for="y">羽毛球</label>
<input type="checkbox" name="hobby" id="w" value="网球" /><label for="w">网球</label>
<br><br>
<!-- 5.按钮：button
-->
<input type="button" name="" id="" value="确定" />
<input type="button" name="" id="" value="取消" />
<br><br>
<!-- button标签 -->
<button type="button">确定</button>
<button type="button"><img src="./img/baidu.ico" ><br>百度</button>
<br><br>
<!-- 6.重置按钮 和 提交按钮
重置：重置当前form标签中所有的相关标签的状态
提交：将<strong>当前form标签</strong>中所有设置了name属性的相关标签以: name=value 形式对应数据进行提交
-->
<input type="reset" name="" id="" value="重置1" />
<br><br>
<br>
<form action="" method="get">
<input type="text" name="username" placeholder="用户名"/>
<br><br>
<input type="password" name="password" id="" value="123" placeholder="密码"/>
<br><br>
<input type="reset" value="重置2"/>
<input type="submit" name="" id="" value="提交" />
</form>
</body>
</html>
3.select和textarea标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 1.select标签
select - 整个下拉列表
option - 下拉列表中的选项
注意：name和value属性都需要赋值
-->
<form action="" method="get">
<!-- 基本的下拉列表 -->
<select name="province">
<option value ="四川">四川省</option>
<option value ="辽宁">辽宁省</option>
<option value ="吉林">吉林省</option>
<option value ="山东">山东省</option>
</select>
<select name="city">
<option value="成都">成都市</option>
<option value="绵阳">绵阳市</option>
</select>
<br><br>
<!-- 内容进行分类 -->
<select name="city">
<!-- optgroup添加分组 -->
<optgroup label="四川省"></optgroup>
<option value="成都">成都市</option>
<option value="绵阳">绵阳市</option>
<option value="德阳">德阳市</option>
<optgroup label="辽宁省"></optgroup>
<option value="大连">大连市</option>
<option value="沈阳">沈阳市</option>
<option value="铁岭">铁岭市</option>
</select>
<input type="submit" value="提交"/>
</form>
<br><br>
<!-- 2.textarea标签
rows属性：最能显示的行数（控制高度）
cols属性：列数（控制宽度）
name属性：区分和提交数据的时候用
placeholder属性：
maxlength属性
注意：textarea不需要value属性,标签内容就相当于value
-->
<textarea rows="4" cols="40" name="comment" placeholder="请输入你的建议" maxlength="200">没有意见！</textarea>
<!-- div标签
无语义标签， 一般用来对标签进行分组和分块而存在
span标签也是无语义的标签
-->
<div id="">
</div>
</body>
</html>
4.CSS基础语法
<!--
1. 什么是CSS
CSS又叫层叠样式表
是web标志中的表现标准,负责标签(内容)样式和布局
2.CSS代码写在哪儿
内联样式表 - 将css代码写在标签的style属性中（样式只针对一个标签有效）
内部样式表 - 将css代码写style标签中（样式可以针对整个html中所有的标签）
外部样式表 - 将css代码写在css文件中，然后在html中用link标签去导入（样式可以针对所有的html中所有的标签有效）
内联样式表的优先级最高, 内部样式表和外部样式表谁后出现谁的优先级高
3.CSS代码怎么写
语法：
选择器{属性名1:属性值1;属性名2:属性值2;...}
说明:
选择器 - 选中当前需要添加样式的标签
{} - 固定写法(注意:内联样式表中 选择器{} 需要省略)
属性 - 以 属性名:值 的形式存在，一个属性结束后要分号；
CSS中有哪些属性，每个属性干嘛的都是固定(CSS3中有200多个属性)
常用属性：color(文字颜色)、background-color(背景颜色)、font-size(字体大小)、width(宽度)、height(高度)、
属性值：a.数字大小需要添加单位(px)
b.颜色值有三种方法：颜色的英文单词(red)、#6位的十六进制数(#ff0000)、rgb或者rgba值(rgb(255,0,0))
rgba(255,0,0,1) -最后一个参数是透明度，取值范围是0~1
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 外部样式表 -->
<link rel="stylesheet" type="text/css" href="css/css1.css"/>
<!-- 内部样式表 -->
<style type="text/css">
#b1{
color: blue;
background-color: rgba(255,0,0,0.5);
}
#b2{
background-color: gold;
width: 200px;
}
#p1{
color: green;
background-color: greenyellow;
}
</style>
</head>
<body>
<!-- 内联样式表 -->
<p id="p1" style="color: red; font-size: 20px;">我是段落1</p>
<h1 id="b1">我是标题1</h1>
<h1 id="b2">我是标题2</h1>
<div id="div1">
</div>
<div id="div2">
</div>
</body>
</html>
5.选择器
<!--
1. 常用选择器
1)标签选择器(元素选择器) - 直接将标签名作为选择器，选中当前页面中所有指定的标签
p{} - 选中当前页面中所有的p标签
a{} - 选中所有的a标签
2)id选择器 - 在id属性值前加#作为一个选择器，选中当前页面中id值是指定值的标签(id一般是唯一的)
#p1{} - 选中id属性值为p1的标签
3)类选择器(class选择器) - 在class属性之前加.作为一个选择器，选中当前页面中所有class值是指定值的标签
.p1 - 选中class属性值为p1的标签
注意：不同的标签的class值可以相同，同一个标签可以同时拥有多个不同的class值(多个之间用空格隔开)
4）后代选择器 - 将多个独立的选择器用空格隔开作为一个选择器
div #p1{} - 选中div标签中id是p1的标签(最终选中的是id是p1的标签，但是这个标签必须是div的后代)
5）父子选择器 - 将多个独立的选择器用>隔开作为一个选择器
div>.c1{} - 选中div中class值是c1的子标签
6) 群组选择器 - 将多个独立的选择器用逗号隔开作为一个选择器，同时选中每个选择器选中的标签
p,a{} - 选中所有的p标签和所有的a标签
#p1,.c1,a{} - 选中id是p1的标签和class是c1的标签以及所有的a标签
7）通配符 - 将*作为选择器，选中当前页面中所有的标签
*{}
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 1.标签选择器 */
/* p{
color: red;
} */
/* 2.id选择器 */
/* #p1{
color: #0000FF;
} */
/* 3.类选择器 */
/* .p1{
color: #008000;
}
.c1{
background-color: #FFD700;
} */
/* 4.后代选择器 */
/* div #p1{
background-color: #ADFF2F;
} */
/* div>.c1{
background-color: #ADFF2F;
color: red;
} */
*{
color: red;
}
</style>
</head>
<body>
<!-- 1.标签选择器示例 -->
<!-- <h1>我是标题1</h1> -->
<!-- <p>我是段落1</p>
<a href="https://www.baidu.com">我是超链接1</a>
<p>我是段落2</p>
<div id="">
<h2>我是标题2</h2>
<p>我是段落3</p>
</div> -->
<!-- 2.id选择器 -->
<!-- <p>我是段落1</p>
<a href="https://www.baidu.com">我是超链接1</a>
<p id="p1">我是段落2</p>
<div id="">
<h2>我是标题2</h2>
<p>我是段落3</p>
</div> -->
<!-- 3.class选择器 -->
<!-- <p class="p1">我是段落1</p>
<a class="c1" href="https://www.baidu.com">我是超链接1</a>
<p class="c1">我是段落2</p>
<div id="">
<h2 class="p1">我是标题2</h2>
<p class="c1 p1">我是段落3</p>
</div> -->
<!-- 4.后代选择器 -->
<!-- <p id="p1">我是段落1</p> -->
<!-- <div id="">
<p id="p1">我是段落1</p>
</div> -->
<!-- <div id="">
<p>
我是段落1
<p id="p1">我是段落2</p>
</p>
</div> -->
<!-- 5.父子选择器 -->
<h1 class="c1">我是标题1</h1>
<div id="">
<p>我是段落1</p>
<p class="c1">我是段落2</p>
<p>
<font class="c1">我是文字1</font>
</p>
<div id="">
<a href="" class="c1">我是超链接</a>
</div>
</div>
</body>
</html>
6.选择器的优先级
<!--
选择器的优先级：选择器的优先级看选择器的权重值，谁的权重值大谁的优先级就高，如果权重值相同谁后执行谁的优先级就高，内联样式
表的优先级最高。
标签选择器：1
class选择器：2
id选择器：4
可以在某个属性后加 !important 让当前属性的优先级最高(内联也比不上)
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.c2{
color: green;
}
#p1{
color: red;
}
p{
color: blue;
}
#div2 p{
background-color: #ADFF2F;
}
.c2 .c3 .c4 p{
background-color: yellow !important;
}
</style>
</head>
<body>
<div id="div1" class="c1">
<p class="c2" id="p1">我是段落1</p>
</div>
<div id="div2" class="c2">
<div class="c3">
<div class="c4">
<p style="background-color: #FFA500;">我是段落3</p>
</div>
</div>
</div>
</body>
</html>
7.伪类选择器
<!--
1.什么是伪类选择器
伪类选择器选中的是标签的状态，可以让同一个标签在不同的状态下有不同的样式
普通选择器:伪类选择器
2.常见的伪类选择器
link - 链接没有成功访问过对应的状态;（只针对超链接有效）
visited - 链接已经访问过的对应的状态；（只针对超链接有效）
hover - 鼠标悬停在标签上对应的状态；（针对所有可见标签有效）
active - 鼠标按下没有弹起来的时候对应的状态;（针对所有可见标签有效）
focus - 成为焦点对应的状态(正在操作某一个标签对应的状态)；（一般用于表单相关标签）
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a{
text-decoration: none;
}
a:link{
color: #008000;
}
a:visited{
color: darkgray;
}
a:hover{
color: red;
}
a:active{
color: yellow;
}
#div1{
width: 100px;
height: 100px;
background-color: yellowgreen;
}
#div1:hover{
width: 60px;
height: 60px;
}
img:active{
border: solid red 1px;
}
input{
border: none;
border-bottom: solid gray 1px;
}
input:focus{
outline: none;
border-bottom: solid blueviolet 2px;
}
</style>
</head>
<body>
<a id="a1" href="https://www.baidu.com">我是超链接</a>
<div id="div1">
</div>
<img src="img/luffy.jpg" >
<input type="password" name="" />
</body>
</html>
8.CSS核心属性
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DAY4：CSS核心属性</title>
<style>
*{ margin:0; padding:0;}
body{ padding: 30px; padding-top:10px; line-height: 35px; font-family: "微软雅黑";}
h1,h2{padding: 20px 0;}
h3{ background: #00AA88;
color: #FFFCF4;
font-size: 20px;
font-weight: 700;
margin: 10px 0;
border-radius: 4px;
padding: 5px 0px 5px 15px;}
p{ line-height: 40px;}
ul li{ list-style: none;line-height: 40px;}
span{ color: #199475; font-weight: 700; font-size:18px; display: block; border-radius: 4px; padding: 10px; font-size: 18px; padding-left: 0px;}
em{ font-style: normal; color:red;}
.other{ color:#044D22;}
.oo{ color:red; display:inline; font-size:18px; font-weight:normal;}
.marleft{ margin-left:30px;}
.marbtom{ margin:15px 0; font-weight:600;}
.borderbtm{ border-bottom: solid 1px #eee;
padding-bottom: 15px;margin-bottom: 15px;}
.textcon{
margin: 10px 0;
border: solid 1px #ddd;
border-left-width: 6px;
padding: 10px;
border-radius: 4px;
border-color: #f60;
}
.oos{ color:#000; font-weight:800;}
</style>
</head>
<body>
<div class="boxs">
<h1>DAY4：CSS核心属性</h1>
<h2 class="borderbtm">学习目标</h2>
<ul >
<li>1、css浮动属性详解</li>
<li>2、css文本属性</li>
<li>3、css列表属性</li>
<li>4、css背景属性</li>
<li>5、css边框属性</li>
</ul>
<h3>一、css浮动属性详解</h3>
<div class="marleft">
</p>
<blockquote class="textcon">
<strong class="oo"></strong><br>
无论多么复杂的布局，<strong class="oo">其基本出发点均是：“如何在一行显示多个div元素”。</strong><br>
显然标准流已经无法满足需求，这就要用到浮动。<br>
浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。<br>
</p>
<p>1.什么是浮动元素的脱离文档流?</p>
<p>首先要知道，div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的标准流（网页的正常排版顺序）。</p>
<p>脱离文档流: 就是脱离正常的网页排版顺序。成为浮动流（浮动后的元素就是浮动流）。</p>
<p>简单来说当某一个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了一样, 这个就是脱离文档流。</p>
</blockquote>
<blockquote class="textcon">
<p><strong class="oo">浮动规律：</strong>假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。<br>
div的顺序是HTML代码中div的顺序决定的。<br>
靠近页面边缘的一端是前，远离页面边缘的一端是后。<br></p></blockquote>
<!-- <img src="images/pic5.png"/>-->
</p>
<p>2.浮动元素脱离文档流之后会有什么影响？</p>
<p>如果前面一个元素浮动了, 而后面一个元素没有浮动 , 那么这个时候前面一个元就会盖住后面一个元素。元素浮动之前，也就是在标准流中，是竖向排列的，而浮动之后可以理解为横向排列。</p>
<p><br>
3.清除浮动是为了解决高度塌陷问题和元素重叠问题。<br>
</p>
<p>4.清除浮动的方法：</p>
<p>（1）添加空盒子，较流行。缺点是为清除浮动，页面添加的空盒子较多，会造成冗余代码，新手容易晕菜。 定义：在被浮动的元素（同级元素）后面添加一个空的div，并且定义一个类名，赋给空div。语法：.clear{clear:both;}</p>
<p>（2）overflow:hidden、较简单，兼容市面上大部分浏览器。缺点：做开发时，有些公司会严格要求开发技术点，不建议使用。 定义：先定义一个类名，然后把定义好的类名赋给浮动元素的父级元素。 语法：.clear{overflow:hidden;}</p>
<p>（3）最流行、最常用、可兼容所有浏览器。称为万能清除法。非要说缺点就是代码量大。开发推荐使用。 定义：定义一个类名，使用伪元素：after，并把类名赋给被浮动元素的父级元素。语法：clear：after{display:block;clear:both;content:".";visibility:hidden;height:0;}
clear{zoom:1;}</p>
<blockquote class="textcon"> <p><strong class="oo">对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。</strong>
</p></blockquote>
</div>
<h3>二、css文本属性</h3>
<div class="marleft">
<p class="oo oos">1）文本大小：{font-size:value;}</p>
<blockquote class="textcon">
<p>说明：<br>
A） 属性值为数值型时，必须给属性值加单位，属性值为0时除外。<br>
B）单位还可以是pt，9pt=12px;<br>
C）为了减小系统间的字体显示差异，IE Netscape(网景通信公司) Mozilla的浏览器制作商于1999年召开会议，共同确定16px/ppi为标准字体大小默认值,即1em.默认情况下，1em=16px,0.75em=12px; </p>
<!--<p>D)使用绝对大小关键字<br>
xx-small <br>
x-small <br>
small <br>
medium <br>
large <br>
x-large<br>
xx-large <br>
</p>--></blockquote>
<strong class="oo oos">2）文本颜色：{color:颜色值;}</strong><br>
<blockquote class="textcon">
说明：<br>
用十六进制(是计算机中数据的一种表示方法)表示颜色值：<br>
0 1 2 3 4 5 6 7 8 9<br>
0 1 2 3 4 5 6 7 8 9 A B C D E F<br>
颜色模式：光色模式<br>
R G B<br>
FF 00 00<br>
颜色值的缩写：<br>
当表示三原色的三组数字同时相同时，可以缩写为三位;<br>
当用十六进制表示颜色值时，需要在颜色值前加“#”<br>
# fa 00 00<br>
</blockquote>
<strong class="oo oos">3)文本字体：{font-family:字体1，字体2，字体3；}</strong><br>
<blockquote class="textcon">
说明：浏览器首先会寻找字体1、如存在就使用改字体来显示内容，如在字体1不存在的情况下，则会寻找字体2，如字体2也不存在，按字体3显示内容，如果字体3 也不存在；则按系统默认字体显示； <br>
当字体是中文字体时，需加双引号；<br>
当英文字体中有空格时，需加双引号如（“Times New Roman”）<br>
当英文字体只有一个单词组成是不加双引号；如：（Arial）；<br>
Windows中文版本操作系统下，中文默认字体为宋体或者新宋体，英文字体默认为Arial.<br>
</blockquote>
<strong class="oo oos">4)文字加粗</strong><br>
<blockquote class="textcon">
font-weight:bolder(更粗的)/bold（加粗）/normal（常规）/100—900;<br>
说明：在css规范中，把字体的粗细分为9个等级，分别为100——900，其中100对应最轻的字体变形，而900对应最重的字体变形，<br>
100-400 一般<br>
500常规字体<br>
600-900加粗字体 <br>
</blockquote>
<strong class="oo oos">5)文字倾斜</strong><br>
<blockquote class="textcon">
font-style：italic/oblique/normal（取消倾斜，常规显示）;<br>
说明：<br>
italic和oblique都是向右倾斜的文字, 但区别在于Italic是指斜体字，而Oblique是倾斜的文字，对于没有斜体的字体应该使用Oblique属性值来实现倾斜的文字效果.<br>
</blockquote>
<strong class="oo oos">6)水平对齐方式</strong><br>
<blockquote class="textcon">
{text-align:left/right/center<br>
</blockquote>
<strong class="oo oos">7)文字行高 {line-height:normal/value;}</strong></p>
<blockquote class="textcon">
<p>说明：<br>
A）当单行文本的行高等于容器高时，可实现单行文本在容器中垂直方向居中对齐；<br>
B) 当单行文本的行高小于容器高时，可实现单行文本在容器中垂直中齐以上任意位置的定位；</p>
<p></p>
<p>C) 当单行文本的行高大于容器高时，可实现单行文本在容器中垂直中齐以下任意位置的定位。（IE6及以下版本存在浏览器兼容问题）</p>
</blockquote>
<blockquote class="textcon">
<p><strong class="oo">*文字属性简写：font:12px/24px "宋体";</strong><br>
font属性的简写：字号，行高，字体<br>
font-size:12px; line-height:24px; font-family:”宋体”；<br>
font属性的简写：<br>
说明:font的属性值应按以下次序书写(各个属性之间用空格隔开)<br>
顺序: font-style font-weight font-size / line-height font-family<br>
(1)简写时 , font-size和line-height只能通过斜杠/组成一个值，不能分开写。<br>
(2) 顺序不能改变 ,这种简写法只有在同时指定font-size和font-family属性时才起作用,而且,你没有设定font-weight , font-style , 他们会使用缺省值（默认值）。<br>
</p>
</blockquote>
<p class="oo oos">8)文本修饰</p>
<blockquote class="textcon">
<p>text-decoration:none/underline/overline/line-through<br>
说明：<br>
none:没有修饰<br>
underline:添加下划线<br>
overline:添加上划线<br>
line-through:添加删除线</p>
</blockquote>
<p class="oo oos">9)首行缩进：{text-indent:value;}</p>
<blockquote class="textcon">
<p>说明：首行缩进2个字 text-indent:2em;<br>
A）text-indent可以取负值；<br>
B）text-indent属性只对第一行起作用。<br>
</p>
</blockquote>
<p class="oo oos">10)字间距{letter-spacing:value;}</p>
<blockquote class="textcon">
<p>控制英文字母或汉字的字距。（英文字母和字母）
<br>
</p>
</blockquote>
</div>
<h3>三、css列表属性</h3>
<div class="marleft">
<p class="oo oos">1)定义列表符号样式</p>
<blockquote class="textcon"><p>list-style-type：disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号)；list-style-type:none===list-style:none;</p></blockquote>
<p><strong class="oo oos">2)使用图片作为列表符号</strong><br>
<blockquote class="textcon">
list-style-image：url(所使用图片的路径及全称)；<br></blockquote>
<strong class="oo oos">3)定义列表符号的位置</strong><br>
<blockquote class="textcon">
list-style-position:outside(外边)/inside(里边)；</p>
<p>list-style:none;去掉列表符号 <br>
</p>
</blockquote>
</div>
<h3>四、css背景属性</h3>
<div class="marleft">
<strong class="oo oos">1)背景颜色</strong><br>
<blockquote class="textcon">语法：选择符{background-color:颜色值;}<br></blockquote>
<strong class="oo oos"> 2)背景图片的设置</strong><br>
<blockquote class="textcon"><p>语法：background-image：url(背景图片的路径及全称)；</p>
<p>说明：<br>
<strong class="oo oos">网页上有两种图片形式：插入图片、背景图；</strong><br>
插入图片：属于网页内容，也就是结构。<br>
背景图：属于网页的表现，背景图上可以显示文字、插入图片、表格等。</p>
<p class="oo">背景图片的显示原则:</p>
<p>A）容器尺寸等于图片尺寸，背景图片正好显示在容器中<br>
B）容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素；<br>
C）容器尺寸小于图片尺寸，只显示元素范围以内的背景图。</p></blockquote>
<p><strong class="oo oos">3)背景图片平铺属性</strong><br>
<blockquote class="textcon">
语法：选择符{background-repeat:no-repeat/repeat/repeat-x/repeat-y }<br>
no-repeat:不平铺<br>
repeat：平铺<br>
repeat-x：横向平铺<br>
repeat-y ：纵向平铺<br>
</blockquote>
<strong class="oo oos"> 4)背景图的固定</strong><br>
<blockquote class="textcon">
语法：<br>
选择符{background-attachment:scroll(滚动)/fixed(固定);}</p>
<p>说明：<br>
fixed 固定，不随内容一块滚动；<br>
scroll:随内容一块滚动。<br>
</p>
</blockquote>
<p> <strong class="oo oos"> 5)背景图片的位置</strong><br>
<blockquote class="textcon">
语法：选择符<br>
{background-position:left/center/right/数值 top/center/bottom/数值;}</p>
<p> 水平方向上的对齐方式（left/center/right）或值 <br>
垂直方向上的对齐方式(top/center/bottom)或值</p>
<p>background-position:值1 值2;<br>
两个值 ：第一个值表示水平位置的值，第二个值：表示垂直的位置。<br>
当两个值都是center的时候写一个值就可以代表的是水平位置和垂直位置<br>
说明：向左方向，向上方向是负值<br>
</p></blockquote>
<blockquote class="textcon">
背景属性的缩写语法：<br>
background:属性值1 属性值2 属性值3；<br>
背景缩写：background:url（背景图片的路径及全称） no-repeat center top #f00；<br></blockquote>
<strong class="oo"> 网页上常用的图片格式（压缩图片）</strong><br>
<blockquote class="textcon">
1)jpg :有损压缩格式，靠损失图片本身的质量来减小图片的体积，适用于颜色丰富的图像;(像素点组成的，像素点越多会越清晰 )。<br>
2）gif：有损压缩格式，靠损失图片的色彩数量来减小图片的体积，支持透明，支持动画，适用于颜色数量较少的图像;<br>
3)png:有损压缩格式，损失图片的色彩数量来减小图片的体积，支持透明，不支持动画，是fireworks的 源文件格式，适用于颜色数量较少的图像;<br>
</p>
</blockquote>
</div>
<h3>五、css边框属性</h3>
<div class="marleft">
<p>border:边框宽度 边框风格 边框颜色;<br>
例如：border:5px solid #ff0000<br>
边框：border,网页中很多修饰性线条都是由边框来实现的。<br>
边框宽度：border-width:<br>
边框颜色：border-color:<br>
<strong class="oo"> 边框样式：border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)可单独设置一方向边框，</strong></p>
<p>border-bottom:边框宽度 边框风格 边框颜色;底边框<br>
border-left:边框宽度 边框风格 边框颜色;左边框<br>
border-right:边框宽度 边框风格 边框颜色;右边框<br>
border-top:边框宽度 边框风格 边框颜色;上边框<br>
</p>
<p></p>
<p></p>
</div>
</div>
<div style=" width: 130px;
height: 45px;
line-height: 44px;
text-align: center;
color: #f00;
background: #000;
border-radius: 4px;
position: fixed;
bottom: 50px;
cursor:pointer;
right: 10px; "><a href="#" style="color:#f00; text-decoration:none;">返回顶部</a></div>
</body>
</html>
