web前端开发（一）

//有序列表
 <ol>
        <li>haha</li>
        <li>haha</li>
        <li>haha</li>
 </ol>
//无序列表
 <ul>
        <li>haha</li>
        <li>haha</li>
        <li>haha</li>
 </ul>
<dl>
        <dt>我是图片</dt>
        <dd>我是文字</dd>
</dl>

二、图片标签属性

 <img src="1.jpg" title="鼠标悬停提示信息" alt="不显示提示信息" width="" height="">

三、表格

1.表格行列及属性

<body>
		<table border="1" width="500" height="500" 
			align="center"
			bordercolor="red"
		 	bgcolor="yellow" 
			cellspacing="20"  //单元格之间的间距
			cellpadding="10">  //单元格与内容之间的间距
		    <tr height="300" 
                width="200"
                bgcolor="aquamarine"
                align="center" 
                valign="middle">	
                <td>1</td>    			                           
				<td>2</td>	
			</tr>
			<tr>
				<td>3</td>
				<td>4</td>	
			</tr>
		</table>
</body>

2.单元格合并

<body>
		<table border="1" width="300"height="300">
			<tr>
				<td>不毛</td>
				<td colspan="2" rowspan="2">魏国</td>
			<!--	<td>辽东</td>-->
			</tr>
			<tr>
				<td rowspan="2">蜀国</td>
				<!--<td colspan="2">西凉</td>-->
				<!--<td>幽州</td>-->
			</tr>
			<tr>
				<!--<td>南中</td>-->
				<td colspan="2">吴国</td>
				<!--<td>荆州</td>-->
			</tr>
			
		</table>
</body>

3.表单案例

<body>
		<table border="1" bordercolor="pink" cellspacing="0" cellpadding="0" align="center">
			<tr height="50" align="center">
				<td width="100">会员姓名</td>
				<td width="150"></td>
				<td width="100">出生日期</td>
				<td width="150"</td>
			</tr>
			<tr height="50" align="center" >
				<td  width="100">身份证号</td>
				<td colspan="3"></td>
			</tr>
			<tr height="50" align="center">
				<td width="100">通信地址</td>
				<td colspan="3"></td>
			</tr>
			<tr height="50" align="center">
				<td width="100">联系电话</td>
				<td colspan="3"></td>
				
			</tr>
			<tr height="50" align="center">
				<td width="100">会员卡号</td>
				<td colspan="3"></td>
			</tr>
		</table>
</body>

四、表单标签

<body>
		<form action="" method="post">
			用户信息：<input type="text" placeholder="请输入用户名" name="username"/><br />
			密码：&emsp;&emsp;<input type="password" placeholder="请输入密码" name="mina"/>                                                        <br />
			<input type="submit" value="登录" />
			<!--提交信息到action指定地址-->
			<button>登录</button>
			<input type="reset" value="重新输入一遍吧" />
		</form>
</body>

五、CSS样式

1.内部样式表

<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			h1{
				color:red
			}
			h2{
				color:yellow
			}
			h3{
				color:blue
			}
		</style>
	</head>
	<body>
		<h1>hahaha</h1>
		<h2>balabala</h2>
		<h3>deligence</h3>
</body>

2.外部样式表

css.html
<head>
		<meta charset="UTF-8">
		<title></title>
        //方式一
		<link rel="stylesheet" type="text/css" href="../css/index.css"/>
        //方式二
		<style>
			@import url("../css/index.css");
		</style>
	</head>
	<body>
		<h2>balabala</h2>
		<h3>deligence</h3>
</body>

index.css
 h2{
	color:yellow
  }			
 h3{
	color:blue
  }

3.行内样式表

<body>
		<h2 style="color: #0000FF;">balabala</h2>
		<h3 style="color:red">deligence</h3>
</body>

4.样式优先级

行内>内部>外部

六、选择器

