Task2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>零基础HTML及CSS编程(一)</title> <link rel="stylesheet" href="css/tsak2.css" type="text/css"> </head> <body> <div class="header"> <div class="top-logo"> <img src="http://ife.baidu.com/2017/asset/common/img/logo_a3b4064.png" alt="首页" class="top-img"> </div> <ul class="header-wenzi"> <li><a href="#">导航链接四</a></li> <li><a href="#">导航链接三</a></li> <li><a href="#">导航链接二</a></li> <li><a href="#">导航链接一</a></li> </ul> </div> <div class="content-one"> <div class="content-two"> <h1>网站一级标题</h1> <ul> <li><a href="#">导航链接一</a></li> <li><a href="#">导航链接二</a></li> <li><a href="#">导航链接三</a></li> <li><a href="#">导航链接四</a></li> </ul> <h2>文章一级标题</h2> <h2>文章二级标题</h2> <span>文章作者 文章发表时间</span> <p style="text-indent: 2em">jdkasljdkaslnhfjkashnjkdfaskdfjaskldaskdhjkashdjkasjdklas<br>换行了</p> <p>jdkasljdkaslnhfjkashnjkdfaskdfjaskldaskdhjkashdjkasjdklas换行了</p> <p>不是粗体<strong>这是粗体</strong></p> <p style="text-indent: 2em"><img src="1.jpg" alt="哎呦,错误了" style="width: 100px;height: 100px"></p> <p>前面的段落<a href="http://www.baidu.com">链接到百度</a></p> </div> </div> <div class="content-one"> <div class="content-two"> <h2>另一篇文章一级标题</h2><br> <h3>文章二级标签</h3><br> <p style="text-indent: 2em">文章作者 文章发表时间</p> <ul class="ul-tow"> <li>列表项目一</li> <li>列表项目二</li> <li>列表项目三</li> </ul> </div> </div> <div class="content-one"> <div class="content-two"> <h3>图片</h3> <div class="content-three"> <p class="logo-wenzi">好看的图片<br><img src="1.jpg" style="width: 100px;height: 100px"></p> </div> <div class="content-three"> <p class="logo-wenzi">好看的图片</p><br><img src="1.jpg" style="width: 100px;height: 100px"> </div> </div> </div> <div class="content-one"> <div class="content-two"> <h2>最后一篇文章一级标题</h2> <h3>文章二级标题</h3> <p>文章作者 文章发表时间</p> <ol class="ul-three"> <li>排名1</li> <li>排名2</li> <li>排名3</li> </ol> <span>下面是一个表格,给表格加一个border="1"让你看出来是一个表格</span> <div class="table-one"> <table> <tr> <th>表头</th> <th>表头</th> <th>表头</th> </tr> <tr> <td>表内容单元格</td> <td>表内容单元格</td> <td>操作</td> </tr> <tr> <td>表内容单元格</td> <td>表内容单元格</td> <td>操作</td> </tr> <tr class="table-bottom"> <td>总计</td> <td colspan="2">1000</td> </tr> </table> </div> </div> </div> <div class="content-one"> <div class="content-two"> <h2>这里以后是一个恻栏,这是侧栏标题</h2><br> <div class="bottom-form"> <p><label>请输入邮箱地址:<input type="email" placeholder="请输入邮箱" class="input-one"></label></p> <br> <p><label for="">请输入密码:<input type="password" placeholder="请输入密码" class="input-one"></label></p> <br> <p><label for="">请重复密码:<input type="password" placeholder="请重复密码" class="input-one"></label></p> <br> <p>密码为6-16位英文数字</p> <br> <form action="" method="post" class="form-one"> <label for="">性别:</label> <input type="radio" checked="checked" value="男" name="mael">男 <input type="radio" value="女" name="mael">女 <br><br> <span>城市:</span> <select name="" id=""> <option value="where" name="where">北京</option> <option value="where" name="where">上海</option> </select> <br><br> <label for="">爱好</label> <input type="checkbox" name="like">运动 <input type="checkbox" name="like">艺术 <input type="checkbox" name="like">科学 <br> <p><label for="">个人描述</label> <textarea name="" id="" cols="30" rows="5" class="input-one" placeholder="请输入内容"></textarea> <input type="submit"> </p> </form> </div> </div> </div> <div class="bottom"><span>版权所有©</span></div> </body> </html>
*{ margin: 0; padding: 0; border: 0; } body{ background-color: darkgray; } ul{ list-style: none; } .header{ background-color: aliceblue; margin: 0; height: 81px; overflow: hidden; } .top-img{ height: 40px; width: 200px; } .top-logo{ position: absolute; float: left; margin-left: 100px; margin-top: 20px; } .header-wenzi{ padding-right: 100px; } .header-wenzi li{ list-style: none; float: right; line-height: 81px; padding-left: 100px; } .content-one{ background-color: #fff; width: 1328px; margin: 10px; float: left; } .content-two{ float: left; margin: 30px; } .ul-tow{ float: left; margin: 20px; } .content-three{ border: solid 1px red; margin: 30px; } .logo-wenzi{ text-align: center; } .ul-three{ float: left; width: 100%; margin: 30px; } table{ border-collapse: collapse; width: 1260px; } table,th,td{ border: 1px wheat solid; } th,td{ height: 50%; text-align: left; padding: 15px; } th{ background-color: black; color: white; } .table-bottom{ background-color: darkgrey; } .input-one{ border: solid darkgray 1px; } .bottom-form{ padding-left: 300px; padding-top: 10px; } .bottom{ text-align: center; }