html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>task_1_1_1</title>
<link rel="stylesheet" href="task.css">
</head>
<body>
<header>
<p> <img src="baidu.gif">
<a href="nothing.html">导航链接一</a>
<a href="nothing.html">导航链接二</a>
<a href="nothing.html">导航链接三</a>
<a href="nothing.html">导航链接四</a></p>
</header>
<div>
<h2>文章一级标题</h2>
<h4>文章二级标题</h4>
<p><span>文章作者 发表时间</span><br>
这是一个很长的段落，这是一个很长的段落，这里有个<strong>粗体字</strong>
这是一个很长的段落，这是一个很长的段落，换行了<br>
这是一个很长的段落，这是一个很长的段落，
这是一个很长的段落，<a href="http://ife.baidu.com/">这里有一个链接能链接到http://ife.baidu.com</a></p>
<img src="piano.jpg"><br>
这是一个很长的段落，这是一个很长的段落，这里有个<strong>粗体字</strong>
这是一个很长的段落，这是一个很长的段落，换行了<br>
这是一个很长的段落，这是一个很长的段落
</div>
<div>
<h2>另文章一级标题</h2>
<h3>文章二级标题</h3>
<p> <span>文章作者 发表时间</span>
这是一个很长的段落，这是一个很长的段落，这里有个<strong>粗体字</strong>
这是一个很长的段落，这是一个很长的段落，换行了<br>
这是一个很长的段落，这是一个很长的段落，
这是一个很长的段落，<a target="_blank" href="http://ife.baidu.com" title="test">这里有一个链接点击后打开新窗口链接到http://ife.baidu.com</a></p>
<img src="piano.jpg"><br>
<ul>
<li>列表项目一</li>
<li>列表项目二</li>
<li>列表项目三</li>
</ul>
</div>
<div>
<h2>图片</h2>
<p class="photo">好看的图片<br>
<img src="piano.jpg"></p>
<p class="photo">好看的图片<br>
<img src="piano.jpg" title="好看的图片"></p>
<p class="photo"> 好看的图片<br>
<img src="piano.jpg"></p>
<p class="photo">好看的图片<br>
<img src="piano.jpg"></p>
</div>
<div>
<h2>最后一篇文章一级标题</h2>
<h3>文章二级标题</h3>
<p>文章作者 发表时间</p>
<ol>
<li>排名一</li>
<li>排名二</li>
<li>排名三</li>
</ol>
<table>
<caption align="left">下面是一个表格(border=1)</caption>
<tr >
<th>表头</th>
<th>表头</th>
<th>表头</th>
</tr>
<tr>
<td>表内容单元格</td>
<td>表内容单元格</td>
<td><a href="nothing.html">操作</a></td>
</tr>
<tr>
<td>表内容单元格</td>
<td>表内容单元格</td>
<td><a href="nothing.html">操作</a></td>
</tr>
<tr>
<td>表内容单元格</td>
<td>表内容单元格</td>
<td><a href="nothing.html">操作</a></td>
</tr>
<tr>
<td>表内容单元格</td>
<td>表内容单元格</td>
<td><a href="nothing.html">操作</a></td>
</tr>
<tr >
<td colspan="1">总计</td>
<td colspan="2">1000</td>
</tr>
</table>
</div>
<div>
<aside>
<h1>这是一个侧栏的标题</h1>
<h2>侧栏注册窗口标题</h2>
<form>
<div class="tableRow">
<p>请输入邮箱地址:</p>
<p><input type="email"><br>
邮箱地址请按要求格式输入</p>
</div>
<div class="tableRow">
<p>请输入密码：</p>
<p><input type="password"></p>
</div>
<div class="tableRow">
<p>请重复输入密码：</p>
<p><input type="password"><br>
密码请为6-16位英文字母</p>
</div>
<div class="tableRow">
<p>性别：</p>
<p><input type="radio" name="sex" value="man"> 男
<input type="radio" name="sex" value="lady"> 女</p>
</div>
<div class="tableRow">
<p>城市：</p>
<p><select name="city">
<option value="beijing">北京</option>
<option value="other">其他</option>
</select></p>
</div>
<div class="tableRow">
<p>爱好：</p>
<p><input type="checkbox" name="hobby" value="sport">运动
<input type="checkbox" name="hobby" value="art">艺术
<input type="checkbox" name="hobby" value="science">科学</p>
</div>
<div class="tableRow">
<p>个人描述：</p>
<p><textarea name="comments" rows="7" cols="90">这是一个多行输入框，请输入你的描述</textarea>
</div>
<div class="tableRow">
<p></p>
<input type="submit" value="确认提交"></p>
</div>
</form>
</aside>
</div>
<footer>
<p>版权所有@</p>
</footer>
</body>
</html>css:
header{
background:black;
color:white;
}
header p{
text-align:right;
vertical-align:middle;
}
header img{
margin-right:925px;
vertical-align:middle;
}
header a:link{
color:white;
}
body{
background:#D8D8D8;
}
div{
background:#FFFFFF;
margin:15px;
padding:15px;
}
ul li{
list-style-type :none ;
}
.photo
{
text-align:center;
width:180px;
margin-left:40px;
padding: 30px 10px 10px 10px;
border:thin black solid;
}
table{
text-align:left;
border: thin solid black;
width:80em;
border-spacing: 0px;
}
th,td
{
border: thin solid black;
}
th{
color:white;
background:black;
}
table tr:last-child{
background:#D8D8D8;
}
aside h1{
border-left: 4px solid darkgray;
padding: 10px 10px;
}
aside form{
display:table;
margin-left:20em;
}
div.tableRow
{
display:table-row;
}
div.tableRow p{
display:table-cell;
padding:5px;
vertical-align:top;
}
div.tableRow p:first-child
{
text-align:right;
}
footer
{
color:white;
text-align:center;
background:black;
padding:15px 0px 15px 0px;
}
4890
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
