這篇是14號寫的，昨天太累了偷了個懶，今天補上
今天不同于以往，因為涉及到了全局的樣式等，所以分開了多個html文件，大概10個左右
下面詳細描述一下細節
1)分類塊級元素
實現步驟：
<head>
<style>
<!--藍底白字-->
.cities{
? ? ? ? ? ?background-color:blue;
? ? ? ? ? ?color:white;
? ? ? ? ? ?margin:20px;
? ? ? ? ? ?padding:20px;
}
<!--紅底黑字-->
.zhang{
? ? ? ? ? ?background-color:red;
? ? ? ? ? ?color:black;
? ? ? ? ? ?margin:20px;
? ? ? ? ? ?padding:20px;
}
<!--網絡圖片背景黑字-->
.yong{
? ? ? ? ? background：url("xxxxxxxxxxx.png");
? ? ? ? ? color:black;
? ? ? ? ? margin:20px;
? ? ? ? ? padding:20px;
}
<!--本地圖片背景黑字-->
.chong{
? ? ? ? ? ? background-image:url(xxxxxxxxxxxxxxx.jpg);
? ? ? ? ? ? color:black;
? ? ? ? ? ? margin:20px;
? ? ? ? ? ? padding:20px;
}
</style>
</head>
<body>
? ? ? ? ? ? ?<div class="cities">
? ? ? ? ? ? ? ? ? ? ? <h1>Fantasychongの數碼小店</h1>
? ? ? ? ? ? ? ? ? ? ?<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
? ? ? ? ? ? </div>
? ? ? ? ? ?<div class="zhang">
? ? ? ? ? ? ? ? ? ? <h1>Fantasychongの數碼小店</h1>
? ? ? ? ? ? ? ? ? ? <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
? ? ? ? ? </div>
? ? ? ? ? <div class="yong">
? ? ? ? ? ? ? ? ? ?<h1>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h1>
? ? ? ? ? ? ? ? ? ?<p>xxxxxxxxxxxxxxxxxxxxx</p>
? ? ? ? ?</div>
? ? ? ? ?<div class="chong">
? ? ? ? ? ? ? ? ?<h1>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h1>
? ? ? ? ? ? ? ? ?<p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
? ? ? ? </div>
</body>
2)分類行內元素
實現效果：
<style>
? ? ? ? ? ? span.red(color:red;)
</style>
<body>
? ? ? ? ? ? ?<p>Fan<span>tasy</span>chong</p>
</body>
3)HTML響應式布局
可以根據尺寸自動收縮內容
實現效果：
實現步驟：
<html>
? ? ? ? ? ? <head>
? ? ? ? ? ? <style>
? ? ? ? ? ? ? ? ? ? ? ?.city{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?float:left;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?margin:5px;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?padding:15px;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?width:300px;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?height:300px;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?border:1px solid black;
? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? </style>
? ? ? ? ? ? </head>
? ? ? ? ? ? <body>
? ? ? ? ? ? ? ? ? ? ? ? ?<h1 align="center">Fantasychongの數碼小店</h1>
? ? ? ? ? ? ? ? ? ? ? ? ?<h2 align="center">zhangyongchong</h2>
? ? ? ? ? ? ? ? ? ? ? ? ?<div class="city">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <h2>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h2>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? <div class="city">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <h2>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h2>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <p>xxxxxxxxxxxxxx</p>
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? <div class=”city”>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <h2>ssssssssssssssssssss</h2>
? ? ? ? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ?</body>
</html>
4)HTML水平框架
實現效果:
實現步驟：
如果不設置frame，則是空白區域
<html>
? ? ? ? ? ?<frameset rows="33%,33%,33%">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <frame src="xxxxxxxxxxxxxx.html">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <frame src="xxxxxxxxxxxxxxxxxx.html">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <frame src="xxxxxxxxxxxxxx.html">
? ? ? ? ? ?</frameset>
</html>
5)HTML縱向框架
實現效果：
實現步驟：
<html>
<frameset cols="33%, 33%, 33%">
? ? ? ? ? ? ? ? ? ?<frame src="xxxxx.html">
? ? ? ? ? ? ? ? ? ?<frame src="xxxxx.html">
? ? ? ? ? ? ? ? ? ?<frame src="zzzzzzzzzz.html">
</frameset>
</html>
6)橫縱混合框架
實現效果：
實現步驟：
<html>
? ? ? ? ? ?<frameset rows="50%,50%">
? ? ? ? ? ? ? ? ?<frame src="xxxxxxxxxxxxx.html">
? ? ? ? ? ? ? ? ?<frameset cols="30%, 70%">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <frame src="xxxxxx.html">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <frame src="xxxxxxxxxxx.html">
? ? ? ? ? ? ? ? ?</frameset>
? ? ? ? ? ? </frameset>
</html>
7)不可調整框架尺寸
以上的邊框都是可以拉長伸縮的，我們可以通過noresize屬性來固定尺寸
<frame noresize="noresize" src="xxxxxxxxxxx.html">
