【给实验室新生】达摩院布局简析

Posted by Loriame on 2020-10-15
Estimated Reading Time 10 Minutes
Words 2.4k In Total
Viewed Times

核心思想:抽象化

点击图片可放大

好的,我们现在要做这个页面

可是怎么看怎么头疼,这尼玛页面上那么多东西我要怎么入手?

花花绿绿的还有图

实验室是筛选天才的么 Σ(゜ロ゜;)

冷静点,冷静点…

嗯,既然学长们都说,这玩意仔细想想就能做,那一定有什么方法

可是我好像目前为止只会画个方块,最多加点颜色

也就是这样:

啊…我自己眼睛都瞎了

诶,但你别说,光从结构上讲,好像也有点像

我寻思人家不也是上下就这么几个块么

那我也先摞几个块试试呗

1
2
3
<div class="top"></div>
<div class="nav"></div>
<div class="image_slider"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 去除元素默认边距 */
* {
margin: 0;
padding: 0;
}

.top {
height: 35px;
background-color: #f5f5f5;
}
.nav {
background-color: #fff;
height: 80px;
}

.image_slider {
background-color: #f5f5f5;
height: 356px;
}

宁别说,有那个味了,就是缺点字

那就逐个解决一下看看呗

最上面这块是啥?就一个登陆和注册?

1
2
3
4
5
6
7
8
<div class="top">
<span>登录</span>
<span>|</span>
<span>注册</span>
<span>EN</span>
</div>
<div class="nav"></div>
<div class="image_slider"></div>

蛐蛐几个字还想难倒我?

诶?他字为什么在右边?emmm,我查查 W3school…文本对齐方式… text-align?

尝试一下

1
2
3
4
5
.top {
height: 35px;
background-color: #f5f5f5;
text-align: right;
}

不愧是爷

然后人家的右边距好像挺大的,那咱也加个margin试试呗

1
2
3
4
5
6
.top {
height: 35px;
background-color: #f5f5f5;
text-align: right;
margin-right: 400px;
}

翻车现场!

翻翻小册子……

margin是外边距,padding是内边距,我刚刚加了外边距所以整个 div 宽度变窄了,连它的背景都受到了影响

那就用 padding!

1
2
3
4
5
6
.top {
height: 35px;
background-color: #f5f5f5;
text-align: right;
padding-right: 400px;
}

ok,然后文字怎么能垂直居中一下呢,感觉顶到上面了

嗯,最上面这个 div 的高度是 35px,我的文字行高可能也就 20px,如果我把这个 div 的文字行高拉到和他自己一样高,或许可以

1
2
3
4
5
6
7
.top {
height: 35px;
background-color: #f5f5f5;
text-align: right;
padding-right: 400px;
line-height: 35px;
}

果然是这样!

那我再调调里面字的颜色大小啥的,不就完成了咩

1
2
3
4
5
6
7
8
<div class="top">
<span><a href="#">登录</a></span>
<span class="split_line">|</span>
<span><a href="#">注册</a></span>
<span class="language">EN</span>
</div>
<div class="nav"></div>
<div class="image_slider"></div>
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
/* 去除元素默认边距 */
* {
margin: 0;
padding: 0;
}

.top {
height: 35px;
background-color: #f5f5f5;
text-align: right;
padding-right: 420px;
line-height: 35px;
font-size: 14px;
}
.top a {
color: #2d5cc6;
/* 去掉链接的下划线 */
text-decoration: none;
}
.top .split_line {
margin: 0 5px;
color: #cacdd2;
}
.top .language {
margin-left: 40px;
}
.nav {
background-color: #fff;
height: 80px;
}

.image_slider {
background-color: #f5f5f5;
height: 356px;
}

终于迈出了第一步!

然后再看看下面,这个导航菜单,我记得学长说不需要做那些下拉框

按照刚刚的思路,应该可以这样给它划分出来

嗯,这里面是一个居中的菜单,然后每个菜单项排起来就行了

但是怎么排?

不管那么多,先把结构写出来

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="top">
<span><a href="#">登录</a></span>
<span class="split_line">|</span>
<span><a href="#">注册</a></span>
<span class="language">EN</span>
</div>
<div class="nav">
<div class="menu">
<div class="menu_item">首页</div>
<div class="menu_item">实验室</div>
<div class="menu_item">合作生态</div>
<div class="menu_item">达摩院图标</div>
<div class="menu_item">达摩项目</div>
<div class="menu_item">新闻活动</div>
<div class="menu_item">关于我们</div>
</div>
</div>
<div class="image_slider"></div>

果不其然,就变成这样了,这些 div 全都是竖着排列的,想横着排就得加个浮动float

1
2
3
4
5
6
.nav .menu .menu_item {
float: left;
/* 顺便加了宽度和文字居中 */
width: 100px;
text-align: center;
}

Good!看起来离目标又近了一步,那么字底下的英文怎么加上呢?

看来需要拆的更细一点

