THML5与CSS3网页设计案例（十一）
CSS overflow-x 属性 (w3school.com.cn)
THML5与CSS3网页设计
常用的css属性
overflow 属性
规定当内容溢出元素框时发生的事情。
overflow-x: visible|hidden|scroll|auto|no-display|no-content;
| visible | 不裁剪内容，可能会显示在内容框之外。 | |
|---|---|---|
| hidden | 裁剪内容 - 不提供滚动机制。 | |
| scroll | 裁剪内容 - 提供滚动机制。 | |
| auto | 如果溢出框，则应该提供滚动机制。 | |
| no-display | 如果内容不适合内容框，则删除 | |
| no-content | 如果内容不适合内容框，则隐藏整个内容。 |
=========================================================================
字体：
colorfont-sizefont-familyfont-weight: boldfont-style: italictext-decoration: none / underlineline-height:行高letter-spacing:字符间距word-spacing:单词间距
文本：
text-align:left/center/rightvertical-align:top/middle/bottom,对于带有valign属性的标签才有效果text-indent:文本缩进
背景：
background-colorbackground-image:url('图片地址')background-repeat: no-repeatbackground-attachment:scroll/fixedbackground-size:宽 高;background-position:center center;
尺寸：
width：宽度height：高度
html元素分成两大类：1）块状元素(一般有换行效果)：h1~h6、p、img、table、form、input、ul、ol、div、video2) 内联元素:a、span、label（直接设置宽高是无效的，怎么办？通过css属性display:block；设置以块状方式显示，就有效果了！！ ）
布局类：
display：设置元素的显示方式：none/block/inlinefloat:left、right(浮动可以改变元素的排列方式)
边框类:
border:边框线border-bottom:底部边框border-top:border-left:border-right:
轮廓：
outline:轮廓线
表格类:
border-collapse : 表示表格边框是否合并separate：边框分离collapse ：边框合并border-spacing：表格单元格之间的距离，当border-collapse为separate时才有效
列表类：
list-style-type:编号类型,none无编号list-style-position:编号位置，默认outside，里面insidelist-style-image：用图片做编号
===============================================
1、字体
font-size: 字体大小;
color: 字体颜色;
/ˈfæməli/
font-family: 楷体;
/weɪt/ /bəʊld/
font-weight: bold; /*加粗*/
粗体
/staɪl/ /ɪˈtælɪk/
font-style: italic;/*倾斜*/
样式 斜体的
/ˌdekəˈreɪʃn/
text-decoration: underline; /*下划线*/
装饰品
/laɪn/
line-height: 55px; /*设置行高：行间距*/
线\字行
/ˈspeɪsɪŋ/
letter-spacing: 20px;/*字符间距*/
字符 间距
1、color 颜色
2、font-size 大小
3、font-family 风格
4、font-weight: bold 加粗
5、font-style: italic 倾斜
6、text-decoration: none / underline 没有下划线/下划线
7、line-height:行高
8、letter-spacing:字符间距
9、word-spacing:单词间距
2、文本
/ɪnˈdent/
text-indent: 2cm; /*文本缩进:2厘米*/
缩进
text-align: center;/*文本水平对齐方式*/
/ˈvɜːtɪkl/ /ˈmɪdl/
vertical-align: middle; 垂直对齐方式
垂直的
文本：
1、text-align:left/center/right 文本水平对齐方式
2、vertical-align:top/middle/bottom 垂直对齐方式
,对于带有valign属性的标签才有效果
3、text-indent:文本缩进
3、背景
background-color: #008000; /*背景色*/
background-image: url(img/111.png);/*背景图片*/
/rɪˈpiːt/
background-repeat: no-repeat;/* 背景不重复*/
重复
background-size: 10% 10%; /*背景大小*/
/əˈtætʃmənt//fɪks/
background-attachment: fixed;/*背景固定*/
附件
/pəˈzɪʃn/
background-position: center center;/*背景位置*/
位置
背景：
1、background-color 背景色
2、background-image:url('图片地址') 背景图片
3、background-repeat: no-repeat 背景不重复
4、background-attachment:scroll/fixed 背景固定
5、background-size:宽 高; 背景大小
6、background-position:center center; 背景位置
4、边距
1、margin: 0px; /*外边距*/
/*外边距：margin，用法跟padding一致*/
2、padding: 0px;/*内边距*/
/*内边距*/
/*padding: 20px;*/ /*上下左右四个方向的内边距都是20px*/
/*padding: 10px 30px;*/ /*第一个用于上下，第二个用于左右*/
/*padding: 10px 20px 30px;*/ /*第一个用于上，第二个用于左右，第三个用于下*/
/*padding: 10px 20px 30px 40px;*/ /*上右下左的顺序*/
------------------------------------------------
盒子的总宽度=width+左右边框+左右内边距+左右外边距
盒子的总高度=height+上下边框+上下内边距+上下外边距
/*当垂直方向设置外边距，会发生合并的情况，比如上面的a和b的位置设置的是同一个外边距，，发生合并的结果是以大的值为准*/
------------------------------------------------
3、marign-top:10px;顶部外边距
4、marign-bottom:10px;底部外边距
5、marign-left:10px;左边外边距
6、marign-right:10px;右边外边距
7、padding-top:10px;顶部内边距
8、padding-bottom:10px;底部内边距
9、padding-left:10px;左边内边距
10、padding-right:10px;右边内边距
11、margin: 0px auto;/*居中*/
5、边框
1、border: 5px solid red;
solid：实线
dotted:点线
dashed:虚线
double:双线
2、border-collapse: collapse;/*边框合并*/
3、border-spacing: 20px;/*单元格间距：当border-collapse为separate时才有效*/
4、border: 0px;/*去掉边框*/
5、border-bottom: 1px solid red; 底部线框
6、border-top: 1px solid red;顶部线框
7、border-left: 1px solid red;左边线框
8、border-right: 1px solid red;右边线框
9、outline: 5px solid green; 轮廓
10、outline: 0px; /*去掉轮廓*/
6、显示
1、display: inline;/*以内联方式显示*/
2、display: block;/*以块状方式显示*/
3、display: none;/*隐藏元素*/
display: inline-block;//显示方式：内联块状方式
7、浮动
1、float: left;/*li浮动，让li从左往右左右排列*/
right/*li浮动，让li从右往左右左排列*/
2、clear: both; /*清除两边的浮动对象*/
8、对象的层叠次序
1、z-index: 1;/*对象的层叠次序，值越大，越在上方*/
2、left: 20px;
3、right:20px;
4、top:40px;
5、bottom:40px;
9、固定定位
1、position: fixed; /*固定定位*/ 2、left: 20px; 3、right:20px; 4、top:40px; 5、bottom:40px;
10、绝对定位
1、position: absolute; /*绝对定位*：以最近具有定位属性的元素作为参照*/ 2、left: 20px; 3、right:20px; 4、top:40px; 5、bottom:40px;
11、相对定位
1、position: relative;/*相对定位，相对于自身原始位置的移动*/ 2、left: 20px; 3、right:20px; 4、top:40px; 5、bottom:40px;
12、粘性定位
1、position: sticky; /*粘性定位:可以说是static（没有定位） 和 固定定位fixed 的结合*/ 2、top: 0px;
13、边框半径，实现圆角效果
1、border-radius: 20px ; /*边框半径，实现圆角效果*/
2、background-color: rgba(255,0,0,0.5); /*透明色:透明度在0~1之间*/
3、/*透明度，里面的元素也会变透明*/
background-color: #ff0000;
opacity: 0.5;
4、/*盒子阴影:水平偏移量 垂直偏移量 模糊度 颜色*/
box-shadow:10px 20px 5px #00FFFF; /box-shadow: 0px 0px 5px #00FF00;
5、/*使用自定义字体*/
font-family: myfont;
src: url('font/仓耳舒圆体W05.ttf');
第一章
1、网页基本结构
<!DOCTYPE html> <!--网页声明：告诉浏览器网页遵循的html5的标准-->
<html> <!--网页文档的开始-->
<head> <!--头部的开始-->
<meta charset="utf-8" /> <!--设置网页编码为UTF-8-->
<title>百度一下，你就知道</title> <!--网页文档标题-->
</head> <!--头部的结束-->
<body> <!--主体的开始-->
hello点击这里有惊喜哦
</body> <!--主体的结束-->
</html> <!--网页文档的结束-->
2、网页文档标题
<title>天官赐福</title>
3、主体
<body bgcolor="" background="" leftmargin="0" topmargin="0"></body> 1、bgcolor 2、background: 3、leftmargin: 4、topmargin:
4、标题标签
<h1 align=""></h1>
5、段落标签
<p align=""></p>
6、换行标签
<br>
7、水平线标签
<hr color="" size="" width="" align="">
8、网页中的字体实体：
空格： 小于号: < 大于号： > 版权符号： ©
第二章
9、超链接标签
<!--链接外网地址--> <!--链接本网站的其它页面--> <!--链接文件:压缩包、视频等--> <!--链接邮箱地址--> <!--书签链接--> <a href=""></a> <!--页面的显示方式--> <a href="" target="" title="">打开03网页</a>
10、无序列表
<ul type="">
<li></li>
<li></li>
</ul>
11、有序列表
<ol type="" start="">
<li></li>
<li></li>
</ol>
12、定义列表
<dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl>
13、图片标签
<img src="" width="" height="" border="" title="" alt="" align="" hspace="" vspace="">
14、视频标签
<video src=""
controls="controls"
autoplay="autoplay"
width="1259" height=""
poster=""
muted="muted"
preload="auto">
您的浏览器不支持该标签。
</video>
15、音频标签
<audio src="" controls="controls"
autoplay="autoplay"
muted="muted"
preload="auto">
当前浏览器不支持audio
</audio>
16、表格标签
<table border="1" bordercolor=""
cellspacing="0" cellpadding="0"
width="" height="" align=""
bgcolor="" background="">
<tr align="" valign="" height=""
bgcolor="" background="">
<td align="" valign="" width=""
bgcolor="" background=""
rowspan="" colspan="">
</td>
</tr>
</table>
第三章
17、表单标签
<form name="" method=""
action="#"
enctype="multipart/form-data"
target="">
</form>
18、文本框
<input type="text" id="" name=""
placeholder="" value=""
size="" maxlength=""
readonly="readonly"/>
19、 密码框: 属性跟文本框一致
<input type="password" id="" name=""
placeholder="" value=""
size="" maxlength=""
readonly="readonly"/>
20、单选按钮：同一组的单选按钮name属性值必须相同
<input type="radio" name="" value="男" checked="checked"/>男 <input type="radio" name="" value="女"/>
21、复选框：属性跟单选按钮一致（同一组的name属性值可以不同）
<input type="" name="" value="" />游戏 <input type="" name="" value="" />运动 <input type="" name="" value="" />睡觉
22、按钮：有3种类型（普通、提交、重置按钮）
<input type="button" value="普通按钮"> <input type="submit" value="提交按钮"> <input type="reset" value="重置按钮">
23、图像域：图片类型的提交按钮，用于提交整个表单数据
<input type="image" src=""
width="" height=""/>
24、隐藏域：用户不可见
<input type="hidden" name="" value="数据"/>
25、文件域
<input type="file" name="" value="" />
26、其它的类型
<input type="" name="">
27、下拉菜单
<!--单选的下拉菜单-->
<select name="" id="">
<option value="选项值" selected="selected">
</option>
<option value =""></option>
<option value =""></option>
</select>
<!--下拉选项可以进行分组-->
<select name="" id="">
<option value ="" selected="selected"> </option>
<optgroup label="">
<option value ="180"></option>
<option value ="181"></option>
</optgroup>
<optgroup label="">
<option value =""></option>
<option value =""></option>
<option value =""></option>
</optgroup>
</select>
<!--多选的下拉菜单:mutilple表示多选，size表示默认显示的选项数-->
<select name="" multiple="multiple" size="">
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
<select name="" multiple="multiple" size="">
<optgroup label="">
<option value="">计算机基础</option>
<option value="">C#</option>
</optgroup>
<optgroup label="">
<option value=""></option>
<option value=""></option>
</optgroup>
</select>
28、文本域：多行文本框
<textarea name="details" rows="" cols=""
placeholder="">
</textarea>
29、标签文字
<label for=""></label>
30、给元素进行分组
<fieldset> <legend>账户信息</legend> 用户名:<input type="" name="" id="" value="" /><br> 密码:<input type="" name="" /> </fieldset> <fieldset id=""> <legend>个人详细信息</legend> 姓名:<input type="text" name="" id="" value="" /> <br> 年龄:<input type="text" name="" id="" value="" /> </fieldset>
31、数据列表
喜欢的游戏: <input type="text" list="" /> <datalist id=""> <option value =""></option> <option value =""></option> <option value =""></option> <option value =""></option> </datalist> <input type="submit" value="OK"/>
================================================
##
第一章HTML5基础标签
1、网页声明：
告诉浏览器网页遵循的html5的标准
<!DOCTYPE html>
2、网页文档的开始和结束
<html></html>
3、头部的开始和结束
<head></head>
4、设置网页编码为UTF-8
<meta charset="utf-8" />
5、网页文档标题
<title></title>
6、主体的开始和结束
<body></body>
7、网页基本结构：一个网页由头部和主体两部分组成
点击这里有惊喜哦
8、body：主体
<body bgcolor="#fff" background="img/bg1.jpg" leftmargin="0" topmargin="0"> </body> 1、bgcolor:背景色 颜色的写法： 1)英文单词：比如red、green、blue... 2)rgb表示法：每个数字0~255之间 比如:rgb(100,10,20) 不赞成使用 3)十六进制表示法: 3位或6位数 (最常用) 比如:#f00，#ff0000 2、background:背景图片 /ˈmɑːdʒɪn/ 3、leftmargin="像素":左边外边距 默认0 /ˈmɑːdʒɪn/ 4、topmargin="像素"：顶部外边距 默认0
9、h1~h2：标题标签
<h1 align="center/left/right"></h1> ...... 1、align:水平对齐方式，left/center/right
10、hr：水平线标签
<hr color="red" size="10" width="50%" align="left/center/right"> 1、size:粗细 2、color:颜色 3、align:水平对齐 4、width="像素":宽度
11、p：段落标签
<p align="left/center/right"></p> 1、align:水平对齐方式，left/center/right
12、 空格标签
<p> 3月1日， ***在中央党校(国家行政学院) 中青年干部培训班开班式上发表重要讲话强调， 筑牢理想信念根基，树立践行正确政绩观， 在新时代新征程上留下无悔的奋斗足迹。</p>
13、br：换行标签
<p> 3月1日， ***在中央党校(国家行政学院) 中青年干部培训班开班式上发表重要讲话强调， 筑牢理想信念根基，树立践行正确政绩观， 在新时代新征程上留下无悔的奋斗足迹。<br> 广大党员干部深受鼓舞和激励，纷纷表示， ***的重要讲话饱含着对年轻干部的殷切期望， 为广大年轻干部健康成长指明了努力方向， 要深入学习领会，真正内化于心、外化于行。</p>
14、字体标签
<font size="7" color="red" face="隶书">文字内容</font> 1、size表示文字大小，取值1~7之间，1最小，7最大 2、color表示文字颜色 3、face表示字体
15、字形标签
<b>粗体</b> <i>斜体</i> <u>下划线</u>
16、网页中的字体实体
1、空格： 2、小于号: < 3、大于号： > 4、版权符号：©
第二章HTML5常用标签
a ：超链接标签
<a href="链接目标的地址">链接文字或图片</a>
/ˈtɑːɡɪt/
1、target:用于设置目标页面的显示方式
/self/
_self:默认的，在本窗口显示
/blæŋk/
_blank:在空白窗口显示
其它的了解：_top、_parent....
2、title="文字":链接的提示文字
1、链接外网地址
<a href="https://www.baidu.com">百度</a>
2、链接本网站的其它页面
<a href="index.html">返回首页</a>
3、在空白窗口显示
<a href="pages/03.html" target="_blank" title="这是03网页">打开03网页</a>
4、链接文件:压缩包、视频等
<a href="files/弟子规思考题.zip">下载文件</a>
5、链接邮箱地址
<a href="mailto:464678@qq.com">联系我们</a>
6、书签链接
<a href="pages/03.html#myposition">书签链接</a> <a href="#bottom">跳到底部</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><br><br> <br><br><br><br><br><br><br><br><br><br><br><br> <h1>底部</h1> <a name="bottom"></a> <a href="#">回到顶部</a>
7、ul：无序列表
<ul type="circle">
<li>鲜花</li>
<li>iphone 15</li>
<li>钻戒100克拉</li>
</ul>
<!--配合超链接-->
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">军事</a></li>
<li><a href="#">体育</a></li>
</ul>
/taɪp/
1、type:表示列表项编号类型
/dɪsk/
disc:默认，实心圆
/ˈsɜːkl/
circle:空心圆
/skweə(r)/
square:实心方块
8、ol：有序列表
<ol type="1" start="1000"> <li>鲜花</li> <li>iphone 15</li> <li>钻戒100克拉</li> </ol> 1、type:表示列表项编号类型 1:默认，阿拉伯数字 A:大写字母 a:小写字母 I:大写罗马数字 i:小写罗马数字 2、start="数值":表示编号起始值
9、列表的嵌套
<ul> <li>水果类 <ol> <li>苹果</li> <li>香蕉</li> </ol> </li> <li>蔬菜类 <ol> <li>白菜</li> <li>南瓜</li> </ol> </li> <li>食品类</li> </ul>
10、dl：定义列表
<dl> <dt>html</dt> <dd>超文本标记语言</dd> <dt>http</dt> <dd>超文本传输协议</dd> </dl> 1、<dl> <dt>名词</dt> <dd>说明性文本</dd> .... <dt>名词</dt> <dd>说明性文本</dd> </dl>
11、img：图片标签
<img src="img/bg.jpg" width="200" border="1" title="风景图" alt="这里有一张图" align="left" hspace="20" vspace="20"> <p>***在中央党校(国家行政学院) 中青年干部培训班开班式上发表重要讲话强调， 筑牢理想信念根基，树立践行正确政绩观， 广大党员干部深受鼓舞和激励，纷纷表示， ***的重要讲话饱含着对年轻干部的殷切期望， 为广大年轻干部健康成长指明了努力方向</p> <p>***在中央党校(国家行政学院) 中青年干部培训班开班式上发表重要讲话强调， 筑牢理想信念根基，树立践行正确政绩观， 广大党员干部深受鼓舞和激励，纷纷表示， ***的重要讲话饱含着对年轻干部的殷切期望， 为广大年轻干部健康成长指明了努力方向</p> <p>***在中央党校(国家行政学院) 中青年干部培训班开班式上发表重要讲话强调， 筑牢理想信念根基，树立践行正确政绩观， 广大党员干部深受鼓舞和激励，纷纷表示， ***的重要讲话饱含着对年轻干部的殷切期望， 为广大年轻干部健康成长指明了努力方向</p> <img src="图片地址"> /wɪdθ/ 1、width="像素":宽度，数值或百分比 /haɪt/ 2、height="像素":高度，数值或百分比 ----如果想保持图片比例不变，宽和高只需要设置一个即可。-------- /ˈbɔːdə(r)/ 3、border="像素":边框 4、title="文字"：提示文字 5、alt="文字":当图片加载不出来时，用于替代图片的文字 6、align:图片和文字的排列方式：left/right 7、hspace="像素":水平方向的留白 8、vspace="像素":垂直方向的留白
12、图片超链接
<a href="02.html"> <img src="img/0.png"> </a>
13、video：视频标签的属性
<!--第一种写法-->
<video src="media/大话西游.mp4"
controls="controls"
width="1259" height="798"
poster="img/cover.jpg"
muted="muted"
preload="auto">
您的浏览器不支持该标签。
</video>
/kənˈtrəʊlz/
1、controls="controls":控制条
/ˈɔːtəʊ'pleɪ/
2、autoplay="autoplay":自动播放
/ˈpəʊstə(r)/
3、poster="图片地址":封面图
4、width="像素"：宽
5、height="像素"：高
/ˈmjuːtɪd/
6、muted="muted"：静音
/ˌpriːˈləʊd/
7、preload:是否进行预加载
/ˈɔːtəʊ/
auto：自动加载
<!--第二种写法：更兼容-->
<video width="800" height="">
<source src="myvideo.mp4" type="video/mp4"></source>
<source src="myvideo.ogv" type="video/ogg"></source>
<source src="myvideo.webm" type="video/webm"></source>
<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
<param name="movie" value="myvideo.swf" />
<param name="flashvars" value="autostart=true&file=myvideo.swf" />
</object>
当前浏览器不支持 video直接播放，点击这里下载视频: <a href="myvideo.webm">下载视频</a>
</video>
14、audio：音频标签的属性
<!--第一种写法-->
<audio src="media/雪月.mp3" controls="controls">
当前浏览器不支持audio
</audio>
/kənˈtrəʊlz/
1、controls="controls":控制条
/ˈɔːtəʊ'pleɪ/
2、autoplay="autoplay":自动播放
/ˈmjuːtɪd/
3、muted="muted"：静音
/ˌpriːˈləʊd/
4、preload:是否进行预加载
/ˈɔːtəʊ/
auto：自动加载
<!--第二种写法：更兼容-->
<video controls="controls">
<source src="media/雪月.mp3" type="audio/mp3"></source>
</video>
15、table：表格标签
<table border="1" bordercolor="#f00"
cellspacing="0"
cellpadding="0" width="400" height="150"
align="center" bgcolor="aliceblue">
<caption>学生信息表</caption>
<tr height="60">
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>电话</th>
</tr>
<tr align="center" valign="top">
<td>1000</td>
<td width="150" align="left">张三</td>
<td>18</td>
<td>18888888888</td>
</tr>
<tr align="center">
<td>1001</td>
<td>李四</td>
<td>12</td>
<td>199999999999</td>
</tr>
</table>
/ˈteɪbl/
表示整个表格：<table></table>
表示一行: <tr></tr>
表示一列（单元格）: <th></th>或<td></td>
表示表格标题:<caption></caption>
*table标签属性
1、border="像素":边框
2、bordercolor：边框颜色
/selˈspeɪsɪŋ/
3、cellspacing="像素":单元格间距,通常设置为0
/selˈpædɪŋ/
4、cellpadding=像素:单元格边距,通常设置为0
/wɪdθ/
5、width="像素":宽
/haɪt/
6、height="像素":高
7、align:水平对齐方式
8、bgcolor:背景色
/ˈbækɡraʊnd/
9、background="图片地址":背景图片
*tr属性
1、height="像素":高
2、align:水平对齐方式
3、valign:垂直对齐方式：top/middle/bottom
4、bgcolor:背景色
5、background="图片地址":背景图片
注意：“行高列宽”
*th/td属性
1、width="像素":宽
2、align:水平对齐方式
3、valign:垂直对齐方式：
/ˈmɪdl//ˈbɒtəm/
top/middle/bottom
4、bgcolor:背景色
5、background="图片地址":背景图片
/rəʊ'spæn/
6、rowspan="数字"：跨行合并（上下）
/kɒl'spæn/
7、colspan="数字"：跨列合并（左右）
注意：“行高列宽”
16、表格标签 colspan：跨列合并（左右）
<table border="1" width="100" height="60" cellspacing="0" cellpadding="0"> <tr> <td colspan="3">1</td> </tr> <tr> <td>2</td> <td>3</td> <td>4</td> </tr> </table>
17、表格标签 rowspan：跨行合并（上下）
<table border="1" width="100" height="60" cellspacing="0" cellpadding="0"> <tr> <td rowspan="2">1</td> <td>2</td> </tr> <tr> <td>3</td> </tr> </table>
18、表格标签 跨行又跨列合并
<table border="1" width="300" height="200" cellspacing="0" cellpadding="0"> <tr> <td>1</td> <td colspan="3">1</td> </tr> <tr> <td rowspan="3">3</td> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td rowspan="2" colspan="2"> <table border="1" width="100" height="50"> <tr> <td>aaa</td> <td>bbb</td> </tr> <tr> <td>aaa</td> <td>bbb</td> </tr> </table> </td> </tr> <tr> <td>8</td> </tr> </table>
第三章表单与表单元素
https://www.runoob.com/html/html5-form-input-types.html
1、form:表单标签
<form name="myform" method="get"
action="sucess.html"
enctype="multipart/form-data"
target="_blank">
</form>
1、name="命名":表单名称
/ˈmeθəd/
2、method:表示提交表单数据的方法
get:默认，速度快，数据量小，url会出现要发送的数据，安全性低
/pəʊst/
post:速度慢，数据量大，url不会出现要发送的数据，安全性高
/ˈækʃn/
3、action="地址":表示表单数据处理程序的地址（即在哪里对表单进行处理）
/enk'taɪp/
4、enctype="multipart/form-data":表示表单数据的编码方式
/'mʌlti'pɑːt/
如果有文件上传，必须使用multipart/form-data这个值
5、target:表示目标窗口的打开方式。
_self:默认，本窗口显示
_blank：新窗口显示
2、文本框
用户名:
<input type="text" id="userName"
name="userName"
placeholder="请输入用户名"
value="" />
<br>
*<input type="text" id="编号" name="名称" >
1、name="名称"
/ˈpleɪshəʊldə(r)/
2、placeholder="提示文字" value="输入的值"
/mæks'leŋθ/
3、size="长度" maxlength="最多字符数"
4、readonly="readonly"/>
5、type：类型
6、text：文本
7、id="编号"
/ˈpleɪshəʊldə(r)/
8、placeholder="提示文字"
9、value="输入的值"
10、size="长度"
/mæks'leŋθ/
11、maxlength="最多字符数"
12、readonly="readonly":只读
3、密码框
密码:
<input type="password" name="userPwd"
placeholder="请输入密码"/>
<br>
1、name="名称"
/ˈpleɪshəʊldə(r)/
2、placeholder="提示文字" value="输入的值"
/mæks'leŋθ/
3、size="长度" maxlength="最多字符数"
4、readonly="readonly"/>
5、type：类型
6、text：密码
7、id="编号"
/ˈpleɪshəʊldə(r)/
8、placeholder="提示文字"
9、value="输入的值"
10、size="长度"
/mæks'leŋθ/
11、maxlength="最多字符数"
12、readonly="readonly":只读
4、单选按钮
性别:<!--name名称一样的单选按钮成为一组-->
<input type="radio" name="userSex"
value="男" checked="checked"/>男
<input type="radio" name="userSex"
value="女"/>女
1、type：类型
2、radio:单选按钮
3、id="编号"
4、name="名称"
5、value="值"
/tʃekt/
6、checked="checked":表示选中
5、复选框
爱好: <input type="checkbox" name="userHobby" value="game" />游戏 <input type="checkbox" name="userHobby" value="sport" />运动 <input type="checkbox" name="userHobby" value="sleep" />睡觉 1、type:类型 2、name="名称" 3、value="值"
6、文件域
上传头像: <input type="file" name="myfile" value="" /> 1、type：类型 2、file：文件 3、name="名称" 4、value=""：值
7、按钮：有3种类型（普通、提交、重置按钮）
<input type="button" value="普通按钮"> <input type="submit" value="提交按钮"> <input type="reset" value="重置按钮"> 1、type：类型 2、button：普通按钮 3、submit：提交按钮 4、reset:重置按钮 5、value="输入按钮名称"
8、 图像域
<input type="image" src="img/1.png" width="200" /> 1、type：类型 2、image：图像 3、src="图片地址" 4、width="像素"：宽 5、height="像素"：高
9、隐藏域
<input type="hidden" name="name1" value="aaaaaaaaa" /> 1、type：类型 2、hidden：隐藏 3、name="名称" 4、value="数据"
10、form:表单标签+table：表格标签
<form action="#" method="post"> <table border="" cellspacing="" cellpadding=""> <tr> <td>用户名</td> <td><input type="text" name="name1"></td> </tr> <tr> <td>密码</td> <td><input type="password" name="pwd1"></td> </tr> <tr> <td> </td> <td><input type="submit" value="登录"></td> </tr> </table> </form>
11、单选的下拉菜单
<select name="clist1" id="clist"> <option value ="" selected="selected">--请选择班级--</option> <option value ="180">S1S180</option> <option value ="181">S1S181</option> <option value ="182">S1S182</option> <option value ="183">S1S183</option> <option value ="184">S1S184</option> </select>
12、下拉选项可以进行分组
<select name="clist2"> <option value ="" selected="selected">--请选择班级--</option> <optgroup label="软件专业"> <option value ="180">S1S180</option> <option value ="181">S1S181</option> </optgroup> <optgroup label="AI专业"> <option value ="182">S1S182</option> <option value ="183">S1S183</option> <option value ="184">S1S184</option> </optgroup> </select>
13、多选的下拉菜单:mutilple表示多选，size表示默认显示的选项数
1、选修课: <select name="slist" multiple="multiple" size="4"> <option value="">计算机基础</option> <option value="">C#</option> <option value="">HTML</option> <option value="">JS</option> </select> 2、<select name="slist2" multiple="multiple" size="6"> <optgroup label="入门"> <option value="">计算机基础</option> <option value="">C#</option> </optgroup> <optgroup label="进阶"> <option value="">HTML</option> <option value="">JS</option> </optgroup> </select>
14、textarea：文本域：多行文本框
个人简介:
<textarea name="details" rows="5" cols="30"
placeholder="请输入个人简介，不少于100字">
</textarea>
/tekstˈeəriə/
*<textarea name="名称" rows="行数" cols="列数"
placeholder="提示文字">
</textarea>
1、name="名称"
2、rows="行数"
3、cols="列数"
/ˈpleɪshəʊldə/
4、placeholder="提示文字"
15、label：标签文字
<label for="username">姓名:</label> <label for="clist">班级:</label> *<label for="ID值">标签文字</label> 1、for="ID值"
16、fieldset：给元素进行分组
<fieldset>
<legend>账户信息</legend>
用户名:<input type="text" name="" id="" value="" /><br>
密码:<input type="password" name="" />
</fieldset>
<fieldset id="">
<legend>个人详细信息</legend>
姓名:<input type="text" name="" id="" value="" />
<br>
年龄:<input type="text" name="" id="" value="" />
</fieldset>
*<fieldset>
/ˈledʒənd/
<legend>分组标题</legend>
...各种表单元素
</fieldset>
17、.数据列表
喜欢的游戏: <input type="text" list="gamelist" /> <datalist id="gamelist"> <option value ="王者"></option> <option value ="CS"></option> <option value ="CF"></option> <option value ="LOL"></option> </datalist> <input type="submit" value="OK"/> *<datalist></datalist>：数据列表，用于给文本框设置关键字列表。 通过ID进行关联！！ <input type="text" list="gamelist" />
第四章样式表与常用样式属性
1、背景类
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
background-color: #ccc; /*背景色*/
}
</style>
</head>
2、字体类
<head>
<meta charset="utf-8">
<title></title>
<style>
p{ /*字体类css属性*/
font-size: 30px; /*字体大小*/
color: #008000; /*字体颜色*/
font-family: "隶书";/*字体*/
font-weight: bold; /*加粗*/
font-style: italic; /*斜体*/
text-decoration: underline; /*下划线*/
}
</style>
</head>
3、规则冲突
1、<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
h1{
font-size: 30px;
color: red;
}
p{
color: green;
}
</style>
</head>
<body>
<h1>
hello,
<p>zhangsan</p>
</h1>
</body>
2、<head>
<meta charset="utf-8">
<title></title>
<style>
/*就近原则*/
h1{
color: #008000;
}
</style>
</head>
<body>
<h1 style="color: #FF0000;">hello</h1>
</body>
4、行内样式
<body> <!-- 行内样式:写在标签内 color:表示字体颜色 font-size:表示字体大小 缺点：网页内容和表现没有分离 --> <h1 style="color:#f00;">aaa</h1> <h2>aaa</h2> <h3>aaa</h3> <p style="color:#0f0;font-size:50px;">aaa</p> </body>
5、嵌入样式
<head>
<meta charset="utf-8">
<title></title>
<!--嵌入样式:网页内容和表现在一定程度上分离-->
<style type="text/css">
/*基本语法：
选择器{
属性名1:值1;
属性名2:值2;
....
}
*/
/*标签选择器:用标签名作为选择器名称*/
h1{ /*给所有h1标签加效果*/
color: #f00; /*字体颜色为红色*/
}
p{ /*给所有p标签加效果*/
color: #0f0;
font-size: 50px; /*字体大小为50像素*/
}
a{
color: #000;
}
</style>
</head>
<body>
<h1>aaa</h1>
<h2>aaa</h2>
<h3>aaa</h3>
<p>aaa12312</p>
<p>aaa123123</p>
<p>aaa123</p>
<p>aaa123123123</p>
<a href="#">百度</a>
</body>
6、外部样式
<head> <meta charset="utf-8"> <title></title> <!--链接法:一般都用link--> <link rel="stylesheet" type="text/css" href="css/01.css" /> <!--导入法 <style type="text/css"> @import "css/01.css"; </style>--> </head> <body> <h1>aaa</h1> <h2>aaa</h2> <h3>aaa</h3> <p>aaa12312</p> <p>aaa123123</p> <p>aaa123</p> <p>aaa123123123</p> <a href="#">百度</a> </body>
第五章 样式表选择器
1、ID选择器
<style type="text/css">
/*ID选择器:以#开头+自定义ID名称
自定义ID名不能数字开头，不能有特殊符号
ID选择器只用于给特定元素加样式。
也就是说，一个ID选择器只能使用一次
*/
#myTitle{
background-color: #00FF00;
color: #FF0000;
}
#p1{
color: #0000FF;
}
/*在ID选择器前可以写上标签名作为限制
表示该ID选择器只能用于这种标签
*/
h2#myTitle2{ /*只能用于h2*/
background-color: aqua;
}
p#p2{
color: #FF0000;
}
</style>
</head>
<body>
<h1 id="myTitle">hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h2 id="myTitle2">hello2</h2>
<h3>hello3</h3>
<p id="p2">aaaaaaaaaaaaaaaaaaaa</p>
<p id="p1">bbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
</body>
1、针对某一个特定的标签使用
2、ID选择器:以#开头+自定义ID名称
自定义ID名不能数字开头，不能有特殊符号
ID选择器只用于给特定元素加样式。
也就是说，一个ID选择器只能使用一
3、在ID选择器前可以写上标签名作为限制
表示该ID选择器只能用于这种标签
4、id选择器的选择符是“#”。
5、任何的HTML标签都可以有id属性。表示这个标签的名字。这个标签的名字，可以任取，但是：
（1）只能有字母、数字、下划线。
（2）必须以字母开头。
（3）不能和标签同名。比如id不能叫做body、img、a。
（4）大小写严格区分，也就是说aa,和AA是两个不同的ID
另外，特别强调的是：HTML页面，不能出现相同的id，哪怕他们不是一个类型。比如页面上有一个id为pp的p，一个id为pp的div，是非法的！
2、标签选择器
<style type="text/css">
/*标签选择器:
给这种标签加样式
*/
body{
background-color: #CCC;
}
p{
color: red;
}
</style>
</head>
<body>
<p>aaaaaaaaaaa</p>
<p>aaaaaaaaaaa</p>
<p>aaaaaaaaaaa</p>
<p>aaaaaaaaaaa</p>
<p>aaaaaaaaaaa</p>
</body>
3、后代选择器
1、 <style type="text/css">
/*后代选择器:用空格隔开*/
h1 span{
color: red;
}
div span{
color: green;
}
table tr td p{
font-size: 40px;
color: #0000FF;
}
</style>
</head>
<body>
<h1>hello,<span>zhangsan</span></h1>
<div>
<h2>hello,<span>lisi</span></h2>
<h2>hello,<span>wangwu</span></h2>
<span>zhaoliu</span>
</div>
<p>aaaaaaa</p>
<table border="1" cellspacing="0" cellpadding="0">
<tr><th>Header</th></tr>
<tr>
<td>
<p>bbbbbbbbbb</p>
</td>
</tr>
</table>
</body>
2、 <style type="text/css">
#d1{
border: 5px solid red;
}
#d2{
border: 5px solid green;
}
/*表示ID为d1的DIV里面的段落*/
div#d1 p{
color: red;
}
div#d1 p span{
color: chartreuse;
}
div#d2 p{
color: #008000;
}
</style>
</head>
<body>
<div id="d1">
<p>aaaaaaaaaaaa</p>
<p>aaaaaa<span>aaaaaa</span></p>
</div>
<br>
<div id="d2">
<p>bbbbbbbbbbbbbbbbb</p>
<p>aaaaaa<span>bbbbb</span></p>
</div>
<p>cccccccccccccccccccccccc</p>
</body>
1、后代选择器:用空格隔开
2、对于E F这种格式，表示所有属于E元素后代的F元素，有这个样式。空格就表示后代。
3、后代选择器，就是一种平衡：共性、特性的平衡。当要把某一个部分的所有的什么，进行样式改变，就要想到后代选择器。
4、后代选择器，描述的是祖先结构。
4、类选择器
<style type="text/css">
/*类选择器:以.开头，后跟自定义的类名称
类选择器可以被使用多次
*/
.c1{
color: red;
}
.c2{
background-color: #00FF00;
}
/*类名称也可以加上标签名作为限制*/
h1.c3{ /*只能用于h1*/
color: brown;
}
</style>
</head>
<body>
<!--一个标签可以使用多个类选择器-->
<h1 class="c1 c2">hello</h1>
<h1 class="c2">hello</h1>
<h1 class="c1">hello</h1>
<h1>hello</h1>
<h1 class="c3">hello</h1>
<h2>hello2</h2>
<h3 class="c1">hello3</h3>
<p>aaaaaaaaaaaaaaaaaaaa</p>
<p class="c1">bbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
</body>
类选择器:以.开头，后跟自定义的类名称
类选择器可以被使用多次
5、通配符选择器
<style type="text/css">
/*通配符选择器:给所有元素加样式
用该选择器经常写的规则如下：
*/
*{
margin: 0px; /*外边距*/
padding: 0px;/*内边距*/
}
</style>
</head>
<body>
<h1 style="background-color: #00FF00;">hello</h1>
<h2 style="background-color: coral;">hello2</h2>
<h3>hello3</h3>
<p>aaaaaaaaaaaaaaaaaaaa</p>
<p>bbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
</body>
规定用*来定义
针对所有的标签都适用（不建议使用）
6、相邻兄弟元素选择器
<style type="text/css">
h1+h2{ /*h1后面相邻兄弟h2有效果*/
color: red;
}
h2+p{
color: blue;
}
h2+p+p+p{
color: #008000;
}
</style>
</head>
<body>
<h2>ddddddddddddddddd</h2>
<h1>aaaaaa</h1>
<h2>bbbbbbbbbb</h2>
<h2>ccccccccccccccc</h2>
<p>aaadsfsadfasdfasdfsdfsdf</p>
<p>aaadsfsadfasdfasdfsdfsdf</p>
<p>aaaaaaadfsdfdsfccccccccccccccccc</p>
</body>
1后面相邻兄弟2有效果
7、子元素选择器
<style type="text/css">
/*子元素选择器:用大于号隔开*/
div>h1{ /*div的子元素h1有效果*/
color: red;
}
div#d3>table>tbody>tr>td>h1{
color: blue;
}
</style>
</head>
<body>
<div>
<h1>hello,<span>zhagnsan</span></h1>
</div>
<h1>aaaaaaaaaaaaaa</h1>
<div id="d3">
<table border="1" cellspacing="" cellpadding="">
<tr><th>Header</th></tr>
<tr>
<td>
<h1>hahahahaha</h1>
</td>
</tr>
</table>
</div>
</body>
子元素选择器:用大于号隔开
8、组选择器
<style type="text/css">
/*组选择器:用逗号隔开多个选择器*/
h1,h2,h3{
color: red;
}
#id1,#id2,#id3,.c1,h4{
color: green;
}
</style>
</head>
<body>
<h1>hello</h1>
<h2>hello2</h2>
<h3>hello3</h3>
<p id="id1">aaaaaaaaaaaaaa</p>
<p class="c1">bbbbbbbbbbbbbbbbb</p>
</body>
组选择器:用逗号隔开多个选择器
9、属性选择器
<style type="text/css">
/*属性选择器*/
h1[align]{ /*给带有align属性的h1加效果*/
color: red;
}
h1[align="right"]{ /*给带有align="right"的h1加效果*/
color: green;
}
/*a[href="https://www.baidu.com"]{
color: #000000;
}*/
a[href][title]{ /*同时具有href和title属性的a标签有效果*/
color: #000000;
}
</style>
</head>
<body>
<h1>hello</h1>
<h1 align="center">hello2</h1>
<h1 align="right">hello3</h1>
<a href="https://www.baidu.com" title="baidu">百度</a><br>
<a href="https://www.taobao.com">淘宝</a>
</body>
属性选择器可以根据元素的属性值来选择元素
10、伪类选择器
1、 <style type="text/css">
/*伪类选择器常用于超链接效果：
四种伪类要按先后顺序来写：
:link,:visited,:hover,:active
(love hate原则)
*/
a:link{ /*未访问的超链接效果（:link也可以省略）*/
color: #000;
text-decoration:none ; /*文本修饰:无下划线*/
}
a:visited{ /*访问过的超链接的效果*/
color: darkgoldenrod;
}
a:hover{ /*鼠标在超链接上方时的效果*/
color: #FF0000;
/*text-decoration: underline;*/
}
a:active{ /*激活超链接时的效果*/
color: #008000;
}
</style>
</head>
<body>
<a href="https://www.aaa.com">京东</a><br>
<a href="https://www.taobao.com">淘宝</a>
<a href="#">aaaa</a>
<a href="#">bbbbb</a>
<h1 style="text-decoration: underline;">aaaaaaaa</h1>
<h1 style="text-decoration: line-through;">aaaaaaaaaaaa</h1>
<h1 style="text-decoration: overline;">aaaaaaaaaaaa</h1>
</body>
*对于<a>标签，其对应几种不同的状态：
/lɪŋk/
1、link：超链接点击之前 访问过的超链接的效果
/vɪzɪtɪd/
2、visited：超链接点击之后 访问过的超链接的效果
/fəʊkəs/
3、focus：是某个标签获得焦点的时候（比如某个输入框获得焦点）
/hɒvə(r)/
4、hover：鼠标放到某个标签上的时候 鼠标在超链接上方时的效果
/ˈæktɪv/
5、active：点击某个标签没有松鼠标时 激活超链接时的效果
CSS允许对于元素的不同状态，定义不同的样式信息。伪类选择器又分为两种：
静态伪类：只能用于超链接
动态伪类：针对所有标签都适用
（1）结合ID选择器
<style type="text/css">
/*结合ID选择器*/
a#id1:link{
color: #000000;
text-decoration: none;
}
a#id1:hover{
color: red;
}
</style>
</head>
<body>
<a href="#" id="id1">京东</a><br>
<a href="#">淘宝</a>
<a href="#">测试1</a>
<a href="#">测试2</a>
</body>
（2）结合class选择器
<style type="text/css">
/*结合class选择器*/
a.c1:link{
color: #000000;
text-decoration: none;
}
a.c1:hover{
color: red;
}
a.c2:link{
color: #000000;
}
a.c2:hover{
color: gold;
}
</style>
</head>
<body>
<a href="#" class="c1">京东</a>
<a href="#" class="c1">淘宝</a> <br>
<a href="#" class="c2">测试1</a>
<a href="#" class="c2">测试2</a>
</body>
（3）结合后代选择器
<style type="text/css">
/*结合后代选择器一起使用*/
div#aa a:link{
color: #000000;
text-decoration: none;
}
div#aa a:hover{
color: red;
}
ul#menu li a:link{
background-color: #008000;
color: #fff;
text-decoration: underline;
}
ul#menu li a:hover{
color: red;
}
</style>
</head>
<body>
<div id="aa">
<a href="#">京东</a>
<a href="#">淘宝</a>
</div>
<div id="bb">
<a href="#">测试1</a>
<a href="#">测试2</a>
</div>
<ul id="menu">
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
</ul>
<ul id="typelist">
<li><a href="#">图书</a></li>
<li><a href="#">电脑</a></li>
<li><a href="#">手机</a></li>
<li><a href="#">衣服</a></li>
</ul>
</body>
11、常见CSS属性
<style type="text/css">
p{
font-size: 30px;
color: red;
font-family: 楷体;
font-weight: bold; /*加粗*/
font-style: italic;/*倾斜*/
text-decoration: underline; /*下划线*/
line-height: 55px; /*设置行高：行间距*/
letter-spacing: 20px;/*字符间距*/
text-indent: 2cm; /*文本缩进:2厘米*/
}
h1{
text-align: center;/*文本水平对齐方式*/
/*vertical-align: middle; 垂直对齐方式*/
background-color: #008000; /*背景色*/
}
body{
background-image: url(img/111.png);/*背景图片*/
background-repeat: no-repeat;/* 背景不重复*/
background-size: 10% 10%; /*背景大小*/
background-attachment: fixed;/*背景固定*/
background-position: center center;/*背景位置*/
}
</style>
</head>
<body>
<h1>新闻</h1>
<p>***指出，要坚持新时代好干部标准，努力建设一支维护党的集中统一领导态度特别坚决、明辨大是大非立场特别清醒、铸牢中华民族共同体意识行动特别坚定、热爱各族群众感情特别真挚的民族地区干部队伍，确保各级领导权掌握在忠诚干净担当的干部手中</p>
<p>***指出，要坚持新时代好干部标准，努力建设一支维护党的集中统一领导态度特别坚决、明辨大是大非立场特别清醒、铸牢中华民族共同体意识行动特别坚定、热爱各族群众感情特别真挚的民族地区干部队伍，确保各级领导权掌握在忠诚干净担当的干部手中</p>
<p>***指出，要坚持新时代好干部标准，努力建设一支维护党的集中统一领导态度特别坚决、明辨大是大非立场特别清醒、铸牢中华民族共同体意识行动特别坚定、热爱各族群众感情特别真挚的民族地区干部队伍，确保各级领导权掌握在忠诚干净担当的干部手中</p>
<p>***指出，要坚持新时代好干部标准，努力建设一支维护党的集中统一领导态度特别坚决、明辨大是大非立场特别清醒、铸牢中华民族共同体意识行动特别坚定、热爱各族群众感情特别真挚的民族地区干部队伍，确保各级领导权掌握在忠诚干净担当的干部手中</p>
<p>***指出，要坚持新时代好干部标准，努力建设一支维护党的集中统一领导态度特别坚决、明辨大是大非立场特别清醒、铸牢中华民族共同体意识行动特别坚定、热爱各族群众感情特别真挚的民族地区干部队伍，确保各级领导权掌握在忠诚干净担当的干部手中</p>
<p>***指出，要坚持新时代好干部标准，努力建设一支维护党的集中统一领导态度特别坚决、明辨大是大非立场特别清醒、铸牢中华民族共同体意识行动特别坚定、热爱各族群众感情特别真挚的民族地区干部队伍，确保各级领导权掌握在忠诚干净担当的干部手中</p>
<p>***指出，要坚持新时代好干部标准，努力建设一支维护党的集中统一领导态度特别坚决、明辨大是大非立场特别清醒、铸牢中华民族共同体意识行动特别坚定、热爱各族群众感情特别真挚的民族地区干部队伍，确保各级领导权掌握在忠诚干净担当的干部手中</p>
<p>***指出，要坚持新时代好干部标准，努力建设一支维护党的集中统一领导态度特别坚决、明辨大是大非立场特别清醒、铸牢中华民族共同体意识行动特别坚定、热爱各族群众感情特别真挚的民族地区干部队伍，确保各级领导权掌握在忠诚干净担当的干部手中</p>
<p>***指出，要坚持新时代好干部标准，努力建设一支维护党的集中统一领导态度特别坚决、明辨大是大非立场特别清醒、铸牢中华民族共同体意识行动特别坚定、热爱各族群众感情特别真挚的民族地区干部队伍，确保各级领导权掌握在忠诚干净担当的干部手中</p>
<p>***指出，要坚持新时代好干部标准，努力建设一支维护党的集中统一领导态度特别坚决、明辨大是大非立场特别清醒、铸牢中华民族共同体意识行动特别坚定、热爱各族群众感情特别真挚的民族地区干部队伍，确保各级领导权掌握在忠诚干净担当的干部手中</p>
<p>***指出，要坚持新时代好干部标准，努力建设一支维护党的集中统一领导态度特别坚决、明辨大是大非立场特别清醒、铸牢中华民族共同体意识行动特别坚定、热爱各族群众感情特别真挚的民族地区干部队伍，确保各级领导权掌握在忠诚干净担当的干部手中</p>
<p>***指出，要坚持新时代好干部标准，努力建设一支维护党的集中统一领导态度特别坚决、明辨大是大非立场特别清醒、铸牢中华民族共同体意识行动特别坚定、热爱各族群众感情特别真挚的民族地区干部队伍，确保各级领导权掌握在忠诚干净担当的干部手中</p>
</body>
（1）边框
<style type="text/css">
div#d1{
width: 100px;
height: 100px;
/*
solid：实线
dotted:点线
dashed:虚线
double:双线
*/
border: 5px solid red;
}
table#t1{
border: 1px solid green;
border-collapse: collapse;/*边框合并*/
/*border-spacing: 20px;*/
/*单元格间距：
当border-collapse为separate时才有效*/
}
table#t1 tr td{
border: 1px solid green;
}
.myinput{
border: 0px;/*去掉边框*/
border-bottom: 1px solid red;
/*outline: 5px solid green;*/
outline: 0px; /*去掉轮廓*/
}
</style>
</head>
<body>
<div id="d1">
</div>
<br>
<table id="t1">
<tr><td>Header</td></tr>
<tr><td>Data</td></tr>
</table>
<br><br>
<form action="#" method="post">
用户名:<input type="text" name="userName" class="myinput"/>
<br>
密码:<input type="password" name="userPwd" class="myinput"/>
<br>
<input type="submit" value="OK"/>
</form>
（2）尺寸
<style type="text/css">
h1{
display: inline;/*以内联方式显示*/
}
a{
background-color: #008000;
width: 400px;
height: 200px;
display: block;/*以块状方式显示*/
/*display: none;*/ /*隐藏元素*/
}
</style>
</head>
<body>
<h1>hello</h1>
<a href="#">aaa</a>
</body>
（3）导航条
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul#menu{
list-style-type: none;
width: 800px;
height: 35px;
background-color: #008000;
}
ul#menu li{
float: left;/*li浮动，让li左右排列*/
width: 130px;
height: 30px;
text-align: center;
padding-top:5px;
}
ul#menu li a{
color: #fff;
text-decoration: none;
}
ul#menu li a:hover{
color: red;
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="#">新闻</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">军事</a></li>
<li><a href="#">体育</a></li>
<li><a href="#">NBA</a></li>
<li><a href="#">论坛</a></li>
</ul>
</body>
（4）列表
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
/*编号类型*/
list-style-type: none;/*去掉编号*/
list-style-position: inside;/*项目编号位置*/
list-style-image: url(img/dog-emoji.png);
border:1px solid red;
}
ul li{
border: 1px solid green;
}
</style>
</head>
<body>
<h1>课程列表</h1>
<ul>
<li>计算机基础</li>
<li>html</li>
<li>c#</li>
<li>js</li>
</ul>
</body>
第六章样式表的框架模型和定位
1、盒子模型
1、 <style type="text/css">
*{
margin: 0;
padding: 0;
}
#aa{
border: 5px solid red;
width: 200px;
height: 100px;
/*内边距*/
/*padding: 20px;*/ /*上下左右四个方向的内边距都是20px*/
/*padding: 10px 30px;*/ /*第一个用于上下，第二个用于左右*/
/*padding: 10px 20px 30px;*/ /*第一个用于上，第二个用于左右，第三个用于下*/
/*padding: 10px 20px 30px 40px;*/ /*上右下左的顺序*/
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
/*外边距：margin，用法跟padding一致*/
/*margin: 10px;*/
margin-left: 10px;
margin-right: 10px;
margin-top: 5px;
margin-bottom: 5px;
}
/*
盒子的总宽度=width+左右边框+左右内边距+左右外边距
盒子的总高度=height+上下边框+上下内边距+上下外边距
*/
</style>
</head>
<body>
<div id="aa">
在2022年全国两会上，***把在2022年全国两会上，***把在2022年全国两会上，***把
</div>
</body>
2、 <style type="text/css">
*{
margin: 0;
padding: 0;
}
div#one{
border: 1px solid red;
width: 300px;
height: 400px;
margin: 0px auto;/*居中*//*上下为0左右居中*/
}
div#a{
border: 1px solid green;
width: 250px;
height: 150px;
padding:10px ;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;/*a*/
}
div#b{
border: 1px solid blue;
width: 250px;
height: 150px;
padding:10px ;
margin-left: 10px;
margin-top: 20px;/*b*/
}
/*当垂直方向设置外边距，会发生合并的情况
，比如上面的a和b的位置设置的是同一个外边距，
，发生合并的结果是以大的值为准
*/
</style>
</head>
<body>
<div id="one">
<div id="a">
hello
</div>
<div id="b">
hi
</div>
</div>
</body>
3、 <style type="text/css">
*{
margin: 0;
padding: 0;
}
div#one{
border: 1px solid red;
width: 400px;
height: 220px;
padding: 5px;
}
div#a{
width:150px ;
height: 200px;
border: 1px solid green;
float: left;
margin-right: 10px;
}
div#b{
width:150px ;
height: 200px;
border: 1px solid blue;
float: left;
}
</style>
</head>
<body>
<div id="one">
<div id="a">
hello
</div>
<div id="b">
hi
</div>
</div>
</body>
2、DIV+CSS布局
css文件
*{ /*把所有元素的内外边距设置为0*/
margin: 0px;
padding: 0px;
}
/*-----最顶部导航的样式------*/
#head{
width: 100%;
height: 25px;
padding-left: 20px;
padding-right: 20px;
padding-top: 5px;
padding-bottom: 5px;
}
#head ul{
list-style-type: none; /*去除编号*/
}
#head ul li{
float: left;
margin-right: 20px;
}
#head ul li a{
color: #000;
font-size: 14px;
text-decoration: none;
}
#head ul li a:hover{
color: #f00;
}
/*logo部分样式*/
#logo{
width: 950px;
margin: 0px auto; /*div居中*/
padding-top: 10px;
padding-bottom: 10px;
}
#logo img{
width: 180px;
}
/*----menu菜单部分样式--------*/
#menu{
width: 100%;
height: 35px;
background-color: coral;
}
#menu ul{
list-style-type: none;
width: 950px;
margin: 0px auto;
}
#menu ul li{
float: left;
width: 120px;
height: 30px;
text-align: center;
padding-top: 5px;
}
#menu ul li a{
color: #fff;
font-size: 14px;
text-decoration: none;
}
#menu ul li:hover{ /*鼠标在li上方时*/
background-color: darkorchid;
}
#menu ul li:hover a{/*鼠标在li上方时,里面的超链接效果*/
color: #FF0000;
}
/*-------内容content部分的样式--------------*/
#content{
width: 950px;
margin: 0px auto;
margin-top: 10px;
}
#content_left{
width: 200px;
height: 246px;
float: left;
margin-right: 10px;
background-color: #ddd;
margin-bottom: 10px;
}
#content_center{
width: 530px;
height: 246px;
background-color: antiquewhite;
float: left;
margin-right: 10px;
}
#content_right{
width: 200px ;
height: 246px;
background-color: #FF0000;
float: left;
}
#content_left ul{
list-style-type: none;
}
#content_left ul li{
font-size: 14px;
padding-left: 20px;
line-height: 30px;
}
#content_left ul li a{
color: #000000;
text-decoration: none;
}
#content_left ul li:hover{
background-color: #ccc;
}
#content_left ul li:hover a{
color: red;
}
#content_center img{
width: 530px;
}
/*推荐部分css*/
#tuijian{
width: 950px;
margin: 0px auto;
margin-top: 10px;
clear: both; /*清除两边的浮动对象*/
}
#tuijian span{
display: block;
font-size: 18px;
font-weight: bold;
width: 950px;
height: 35px;
clear: both;
}
#tuijian ul{
list-style-type: none;
padding-left: 6px;
}
#tuijian ul li{
float: left;
margin-right: 6px;
}
-------------------------------HTML-------------------------
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<div id="head">
<ul>
<li><a href="#">机构合作</a></li>
<li><a href="#">机构合作</a></li>
<li><a href="#">机构合作</a></li>
<li style="margin-right: 600px;"><a href="#">机构合作</a></li>
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
</ul>
</div>
<!--logo-->
<div id="logo">
<a href="#"><img src="img/logo.svg" ></a>
</div>
<div id="menu">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">书城</a></li>
<li><a href="#">电台</a></li>
<li><a href="#">小说</a></li>
<li><a href="#">脱口秀</a></li>
<li><a href="#">VIP小说</a></li>
</ul>
</div>
<div id="content">
<div id="content_left">
<ul>
<li><a href="#">儿童</a></li>
<li><a href="#">儿童</a></li>
<li><a href="#">儿童</a></li>
<li><a href="#">儿童</a></li>
<li><a href="#">儿童</a></li>
<li><a href="#">儿童</a></li>
<li><a href="#">儿童</a></li>
<li><a href="#">儿童</a></li>
</ul>
</div>
<div id="content_center">
<img src="img/1.jpeg" >
</div>
<div id="content_right">
</div>
</div>
<div id="tuijian">
<span>
每日推荐
</span>
<ul>
<li><img src="img/2.jpeg" ></li>
<li><img src="img/2.jpeg" ></li>
<li><img src="img/2.jpeg" ></li>
<li><img src="img/2.jpeg" ></li>
<li><img src="img/2.jpeg" ></li>
<li><img src="img/2.jpeg" ></li>
<li><img src="img/2.jpeg" ></li>
<li><img src="img/2.jpeg" ></li>
</ul>
<span>
热门节目
</span>
<ul>
<li><img src="img/2.jpeg" ></li>
<li><img src="img/2.jpeg" ></li>
<li><img src="img/2.jpeg" ></li>
<li><img src="img/2.jpeg" ></li>
<li><img src="img/2.jpeg" ></li>
<li><img src="img/2.jpeg" ></li>
<li><img src="img/2.jpeg" ></li>
<li><img src="img/2.jpeg" ></li>
</ul>
</div>
</body>
------------------------------------------------------------
------------------------------------------------------------
2、css文件
*{
margin: 0;
padding: 0;
}
#all{
background-color: aqua;
width: 900px;
margin: 0px auto; /*居中*/
}
#head{
width: 900px;
height: 56px;
}
#head img{
width: 60px;
float: left;
margin-right: 30px;
margin-left: 10px;
}
#head ul{
float: left;
list-style-type: none;
margin-top: 15px;
}
#head ul li{
float: left;
margin-right: 40px;
}
#head ul li a{
color: #000;
font-size: 18px;
font-weight: bold;
text-decoration: none;
}
#head ul li a:hover{
color: #FF0000;
}
#imgs{
width: 900px;
}
#imgs img{
width: 900px;
}
#content{
width: 900px;
}
#left{
width: 650px;
float: left;
margin-bottom: 15px;
}
#right{
width: 240px;
float: right;
}
#left span,#products span{
font-size: 24px;
font-weight: bold;
line-height: 45px;
}
#left p{
font-weight: 12px;
color: #333;
line-height: 28px;
}
#right img{
margin-top: 50px;
margin-left: 5px;
}
#products{
width: 900px;
clear: both; /*清除浮动*/
}
#products ul img{
width: 280px;
height: 140px;
}
#products ul{
list-style-type: none;
text-align: center;
}
#products ul li{
float: left;
margin-right: 15px;
font-size: 14px;
color: #666;
margin-bottom: 20px;
}
#bottom{
width: 100%;
height: 120px;
background-color: #666666;
clear: both;
}
#bottom span{
display: block; /*变成块状元素*/
width: 300px;
float: left;
color: #fff;
text-align: center;
padding-top: 40px;
padding-bottom: 40px;
}
-------------------------HTML-------------------------------
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<div id="all">
<div id="head">
<a href="#"><img src="img/logo.png" ></a>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
</ul>
</div>
<div id="imgs">
<img src="img/1.png" >
</div>
<div id="content">
<div id="left">
<span>关于我们</span>
<p>广州世铭电力设备工程有限公司，
于2015年创立，专注成套电力设备领域。
目前公司占地约800平方米，员工30余人，公司总资产超1000万元。
公司设有企业技术中心，汇聚国内优秀研发团队及技术人才近10人， 产品已成功进入南方电网、轨道交通、石油化工、数据中心等20个行业和地区， 并凭借优秀品质和完美服务具有一定的影响力。公司在现代企业制度的基础上， 建立了一套完善的人事管理、科研管理、财务管理、营销管理等综合管理体系。 公司在坚持既定业务领域的同时，依托强大技术支持，立足于长远发展， 积极拓展了新型直流电源设备领域，并计划进入新型直流电源领域。“创新、 专业、团结、奋进”的发展理念，
指引了公司过去的成长，也将继续指引未来的发展。</p>
</div>
<div id="right">
<img src="img/2.png" >
</div>
</div>
<div id="products">
<span>产品展示</span>
<ul>
<li style="margin-left: 15px;"><img src="img/3.jpeg" ><br>
便携式交流直流电源测试装置
</li>
<li><img src="img/4.jpeg" ><br>
TMCD-100 数字显示表
</li>
<li><img src="img/5.jpeg" ><br>
KYN28-12高压开关柜
</li>
</ul>
</div>
</div>
<div id="bottom">
<span>
版权所有:<br>
广州世铭电力设备工程有限公司
</span>
<span>
地址:<br>
广东省广州市白云区江高镇神石路45-1号
</span>
<span>
电话:<br>
020-11112222
</span>
</div>
</body>
3、css定位及其他
(1) 层叠次序
<style type="text/css">
#one,#two{
width: 100px;
height: 100px;
background-color: #FF7F50;
position: absolute;
}
#one{
left: 0px;
top:0px;
z-index: 1;/*对象的层叠次序，值越大，越在上方*/
}
#two{
left: 20px;
top:40px;
background-color: aquamarine;
z-index: 2;
}
</style>
</head>
<body>
<div id="one">
aaaa
</div>
<div id="two">
bbbb
</div>
</body>
(2) 固定定位
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#all{
width: 800px;
height: 1200px;
margin: 0px auto;
background-color: aqua;
}
#test{
width: 100px;
height: 100px;
border: 1px solid red;
position: fixed; /*固定定位*/
right: 5px;
bottom: 0px;
}
</style>
</head>
<body>
<div id="test">
<a href="#">返回顶部</a>
</div>
<div id="all">
网页内容
</div>
</body>
(3) 绝对定位
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#all{
width: 800px;
height: 900px;
margin: 0px auto;
background-color: aqua;
}
#adv{
width: 120px;
position: absolute; /*绝对定位*/
left: 10px;
top:50px;
/*right: 5px;
bottom: 10px;*/
}
#adv img{
width: 120px;
height: 200px;
}
</style>
</head>
<body>
<div id="adv">
<img src="img/adv.webp" >
</div>
<div id="all">
网页内容
</div>
</body>
(4) 相对定位
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#one,#two{
width:200px ;
height: 100px;
border: 1px solid red;
margin-bottom: 10px;
}
#one{
position: relative;/*相对定位，相对于自身原始位置的移动*/
left: 50px;
top: 50px;
}
</style>
</head>
<body>
<div id="one">
aaaaaaa
</div>
<div id="two">
bbbbbbbbbb
</div>
</body>
------------------------------------------------------------
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#all{
width: 800px;
height: 600px;
margin: 0px auto;
}
#imgs{
width: 300px;
position: relative;/*相对定位*/
}
#numbers{
width: 300px;
height: 35px;
background-color: rgba(0,250,0,0.8);/*背景色透明度为0.8*/
text-align: center;
position: absolute; /*绝对定位：以最近具有定位属性的元素作为参照*/
left: 0px;
top: 200px;
}
#numbers span{
background-color: coral;
color: #ffffff;
display: inline-block;
width: 20px;
height: 20px;
border-radius: 10px; /*半径是宽高的一半，就是正圆*/
margin-top: 5px;
}
</style>
</head>
<body>
<div id="all">
网页内容
<h1>xxxxxxxxxxxxxxxx</h1>
<div id="imgs">
<img src="img/2.webp" width="300" >
<div id="numbers">
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
</div>
</div>
</div>
</body>
(5) 粘性定位
<style type="text/css">
h1{
position: sticky; /*粘性定位:可以说是static（没有定位） 和 固定定位fixed 的结合*/
top: 0px;
background-color: #FF0000;
}
</style>
</head>
<body>
<h1>新闻列表</h1>
<ul>
<li><a href="#">哈哈哈</a></li>
<li><a href="#">哈哈哈</a></li>
<li><a href="#">哈哈哈</a></li>
<li><a href="#">哈哈哈</a></li><li><a href="#">哈哈哈</a></li><li><a href="#">哈哈哈</a></li>
<li><a href="#">哈哈哈</a></li>
<li><a href="#">哈哈哈</a></li>
<li><a href="#">哈哈哈</a></li>
<li><a href="#">哈哈哈</a></li>
<li><a href="#">哈哈哈</a></li>
<li><a href="#">哈哈哈</a></li>
<li><a href="#">哈哈哈</a></li>
<li><a href="#">哈哈哈</a></li>
<li><a href="#">哈哈哈</a></li><li><a href="#">哈哈哈</a></li><li><a href="#">哈哈哈</a></li>
<li><a href="#">哈哈哈</a></li>
<li><a href="#">哈哈哈</a></li>
<li><a href="#">哈哈哈</a></li>
<li><a href="#">哈哈哈</a></li>
<li><a href="#">哈哈哈</a></li>
<li><a href="#">哈哈哈</a></li>
<li><a href="#">哈哈哈</a></li>
<li><a href="#">哈哈哈</a></li>
<li><a href="#">哈哈哈</a></li><li><a href="#">哈哈哈</a></li><li><a href="#">哈哈哈</a></li>
<li><a href="#">哈哈哈</a></li>
<li><a href="#">哈哈哈</a></li>
<li><a href="#">哈哈哈</a></li>
<li><a href="#">哈哈哈</a></li>
<li><a href="#">哈哈哈</a></li>
<li><a href="#">哈哈哈</a></li>
<li><a href="#">哈哈哈</a></li>
<li><a href="#">哈哈哈</a></li>
<li><a href="#">哈哈哈</a></li><li><a href="#">哈哈哈</a></li><li><a href="#">哈哈哈</a></li>
<li><a href="#">哈哈哈</a></li>
<li><a href="#">哈哈哈</a></li>
<li><a href="#">哈哈哈</a></li>
<li><a href="#">哈哈哈</a></li>
<li><a href="#">哈哈哈</a></li>
<li><a href="#">哈哈哈</a></li>
<li><a href="#">哈哈哈</a></li>
<li><a href="#">哈哈哈</a></li>
<li><a href="#">哈哈哈</a></li><li><a href="#">哈哈哈</a></li><li><a href="#">哈哈哈</a></li>
<li><a href="#">哈哈哈</a></li>
<li><a href="#">哈哈哈</a></li>
<li><a href="#">哈哈哈</a></li>
<li><a href="#">哈哈哈</a></li>
<li><a href="#">哈哈哈</a></li>
</ul>
</body>
(6) 字体图标2--font class引入
css文件
.icon-gouwuchekong:before {
content: "\f0179";
}
.icon-gouwuche:before {
content: "\e899";
}
(7) 字体图标-svg引入
<title></title>
<script src="js/iconfont.js"></script>
<style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
</head>
<body>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-gouwuche" ></use>
</svg>
</body>
(8) 显示某一个小图标
<style type="text/css">
#d1{
width: 30px;
height: 30px;
border: 1px solid red;
background-image: url(img/0.webp);
background-position: 0px -150px;
}
</style>
</head>
<body>
<div id="d1">
</div>
</body>
(9) 其它css属性
<style type="text/css">
#d1{
width: 200px;
height: 200px;
border: 1px solid red;
border-radius: 20px ; /*边框半径，实现圆角效果*/
background-color: rgba(255,0,0,0.5); /*透明色:透明度在0~1之间*/
/*background-color: #ff0000;
opacity: 0.5;*/ /*透明度，里面的元素也会变透明*/
/*box-shadow:10px 20px 5px #00FFFF;*/ /*盒子阴影:水平偏移量 垂直偏移量 模糊度 颜色*/
box-shadow: 0px 0px 5px #00FF00;
font-family: myfont; /*使用自定义字体*/
}
/*自定义字体*/
@font-face {
font-family:myfont;
src: url('font/仓耳舒圆体W05.ttf');
}
</style>
</head>
<body>
<div id="d1">
你好
</div>
</body>
浙公网安备 33010602011771号