1.标签选择器

    <head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				background: red;
				color:sandybrown
			}
			h1{
				background: darkturquoise;
				color:aqua
			}
		</style>
    </head>
	<body>
		<div>111</div>
		<h1>222</h1>
	</body>

2.类选择器

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.ibm{
				background: blue;
			}
            .love{
				color:antiquewhite
			}
		</style>
	</head>
	<body>
		<div class="ibm love">soga-1</div>
		<div class="ibm">soga-2</div>
		<div class="ibm">soga-3</div>
		<div>soga-4</div>
	</body>

3.id选择器

    <head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#box1{
				background: greenyellow;
			}
			#box2{
				background: hotpink;
			}
		</style>
	</head>
	<body>
		<div id=box1>111</div>
		<div id=box2>222</div>
	</body>

4.通配符选择器

主要用来处理边距

    <head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		*{
			/*外边距*/
			margin:0;
			/*内边距*/
			padding:0;
		}
		</style>
	</head>
	<body>
		<h1>标题</h1>
		<div>111</div>
		<ul>
			<li>111</li>
			<li>222</li>
			<li333></li>
		</ul>
	</body>

5.群组和后代选择器

    <head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div,h1{
				background: red;
			}
		</style>
	</head>
	<body>
		<div>111</div>
		<h1>222</h1>
	</body>

    <head>
		<meta charset="UTF-8">
		<title></title>
		<style>
            //只有div标签下的p标签才会被选择
			div h1{
				background: red;
			}
		</style>
	</head>
	<body>
		<div>
			<h1>11111111</h1>
		</div>
		<h1>2222222</h1>
	</body>

6.伪选择器

    <head>
		<meta charset="UTF-8">
		<title></title>
		<style>
				/*初始状态*/
			a:link{
				color: yellow;
			}
				/*访问之后*/
			a:visited{
				color:red;
			}
				/*鼠标以上*/
			a:hover{
				color:orange;
			}
				/*点击激活*/
			a:active{
				color: green;
			}
		</style>
    </head>
	<body>
		<a href="http://www.baidu.com">百度</a>
	</body>

案例

    <head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*a:link{
				background-color: black;
				color:white;
			}
			a:visited{
				background-color: black;
				color:white;
			}*/
			a{
				background-color: black;
				color:white;
			}
			a:hover{
				background-color:red;
			}
			/*a:active{
				background-color: red;
			}*/
		</style>
	</head>
	<body>

7.选择器优先级

七、CSS属性

