核心思想:抽象化
点击图片可放大

好的,我们现在要做这个页面
可是怎么看怎么头疼,这尼玛页面上那么多东西我要怎么入手?
花花绿绿的还有图
实验室是筛选天才的么 Σ(゜ロ゜;)
冷静点,冷静点…
嗯,既然学长们都说,这玩意仔细想想就能做,那一定有什么方法
可是我好像目前为止只会画个方块,最多加点颜色
也就是这样:

啊…我自己眼睛都瞎了
诶,但你别说,光从结构上讲,好像也有点像

我寻思人家不也是上下就这么几个块么
那我也先摞几个块试试呗
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 { 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; background: none; }
|

哇,终于调整好了!
这些字体大小,边距,行高什么的果然得细心的一点点调整啊,颜色倒是可以直接从网页里扒,兄弟们多参考一下,剩下的加油!
所以
照着我的教程从头写了 30%的达摩院
你对前端布局是否加深理解了呢?
是否学会如何分析页面布局,如何抽象化,如何从粗到细,从整体到局部去逐一实现样式了呢?
前端不难,只是比较繁琐,不要在意自己写的代码可能达到了好几百行,网页就是这样的
多做尝试,反复调整,布局就是一个耐心活
欢迎提问
如果您喜欢此博客或发现它对您有用,则欢迎对此发表评论。 也欢迎您共享此博客,以便更多人可以参与。 如果博客中使用的图像侵犯了您的版权,请与作者联系以将其删除。 谢谢 !