小花带你一周入门html+css（七）常见布局及定位使用丨【WEB前端大作战】

今天我们来了解一下css常见布局及定位使用

等高布局、圣杯布局、固定定位、右下角的弹窗广告、对联广告、导航跟随、返回顶部等

CSS看似比较繁杂，其实只要掌握了CSS中的盒子模型、定位、以及页面布局，就基本上掌握了大半啦~这时我们就已经能够对网页中各个元素进行精准的排版，做出符合我们意愿的网页啦！

关于CSS的各种属性，我们还是可以参考学习HTML那样。可以说CSS的属性几乎完全是语义化的。我们需要改变边框，那就是“border”，那我们需要右侧边框做一些改变，那就是“border-right”。很明显，接下来按照我们的需求还有“右边框的宽度——border-right-with”，”右边框颜色——border-right-color”等等等，诸如此类~

完全就是我们需要什么，只要凭着需求去寻找。~follow me~

当你做 psd 设计的代码，发现问题，可能找不到答案或没有人帮你回答，也不要急，这时最好看看别人网页的布局结构，主要看 html 布局框架，进行借鉴（当然网上还有很多结构代码很槽糕）。然后了解美工图如何分析、如何使用 PS 工具切出需要的素材、如何使用这些切出的图片素材进行布局、布局技巧、兼容性解决与避免等。

总之：就是让自己布局时候能知道大的布局结构如何布局，建立布局思想与技巧。

首先我们拿到一张网页美工图片我们将从上下、上中下、左右、上中（中包括左右）下布局框架来思考。由此我们写页面 CSS 和 html 时候就先从上到下从外到内原则写 CSS 与 html。

下面我们学习一下常见的布局

1.等高布局

2.圣杯布局

3.固定定位

4.右下角的弹窗广告

关闭

关闭

6.导航跟随-如classroom网页导航一直固定在顶部

不管学前端还是学后端，想提高自己的开发能力，最快的途径还是多练，因为就算看再多的文档和教程，自己不真正的动手写代码的话，不用两个月时间所学到的知识就忘记了，在真实项目中会遇到各种问题，不要一遇到问题就到处问别人，要培养自己遇到问题独立的去解决问题的能力。

可以在网上找别人的项目模仿着做，当你独立的完成一个项目以后，你会发现你已经入门了。

tips学习小技巧:

学习前端需要方法，更需要一颗平常心，不要把前端想的多难，需要吃什么苦。。。既然学习这么痛苦，为什么不快乐一点学呢？anyway~希望大家可以成为一个优秀的前端！资历有限，错误难免，欢迎大力指正。

【WEB前端大作战】火热进行中：https://bbs.huaweicloud.com/blogs/255890

CSS HTML web前端

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。