1.文本属性

    <head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.p1{
				font-size: 13px;
			}
			.p2{
				font-family:"franklin gothic medium cond";
			}
			.p3{
				color:coral;
			}
			.p4{
				/*100：偏细  lighter
				 *400：正常  normal
				 *700：加粗  bold
				 * 900：更粗体 bolder
				 * */
				font-weight: bold;
			}
			.p5{
				font-style:italic;
			}
			.p6{
				text-align: center;
				width:500px;
				background: yellow;
			}
			.box1{
				text-align: center;
				width: 500px;
				background-color: red;
			}
			.box2{
				/*两端对齐：justify   用于多行文本的对齐*/
				text-align: justify;
				width: 500px;
				background-color: blueviolet;
			}
			.box3{
				width: 500px;
				height: 100px;
				text-align: center;
				background-color: yellow;
				/*line-height=height的数据，可以实现单行文本垂直居中*/
				line-height: 100px;
			}
			.emp{
				/*letter-spacing: 20px;*/
				/*首行缩进*/
			}
			.emp{
				font-size: 20px;
				text-indent: 2em;
				text-decoration: underline;
			}
		</style>
	</head>
	<body>
		<p class="p1">晚风中闪过几帧从前啊，飞驰中旋转已不见了吗</p>
		<p class="p2">晚风中闪过几帧从前啊，飞驰中旋转已不见了吗</p>
		<p class="p3">晚风中闪过几帧从前啊，飞驰中旋转已不见了吗</p>
		<p class="p4">晚风中闪过几帧从前啊，飞驰中旋转已不见了吗</p>
		<p class="p5">晚风中闪过几帧从前啊，飞驰中旋转已不见了吗</p>
		<p class="p6">晚风中闪过几帧从前啊，飞驰中旋转已不见了吗</p>
		<div class="box1">大家好</div>
		<div class="box2">乌托邦（Utopia）本意是“没有的地方”或者“好地方”。
			延伸为还有理想，不可能完成的好事情，其中文翻译也可以理解为“乌”是没有，“托”是寄托，“邦”是国家，“乌托邦”三个字合起来的意思即为“空想的国家”。
			空想社会主义的创始人托马斯·莫尔（英国人）在他的名著《乌托邦》（全名是《关于最完美的国家制度和乌托邦新岛的既有益又有趣的全书》）中虚构了一个航海家——拉斐尔·希斯拉德航行到一个奇乡异国“乌托邦”的旅行见闻。在那里，财产是公有的，人民是平等的，实行着按需分配的原则，大家穿统一的工作服，在公共餐厅就餐，官吏由公众选举产生。它认为，私有制是万恶之源，必须消灭它。
		</div>
		<div class="box3">大家好</div>
		<div class="emp">乌托邦（Utopia）本意是“没有的地方”或者“好地方”。
			延伸为还有理想，不可能完成的好事情，其中文翻译也可以理解为“乌”是没有，“托”是寄托，“邦”是国家，“乌托邦”三个字合起来的意思即为“空想的国家”。
			空想社会主义的创始人托马斯·莫尔（英国人）在他的名著《乌托邦》（全名是《关于最完美的国家制度和乌托邦新岛的既有益又有趣的全书》）中虚构了一个航海家——拉斐尔·希斯拉德航行到一个奇乡异国“乌托邦”的旅行见闻。在那里，财产是公有的，人民是平等的，实行着按需分配的原则，大家穿统一的工作服，在公共餐厅就餐，官吏由公众选举产生。它认为，私有制是万恶之源，必须消灭它。
		</div>
	</body>

千锋案例

    <head>
		<meta charset="UTF-8">
		<title>千锋简介</title>
		<style>
			.title{
				width: 200px;
				height: 50px;
				background-color: #808080;
				font-size: 25px;
				color: white;
				font-weight: 700;
				text-align: center;
				line-height: 50px;
			}
			p{
				width: 500px;
				font-size: 20px;
				text-indent: 2em;	
				}
				.sp1{
					font-weight: 700;
				}
				.sp2{
					color:red;
				}
		</style>
	</head>
	<body>
		<div class="title">千锋简介</div>
		<p><span class="sp1">北京前锋互联科技有限公司。</span>总部位于北京，目前在<span class="sp2">深圳、上海、郑州、西安、广州等建立分公司</span></p>
		<p>旗下现有<span class="sp1">教育培训、人才服务、项目研发、创业孵化等业务。</span>教育培训业务。教培业务主要为大学生 、企业提供技术培训服务；人才服务主要为企业提供优秀的互联网研发人才</p>
		<p>千锋秉承着<span class="sp2">"用良心做教育"</span>的理念踏踏实实的做事，<span class="sp2">创办7年，嫌疑成为业内口碑好、规模大、教学强的互联网研发培训机构</span>目前与<span class="sp1">超过8200多家</span>，与562所大学建立实训就业合作...,为中国教育事业贡献一份力量</p>
	</body>

2.列表属性

    <head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			ul{
				list-style: disc;
				/*disc  实心圆
				 circle 空心圆
				 square 实心正方形
				 none
				 */
			}
		</style>
	</head>
	<body>
		<ul>
			<li>11111</li>
			<li>22222</li>
			<li>33333</li>
		</ul>
	</body>

