html设置八个盒子,第八期作业：关于<iframe>、css样式，css的id，class以及盒子模型的实例演示2019年9月2日23时27分...

实例

html>

Document

.box1 {

float: left;

}

li {

padding: 20px 0;

}

.box2 {

float: left;

padding-left: 180px;

}

• target="hz">小清新风格

• target="hz">扁平化风格

• target="hz">魔幻风格

• target="hz">哥特风格

欢迎登陆后台图片系统" frameborder="1" name="hz" width="800" height="600">

运行实例 »

点击 "运行实例" 按钮查看在线实例

2.css样式设置的优先级

内联样式(style="") > 内部样式(外部样式表(.css)

实例

html>

p {

color: aqua;

}

css

1. 我是内联样式，我优先级最高

2. 我是内部样式，我的优先级比较高

3. 我是外部样式表，我的优先级最低

运行实例 »

点击 "运行实例" 按钮查看在线实例

3.id、class与标签选择器的使用规则

标签

实例

html>

p {

color: black;

}

#red {

color: crimson;

}

.green {

color: pink;

}

.pink {

color: green;

}

.blue {

color: blue;

}

选择器的优先级

我是佩奇，这是我的弟弟乔治

我是乔治，这是我的姐姐佩奇

我是猪爸爸，这是我的孩子们

运行实例 »

点击 "运行实例" 按钮查看在线实例

4.实例演示盒模型的五大要素:width, height, padding, border.

实例

html>

.box {

border: 2px dashed red;

width: 1100px;

height: 500px;

background-color: #a2e9ff;

}

.box1 {

width: 300px;

height: 300px;

padding: 100px 390px;

background-color: blueviolet;

border: 4px solid forestgreen;

}

.box2 {

width: 300px;

height: 300px;

background-color: darkslateblue;

padding: 500px 0;

border: 4px solid #b7c274;

}

.box3 {

width: 300px;

height: 300px;

background-color: red;

padding: 0 900px;

}

box

1

2

3

运行实例 »

点击 "运行实例" 按钮查看在线实例