小小诗句带你来欢乐，用表格切割图片、制造美感
<html>
<style>
#header{
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav{
line-height:30px;
background-color:rgb(239,239,239);
height:800px;
width:150px;
float:left;
padding:5px;
}
#section{
width:350px;
float:left;
padding:10px;
}
#footer{
background-color:black;
color:white;
clear:both;
text-align:right;
padding:5px;
}
#tb1{
text-align:center;
color:white;
font-size:24px;
background:url(静夜思.jpg);
background-size: 100% 100%;
margin:0px;
padding:0px;
border-collapse:collapse;
}
#tb1 td {
border-left:3px solid white;
border-right:3px solid white;
}
</style>
<head>
<title>小白DAY02-写诗</title>
</head>
<!-页面自定义布局->
<body>
<!-自定义头部->
<div id="header">
<h1>吟诗作乐</h1>
</div>
<!-导航->
<div id="nav">
<ul>
<li><a href="#tb1">静夜思1</li>
<li><a href="#tb2">静夜思2</li>
<li><a href="#tb3">静夜思3</li>
<li><a href="#tb4">静夜思4</li>
</ul>
</div>
<!-自定义章节->
<div id="section" name="section">
<h2>静夜思1<h2>
<table id="tb1" name="tb1" width=450px height=400px >
<tr><td>低</td><td>举</td><td>疑</td><td>床</td><td> </td></tr>
<tr><td>头</td><td>头</td><td>是</td><td>前</td><td style="font-size:36px;">静</td></tr>
<tr><td>思</td><td>望</td><td>地</td><td>明</td><td style="font-size:36px;">夜</td></tr>
<tr><td>故</td><td>明</td><td>上</td><td>月</td><td style="font-size:36px;">思</td></tr>
<tr><td>乡</td><td>月</td><td>霜</td><td>光</td><td> </td></tr>
</table>
</div>
<!-自定义底部->
<div id="footer" name="footer">
每天进步1%
</div>
</body>
</html>
2724
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