3.背景属性

    //背景颜色
    <head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box1{
				width: 300px;
				height: 300px;
				/*background-color: yellow;*/ 
				background-color:rgb(200,4,55,0.5);
			}
			.box2{
				width: 100px;
				height: 100px;
				background-color: rgba(0,0,0,0.5);
			}
		</style>
	</head>
	<body>
		<div class="box1">大家好
			<div class="box2"></div>
		</div>
	</body>
    //
    <head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box1{
				width: 400px;
				height: 400px;
				background-color: aquamarine;
				background-image:url(../img/哆啦.jpg) ;
				background-repeat: repeat-x;
				background-repeat: repeat-y	;	
				background-position: left center;
                background-size: contain;	
				/*1.400px 400px
				  2.100%   100%
				  3.cover:把背景图像扩展值足够大，以使背景图像完全覆盖背景区域。也许无法显示在背景定位区域中
				  4。contain：把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域，铺不满盒子留白
				 */	
                background-attachment: fixed;
				margin:0 auto;
				}
		</style>
	</head>
	<body>
		<div class="box1"></div>
	</body>

视差效果案例

    <head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin:0;
				padding:0;	
			}
			div{
				height: 800px;
				background-position:center ;
				background-size: cover;
				background-attachment: fixed;
			}
			.box1{
				background-image: url(../img/哆啦.jpg);
			}
			.box2{
				background-image: url(../img/小哆啦.png);
			}
			.box3{
				background-image: url(../img/哆啦.jpg);
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
	</body>

4.盒子属性

（1）内边距

    <head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width:500px;
				height: 300px;
				background: paleturquoise;
				text-align: jusitify;
				/*内边距
				 1个值：四个方向一样
				 2个值：上下 左右
				 3个值：上  左右  下
				 4个值：上  右  左  下（顺时针）
				 * */
				padding:30px 40px;			}
		</style>
	</head>
	<body>
		<div>
			我们要越来越好，不是祝福是约定。	
		</div>
	</body>

（2）内边距特性

    <head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width:300px;
				height:300px;
				padding-right: 30px ;
				background:pink;
			}
			*{
				padding: 0;
			}
			ul{
				padding-left: 0;
			}
			
		</style>
	</head>
	<body>
		<div>我们要越来越好，不是祝福是约定。</div>
		<ul>
			<li>111</li>
			<li>222</li>
			<li>333</li>
		</ul>
	</body>

