ZichengQu · ZichengQu · Dec 26, 2018 · Dec 26, 2018 · Dec 26, 2018 · Dec 26, 2018
diff --git a/Others/CSS_day01/css/style.css b/Others/CSS_day01/css/style.css
@@ -0,0 +1,9 @@
+h2{
+	color:blueviolet
+}
+p{
+	color: red;
+	background-color: pink;
+	font-size: 15px;
+	text-align: center;
+}		
diff --git a/Others/CSS_day01/css2.html b/Others/CSS_day01/css2.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<title></title>
+		<style >
+			.red{
+				color: red;
+				font-size: 20px;
+				font-weight: bold;
+			}
+			p.red{/*结合元素选择器*/
+				font-size: 200px;
+			}
+			#xr{/*id选择器*/
+				background-color: pink;
+			}
+			#xr,.red,p.red{/*群组选择器*/
+				...
+			}
+			h1 .a{/*后代选择器,h1后面要有空格*/
+				color: red;
+			}
+			.nav1 li{/*后代选择器*/
+				color: blue;
+			}
+			.nav2>li{/*子代选择器*/
+				color: green;
+			}
+		</style>
+	</head>
+	<body>
+		<div class="red">熊大</div> <!-- 类选择器 -->
+		<div id="xr"> 熊二</div> <!-- id选择器 -->
+		<p>小强</p> <!-- 无属性,不是结合元素选择器 -->
+		<p class="red">光头强</p> <!-- 结合元素选择器 -->
+		<h1> 
+			<p class="a">演示p</p> 
+			<span class="a">演示span</span>
+		</h1>
+
+		<ul class="nav1"> <!-- 后代选择器,所有li均变颜色 -->
+			<li>一级菜单</li>
+			<ul>
+				<li>二级菜单</li>
+				<li>二级菜单</li>
+				<li>二级菜单</li>
+			</ul>
+		</ul>
+
+		<ul class="nav2">
+			<li>一级菜单</li> <!-- 子代选择器,只有这个li变颜色 -->
+			<ul>
+				<li>二级菜单</li>
+				<li>二级菜单</li>
+				<li>二级菜单</li>
+			</ul>			
+		</ul>						
+	</body>
+</html>
diff --git a/Others/CSS_day01/index.html b/Others/CSS_day01/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<title></title>
+		<!--<link rel="stylesheet" href="css/style.css" />-->
+		<style >			
+			.pink{/*自定义*//*类选择器*/
+				color: pink;
+				font-size: 20px;
+				background-color: black;
+				font-weight: 1000; /*加粗*/
+			}
+			.orange{/*!important*/
+				color: orange!important;
+			}
+			div{
+				color: aqua;
+				font-size: 20px;
+			}
+			div{/*就近原则*/		
+				font-size: 50px;
+			}
+		</style>
+	</head>
+	<body >						
+		<div >
+			<p>段落1</p> <!-- color: aqua; font-size: 50px; -->
+		</div>
+		<div class="pink">
+			<p>段落2</p> <!-- .pink -->
+		</div>	
+		<div class="pink" style="color: red;">
+			<p>段落3</p> <!-- 内联优先级最高，所以是red -->
+		</div>
+		<div class="orange" style="color: red;">
+			<p>段落4</p> <!-- !important优先级最高，所以是orange -->
+		</div>
+		<div class="orange pink" style="color: red;"> <!-- 多类选择器 -->
+			<p>段落5</p> <!-- !important优先级最高，所以是orange -->
+		</div>
+	</body>
+</html>
diff --git a/Others/CSS_day02/index.html b/Others/CSS_day02/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<title></title>
+		<style>
+			a{/*去掉超链接的下划线*/
+				text-decoration: none;
+			}
+			a:link{/*匹配超链接未被访问时的状态*//*Ctrl+Shift+Delete删除浏览器缓存*/
+				color: darkgray;
+			}
+			a:visited{/*匹配超链接被访问过的状态(只能定义字体颜色)*/
+				color: dark;
+			}
+			a:hover{/*匹配鼠标悬停在html元素时的状态*/
+				color: red;
+				font-size: 20px;
+			}
+			a:active{/*匹配html元素未激活时的状态*/
+				color: yellow;
+				font-size: 100px;
+			}
+			input:focus{/*匹配html元素获取焦点时的状态*/
+				color: red;
+				background-color: yellow;
+			}			
+		</style>
+	</head>
+	<body>
+		<a href="#">文本</a>
+		<br />
+		用户名:<input type="text" />
+	</body>
+</html>
diff --git a/Others/CSS_day02/index2.html b/Others/CSS_day02/index2.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<title></title>
+		<style>
+			.h{
+				font-size: 50px;
+				color: red;
+			}
+			p{
+				font-size: 20px;
+				color: yellow;
+			}
+			div p{
+				font-size: 50px;
+				color: blue;
+			}
+		</style>
+	</head>
+	<body>
+		<div>
+			<p class="h">文本</p><!--显示的是h的属性-->
+		</div>		
+	</body>
+</html>
diff --git a/Others/CSS_day02/index3.html b/Others/CSS_day02/index3.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<title></title>
+		<style>
+			.box1{
+				width: 200px;
+				min-width: 150px;/*当width<min-width时,以min-width为准*/
+				height: 200px;
+				background-color: yellow;
+				/*overflow: visible;*//*默认值，溢出可见*/
+				/*overflow: hidden;*//*溢出隐藏*/
+				/*overflow: scroll;*//*溢出滚动*/
+				overflow: auto;/*当溢出的时候，才会出现滚动框，否则不出现*/
+				/*
+				border-width: 5px;
+				border-color: #8A2BE2;
+				border-style: solid; dotted虚线，dashed虚线,double双实线
+				*/
+				border: 5px red solid;/*简写方式*/
+			}
+			.box2{
+				width: 100px;
+				height: 500px;
+				background-color: pink;
+				border-bottom: 5px solid blueviolet;/*单边定义*/
+				border-width: 5px 10px 15px 20px;
+				border-style: solid double;
+			}			
+		</style>
+	</head>
+	<body>
+		<div class="box1">
+			<div class="box2"></div>
+		</div>		
+	</body>
+</html>
diff --git a/Others/CSS_day02/index4.html b/Others/CSS_day02/index4.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<title></title>
+		<style>
+			input{/*取消显示边框*/
+				border: none;
+				outline: 0;
+			}
+			#username{
+				/*border: 0;*/
+				border-bottom: 5px solid blue;/*显示下边框*/
+			}
+		</style>
+	</head>
+	<body>
+		用户名:<input type="text" id="username" /> <!-- 只显示下边框  -->
+	</body>
+</html>
diff --git a/Others/CSS_day02/index5.html b/Others/CSS_day02/index5.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<title></title>
+		<style>
+			span{
+				color: grey;
+			}
+			input{
+				width: 300px;
+			}
+			input.msgv{
+				width: 180px;
+			}
+			input.check{
+				width: 20px;
+			}
+			input.submit{
+				background-color: red;
+				color: white;
+				border: 0;
+			}
+			.msg{
+				background-color: lightgray;
+				width: 120px;
+				height: 20px;
+				color: black;
+				border: 0;
+			}
+			a:link{
+				color: blue;
+			}
+			a:visited{
+				color: blueviolet;
+			}
+			a:hover{
+				color: red;
+			}
+			a:active{
+				color: yellow;
+			}
+
+		</style>
+	</head>
+	<body>
+		<table>
+			<tbody>
+				<tr>
+					<td align="right"><span>用户名:</span></td>
+					<td><input type="text"/> </td>
+					<td><span>4-20位字符，支持汉字，字母和数字组合</span></td>
+				</tr>
+				<tr>
+					<td align="right"><span>请设置密码:</span></td>
+					<td><input type="password"/> </td>
+					<td><span>6-20位字符，支持汉字，字母和数字组合</span></td>
+				</tr>
+				<tr>
+					<td align="right"><span>请确认密码:</span></td>
+					<td><input type="password"/> </td>
+					<td><span>请再次输入密码</span></td>
+				</tr>
+				<tr>
+					<td align="right"><span>验证手机:</span></td>
+					<td><input type="text"/> </td>
+					<td><span>完成验证后，可以使用收集找回密码</span></td>
+				</tr>
+				<tr>
+					<td align="right"><span>短信验证码:</span></td>
+					<td><input type="text" class="msgv"/> <input type="button" value="获取短信验证码" class="msg"/>
+					<td><span>请输入短信验证码</span></td>
+				</tr>
+				<tr>
+					<td></td>
+					<td colspan="2" align="center">
+						<input type="checkbox" class="check" id="v"/><label for="v">我已阅读并同意</label><a href="#">《京东用户注册协议》</a>
+					</td>										
+				</tr>
+				<tr>
+					<td></td>
+					<td colspan="2" align="center">
+						<input class="submit" type="submit" value="立即注册";/>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	</body>
+</html>
diff --git a/Others/CSS_day02/盒子模型.html b/Others/CSS_day02/盒子模型.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<title></title>
+		<style type="text/css">
+			.box1{
+				background-color: yellow;
+				width: 300px;
+				height: 300px;
+				/*由于页面中的元素都是靠左靠上摆放的，所以当我们设置上和左外边距时，会导致盒子自身的位置发生改变;而如果是设置右和下边距会改变其它盒子的位置。*/
+				/*margin-top: 100px;
+				margin-left: -100px;
+				margin-bottom: -100px;*/
+				/*margin-right: auto;
+				margin-left: auto;*/
+				margin:0 auto;
+			}
+			.box2{
+				background-color: pink;
+				width:100px;
+				height:100px;
+			}
+			p{
+				background-color: #FFC0CB;
+				height: 200px;
+				width: 500px;
+			}
+			*{
+				margin: 0;
+			}
+		</style>
+	</head>
+	<body>
+		<div class="box1">
+			<!--<div class="box2">
+
+			</div>-->
+			<div class="box2"></div>
+		</div>
+		<p>
+
+		</p>
+		<ol>
+			<li>列表1</li>
+			<li>列表2</li>
+			<li>列表3</li>
+		</ol>
+
+	</body>
+</html>