<!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;
}
