task_1_2_1
来源：互联网 发布：手机淘宝删除聊天记录 编辑：程序博客网 时间：2024/04/18 20:33
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;}
0 0
