札记丶2017-09-13
这篇是14号写的，昨天太累了偷了个懒，今天补上
今天不同于以往，因为涉及到了全局的样式等，所以分开了多个html文件，大概10个左右
图1.1
下面详细描述一下细节
1)分类块级元素
图2.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)分类行内元素
实现效果：
图2.2
<style>
span.red(color:red;)
</style>
<body>
<p>Fan<span>tasy</span>chong</p>
</body>
3)HTML响应式布局
可以根据尺寸自动收缩内容
实现效果：
图2.3
实现步骤：
<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水平框架
实现效果:
图2.4
实现步骤：
如果不设置frame，则是空白区域
<html>
<frameset rows="33%,33%,33%">
<frame src="xxxxxxxxxxxxxx.html">
<frame src="xxxxxxxxxxxxxxxxxx.html">
<frame src="xxxxxxxxxxxxxx.html">
</frameset>
</html>
5)HTML纵向框架
实现效果：
图2.5
实现步骤：
<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">
