网页标题

`元素 ```html

``` ### 4.2 定义主体CSS样式 ```css .main { width: 1000px; /* 宽度1000像素 */ margin: 0px auto; /* 设置当前div水平居中 */ } ``` ### 4.3 添加标题`

`元素 ```html

``` ### 4.4 定义标题CSS样式 ```css .title { width: 1000px; /* 宽度1000像素 */ height: 60px; /* 高度60像素 */ background-image: url("../images/title.jpg"); /* 设置背景图片title.jpg */ } ``` ### 4.5 添加内容`

`元素 ```html

``` ### 4.6 定义内容CSS样式 ```css .box1, .box2, .box3, .box4 { width: 490px; /* 宽度490像素 */ height: 360px; /* 高度360像素 */ } .box1 { background-image: url("../images/box1.jpg"); } .box2 { background-image: url("../images/box2.jpg"); } .box3 { background-image: url("../images/box3.jpg"); } .box4 { background-image: url("../images/box4.jpg"); } ``` ## 5. 运用浮动属性调整布局 ### 5.1 设置左浮动 ```css .box1, .box2, .box3, .box4 { float: left; /* 设置左浮动 */ } ``` ### 5.2 设置右外边距 ```css .box1, .box3 { margin-right: 20px; /* 设置右外边距20像素 */ } ``` ## 6. 制作底部区域 ### 6.1 添加底部`

`元素 ```html

``` ### 6.2 定义底部CSS样式 ```css .footer { width: 1000px; /* 宽度1000像素 */ height: 80px; /* 高度80像素 */ margin: 0px auto; /* 设置当前div水平居中 */ background-image: url("../images/footer.jpg"); /* 设置背景图片footer.jpg */ clear: both; /* 清除浮动 */ } ``` ## 7. 制作菜单栏 ### 7.1 修改头部样式 ```css .header { background-color: rgba(113,113,113,0.78); /* 设置背景颜色 */ line-height: 60px; /* 行高60像素，实现垂直居中 */ } ``` ### 7.2 添加``元素 ```html ``` ### 7.3 定义``样式 ```css .logo { color: #FFF; /* 字体颜色#FFF */ font-size: 24px; /* 字体大小24像素 */ margin-left: 20px; /* 左外边距20像素 */ margin-right: 270px; /* 右外边距270像素 */ font-weight: bold; /* 字体加粗 */ } ``` ### 7.4 添加超链接 ```html ``` ### 7.5 定义超链接样式 ```css .header a { color: #FFF; /* 字体颜色#FFF */ text-decoration: none; /* 无下划线 */ margin-right: 45px; /* 右外边距45像素 */ } .header a:hover { color: #2E2E2E; /* 鼠标悬停时，字体颜色#2E2E2E */ } ``` ## 8. 制作图文混排 ### 8.1 修改`

`样式 ```css .box1 { width: 448px; /* 宽度448像素 */ height: 300px; /* 高度300像素 */ padding: 20px; /* 内边距20像素 */ margin-top: 20px; /* 上边距20像素 */ margin-right: 20px; /* 右边距20像素 */ border: 1px solid rgba(135,135,135,1.00); /* 边框 */ float: left; /* 左浮动 */ } ``` ### 8.2 添加图片和文字 ```html

藏羚羊

主要生活在高山草原和高寒荒漠地带，善于奔跑，被称为“高原精灵”。

``` ### 8.3 定义图片和文字样式 ```css .box1 img { width: 200px; /* 宽度200像素 */ height: 300px; /* 高度300像素 */ margin-right: 20px; /* 右边距20像素 */ float: left; /* 左浮动 */ } .box1 p { text-indent: 2em; /* 首行缩进2em */ font-size: 16px; /* 字体大小16像素 */ line-height: 1.5; /* 行高1.5倍 */ } ```