myfirstwebpage.css
太心酸了。禀梳。杜窄。。出皇。調(diào)格式調(diào)半天調(diào)不好羞芍。。郊艘。荷科。心都碎了唯咬，尤其最后一頁(yè)的效果太折磨人了。畏浆。胆胰。。刻获。
body {
font-family: "Open Sans", sans-serif;
}
.container{
background-color:bisque;
}
.header{
margin-top: 0;
margin-left: 0;
margin-bottom: 0;
height: 60px;
line-height: 60px;
text-align: middle;
background-color:dimgray;
}
h1{
display:inline;
}
.daohang{
float right;
display: inline;
}
.daohang ul{list-style:none;margin:0;padding:0;display:inline;float: right;color: #000;}
.daohang li{margin-right:8px;display:inline;color:bisque;}
.page{
border:1px solid #cccccc;
margin: 10px;
padding: 10px;
box-shadow: 1px 1px 2px #226
}
.page p{
text-indent:2em;
}
.page h2,h3,h5{
font-family: 微軟雅黑
}
.page h3{
color:#666;
}
.page h5{
color:#999;
}
#box1{
position: absolute;
text-align: center;
width: 25%;
padding: 5px;
}
#box2{
border:1px solid #ccc;
position: relative;
width:200px;
height:200px;
padding-top:30px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
margin: 10px;
}
#box3{
position: absolute;
text-align: center;
width: 25%;
padding: 5px;
}
#box4{
border:1px solid #ccc;
position: relative;
width:200px;
height:200px;
padding-top:30px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
margin:10px;
}
#box5{
position: absolute;
text-align: center;
width: 25%;
padding: 5px;
}
#box6{
border:1px solid #ccc;
position: relative;
width:200px;
height:200px;
padding-top:30px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
margin:10px;
}
ol{
font-family:微軟雅黑;
font-weight: bold;
}
table{
border: 0.5px #ccc solid;
width: 90%;
margin:auto;
font-family:微軟雅黑;
}
th{
background-color:#333;
color: aliceblue;
padding: 5px;
text-align: left;
}
tfoot{
background-color: #ccc;
font-weight: bold;
color: white;
}
.pagelast h2{
border-left: solid #ccc 5px;
padding-left: 10px;
text-align: left;
}
.pagelast{
text-align: center;
}
input{
width: 150px;
}
.duiqi2{
color: #666;
font-size:7px;
font-family: 微軟雅黑;
display: inline-block;
margin-top: 0;
margin-left: 120px;
}
.icon{
width:800px;
margin:0;
background-color: #000099;
color:aliceblue;
height: 40px;
border-radius: 10px;
}
#teshu{
display: inline-block;
width:150px;
text-align: left;
}
#teshu2{
display: inline-block;
width:150px;
text-align: left;
}
.1{
line-height: 20px;
}
lable{
display: inline-block;
width:150px;
text-align:right;
}
html相應(yīng)文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>A tiny document</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="container">
<div class="header">
<h1 class="header">LOGO</h1>
<div class="daohang">
<ul>
<li> <a >導(dǎo)航鏈接一</a></li>
<li> <a >導(dǎo)航鏈接二</a></li>
<li> <a >導(dǎo)航鏈接三</a></li>
<li> <a >導(dǎo)航鏈接四</a></li>
</ul>
</div>
</div>
<div class="content">
<div class="page">
<h2>文章一級(jí)標(biāo)題</h2>
<h3>文章二級(jí)標(biāo)題</h3>
<h5>文章作者 文章發(fā)表時(shí)間</h5>
<p>這是一個(gè)很長(zhǎng)的段落 這是一個(gè)很長(zhǎng)的段落 這是一個(gè)很長(zhǎng)的段落 這是一個(gè)很長(zhǎng)的段落 這是一個(gè)很長(zhǎng)的段落 這是一個(gè)很長(zhǎng)的段落 這是一個(gè)很長(zhǎng)的段落 這是一個(gè)很長(zhǎng)的段落 換行了<br /></p>
<p>這是一個(gè)很長(zhǎng)的段落 這是一個(gè)很長(zhǎng)的段落 這是一個(gè)很長(zhǎng)的段落 這是一個(gè)很長(zhǎng)的段落 這是一個(gè)很長(zhǎng)的段落 這是一個(gè)很長(zhǎng)的段落 換行了<br /></p>
<p>這是一個(gè)很長(zhǎng)的段落 這是一個(gè)很長(zhǎng)的段落 <a >這里有一個(gè)鏈接鏈接到www.baidu.com</a><b> 這是一個(gè)加粗</b>這是一個(gè)很長(zhǎng)的段落 這是一個(gè)很長(zhǎng)的段落<br /></p>
<p>這是一個(gè)很長(zhǎng)的段落 這是一個(gè)很長(zhǎng)的段落 這是一個(gè)很長(zhǎng)的段落 這是一個(gè)很長(zhǎng)的段落 這是一個(gè)很長(zhǎng)的段落 這是一個(gè)很長(zhǎng)的段落 這是一個(gè)很長(zhǎng)的段落 這是一個(gè)很長(zhǎng)的段落 換行了<br /></p>
<p>這是一個(gè)很長(zhǎng)的段落 這是一個(gè)很長(zhǎng)的段落 <b>這里有個(gè)粗體字</b> 這是一個(gè)很長(zhǎng)的段落 這是一個(gè)很長(zhǎng)的段落 <a href="www.baidu.com/">這里有一個(gè)鏈接鏈接到www.baidu.com</a>這是一個(gè)很長(zhǎng)的段落 這是一個(gè)很長(zhǎng)的段落 這是一個(gè)很長(zhǎng)的段落 換行了<br /></p></div>
<div class="page">
<h2>另一篇文章一級(jí)標(biāo)題</h2>
<h3>文章二級(jí)標(biāo)題</h3>
<p>這是一個(gè)很長(zhǎng)的段落 這是一個(gè)很長(zhǎng)的段落 這是一個(gè)很長(zhǎng)的段落 這是一個(gè)很長(zhǎng)的段落 這是一個(gè)很長(zhǎng)的段落 這是一個(gè)很長(zhǎng)的段落 這是一個(gè)很長(zhǎng)的段落 這是一個(gè)很長(zhǎng)的段落 換行了<br /></p>
<p>這是一個(gè)很長(zhǎng)的段落 這是一個(gè)很長(zhǎng)的段落 這是一個(gè)很長(zhǎng)的段落 這是一個(gè)很長(zhǎng)的段落 這是一個(gè)很長(zhǎng)的段落 這是一個(gè)很長(zhǎng)的段落 換行了<br /></p>
<p>這是一個(gè)很長(zhǎng)的段落 這是一個(gè)很長(zhǎng)的段落 <a >這里有一個(gè)鏈接鏈接到www.baidu.com</a>這是一個(gè)很長(zhǎng)的段落 這是一個(gè)很長(zhǎng)的段落<br /></p>
<img src ="3.jpg" width="300" height="200">
<ul>
<li> 列表一</li>
<li> 列表二</li>
<li> 列表三</li>
</ul></div>
<div class="page">
<h2>圖片</h2>
<div class="pic">
<div id="box1">
好看的圖片</div>
<div id="box2">
</div>
<div id="box3">
好看的圖片</div>
<div id="box4">
<img src ="3.jpg" width="200" height="200">
</div>
<div id="box5">
好看的圖片</div>
<div id="box6">
<img src ="3.jpg" width="200" height="200">
</div>
</div>
</div>
<div class="page">
<h2>最后一篇文章一級(jí)標(biāo)題</h2>
<h3>
文章二級(jí)標(biāo)題
</h3>
<h5>文章作者 文章發(fā)表時(shí)間</h5>
<ol>
<li>排名一</li>
<li>排名二</li>
<li>排名三</li>
</ol>
<table border="1">
<tr>
<th>表頭</th>
<th>表頭</th>
<th>表頭</th>
</tr>
<tr>
<td>表內(nèi)容單元格</td>
<td>表內(nèi)容單元格</td>
<td> <a href="www.baidu.com/">操作</a></td>
</tr>
<tr>
<td>表內(nèi)容單元格</td>
<td>表內(nèi)容單元格</td>
<td> <a href="www.baidu.com/">操作</a></td>
</tr>
<tr>
<td>表內(nèi)容單元格</td>
<td>表內(nèi)容單元格</td>
<td> <a href="www.baidu.com/">操作</a></td>
</tr>
<tr>
<td>表內(nèi)容單元格</td>
<td>表內(nèi)容單元格</td>
<td> <a href="www.baidu.com/">操作</a></td>
</tr>
<tfoot>
<td>總計(jì)</td>
<td colspan="2">100</td>
</tfoot>
</table></div>
<div class="page">
<div class="pagelast">
<h2>這里以后是一個(gè)側(cè)欄蜀涨，這是側(cè)欄的標(biāo)題</h2>
<div class="1">
<lable >請(qǐng)輸入郵箱地址</lable>
<input type="text" name="郵箱地址" value="這是一個(gè)文本輸入框"></div>
<p class="duiqi2">
郵箱地址請(qǐng)按格式要求輸入 </p>
<div class="1">
<lable>請(qǐng)輸入密碼</lable>
<input type="password" name="密碼輸入框" value="這是一個(gè)文本輸入框"></div>
<div class="1">
<lable>請(qǐng)重復(fù)輸入密碼</lable>
<input type="password" name="mima" value="這是一個(gè)文本輸入框"></div>
<p class="duiqi2">
密碼請(qǐng)為6-16位英文數(shù)字
</p>
<div class="1">
<lable>性別</lable>
<div id="teshu">
<input type="radio" name="sex" value="女" style="width:10px" checked >女
<input type="radio" name="sex" value="男" style="width:10px">男<br></div></div>
<div class="1">
<lable>城市</lable>
<div id="teshu2">
<select name="城市" >
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="重慶">重慶</option>
<option value="杭州">杭州</option>
</select><br></div></div>
<div class="1">
<lable>愛(ài)好</lable>
<input type="checkbox" name="藝術(shù)" value="藝術(shù)" style="width:10px;">藝術(shù)
<input type="checkbox" name="運(yùn)動(dòng)" value="運(yùn)動(dòng)" style="width:10px;">運(yùn)動(dòng)
<input type="checkbox" name="科學(xué)" value="科學(xué)" style="width:10px;">科學(xué)<br></div>
<div class="1">
<lable>個(gè)人描述</lable>
<textarea name="a" style="width:150px;height:30px;vertical-align:top">這是一個(gè)多行輸入框請(qǐng)?jiān)谶@里輸入內(nèi)容</textarea><br></div>
<input class="icon" type="submit">
</div>
<div class="footer">
</div>
</body>
</html>```
#實(shí)現(xiàn)效果展示
查看效果：https://thimble.mozilla.org/zh-CN/user/zhang-boyi-911/955634