请老师看下,为什么我的页面显示比例和老师不一样?

请老师看下,为什么我的页面显示比例和老师不一样?

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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
*{
    margin:0;
    padding:0;
}
ul,ol{
    list-style: none;
}
a{
    text-decoration: none;
}
body{
    font:normal 14px/25px "微软雅黑";
}
/* 头部 */
header{
    
}
header .header-top{
    width: 1201px;
    margin:0 auto;
    /* 清除浮动 */
    overflow: hidden;
}
header .header-top .logo{
    padding-top:27px;
    width: 221px;
    height: 63px;
    float: left;
}
header .header-top .logo h1{
    width: 221px;
    height: 63px;
}
header .header-top .tool{
    width: 266px;
    height: 77px;
    float:right;
    padding-top:22px;
}
header .header-top .tool .r1 .tel{
    width: 32px;
    height: 25px;
}
header .header-top .tool .r1 .telnumber{
    font-size: 20px;
    color: #00978E;
    display: inline-block;
    width: 158px;
    height: 26px;
    text-align: center;
}
header .header-top .tool .r1 .icon{
    width: 24px;
    height: 24px;
}
header .header-top .tool .r1 .chinese_icon{
    margin-right: 14.1px;
}
header .header-top .tool .r2{
    width: 264px;
    height: 28px;
    border:1px solid #CACACA;
}
-----------------------------------------------------------------
<!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>小慕医生-责任,品质,关爱</title>
    <meta name="Keywords" content="小慕医生是专业的医院">
    <meta name="Description" content="美容,内科,外科">
    <link rel="stylesheet" href="css/xiaomu.css">
</head>
 
