收藏
批改状态：合格
老师批语：
今天是在PHP中文网学习的第6天。CSS听起来好像很简单，但是总是有些 单词记不住，每次都要去看一下老师的源代码才知道自己错在哪里，我在先如果没有源代码，作业还能不能顺利的完成，记不住代码怎么办呢？
完成的界面
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中国古代四大美女</title>
<style type="text/css">
body{
background-image: url(images/qianfen.jpg);
background-repeat: no-repeat;
background-size: cover;
}
table,th,td {
border: 1px solid #333;
}
table{
border-collapse: collapse;
text-align: center;
margin:30px auto;
width:850px;
box-shadow: 5px 5px 10px #888;
background-image: url(images/gd.png);
background-repeat: no-repeat;
background-size: cover;
background-opacity:0.8;
}
table caption {
font-size: 1.6em;
font-weight: bolder;
margin-bottom: 20px;
color: #CC0033;
}
tr th{
font-family:微软雅黑;
font-size: 20px;
font-weight:bolder;
height:80px;
}
tr td{
font-family: 微软雅黑;
}
img {
border-radius: 50%;
box-shadow: 2px 2px 2px #888;
height: 60px;
}
.box1{
font-weight:bolder;
}
.box2{
color:#FF0099;
font-weight: bolder;
text-shadow: 5px 5px 8px #888;
font-size:20px;
}
</style>
</head>
<body >
<table>
<caption><h1>美女我最大</h1></caption>
<tr>
<th>序号</th>
<th>名字</th>
<th>照片</th>
<th>绰号</th>
<th>美名</th>
<th>户籍</th>
</tr>
<tr>
<td>01</td>
<td>施夷光</td>
<td class="box1"><img src="images/xs.png"></td>
<td class="box2">西施</td>
<td class="box2">沉鱼</td>
<td>浙江</td>
</tr>
<tr>
<td>02</td>
<td>王嫱</td>
<td class="box1"><img src="images/wzj.png"></td>
<td class="box2">王昭君</td>
<td class="box2">落雁</td>
<td>湖北</td>
</tr>
<tr>
<td>03</td>
<td >貂蝉</td>
<td class="box1"><img src="images/dc.png"></td>
<td class="box2">貂蝉</td>
<td class="box2">闭月</td>
<td >山西</td>
</tr>
<tr>
<td>04</td>
<td>杨玉环</td>
<td class="box1"><img src="images/yyh.png"></td>
<td class="box2" >杨玉环</td>
<td class="box2">羞花</td>
<td>浙江</td>
</tr>
</table>
</body>
</html>点击 "运行实例" 按钮查看在线实例
手写代码
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
