浮动与定位4-11自由编程作业提交

浮动与定位4-11自由编程作业提交

提交浮动与定位4-11自由编程作业，请老师过目

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .gallery {
            width: 1200px;
            margin:0 auto;
            text-align: center;
            margin-top:30px;
        }
        .gallery h2 {
            font-size:32px;
        }
        .gallery .skip {
            width: 60px;
            height: 3px;
            background:#07cbc9;
            margin:10px auto;
        }
        .gallery .text {
            color:gray;
        }
        .main {
            width: 1200px;
            height: 650px;
            margin:0 auto;
            margin-top:20px;
        }
        .main .up-pics {
            width: 1200px;
            height: 240px;
        }
        .subtitle {
            width: 1200px;
            height: 50px;
            color:white;
        }
        .subtitle dl {
            float: left;
            width: 360px;
            height: 50px;
            background-color: black;
            position: relative;
        }
        .subtitle dl dt {
            position: absolute;
            top:50%;
            margin-top:-12px;
            margin-left:20px;
        }
        .main .down-pics {
            width: 1200px;
            height: 240px;
        }
        img {
            float: left;
            display:block;
        }
        .main .up-pics .pic1 {
            margin-left:20px;
            margin-right:40px;
        }
        .main .up-pics .pic2 {
            margin-right:40px;
        }
        .main .down-pics .pic4 {
            margin-left:20px;
            margin-right:40px;
        }
        .main .down-pics .pic5 {
            margin-right:40px;
        }
        .main .subtitle .dl1 {
            margin-left:20px;
            margin-right:40px;
        }
        .main .subtitle .dl2 {
            margin-right:40px;
        }
        .main .subtitle .dl4 {
            margin-left:20px;
            margin-right:40px;
        }
        .main .subtitle .dl5 {
            margin-right:40px;
        }
    </style>
</head>
<body>
    <div class="gallery">
        <h2>GALLERY</h2>
        <div class="skip"></div>
        <div class="text">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting</p>
            <p>industry. Lorem Ipsum has been the industry's standard dummy</p>
            <p>text ever since the 1500s.</p>
        </div>
    </div>
    <div class="main">
        <div class="up-pics">
            <img class="pic1" src="03-01.jpg" alt="">
            <img class="pic2" src="03-02.jpg" alt="">
            <img class="pic3" src="03-03.jpg" alt="">
        </div>
        <div class="subtitle">
            <dl class="dl1">
                <dt>Science Lab</dt>
            </dl>
            <dl class="dl2">
                <dt>Indoor Stadium</dt>
            </dl>
            <dl class="dl3">
                <dt>Transportation</dt>
            </dl>
        </div>
        <div class="down-pics">
            <img class="pic4" src="03-04.jpg" alt="">
            <img class="pic5" src="03-05.jpg" alt="">
            <img class="pic6" src="03-06.jpg" alt="">
        </div>
        <div class="subtitle">
            <dl class="dl4">
                <dt>Kids Room</dt>
            </dl>
            <dl class="dl5">
                <dt>Meditation Classes</dt>
            </dl>
            <dl class="dl6">
                <dt>Kids Play Ground</dt>
            </dl>
        </div>
    </div>
</body>
</html>
慕越秀工地 2022-04-08
源自：浮动与定位   4-11 自由编程
9
收起

正在回答

登陆购买课程后可参与讨论，去登陆吧

1回答
好帮手慕久久 回答被采纳获得+3积分 2022-04-09 10:11:51

同学你好，代码存在一些问题：

1、上下两组图文之间，缺少间隙：

https://img1.sycdn.imooc.com//climg/6250ea330995c91308130232.jpg

建议增加间隙，如下：

https://img1.sycdn.imooc.com//climg/6250ea5c09c3461a05200213.jpg

2、图文区结构划分不够优化，最好将图文划分成一组（整体），一共6组：

https://img1.sycdn.imooc.com//climg/6250ea7b09a076c312150688.jpg

结构和样式，同学可以参考如下方案：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        .title {
            text-align: center;
            font-size: 32px;
        }
 
        .line {
            width: 60px;
            height: 3px;
            background: #07cbc9;
            margin: 10px auto;
        }
 
        .sub-title {
            text-align: center;
            color: gray;
            font-size: 14px;
        }
 
        .gallery {
            margin-top: 30px;
        }
 
        .gallery-content {
            width: 1200px;
            margin: 20px auto;
            overflow: hidden;
        }
 
        .gallery-content dl {
            float: left;
            width: 360px;
            margin: 15px 20px;
        }
 
        .gallery-content dt img {
            display: block;
        }
 
        .gallery-content dd {
            height: 50px;
            line-height: 50px;
            text-indent: 20px;
            background: black;
            color: #fff;
        }
    </style>
</head>
<body>
    <!-- gallery -->
    <div class="gallery">
        <!-- 上半部分 -->
        <div class="gallery-top">
            <h3 class="title">GALLERY</h3>
            <div class="line"></div>
            <p class="sub-title">
                Lorem Ipsum is simply dummy text of the printing and typesetting <br />industry. Lorem Ipsum has
                been the industry's standard dummy <br />text ever since the 1500s.
            </p>
        </div>
        <!-- 下半部分 -->
        <div class="gallery-content wrap">
            <dl>
                <dt><img src="./images/03-01.jpg" alt=""></dt>
                <dd>Science Lab</dd>
            </dl>
            <dl>
                <dt><img src="./images/03-02.jpg" alt=""></dt>
                <dd>Indoor Stadium</dd>
            </dl>
            <dl>
                <dt><img src="./images/03-03.jpg" alt=""></dt>
                <dd>Transportation</dd>
            </dl>
            <dl>
                <dt><img src="./images/03-04.jpg" alt=""></dt>
                <dd>Kids Room</dd>
            </dl>
            <dl>
                <dt><img src="./images/03-05.jpg" alt=""></dt>
                <dd>Meditation Classes</dd>
            </dl>
            <dl>
                <dt><img src="./images/03-06.jpg" alt=""></dt>
                <dd>Kids Play Ground</dd>
            </dl>
        </div>
    </div>
</body>
</html>

祝学习愉快！

0
收起回答
  • 慕越秀工地 提问者 #1

    https://img1.sycdn.imooc.com//climg/6253c9f109bb366703340044.jpg

    老师请问你这里类名wrap是啥意思，上面css样式也没有使用wrap来描述什么呀

    2022-04-11 14:26:23
  • 樱桃小胖子 回复 提问者 慕越秀工地 #2

    同学你好，这里的wrap并没有实际用途，应该是老师测试代码的时候留下的测试类名。去掉即可。祝学习愉快！

    2022-04-11 16:15:43
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

浮动与定位4-11自由编程footer作业提交
9 0 5
请问自由编程里面的作业怎么提交啊，就是不知道在哪里提交作业
1 0 6
浮动与定位4-4自由编程作业提交
6 1 1
4-11 自由编程作业提交
47 2 4
关于绝对定位和浮动混排
9 0 3

登录后可查看更多问答，登录/注册

前端工程师
  • 参与学习           人
  • 提交作业       15697    份
  • 解答问题       17883    个

入行前端，是明智的选择！市场需求大，就业前景好，入行门槛低，小白易上手 全新升级:技术更新,Vue3.0/TypeScript/React17.x; 技术更全面,从0基础到全栈开发再到大型项目构建

了解课程

本课精华内容

问答 作业

老师,请问vscode有哪些好用的插件推荐一下...

157 1

老师,API具体是指什么呢?

75 1

老师,这两种情况为什么得到的结果不一样?

31 2

没有思路

201 5

老师给点提示。

155 1

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师
插入代码