您的位置：首页 > 其它

06-作业练习盒子模型

2017-12-04 16:03 190 查看

表格的练习！有关padding与border很重要 编写代码的时候先把结构划分好！

第一个金牌练习

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>金牌top5</title>
<style>
*{
margin: 0px;
padding: 0px;
}

table{
margin:20px;
width: 238px;
/*这个没有想到*/
border-collapse: collapse;
/*border: 2px solid #ccc;*/
font: normal normal 10px Arial;
text-align:center;
}
table caption{
color:white;
font:normal bold 14px "楷体";
background: url(img/captionBg.gif) no-repeat;
width: 238px;
height:30px;
line-height: 30px;
/*text-indent: -10em;*/
/*用的是text-left和padding*/
text-align: left;
padding-left: 10px;
border: #0cbaff solid 1px;

}
thead{
background: #D2E9F6;
border: #a1d3ff solid 1px;

}
th{
height: 27px;
font-weight: normal;
}
tbody{

border: 1px solid #ccc;

}
td{
border-bottom: #CCC dotted 1px;
line-height: 25px;
}
td a{
text-decoration: none;
color: #06c;
}
</style>
</head>
<body>
<table>
<caption>金牌TOP5</caption>
<thead>
<tr>
<th>排名</th>
<th>国家</th>
<th>金</th>
<th>银</th>
<th>铜</th>
<th>总计</th>
</tr>
</thead>
<tbody></tbody>
<tr>
<td>1</td>
<td>中国</td>
<td>17</td>
<td>9</td>
<td>4</td>
<td>30</td>
</tr>
<tr>
<td>2</td>
<td>美国</td>
<td>12</td>
<td>8</td>
<td>9</td>
<td>29</td>
</tr>
<tr>
<td>3</td>
<td>韩国</td>
<td>6</td>
<td>2</td>
<td>4</td>
<td>12</td>
</tr>
<tr>
<td>4</td>
<td>法国</td>
<td>5</td>
<td>3</td>
<td>5</td>
<td>13</td>
</tr>
<tr>
<td>5</td>
<td>朝鲜</td>
<td>4</td>
<td>0</td>
<td>1</td>
<td>5</td>
</tr>
<tfoot></tfoot>
</table>
</body>
</html>

第二个最新文章就是无序表的练习

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0px；
padding:0px;
}
body{
background: #EEEEEE;

}
.content{
width: 298px;/*减去padding的宽度*/
height: 226px;/*减去padding的宽度*/
border:#CCCCCC 1px solid;
margin:0 auto;
margin-top: 97px;
padding:0 15px;

}
h3{
font-size: 18px;
margin-top: 18px;
border-bottom: 1px solid #CCC;
padding-bottom: 6px;
}
ul
{
margin: 10px;
padding-left: 0px;
}
li{
font-size: 12px;
list-style: none;/*清楚li标签的小点点*/
line-height: 30px;
border-bottom: 1px dashed #ccc;
padding-left: 20px;

}
a{
text-decoration: none;
color:black;
}
</style>
</head>
<body>
<div class="content">
<h3>最新文章/New Article</h3>
<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>
</ul>
</div>
</body>
</html>

第三个爱宠知识练习也是无序列表的使用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
div{
width: 240px;/*减去边框的宽度*/
height: 307px;/*减去边框的宽度*/
margin:0 auto;
border:#009900 1px solid;
margin-top: 20px;
padding:10px;
background: url(img/bg.gif) repeat;
}
h3{
color:white;
font:normal normal 20px"黑体";
border-left: 4px solid #C9E143;
padding-left: 5px;

}
ul{
background: white;
margin-top: 5px;
padding: 0 10px;
}
li{
font-size: 12px;
list-style: none;
height: 30px;
line-height: 30px;
border-bottom: 1px dashed #666;
background: url(img/tb.gif) no-repeat left center;
padding-left: 16px;
}
a{
text-decoration: none;
color:blue;
}

</style>
</head>
<body>
<div>
<h3>爱宠知识</h3>
<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>

</ul>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航