第一章 Html+Css使用总结（下）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1 开场

<!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  <meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！"> <meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺"> <meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"> <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"> <title>Document</title> </head> <body></body> </html>

2 常用标签

img图片标签
- <img src="图片路径" alt="图片显示失败时的说明" title="鼠标移动到图片上的说明">
h标题标签
- <h1>----<h6>
p段落标签
- <p></p>
换行标签
- <br/>
注释标签
- 
斜体字标签
- <i></i>
加重粗体字标签
- <strong></strong>
上标字标签
- <sub></sub>
下标字标签
- <sup></sup>
文本容器标签
- <span></span>

3 a跳转标签

<a href="连接地址 | 如果#haha 那么就会跳转到有name='haha'属性的元素处"---- target="_self(默认)在当前页面打开 | _blank在新窗口打开"></a>
text-decoration:none; 取消下划线
text-decoration:underline; 设置下划线
cursor:pointer; 鼠标移动上去光标变成手
a标签伪类事件()
- a:link{ css样式 } 未被点击
- a:visited{ css样式 } 已被点击
- a:hover{ css样式 } 鼠标划过
- a:active{ css样式 } 正在点击
- 在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的
- 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的

4 table表格标签

<table> 定义表格
- 属性border 设置表格边框大小，样式
- 属性cellpadding 设置表格内单元格内容和单元格的间距
- 属性cellspacing 设置表格内单元格间距
- 属性border-collapse: collapse; 合并边框(separate：分散)
<tr> 定义表格的行
<th> 定义表格的表头
<td> 定义表格单元
- 属性colspan 设置合并多少列
- 属性rowspan 设置合并多少行
<caption>定义表格标题
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚

5 列表标签

<ol>定义有序列表
- 属性type 值：1->（默认）数字列表 A->大写字母列表 a->小写字母列表 I->大写罗马数字列表 i->小写罗马数字列表
- 属性start 值：10->如果时数字列表那就是从10开始
<ul>定义无序列表
- 属性list-style-type 值：disc->（默认）实心圆列表 circle->空心圆列表 square->正方形列表 none->无
<li> 定义列表项
<dl>定义列表
<dt>自定义列表项目
<dd>定义自定列表项的描述
list-style-image: url("图片地址"); 设置li图片
list-style-type: georgian; 修改li前的标记图片
list-style-position: inside; li离屏幕左边远一点
list-style-position: outside; li离左边屏幕近一些

6 div块级标签

padding 内边距 padding="0 0 0 0"(上右下左) padding="0 auto"(上下0，左右自动)
margin 外边距 margin="0 0 0 0"(上右下左) margin="0 auto"(上下0，左右自动)
padding-botton 设置内低边距;left设置内左边距；right设置内右边距；top设置内上边距
border:1px red dashed 设置div边框为1px 红色虚线 solid 实线
针对超出div范围的内容
- overflow: hidden; 隐藏超出的区域
- overflow: scroll; 显示滚动条
- overflow: auto; 自动设置是否显示滚动条
box-shadow: 10px 10px 5px #FF00FF; 阴影效果（宽，高，清晰度值小清，颜色）
布局
- position: relative; 相对布局（占据空间）
- position: absolute; 绝对布局（不占据空间相当于浮动）
- position: fixed; 固定布局 (不占据空间相当于浮动会随着页面移动--小广告)
- position: static; 静态布局（左右偏移无用）
- left:20px;rigth:20px; 左右偏移
- z-index: 2; 值大的更靠近用户（覆盖效果呈现）
- float: left 左浮动
- clear: both 清除浮动
display:inline; 变成行内元素了
display:block; 变成块级元素了
display:none; 隐藏标签不占用位置
visibility:hidden; 隐藏并占用原位置
设置文字效果
- text-decoration:overline; 上划线
- text-decoration:line-through; 中划线
- letter-spacing:10px; 间距文字
滚动图片
- <marquee width="250px"><img src="images/login_box.png"></marquee> 默认右滑出左从DIV中间滑出左
- <marquee behavior="slide"><img src="images/login_box.png"></marquee> 默认右滑出左（设置不出div）
- <marquee behavior="alternate"><img src="images/login_box.png"></marquee> 在DIV中左右摆动
- <marquee direction="right"><img src="images/login_box.png"></marquee> 从DIV左滑出右
- <marquee scrollamount="20"><img src="images/login_box.png"></marquee> 默认右滑出左速度为20
- <marquee scrollamount="20" loop="2"><img src="images/login_box.png"></marquee> 默认右滑出左滑出2次