（3）边框

    <head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box1{
				width: 100px;
				height: 100px;
				background: skyblue;
				border: 10px double red;
				/*样式： double  dotted dashed*/
				/*背景色： 也能，蔓延到边框*/
			}
			.box2{
				width: 100px;
				height: 100px;
				background: deepskyblue;
				border-top: 5px solid red;
				border-left: 10px dashed sandybrown;
			}
			.box3{
				width: 100px;
				height: 100px;
				background: blueviolet;
				border-color: #7FFFD4;
				border-style: solid;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
	</body>

（4）外边距

    <head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 200px;
				height: 200px;
			}
			.box1{
				background: red;
				border: 1px solid blue;
				margin: 50px;
			}
			.box2{
				background: green;
				border: 1px solid blue;
				margin: 10px 30px 30px 40px;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
	</body>

（5）外边距特性

    <head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*
			 1.兄弟关系，两个盒子先绘制外边距与水平外边距问题
				 垂直方向外边距取最大值
			             水平方向外边距会进行合并处理 
			 2.父子关系，给子加外边距，但作用于父身上了，怎么解决？
			 	
			 
			  */
			 .box1,.box2,.box3,.box4{
			 	width: 200px;
			 	height: 200px;
			 }
			 .box1{
			 	background: red;
			 	margin-bottom: 100px;
			 }
			 .box2{
			 	background: yellow;
			 	margin-top: 50px;
			 }
			 .box3{
			 	float: left;
			 	background: blue;
			 	margin-right:100px ;
			 }
			 .box4{
			 	float: left;
			 	background: green;
			 	margin-left: 50px;
			 }
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
		<div class="box4"></div>
	</body>

    <head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*
			 2.父子关系，给子加外边距，但作用于父身上了，怎么解决？
			 */
			.box1{
				width:500px;
				height: 400px;
				background: yellowgreen;
				/*padding-top: 100px;*/
				/*border:1px solid green;*/
			}
			.box2{
				width:200px;
				height: 200px;
				background: deepskyblue;
				margin-top: 100px;
				float: left;
			}
			/*
			 1.子margin-top===>父的padding-top,注意高度计算     
			 2.给父盒子设置一个边框
			 3.加浮动
			 * */
		</style>
	</head>
	<body>
		<div  class="box1">
			<div class="box2"></div>
		</div>
	</body>

ps基本操作

5.浮动属性

最主要作用：让竖着的东西横着来

·一般浮动

    <head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 100px;
				height: 100px;
			}
			.red{
				background-color: red;
				float: right;
			}
			.green{
				background-color: green;
				/*width: 300px;
				height: 300px;*/
				float: left;
			}
			.blue{
				background-color: blue;
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="red"></div>
		<div class="green"></div>
		<div class="blue"></div>
	</body>

·特殊浮动

不让红色部分被覆盖

→

    <head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box1,.box2{
				width: 200px;
				height: 200px;
				float: left;
			}
			.box1{
				background-color: yellow;
			}
			.box2{
				background-color: blue;
			}
			.box{
				width: 300px;
				height: 300px;
				background-color: red;
				/*clear: left;*/
			}
			.container{
				/*height: 200px;*/
			}
			/*
			 1.写固定高度
			 2.清浮动
			 3.当前浮动元素后面不一个盒子，不设置宽高
			 * */
		</style>
	</head>
	<body>
		<div class="container">
			<div class="box1"></div>
			<div class="box2"></div>
			<div style="clear:both;"></div>
		</div>
		<div class="box"></div>
	</body>

6.溢出属性

    <head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 200px;
				height: 200px;
				background: salmon;
				/*overflow:scroll;  显示溢出*/
				/*overflow: hidden; 溢出隐藏*/
				/*overflow: visible;*/
				/*overflow: inherit; 继承父元素的效果*/
				overflow: auto;
			}
		</style>
	</head>
	<body>
		<div>7月3日，退役军人事务部表示，经中国、韩国磋商后达成一致意见，韩方将向中方移交新一批在韩中国人民志愿军烈士遗骸及遗物。双方将于今年9月15日在韩国共同举行装殓仪式，9月16日举行交接仪式。据了解，自2014年至2021年，两国已连续八次成功交接825位在韩中国人民志愿军烈士遗骸。今年是按照中韩双方达成的共识实施的第九次交接。
		   　从2014年首批在韩志愿军烈士遗骸回国起，当接运烈士遗骸的专机进入中国领空时，都会有中国空军歼11-B战机护航，战机飞行员的那句"欢迎志愿军忠烈回国，奉命为您全程护航！"，相信很多观众都印象深刻，听到这句话的一瞬间，也让无数人泪目。接下来我们一起来回顾那些令我们感动的时刻。</div>
	</body>

溢出省略号

    <head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				height: 200px;
				background: salmon;
				/*white-space: nowrap;  不换行*/
				/*white-space: pre; 显示空格，回车，换行*/
				/*white-space:pre-wrap; 显示空格,回车,换行*/
				/*white-space: pre-line; 显示回车，不显示空格，换行*/
				width: 200px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				/*单行文本显示省略号需要同时声明以上四个属性*/
			}
		</style>
	</head>
	<body>
		<div>7月3日，退役军人事务部表示，经中国、韩国磋商后达成一致意见，韩方将向中方移交新一批在韩中国人民志愿军烈士遗骸及遗物。双方将于今年9月15日在韩国共同举行装殓仪式，9月16日举行交接仪式。据了解，自2014年至2021年，两国已连续八次成功交接825位在韩中国人民志愿军烈士遗骸。今年是按照中韩双方达成的共识实施的第九次交接。
		     从2014年首批在韩志愿军烈士遗骸回国起，当接运烈士遗骸的专机进入中国领空时，都会有中国空军歼11-B战机护航，战机飞行员的那句"欢迎志愿军忠烈回国，奉命为您全程护航！"，相信很多观众都印象深刻，听到这句话的一瞬间，也让无数人泪目。接下来我们一起来回顾那些令我们感动的时刻。</div>
		<pre>
			<!--与格式化文本-保留空格，tab，回车-->
		</pre>
	</body>