先试试首页吧,在菜单项里面再加一层

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="top">
<span><a href="#">登录</a></span>
<span class="split_line">|</span>
<span><a href="#">注册</a></span>
<span class="language">EN</span>
</div>
<div class="nav">
<div class="menu">
<div class="menu_item">
<div>首页</div>
<div>HOME</div>
</div>
<div class="menu_item">实验室</div>
<div class="menu_item">合作生态</div>
<div class="menu_item">达摩院图标</div>
<div class="menu_item">达摩项目</div>
<div class="menu_item">新闻活动</div>
<div class="menu_item">关于我们</div>
</div>
</div>
<div class="image_slider"></div>

果然是有了上下两层子级的结构,而且因为 menu_item 中text-align: center的影响,里面的内容已经居中了

然后我应该把 menu 相对于 nav 也居中一下,加个text-align: center试试!

1
2
3
4
5
.nav {
background-color: #fff;
height: 80px;
text-align: center;
}

毫无反应……

似乎text-align只对里面的文本这种行内元素生效,div 是个块状元素,没有用

这个 div 要是行内元素就好了……

(自闭的翻 W3School 中)

display!?,等等 css 的display属性不就是设置元素的展示方式么?

  • block 块状元素
  • inline 行内元素
  • inline-block 块状行内元素
  • none 不展示(隐藏)
  • flex 流体布局

够了够了!我知道了,前面的区域以后再来探索吧

给 menu 加个display转换成inline-block试试看

1
2
3
4
5
6
7
8
9
10
.nav {
background-color: #fff;
height: 80px;
text-align: center;
}

.menu {
/* 给块状元素加上行内元素的特性,可以被父元素的text-align:center等影响到 */
display: inline-block;
}

没有什么能难倒爱翻文档的我!

好的,把所有的 menu-item 的字体、颜色、边距啥的都调整一遍吧~

啊咧,他网站这是什么**字体,算了用楷体代替了

(此处不给代码)

照着调了一遍确实舒服了

把中间那个图标也替换一下

成了!学长你看我能过了嘛!!

学长:其他人可以参考这位同学做的,有点偏差也可以接受,尽力而为嘛

于是现在第二块也完成啦~

第三块,emmmm

讲道理就是一张图吧!

我写!

1
2
3
<div class="image_slider">
<img src="assets/banner.jpg" />
</div>

诶,图有了,字呢!

原来这个字得自己写上去的吗!!

这个字,位置非常奇怪,要不我们试一下绝对定位?或许能更好处理一些

1
2
3
4
5
6
7
8
<div class="image_slider">
<img src="assets/banner.jpg" alt="" />
<span class="img_title"> 阿里巴巴发布首款物流机器人“小蛮驴” </span>
<span class="img_desc">
物流机器人小蛮驴是面向末端物流场景、提供最后三公里配送服务的智能机器人,它继承了达摩院最前沿的人工智能和自动驾驶技术,具备类人智能决策、五重安全守护和量产定制技术。
</span>
<button class="img_detail_btn">查看详情</button>
</div>
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
.image_slider {
background-color: #f5f5f5;
/* 给父元素加上相对定位 */
position: relative;
}
.image_slider .img_title {
/* 绝对定位,如果他的父级有定位,那就以父级为基准,否则继续向上找,直到以网页左上角为基准 */
position: absolute;
left: 50%;
top: 30%;
color: #f9fafb;
font-size: 26px;
/* 这网站的字体着实是默认的字体库里没有…宋体没人家的好看*/
font-family: 仿宋;
font-weight: 600;
}

.image_slider .img_desc {
position: absolute;
width: 40%;
left: 50%;
top: 40%;
color: #ffffff;
font-size: 14px;
line-height: 28px;
/* 透明度 */
opacity: 0.8;
}

.image_slider .img_detail_btn {
position: absolute;
left: 50%;
top: 55%;
height: 40px;
padding: 0 20px;
border: 2px solid #fff;
color: #ffffff;
line-height: 36px;
font-size: 16px;
font-weight: 800;
font-family: 仿宋;
/* 圆角大小 */
border-radius: 100px;
/* 清除button默认背景 */
background: none;
}

哇,终于调整好了!

这些字体大小,边距,行高什么的果然得细心的一点点调整啊,颜色倒是可以直接从网页里扒,兄弟们多参考一下,剩下的加油!




所以

照着我的教程从头写了 30%的达摩院

你对前端布局是否加深理解了呢?

是否学会如何分析页面布局,如何抽象化,如何从粗到细,从整体到局部去逐一实现样式了呢?

前端不难,只是比较繁琐,不要在意自己写的代码可能达到了好几百行,网页就是这样的

多做尝试,反复调整,布局就是一个耐心活

欢迎提问


如果您喜欢此博客或发现它对您有用,则欢迎对此发表评论。 也欢迎您共享此博客,以便更多人可以参与。 如果博客中使用的图像侵犯了您的版权,请与作者联系以将其删除。 谢谢 !