7 from表单

<input type="text"/> 文本域
<input type="password"/> 密码域
- pattern="[0-9]{6}" 可以设置密码格式为0-9的6位数字如果不对提示(正则)
<input placeholder="绰号"/> 隐藏提示
<input type="checkbox" checked="true">黄瓜 复选框按钮一开始显示为✔ 如果前面也有都会显示为✔
单选框按钮 name必须一样一开始显示为✔ 如果前面也有以后面为准
- <input type="radio" name="sex" checked="true">男
- <input type="radio" name="sex" checked="true">女
下拉选项框 option具体的选项 multiple属性设置下拉菜单是否有滚动条
- <select name="xx" id="xxx">
- <option value="1">www.baidu.com</option>
- <option value="2">www.google.com</option>
- </select>
按钮
- <input type="button" value="按钮"> 普通按钮
- <input type="submit" value="确定"> 确定按钮
- <input type="reset"> 重置按钮（重置域里面的文件）
- <input type="file"> 文件域
<textarea cols="20" rows="10">请填写个人信息</textarea> 可以拖拽的文本域 rows是现实多少行 cols是现实多少列 readonly是设置只读不能写入
<fieldset><legend>地址信息</legend></fieldset> 有左上标题的文本域 legend就是左上标题

8 通用属性

align=“center” 表示水平位置居中 right右对齐默认为left左对齐
bgcolor body部分背景颜色(其他一些div等元素的背景颜色属性为background-color)
background-img(src="") 背景图片("这里面放图片地址")(图片可以用width,和height设置大小)
background-color 设置背景颜色
color: blue; 字体颜色
font-family: 楷体; 字体
font-size: 50px; 字体大小
text-align: center; 内文本居中
text-indent: -2em; 首行退进2字符
text-indent: 2em; 首行缩进2字符(em就是一个字体的高度和宽度)
line-height:61px; 设置字体的行高，一般用来调整字符的垂直方向的位置，当行高跟块级元素高度一致是，字体就会垂直居中
font-weight: normal; 设置字体粗细（普通 bold加粗 900粗细）
text-transform: capitalize; 首字母大写
text-transform: lowercase; 全部小写
text-transform: uppercase; 全部大写
text-shadow: 20px 20px 0px #FF00FF; 阴影效果居左居上清晰度（值小清）颜色
text-wrap: normal; 自动换行不会拆分英文
border-radius:50px; 边框设置圆角边框四角弧度
width: 100px; 设置宽
height: 50px; 设置高
背景图片
- background-size: 500px 500px; 设置图片大小
- background-repeat: no-repeat; 设置图片不允许重复
- background-attachment: fixed; 设置滚动页面的时候图片不滚动
- background-repeat: repeat; 设置图片允许重复(默认)
- background-repeat: repeat-x; 设置图片X轴可以重复
- background-repeat: repeat-y; 设置图片y轴可以重复
- background-repeat: no-repeat; 设置图片不允许重复
- background-position: right center; 设置图片起始位置可以写入 100px 100px (背景定位方式;第一个值的取值范围：left center right; 第二个 top center bottom)
- opacity:0.1 设置透明度 0.0-1.0
如果字体超出标签要变成...
- overflow:hidden;
- text-overflow:ellipsis;
- white-space:nowrap;
!important 优先级
display:inline; 变成行内元素了
display:block; 变成块级元素了
display:none; 隐藏标签不占用位置
visibility:hidden; 隐藏并占用原位置
vertical-align:10px; 文本和图片的对其方式

9 Css选择器

类选器：定义标签class值 引用样式需要用.值｛样式｝
ID选择器：定义标签id值 引用样式需要用#值｛样式｝
派生选择器：如a标签引用样式需要用a{ 样式｝
属性选择器：[属性名"]
属性值选择器： [属性名="属性值"]
分组选择器： div,p,span{ 样式 }
并列选择器： div.属性
伪元素选择器如:(往div前面加图片)
- 前伪类div::before{countent:""; display:inlineblock;}
- 后伪类div::after{content:""; display:inlineblock;}