八、元素显示类型

1.块元素

    <head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 200px;
				height: 200px;
				background: darkcyan;
			}
			
			/*块元素
			 display: block;
			 display: list-item;
			 */
		</style>
	</head>
	<body>
		<div></div>
		<ul>
			<li>111</li>
			<li>222</li>
		</ul>
		<p>1111</p>
		<h1>hahaha</h1>
	</body>

2.行内元素和行内块元素

    <head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			b{
				/*行内元素  display:inline*/
				width: 100px;
				height: 100px;
				background: #ADFF2F;
			}
			
			/*行内元素  display:inline*/
			img{
				width: 100px;
				height: 100px;
			}
			/*行内块元素  display:inline-block*/
			
			input{
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<b>1111</b>
		<em>2222</em>
		<span>3333</span>
		<strong>4444</strong>
		<a href="http://www.baidu.com">5555</a>

		<img src="../img/小哆啦.png"/>
		<input type="text">
	</body>

3.盒子模型

    <head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*div{
				width: 200px;
				height: 200px;
				padding:10px;
				margin: 10px;
				border:1px solid red;
			}*/
			
			span{
				padding: 10px;
				background-color: yellow;
				margin: 10px;
			}
			/*span行内元素 只能设置左右边距,不能设置上下边距*/
			
			img{
				padding: 10px;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<div></div>
		<span>我是span标签</span>
		<div>11111111111111111111</div>
		<img src="../img/哆啦.jpg">
	</body>

4.元素类型互相转换

将块元素转换为行内元素

    <head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*iline,
		      block.
			  line-block
			 */
			img{
				display: block;
			}
			
			div{
				width: 200px;
				height: 200px;
				background: deepskyblue;
				display: inline;
			}
		</style>
	</head>
	<body>
		<img src="../img/小哆啦.png" alt="" />
		<p>1111111</p>
		<div>hahaha</div>
	</body>

二级菜单

    <html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 300px;
				margin: 0 auto;
			}			
			ul{
				list-style: none;
			}
			.box>li{
				float: left;
				width: 148px;
				text-align: center;
				/*左右边框都有1px*/
				border: 1px solid blue;
				background: black;
				color: white;
				line-height: 40px;
			}
			.box>li:hover{
				background: lightblue;
			}
			.box>li>ul{
				display: none;
				background: white;
				color: black;
			} 
			.box>li:hover ul{
				display: block;
			}	
			.box>li li:hover{
				color: blue;
			}
		</style>
	</head>
	<body>
		<ul class="box">
			<li class="item">视频教程
				<ul>
					<li>全部视频教程</li>
					<li>HTML5视频教程</li>
					<li>Java视频教程</li>
					<li>python视频教程</li>
				</ul>
			</li>
			<li class="item">认证考试
				<ul>
					<li>pmp</li>
					<li>red-hat</li>
				</ul>
			</li>
		</ul>
	</body>

九、定位

1.相对定位：relative

相对定位，自己原来的位置还在，不脱离文档流

    <head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 200px;
				height: 200px;
			}
			.box1{
				background: red;
			}
			.box2{
				background: deepskyblue;
				position: relative;
				top: 100px;
				left: 100px;
			}
			.box3{
				background: thistle;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
	</body>

2.绝对定位：absolute

（1）父没有定位

相对于浏览器位置

    <head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 200px;
				height: 200px;
				background: dodgerblue;
				position: absolute;
				top: 100px;
				left: 100px;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>

（2）父有定位

相对于父类的位置

    <head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 500px;
				height: 500px;
				background: darkturquoise;
				margin: 0 auto;
				position: relative;
			}
			.child{
				width: 100px;
				height: 100px;
				background: blanchedalmond;
				left: 100px;
				top: 100px;
				position:absolute ;
			}
		</style>
	</head>
	<body>

