web复习（四）-海口c网

盒子模型的例题

例一：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>咖啡店banner</title>
<style type="text/css">
/*将页面中所有元素的内外边距设置为0*/
*{ padding:0; margin:0;}
.outer{       /*设置外面盒子的样式*/width:900px;height:344px;margin:50px auto;background:url(images/bg.png) repeat-x;
}
.inner{        /*设置里面盒子的样式*/width:900px;height:344px;background:url(images/coffee.png) no-repeat center 30px;
}</style>
</head>
<body><div class="outer"><div class="inner"></div></div>
</body>
</html>

1. `<!doctype html>`

定义：这是文档类型声明，用于告诉浏览器这是一个HTML5文档。
作用：确保浏览器以标准模式（Standards Mode）渲染页面，避免兼容性问题。

2. `<html>`

定义：根元素，表示HTML文档的开始和结束。
内容：包含文档的所有其他HTML元素。

3. `<head>`

定义：包含文档的元数据（metadata），如字符集、标题和样式信息。
内容：
- <meta charset="utf-8">：设置文档的字符编码为UTF-8，确保正确显示各种字符。
- <title>咖啡店banner</title>：设置网页的标题为“咖啡店banner”，在浏览器标签页中显示。
- <style type="text/css">：内联样式表，用于定义页面的CSS样式。

4. CSS 样式

`*{ padding:0; margin:0;}`

定义：全局重置样式，将所有元素的内外边距设置为0。
作用：消除不同浏览器默认样式的差异，确保页面布局的一致性。

`.outer{ width:900px; height:344px; margin:50px auto; background:url(images/bg.png) repeat-x; }`

定义：设置一个外部容器（outer）的样式。
- width:900px;：设置宽度为900像素。
- height:344px;：设置高度为344像素。
- margin:50px auto;：顶部和底部外边距为50像素，左右外边距为自动（使容器水平居中）。
- background:url(images/bg.png) repeat-x;：设置背景图片为images/bg.png，并在水平方向重复显示。

`.inner{ width:900px; height:344px; background:url(images/coffee.png) no-repeat center 30px; }`

定义：设置内部容器（inner）的样式。
- width:900px;：设置宽度为900像素。
- height:344px;：设置高度为344像素。
- background:url(images/coffee.png) no-repeat center 30px;：设置背景图片为images/coffee.png，不重复显示，位置为水平居中，垂直偏移30像素。

5. `<body>`

定义：包含文档的可见内容。
内容：
- <div class="outer">：创建一个外部容器div。
  - <div class="inner"></div>：在外部容器内部创建一个内部容器div。

6. 结构分析

外层容器（outer）：提供一个固定大小的外部框架，背景是水平重复的图片bg.png，上下外边距为50像素，使整个横幅在页面中居中显示。
内层容器（inner）：放置在外部容器内部，背景是不重复的图片coffee.png，位置稍作偏移（center 30px），确保图片在其中正确显示。

7. 功能总结

页面布局：通过CSS样式控制页面布局，确保横幅的大小和位置固定。
背景图片：使用外部和内部容器的背景图片组合，创建一个视觉上完整的横幅效果。
居中显示：通过margin:50px auto;将横幅水平居中显示在页面上。

这段代码通过简单的HTML和CSS实现了网页横幅的基本布局和样式设置，适用于静态的网页设计。

例二：


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图标导航栏</title>
<style type="text/css">
/*将页面中所有元素的内外边距设置为0*/
*{ padding:0; margin:0;}
.all{          /*控制外面的大盒子*/width:630px;height:45px;margin:50px auto;background-color:#192132;padding-left:20px;border-bottom:3px solid #000;
}
span{          /*整体控制小盒子*/display:inline-block;width:80px;height:45px;border-bottom:3px solid #1ba2c7;
}
/*给小盒子设置不同的背景图像*/
.one{background:url(images/1.png) no-repeat;}
.two{background:url(images/2.png) no-repeat;}
.three{background:url(images/3.png) no-repeat;}
.four{background:url(images/4.png) no-repeat;}
.five{background:url(images/5.png) no-repeat;}
.six{background:url(images/6.png) no-repeat;}
.seven{background:url(images/7.png) no-repeat;}</style>
</head>
<body>
<div class="all"><span class="one"></span><span class="two"></span><span class="three"></span><span class="four"></span><span class="five"></span><span class="six"></span><span class="seven"></span>
</div>
</body>
</html>

