多语言展示
当前在线:1552今日阅读:112今日分享:19

div+css教程指导

学习网页设计跟web前端,div+css是必不可少的一项技能。也许很多人觉得这些很机械很简单,其实不然,div对页面进行了布局,现在越来越多css正趋于强大,比如css3,sass,less等,大大提升了css的功能,减少了开发者的工作量。
工具/原料

html_div+css

方法/步骤
1

首先我们要学会html的基础标签,表单

,表格
,文字等,学会了这些是div+css对其进行布局跟美化的必要条件。

2

css首先要了解盒模型,盒子模型是网页的基石。border是边框值,margin是外边距,padding是内边距,content是内容。了解行内元素(不单独站一行的标签),块级元素(单独占一行的标签),文字的设置,单位,选择器的了解。

3

div+css的网页布局有一列布局,两列布局,三列布局,混合布局。一列布局一般为Div{width:800px; height:500px; margin:0 auto},其中margin:0 auto是居中显示的意思,这作用很重要,每个人的电脑的显示屏不一样大,有了这句话后都是居中显示,两边的距离一样大。

4

两列布局:举个例子,左边是选择导航条,右边是显示的内容,这就是两列布局。两列布局的div都要设置浮动。外面如果包一层div,高度自适应时,则需要清楚浮动。

5

三列布局:也是比较常用的布局,三个颜色的div都要设置浮动,如果父级div没有高度,则要清楚浮动。父级的div 则要清除浮动,父级div:after{content:'',display:block;clear:both;}

6

混合布局:是比较复杂的布局了,但也是比较常用的。一般网页的头部是一个div,然后内容部分是三列布局或者两列布局,底部跟头部类似。这时候,头部的div不需要设置浮动,内容里面的div则需要设置浮动。

7

div+css需要打好基础,多看多练,这样才能用代码实现优秀的网页。有了扎实的基础后,才能学习其他知识,让自己的网页交互性更强。

注意事项

先掌握基础,多练

推荐信息