3.固定定位

    <head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box{
				width: 100%;
				height: 500px;
				background: aquamarine;
				position: absolute;
			}
			.ad{
				width: 100px;
				height: 200px;
				background: peachpuff;
				position: absolute;	
				right: 0px;
				bottom: 0px ;	
					}
		</style>
	</head>
	<body>
		<div class="box"><div>
		<div class="ad"></div>
	</body>

4.粘性定位

    <head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.header{
				width: 100%;
				height: 100px;
				background: gray;
			}
			.nav{
				width: 500px;
				height: 50px;
				background: chocolate;
				margin: 0 auto;
				position: sticky;
                /*向下滑动时距离顶部距离为0*/	
				top: 0px;
			}
			.body{
				height: 1000px;
				background: greenyellow;
			}
		</style>
	</head>
	<body>
		<div class="header"></div>
		<div class="nav"></div>
		<div class="body"></div>
	</body>

5.层级

两者均为相对定位，后者会遮盖住前者，想使前者层级更高，则设置z-index的值

    <head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 200px;
				height: 200px;
			}
			.box1{
				background: #1E90FF;
				position: relative;
				top: 100px;
				left: 100px;
				z-index:600;
			}
			.box2{
				background: moccasin;
				z-index: 200;
			}
			/*z-index值越大，层级越高，越靠上显示*/
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
	</body>

6.绝对定位深入

父子关系：想要父遮住子，则将子的层级设置为负数

    <head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box{
				width: 200px;
				height: 200px;
				background: saddlebrown ;
				position: relative;
				z-index: 100px;
			}
			.child{
				width: 100px;
				height: 100px;
				background: darkorchid;
				position: absolute;
				top: 10px;
				left: 20px;
				z-index: -1;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="child"></div>
		</div>
	</body>

7.定位控制元素水平垂直居中

（1）单一元素

    <head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 200px;
				height: 200px;
				background: darkblue;
				/*水平方向居中*/
				margin: 0 auto;
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -100px;
				margin-top: -100px;
				
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>

（2）有父子关系

    <head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 500px;
				height: 500px;
				background: darkblue;
				/*水平方向居中*/
				margin: 0 auto;
				position: relative;
			}
			.child{
				width: 200px;
				height: 200px;
				background: red;
				position: absolute;
				top: 50%;
				left: 50%;
				/*设置为子盒子自身的一半*/
				margin-left: -100px;
				margin-top: -100px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="child"></div>
		</div>
	</body>

8.浮动与定位的区别

浮动可实现文字环绕的效果定位不会出现文字环绕效果

十、锚点

同一页面不同区域的跳转，使用a链接

    <head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
				position: fixed;
				right: 0px;
				top: 100px;
			}
			li{
				width: 100px;
				height: 100px;
				line-height: 100px;
				text-align: center;
				border: 1px solid black;
			}
			div{
				height: 600px;
				border: 1px solid deeppink;
            }
			/*锚点作用：页面不同区域的跳转，使用a链接
			 	<a href="#锚点名字"></a>
			 	<div id="锚点名字"></div>
			 */
		</style>
	</head>
	<body>
		<ul>
			<li>
				<a href="#a">京东秒杀</a>
			</li>
			<li >
				<a href="#b">双11</a>
			</li>
			<li>
				<a href="#c">频道优选</a>
			</li>
			<li>
				<a href="#d">特色广场</a>
			</li>
		</ul>
		<div id="a">
				京东秒杀
		</div>
		<div id="b">
				双11
		</div>
		<div id="c">
				频道优选
		</div>
		<div id="d">
				特色广场
		</div>
	</body>

