项目十杜甫个人成就页面（1）（资源）

书剑风雪

于 2024-12-12 11:41:41 发布

阅读量730

点赞数 20

分类专栏： Web前段网页开发文章标签： css 前端 html html5 css3 flex webpack

本文链接：https://blog.youkuaiyun.com/Chinatown666/article/details/144422138

版权

【项目目标】

• 灵活运用弹性容器进行页面布局。

【项目内容】

利用flex 标签完成杜甫页面的弹性布局。
练习CSS 常用属性的使用。

【项目步骤】

本部分素材文件是项目六的结果文件，目的是利用 flex 布局完成杜甫个人成就页面的弹

性布局。

1.添加图片

Html部分中存在4个空的类名为"textBox"的div，在它们内部添加 img 标签。从上到下依次添加"images"文件夹中的“textBoxlmgl.jpg"textBoxlmg2.jpg"textBoxlmg3jpg”和

"textBoxlmg4.jpg".

2. guidance 部分

（1）＜guidance>中的div 部分：添加新内容，外边距设置为 30px 属性值为 “auto”；

（2） nav2 中的ul部分：

1.display 设置为 “flex"；

2.宽度设置为450px；

3。外边距属性值为 “auto”；

4.1.justify-content 设置为：space-between；

背景颜色设置为：#c7d2d4

（3） nav2 中的ul li 部分：

宽度设置为：150px；
2高度设置为：50px；
3行高设置为：50px；
list-style-position 设置为：inside

（4） nav2 中的ul li 部分在鼠标指针放上后：

1.背景颜色设置为：#134857；

2.前景色颜色

以上部分完成后，效果如项目图10-1所示：

项目图10-1guidance部分效果图

3. main 部分的初步设置

（1） maln 部分的编写：

1.display 设置为：flex；

2.flex-direction 设置为：column；

3.justify-content 设置为：space-around；

（2）对section 中的h2进行进一步编写：

1.宽度设置为：110px；高度设置为：110px；

2.外边距设置为0属性值为 “auto”

3.背景图片设置內 “images” 文件夹中的 “h2BG.png”图片设置为不重复

4.background-size 设置为“110px”

5.文字对齐方式设置为：居中对齐、行高设置为：100px；

（3）同时对类为 “text”与类为 “textBox”的样式进行设置：

1.display 设置为：flex；

2.flex-direction 设置为：row；

3.flex-wrap 设置为：wrap；

4.justify-content 设置为：space-between；

（4）对类为 “textBox” 样式进行设置：

边框样式设置为：10px solid；
边框背景设置为："images” 文件夹中的“10-border.png” 文件
边框向内偏移设置为：10%10%10%10%；
外边距设置为：10px0；

（5）对类为 “textBox” 样式中的 “p”标签进行进一步设置：align-self设置为"center"以上部分完成后，效果如项目图10-2所示：

项目图10-2main初步设置效果图

4.main部分的弹性设置
将此处设计为弹性布局。

section:nth-of-type（1）.text.textBox:nth-of-type（1）的宽度设置为：60%。
section:nth-of-type（1）.text.textBox:nth-of-type（2）的宽度设置为：35%
section:nth-of-type（1）.text.textBox:nth-of-type（3） img 的宽度没置：360px
section:nth-of-type(1) text .textBox:nth-of-type(4) 的宽度设置为: 65%.
section:nth-of-type(2) text .textBox:nth-of-type(1) 的宽度设置为: 35%.
section:nth-of-type(2) text .textBox:nth-of-type(2) 的宽度设置为: 35%.
section:nth-of-type(2) text textBoxinth-of-type(3) img 的宽度设置为: 250px.
section:nth-of-type(3) .text .textBox:nth-of-type(1) 的宽度设置为: 60%
section:nth-of-type(3) text .textBoxinth-of-type(2) img 的宽度设置为: 420px.
section:nth-of-type（3）.text.textBox:nth-of-type（3） img 的宽度设置为：420px
section:nth-of-type（3）.text .textBox:nth-of-type（4）的宽度设置为：60%。

以上部分完成后，效果如项目图10-3所示：

项目图10-3页面整体效果图

未修改的网页源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>杜甫-个人成就</title>    
    <link rel="stylesheet" href="./css/main.css">
    <link rel="stylesheet" href="./css/dufu-achievement.css">
</head>
<style>        
    body{
        background-image: url(./images/boat.png);
        background-position: 95% 95%;
        background-repeat: no-repeat;
    }

    #top{
        width: 100%;
        height: 50px;