<body>
    <!-- 网页头部 -->
    <header>
        <div class="header-top">
            <!-- 网页logo -->
            <div class="logo">
                <h1>小慕医生</h1>
            </div>
            <!-- 网页功能搜索区 -->
            <div class="tool">
                <div class="r1">
                    <img class="tel" src="images/tel.png" alt="">
                    <span class="telnumber">088-88888888</span>
                    <a  href="#"><img class="chinese_icon icon" src="images/chinese_icon.png" alt=""></a>
                    <a href="#"><img class="english_icon icon" src="images/english_icon.png" alt=""></a>
                </div>
                <div class="r2">
                    <input type="search" placeholder="找科室,找医生">
                    <button><img src="images/search.png" alt=""></button>
                </div>
            </div>
        </div>
        <div class="header-bottom">
            <!-- 网页导航 -->
            <nav class="main-nav">
                <ul>
                    <li>首页</li>
                    <li>医院概况</li>
                    <li>医院动态</li>
                    <li>专家学科</li>
                    <li>服务指南</li>
                    <li>医院文化</li>
                    <li>信息公开</li>
                    <li>互动交流</li>
                </ul>
            </nav>
        </div>
    </header>
 
    <!-- 网页的banner -->
    <section class="banner">
        <img src="images/banner.png" width="100%" alt="">
        <h2>责任,科学,严谨</h2>
        <!-- 小圆点 -->
        <ol>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </section>
 
    <!-- 网页的主要内容 -->
    <section class="content">
        <!-- 常用链接 -->
        <div class="useful_links">
            <ul>
                <li>
                    <a href="#">
                        <img src="images/icon_jzxz.png" alt="">
                        <span>就诊须知</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/icon_jylc.png" alt="">
                        <span>就医流程</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/icon_zjjs.png" alt="">
                        <span>专家介绍</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/icon_ksjs.png" alt="">
                        <span>科室介绍</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/icon_ybjy.png" alt="">
                        <span>医保就医</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/icon_jktj.png" alt="">
                        <span>健康体检</span>
                    </a>
                </li>
            </ul>
        </div>
 
        <!-- 医院动态和公告区域 -->
        <div class="news-and-notice">
            <!-- 医院动态 -->
            <div class="news">
                <h2>医院动态</h2>
                <div class="news-content">
                    <!-- 图片新闻 -->
                    <div class="hot-news">
                        <!-- 放新闻图片 -->
                        <a href="#">
                            <img src="images/news_pic.png" alt="">
                            <div>“全国首届健康预防与商业医疗保险论坛”在北京医院举办 </div>
                        </a>
                    </div>
                    <!-- 新闻列表 -->
                    <ul>
                        <li> <a href=""> 年度医疗机构用血自查评分表和科室基本信息表</a></li>
                        <li> <a href=""> 关于上报北京市医疗机构临床用血信息的通知 </a></li>
                        <li> <a href=""> 北京医院输血科通过验收并获批开展“临床基… </a></li>
                        <li> <a href=""> 国家药品监督管理局关于修订都梁软胶囊非处… </a></li>
                        <li> <a href=""> 关于将多拉司琼注射剂等药品纳入本市基本医… </a></li>
                        <li> <a href=""> 关于调整完善本市基本医疗保险门诊特殊疾病… </a></li>
                        <li> <a href=""> 广东省药学会:关于印发《超药品说明书用药… </a></li>
                        <li> <a href=""> 人力资源社会保障部关于将36种药品纳入国家… </a></li>
                    </ul>
                </div>
            </div>
            <!-- 医院公告 -->
            <div class="notice">
                <h3>医院公告</3>
                    <div>
                        <ol>
                            <li>
                                <dl>
                                    <dt> <a href="#">《养生堂》</a></dt>
                                    <dd><a href="#">公郭立新主任 特殊时期糖尿病人的新冠…</a></dd>
                                </dl>
                            </li>
                            <li>
                                <dl>
                                    <dt><a href="#">《养生堂》</a></dt>
                                    <dd><a href="#">王少为主任 新型冠状病毒防控指引十八…</a></dd>
                                </dl>
                            </li>
                            <li>
                                <dl>
                                    <dt><a href="#">《我要当医生》</a></dt>
                                    <dd><a href="#">谭玲副主任 李同舟 姚晨蕊药师</a></dd>
                                </dl>
                            </li>
                            <li>
                                <dl>
                                    <dt><a href="#">《全民健康学院》</a></dt>
                                    <dd><a href="#">王建业院长 “医”路有你 健康同行</a></dd>
                                </dl>
                            </li>
                            <li>
                                <dl>
                                    <dt><a href="#">《健康北京》</a></dt>
                                    <dd><a href="#">王建业院长 莫把衰老当病治</a></dd>
                                </dl>
                            </li>
                        </ol>
                    </div>
            </div>
        </div>
 
        <!-- 广告图片 -->
        <aside class="ad-images">
            <a href="#"><img src="images/xuanchuan.png" alt=""></a>
        </aside>
 
        <!-- 科室介绍 -->
        <div class="dep-info">
            <h2>科室介绍</h2>
            <div class="dep-content">
                <div>
                    <h4>内科</h4>
                    <ul>
                        <li><a href="">呼吸内科</a></li>
                        <li><a href="">消化内科</a></li>
                        <li><a href="">神经内科</a></li>
                        <li><a href="">心血管内科</a></li>
                        <li><a href="">肾内科</a></li>
                        <li><a href="">血液内科</a></li>
                        <li><a href="">免疫科</a></li>
                        <li><a href="">內分泌科</a></li>
                    </ul>
                </div>
                <div>
                    <h4>肿瘤科</h4>
                    <ul>
                        <li><a href="#">呼吸内科</a></li>
                        <li><a href="#">消化内科</a></li>
                        <li><a href="#">神经内科</a></li>
                        <li><a href="#">心血管内科</a></li>
                        <li><a href="#">肾内科</a></li>
                        <li><a href="#">血液内科</a></li>
                        <li><a href="#">免疫科</a></li>
                        <li><a href="#">內分泌科</a></li>
                    </ul>
                </div>
                <div>
                    <h4>外科</h4>
                    <ul>
                        <li><a href="#">呼吸内科</a></li>
                        <li><a href="#">消化内科</a></li>
                        <li><a href="#">神经内科</a></li>
                        <li><a href="#">心血管内科</a></li>
                        <li><a href="#">肾内科</a></li>
                        <li><a href="#">血液内科</a></li>
                        <li><a href="#">免疫科</a></li>
                        <li><a href="#">內分泌科</a></li>
                    </ul>
                </div>
                <div>
                    <h4>儿科</h4>
                    <ul>
                        <li><a href="#">呼吸内科</a></li>
                        <li><a href="#">消化内科</a></li>
                        <li><a href="#">神经内科</a></li>
                        <li><a href="#">心血管内科</a></li>
                        <li><a href="#">肾内科</a></li>
                        <li><a href="#">血液内科</a></li>
                        <li><a href="#">免疫科</a></li>
                        <li><a href="#">內分泌科</a></li>
                    </ul>
                </div>
            </div>
        </div>
 
        <!-- 专家介绍 -->
        <div class="exp-info">
            <h3>专家介绍</h3>
            <a href="#">查看更多>></a>
            <ul>
                <li>
                    <div class="picbox">
                        <a href="#">
                            <img src="images/Mask group1.png" alt="">
                        </a>
                    </div>
                    <div class="wordbox">
                        <p>姓名:李琳</p>
                        <p>科室:肿瘤内科</p>
                        <p>介绍:北京医院肿瘤内科科室主任,党支部书记,副教授,硕士研究生导师,
                            中国老年肿瘤专业委员会肺癌分委会常务委员,北京医学……</p>
                    </div>
                </li>
                <li>
                    <div class="picbox">
                        <a href="#">
                            <img src="images/Mask group2.png" alt="">
                        </a>
                    </div>
                    <div class="wordbox">
                        <p>姓名:毛永辉</p>
                        <p>科室:肿瘤内科</p>
                        <p>介绍:北京医院肿瘤内科科室主任,党支部书记,副教授,硕士研究生导师,
                            中国老年肿瘤专业委员会肺癌分委会常务委员,北京医学……</p>
                    </div>
                </li>
                <li>
                    <div class="picbox">
                        <a href="#">
                            <img src="images/Mask group3.png" alt="">
                        </a>
                    </div>
                    <div class="wordbox">
                        <p>姓名:黄慈波</p>
                        <p>科室:肿瘤内科</p>
                        <p>介绍:北京医院肿瘤内科科室主任,党支部书记,副教授,硕士研究生导师,
                            中国老年肿瘤专业委员会肺癌分委会常务委员,北京医学……</p>
                    </div>
                </li>
                <li>
                    <div class="picbox">
                        <a href="#">
                            <img src="images/Mask group4.png" alt="">
                        </a>
                    </div>
                    <div class="wordbox">
                        <p>姓名:曹素艳</p>
                        <p>科室:肿瘤内科</p>
                        <p>介绍:北京医院肿瘤内科科室主任,党支部书记,副教授,硕士研究生导师,
                            中国老年肿瘤专业委员会肺癌分委会常务委员,北京医学……</p>
                    </div>
                </li>
                <li>
                    <div class="picbox">
                        <a href="#">
                            <img src="images/Mask group5.png" alt="">
                        </a>
                    </div>
                    <div class="wordbox">
                        <p>姓名:陈海波</p>
                        <p>科室:肿瘤内科</p>
                        <p>介绍:北京医院肿瘤内科科室主任,党支部书记,副教授,硕士研究生导师,
                            中国老年肿瘤专业委员会肺癌分委会常务委员,北京医学……</p>
                    </div>
                </li>
                <li>
                    <div class="picbox">
                        <a href="#">
                            <img src="images/Mask group6.png" alt="">
                        </a>
                    </div>
                    <div class="wordbox">
                        <p>姓名:Jack</p>
                        <p>科室:肿瘤内科</p>
                        <p>介绍:北京医院肿瘤内科科室主任,党支部书记,副教授,硕士研究生导师,
                            中国老年肿瘤专业委员会肺癌分委会常务委员,北京医学……</p>
                    </div>
                </li>
            </ul>
        </div>
    </section>
 
    <!-- 页脚 -->
    <footer>
        <!-- 友情链接 -->
        <div class="friend-links">
            <h3>友情链接</h3>
            <ul>
                <li><a href="#">院长信箱</a></li>
                <li><a href="#">投诉信箱</a></li>
                <li><a href="#">在线调查</a></li>
                <li><a href="#">地理位置</a></li>
                <li><a href="#">网站地图</a></li>
                <li><a href="#">网站帮助</a></li>
                <li><a href="#">隐私声明</a></li>
            </ul>
        </div>
        <!-- 小慕医生联系方式 -->
        <address>
            <h3>小慕医生</h3>
            <ul>
                <li>地址:北理工国防大厦111号</li>
                <li>电话:088-88888888</li>
                <li>邮箱:kefu@imooc.com</li>
                <li>邮编:666666</li>
                <li>网址:</li><a href="#">http://imooc.com</a>
                <li>举报热线:088-88888888</li>
            </ul>
        </address>
    </footer>