1. `<!doctype html>`

定义：文档类型声明，用于告诉浏览器这是一个HTML5文档。
作用：确保浏览器以标准模式（Standards Mode）渲染页面，避免兼容性问题。

2. `<html>`

定义：根元素，表示HTML文档的开始和结束。
内容：包含文档的所有其他HTML元素。

3. `<head>`

定义：包含文档的元数据（metadata），如字符集、标题和样式信息。
内容：
- <meta charset="utf-8">：设置文档的字符编码为UTF-8，确保正确显示各种字符。
- <title>图标导航栏</title>：设置网页的标题为“图标导航栏”，在浏览器标签页中显示。
- <style type="text/css">：内联样式表，用于定义页面的CSS样式。

4. CSS 样式

`*{ padding:0; margin:0;}`

定义：全局重置样式，将所有元素的内外边距设置为0。
作用：消除不同浏览器默认样式的差异，确保页面布局的一致性。

`.all{ width:630px; height:45px; margin:50px auto; background-color:#192132; padding-left:20px; border-bottom:3px solid #000; }`

定义：设置一个外部容器（all）的样式。
- width:630px;：设置宽度为630像素。
- height:45px;：设置高度为45像素。
- margin:50px auto;：上下外边距为50像素，左右外边距为自动（使容器水平居中）。
- background-color:#192132;：设置背景颜色为深蓝色（#192132）。
- padding-left:20px;：设置左侧内边距为20像素。
- border-bottom:3px solid #000;：设置底部边框为3像素宽的黑色实线。

`span{ display:inline-block; width:80px; height:45px; border-bottom:3px solid #1ba2c7; }`

定义：设置span元素的样式。
- display:inline-block;：将span元素设置为内联块级元素，使其可以同时具有内联和块级的特性。
- width:80px;：设置宽度为80像素。
- height:45px;：设置高度为45像素。
- border-bottom:3px solid #1ba2c7;：设置底部边框为3像素宽的蓝色实线。

`.one{background:url(images/1.png) no-repeat;}`

定义：设置类one的样式。
- background:url(images/1.png) no-repeat;：设置背景图片为images/1.png，并设置为不重复显示。

`.two{background:url(images/2.png) no-repeat;}`

定义：设置类two的样式。
- background:url(images/2.png) no-repeat;：设置背景图片为images/2.png，并设置为不重复显示。

`.three{background:url(images/3.png) no-repeat;}`

定义：设置类three的样式。
- background:url(images/3.png) no-repeat;：设置背景图片为images/3.png，并设置为不重复显示。

`.four{background:url(images/4.png) no-repeat;}`

定义：设置类four的样式。
- background:url(images/4.png) no-repeat;：设置背景图片为images/4.png，并设置为不重复显示。

`.five{background:url(images/5.png) no-repeat;}`

定义：设置类five的样式。
- background:url(images/5.png) no-repeat;：设置背景图片为images/5.png，并设置为不重复显示。

`.six{background:url(images/6.png) no-repeat;}`

定义：设置类six的样式。
- background:url(images/6.png) no-repeat;：设置背景图片为images/6.png，并设置为不重复显示。

`.seven{background:url(images/7.png) no-repeat;}`

定义：设置类seven的样式。
- background:url(images/7.png) no-repeat;：设置背景图片为images/7.png，并设置为不重复显示。

5. `<body>`

定义：包含文档的可见内容。
内容：
- <div class="all">：创建一个外部容器div。
  - <span class="one"></span>：在外部容器内部创建一个带有类one的span元素。
  - <span class="two"></span>：在外部容器内部创建一个带有类two的span元素。
  - <span class="three"></span>：在外部容器内部创建一个带有类three的span元素。
  - <span class="four"></span>：在外部容器内部创建一个带有类four的span元素。
  - <span class="five"></span>：在外部容器内部创建一个带有类five的span元素。
  - <span class="six"></span>：在外部容器内部创建一个带有类six的span元素。
  - <span class="seven"></span>：在外部容器内部创建一个带有类seven的span元素。

6. 结构分析

外层容器（all）：提供一个固定大小的外部框架，背景颜色为深蓝色（#192132），底部有黑色边框，左右外边距为自动（使容器水平居中）。
内层元素（span）：每个span元素代表一个导航图标，宽度为80像素，高度为45像素，底部有蓝色边框。每个span元素通过不同的类（如one、two等）设置不同的背景图片。