Task2
Posted 潇潇、寒
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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;
}
以上是关于Task2的主要内容，如果未能解决你的问题，请参考以下文章