</body>
 
</html>

https://img1.sycdn.imooc.com//climg/6258e212093b56de19200926.jpg

页面是正常100%缩放。但是小慕医生四个字和设计图和老师的位置都不一样,代码和老师一模一样的。

正在回答 回答被采纳积分+1

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

1回答
好帮手慕久久 2022-04-15 11:44:52

同学你好,因为不同的电脑,分辨率是不一样的,直观感受就是页面宽度不一样。老师的页面宽度比较大,所以.header-top距离页面左右两侧间距比较大;同学页面宽度比较小,所以距离页面左右两侧比较近:

https://img1.sycdn.imooc.com//climg/6258e9e9099f7ce719200310.jpg

这是正常现象,只要保证主体内容在页面中居中显示(人眼能看到页面全部内容)就行了。

祝学习愉快!

  • 提问者 慕仙7313728 #1

    好的,谢谢。对于我这种强迫症的人来说,不和设计图比例一样实在有点难以接受。

    2022-04-15 11:48:58
  • 好帮手慕久久 回复 提问者 慕仙7313728 #2

    pc端出现这种问题很正常,毕竟屏幕尺寸太多了。因此布局时,要保证内容区在任何屏幕下都能完整的看到,内容左右的空白区,可以适当变化,要习惯一下。

    2022-04-15 13:05:32
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
微信客服

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

帮助反馈 APP下载

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

公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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