学完CSS制作一个新网页的大概思路

经过html和css的学习,我们是可以制作一个静态的网页的,基本上是没有任何问题的。

先对网页进行拆分,一般是通过html5的新增语义化标签(header、nav、article、aside、section、footer、section)来进行划分部分,先按上下进行划分,再左右,一般头部都是导航栏,是固定位置的;再在正文进行左右划分,用一个div包含article(正文)和aside(侧边栏信息);再进脚注加footer标签;

再对拆分好后的网页进行内容的填充,比如图片、文字、音频等;

 

需要注意的是:

  1、导航栏进行固定位置后一定要在正文和侧边栏的div给一个大于导航栏高度的外边距,因为对导航栏进行固定位置后导航栏就不再占用实际尺寸了,正文和侧边栏的div就不再考虑导航栏的高度,会隐藏在导航栏下面,通过增加外边距的方式给顶下来;

  2、拆分过程中会经常使用flex弹性布局,通过分别给盒子设置宽度就能控制各自占的宽度;

  3、p标签里面是不能嵌套:语义化标签、div 、 h、 p(自己);

  3、在对每个模块进行设置规格的时候可以通过类选择器和伪元素来调用标签进行调整格式,建议尽量使用伪类选择器,因为类选择器是会新建多个class的,新建到后面可以就不知道哪个class是调用哪个标签的。需要注意的是使用伪类选择器一定要用子级选择器(>)依次逐级进行调用,不要使用后代选择器(空格),如果使用空格SCSS可以会选不中该标签,如果不是逐级选中当前调用是可以的,但是后面再写一样的标签就会调用不上;

  4、尽量使用SASS进行编辑,因为后期工作中使用SASS比CSS频次会高很多,可以先熟练;

 

posted @ 2021-05-05 19:12  啊吖  阅读(258)  评论(0编辑  收藏  举报