三、实验用设备、软件环境
1.实验用仪器设备：PC机
2.软件环境：Adobe Dreamweaver CS6
四、实验原理
基于HTML和CSS的前端开发的思想、方法，用HTML与CSS设计前端页面
五、方案设计
a:设计布局。
b:设置大盒子，大盒子中套小盒子，将大盒子划分为6个盒子。
C:最后将6个盒子里的内容进行完善
D:达到效果图
1、利用CSS设置网页背景色为#666
2、添加大盒子div，id为big div利用CSS设置大盒子的外边距（使之居中），高度（atuo），宽度（1000px）。
3、在大盒子中添加六个盒子，分别id为div1......div6，分别用CSS设置背景图片，宽度，高度，浮动方式。
4、在div1里，添加一个标题为“李乐乐的博客”，在标题下添加文字。
5、在div2里，添加9个盒子，在其中分别添加9个链接，用类选择符CSS设置9个盒子的高度、宽度、浮动方式，将其整体作为导航栏。
6、在div4里，添加3个盒子，第1和3个盒子里分别放置文字和列表，第2个盒子用来分隔第1，3个盒子。并用CSS设置3个盒子的高度，宽度，浮动方式，背景色。
【CSS技术在网页设计中的应用】
CSS（Cascading Style Sheets）是一种用于描述HTML或XML（包括各种XML方言，如SVG、XHTML等）文档样式的样式表语言。在网页设计中，CSS起到了至关重要的作用，它使得网页的布局、颜色、字体、大小等视觉元素得以灵活控制，实现了内容与表现的分离，极大地提高了网页的设计效率和可维护性。
实验内容基于HTML和CSS的前端开发，主要涉及以下几个关键知识点：
1. **网页背景色设置**：
使用CSS可以方便地设置整个网页的背景颜色。例如，`body{background-color:#666;}`这行代码将网页背景色设置为#666，即一种深灰色。
2. **CSS布局**：
- **居中对齐**：通过设置外边距（margin）实现元素的水平居中。例如，`#bigdiv{margin:20px auto 0;}`中的`auto`值使元素在水平方向上居中。
- **盒模型**：在HTML中，每个元素都可以看作一个盒子，包含内边距、边框和外边距。CSS可以控制这些属性，如设置盒子的宽度（width）、高度（height）等。
3. **嵌套和分块**：
在大盒子（div）中套小盒子，通过ID选择器指定各个子盒子的样式。例如，创建6个小盒子`#div1`到`#div6`，并分别设置它们的背景图片、宽度、高度和浮动方式，以实现特定的布局效果。
4. **内容添加**：
- 在`#div1`中添加标题和文本，通过HTML元素如`<h1>`和`<p>`实现。
- 在`#div2`中创建9个链接盒子，用类选择符`.d`来统一设置样式，形成导航栏。
- 在`#div4`中安排3个子盒子，用于放置文字、列表和间隔，通过调整盒子的属性实现内容分隔。
5. **样式细化**：
进一步完善样式，包括字体颜色、字体样式、段落对齐等。例如，可以通过设置`color`属性改变文字颜色，通过`font-family`设置字体，通过`text-align`调整文本对齐方式。
6. **响应式设计**：
虽然实验描述中没有明确提及响应式设计，但现代网页设计往往需要考虑不同屏幕尺寸下的显示效果。CSS3提供了媒体查询（Media Queries）等工具，允许开发者针对不同设备和视口大小定义不同的样式规则。
7. **代码规范**：
实验报告中强调了格式规范和书写整齐，这在编写CSS代码时同样重要。良好的代码组织和注释可以提高代码的可读性和可维护性。
通过这个实验，学习者将能深入理解CSS在网页设计中的运用，掌握如何通过CSS来控制网页布局、元素样式和交互效果，为后续的前端开发工作打下坚实的基础。同时，实验报告的撰写过程也锻炼了学习者的总结和表达能力，强化了对实验过程的理解。