十一、精灵图

将一整张图片的分成若干个小部分显示出来

<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 103px;
				height: 32px;
				float: left;
				margin: 10px;
				background: sandybrown url(../img/京东.png);	
			}
			.box1{
				background-position: -205px -111px;
			}
			.box2{
				background-position: -205px -74px;
			}
			.box3{
				background-position: -205px -37px;
			}
			.box4{
				background-position: -205px 0px;
			}
			.box5{
				background-position: -205px 86px;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
		<div class="box4"></div>
		<div class="box5"></div>
	</body>

十二、宽高自适应

1.高度自适应

内容少不够撑body时高度可以设置min-height

    <head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.header,.footer{
				width: 100%;
				height: 50px;
				background: darkcyan;
			}
			.body{
				/*内容少不够撑开高度时可以设置min-height*/
				/*min-height: 500px;*/
				background: lightgoldenrodyellow;
			}
			li{
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div class="header"></div>
		<div class="body">
		<ul>
			
			<li>1111</li>
			<!--<li>2222</li>
			<li>3333</li>
			<li>4444</li>
			<li>5555</li>-->
		</ul>
		</div>
		<div class="footer"></div>
	</body>

2.宽度自适应

宽度超过浏览器的宽度时，会出现滚动条

    <head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			div{
				/*宽度超过浏览器的宽度时，会出现滚动条*/
				/*width:auto ;*/
				width: 1500px;
				height: 100px ;
				padding-left: 110px;
				background: #D8BFD8;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>

3.浮动元素之父元素高度自适应

    <head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.left,.right{
				width: 100px;
				height: 100px;
				float: left;
			}
			
			.left{
				background: darkblue;
			}
			.right{
				background: aquamarine;
			}
			.content{
				width: 200px;
				height: 200px;
				background: rosybrown;
			}
			/*.box{
				height: 100px; 
			    1.如果浮动过多，换行就出现问题
			}*/
			.box{
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="left"></div>
			<div class="right"></div>
			<!--<div style="clear:both"></div>-->
			<!-- 
	      		2.增加空标签，不利于可读性 
	      	-->
		</div>
		<div class="content"></div>
	</body>

使用伪标签div::标签名{}

    <head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div::first-letter{
				font-size: 30px;
				color: red;
			}
			div::first-line{
				background: yellow;
			}
			div::before{
				content:"aaa" ;
			}
			div::after{
				content: "bbb";
			}
		</style>
	</head>
	<body>
		<div>85年前的今天，卢沟桥畔一声枪响，拉开全民族抗战的序幕。中华儿女共赴国难，抗战到底，用生命和鲜血谱写了反抗外来侵略的壮丽史诗。硝烟远去，国殇难忘。</div>
	</body>

4.窗口自适应

    <head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
			}
			.box{
				width: 100%;
				height: 100%;
				background: navy;
			}
			.child1{
				background: darksalmon;
				height: 50%;
			}
			.child2{
				height: 50%;
				background: wheat;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="child1"></div>
			<div class="child2"></div>
		</div>
	</body>

5.两栏布局

左边固定，右边自适应

    <head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
			}
			.box1{
				width: 200px;
				height: 100%;
				background: salmon;
				float: left;
			}
			.box2{
				width: calc(100% - 200px);
				height: 100%;
				background: violet;
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
	</body>

6.三栏布局

左右固定，中间自适应

<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
			}
			.left,.right{
				width: 200px;
				height: 100%;
			}
			.left{
				background: darkcyan;
				float: left;
			}
			.right{
				background: lightgoldenrodyellow;
				float: right;
			}
			.center{
				height: 100%;
				background: violet;
				margin-left: 200px;
				margin-right:200px;
			}
		</style>
	</head>
	<body>
		<div class="left"></div>
		<div class="right"></div>
		<div class="center"></div>
	</body>