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>文章作者 文章发表时间
            <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"让你看出来是一个表格
            <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>城市:
                <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>版权所有©</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