/*万能清除法*/
*{padding:0;margin:0;}
li{list-style: none;}
img{vertical-align:top;border: 0;}
a{text-decoration: none;}
.cl:after{content: "";display: block;clear: both;height: 0;overflow: hidden;visibility: hidden;}
.cl{zoom:1;}
/*外部样式*/
<link rel="stylesheet" href="../css/ .css">
/*初始化*/
body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd,input{padding: 0;margin: 0;}
li{list-style: none;}
a{text-decoration: none;}
img{vertical-align: top;border: 0;}
html{font-family: "微软雅黑";font-size: 12px;color: #333;}
.cl:after{content: "";display: block;clear: both;height: 0;overflow: hidden；visibility: hidden;}
.cl{zoom: 1;}
.fl{float: left;}
.fr{float: right;}
/*响应式布局*/
@media screen and (min- 320px) and (max- 480px){
body{}
}
@media screen and (min- 481px) and (max- 768px){
body{background-color: #ff0;}
}
@media screen and (min- 769px) and (max- 1200px){
body{background-color: #0f0;}
}
@media screen and (min- 1201px) {
body{background-color: #999;}
}
响应式初始化
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
/*去掉点击时的外边框*/
input:focus,textarea,select{outline: none;}
textarea{resize:none;}
button{cursor:pointer;}
/*伪类选择器 */
:nth-child(){}
：nth-of-type(1) 出现的次数
.a div:nth-child(2){color: red;}
.a p:nth-child(5){color: red;}
ul li:nth-child(even){}
ul li:nth-child(odd){}
ul li:first-child{}
ul li:last-child{}
/* 过渡*/
transition：s
/*html5格式*/
<header>
网页上面公共的头部
</header>
<div>
ssssss
</div>
<footer>网页上面公共的底部</footer>
<nav>
<ul>
<li></li>
</ul>
</nav>
<section>区块</section>
<aside>侧边栏</aside>
<article>文章</article>
<mark>高亮显示(行内标签)</mark>
<canvas>画布</canvas>
<input type="text" list="a">
<datalist id="a">
<option value="111">
<option value="112">
<option value="113">
<option value="aa">
<option value="ad">
<option value="cc">
<option value="cr">
</datalist>
<!-- novalidate取消验证 -->
<form novalidate>
<!-- required必填字段 -->
<!-- autofocus自动获取焦点 -->
*<input type="number" required autofocus>
<input type="search">
<input type="range">
<input type="color">
<input type="date">
<input type="email">
<input type="url">
<textarea name="" id="" cols="30" rows="10"></textarea>
<input type="submit">
<button type="submit"></button>
</form>
<!-- video必须添加自动播放属性 -->
<!-- 网页所支持的视频格式 webm/ogg/mp4 -->
<!-- loop循环播放 -->
<video src="../video/movie.webm" autoplay controls>对不起，你的浏览器版本太低，</video>
<audio src="../video/zhoujie.mp3" autoplay loop></audio>
/*列表*/
.t{ 100%;height: 400px;border:1px solid red;border-collapse:collapse;table-layout:fixed;}
.t th,td{border: 1px solid red;}
<table class="t" cellspacing="0" cellpadding="0">
<caption>课程表</caption>
<thead>
<tr>
<th class="a1">aaaaaaaaaaaaaaaaaaaaa</th>
<th>星期一</th>
<th>星期一</th>
<th>星期一</th>
<th>星期一</th>
</tr>
</thead>
<tbody>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
</tfoot>
</table>
第一种
<table width="624" height="362" bgcolor="#eeeeee" border="1" cellspacing="0" cellpadding="0" align="center" bordercolor="pink">
<tr align="center">
<td valign="bottom" width="101">会员姓名</td>
<td width="205">111</td>
<td width="103">111</td>
<td width="205">111</td>
</tr>
<tr align="center">
<td> </td>
<td colspan="3"></td>
</tr>
<tr align="center">
<td>111</td>
<td colspan="3"></td>
</tr>
</table>
第二种
.t{ 100%;height: 400px;border:1px solid red;border-collapse:collapse;table-layout:fixed;}
.t th,td{border: 1px solid red;}
<table class="t" cellspacing="0" cellpadding="0">
<caption>课程表</caption>
<thead>
<tr>
<th class="a1">aaaaaaaaaaaaaaaaaaaaa</th>
<th>星期一</th>
<th>星期一</th>
<th>星期一</th>
<th>星期一</th>
</tr>
</thead>
<tbody>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
</tbody>
</table>