CSS学校笔记 003.................................................

/* 
				边框
                                两种方式
				border-top:solid 15px #e2e2e2;
				border-right:solid 15px #999 ;
				border-bottom:solid 15px #777 ;
				border-left:solid 15px #f2f2f2 ; 
				*/
			   /* 默认上右下左 如果只写上右下 那么左会和右同用一个参数  下和上一个参数*/
				border-width: 15px;
				border-style: solid;
				border-color: #e2e2e2 #999 #777 #f2f2f2;
				/* 边框从尖变圆弧 */
				border-radius: 10px;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 外部式 -->
		<link rel="stylesheet" href="awesome/css/font-awesome.css">
		<style>
		#navlist li:nth-child(odd){
		background-color: red;
		/* 列表项标签内或外 默认是外 内为inside */
		list-style-position:inside;
		/* 
		为项标签设置图片
		list-style-image: url("image/li.png"); */
		/* 标志的类型 */
		list-style-type: none;
		}
		/* 
		 <i class="fa fa-bell"></i>
		 引用图标  fa fa-bell是类  前面fa永远不变 fa-bell是类名
		                          对其设置时用  .fa-bell{}
		 */
		.fa-bell{
		    color: blue;
			font-size: 12px;
		}
		table{
			/* 表格和边框border搭配使用 */
			border: 3px solid red;
			width: 300px;
			height: 300px;
			/* 
			合并单元格之间的间距 
			类似表格中cellspacing="0px"定于单元格间距的属性 cellpadding="20px"定于单元格内文字与单元格边框的距离
			*/
			border-collapse: collapse;
			/* 增大间距 
			border-spacing:10px ;*/
		}
		/* 如果有td也有th 这样表示td,th{} */
		td{
			border: 1px solid blue;
		}
		/* 伪类 不能单独使用 列表也能用  odd奇数 even偶数 n自定义第几行
		:first-child第一个子元素 :last-child最后一个子元素
		*/
		tr:nth-child(2){
			background-color: yellow;
		}
		</style>
	</head>
	<body>
		<ul id="navlist">
		<li><i class="fa fa-bell"></i> html</li>
		<li><i class="fa fa-bell"></i> CSS</li>
		<li><i class="fa fa-bell"></i> JavaScript</li>
		<li><i class="fa fa-bell"></i> JQuery</li>
		<li><i class="fa fa-bell"></i> Ajax</li>
		<li><i class="fa fa-bell"></i> 移动端</li>
		</ul>
		<table>
			<tr>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
			<tr>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
			<tr>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
			<tr>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
		</table>
	</body>
</html>