零基礎HTML及CSS編程（一） 導航鏈接四 導航鏈接三 導航鏈接二 導航鏈接一 網站一級標... ...
<!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;
}
