怎么用css布局网页?具体步骤,各位高手指点迷津啊,初学网页制作,谢谢了!

html-css010

怎么用css布局网页?具体步骤,各位高手指点迷津啊,初学网页制作,谢谢了!,第1张

第一步,先在纸上或ps里画出你的网页框框

第二步,用dreamweaver进行<div class=''></div>。每个框框用div限定,谁包含谁要清楚

第三步,分别对每个div进行css定义

最好的方法就是你去找一些非常不错的css模板,进行学习,然后顺便学一些css的基础知识

祝你顺利

百度‘css网页模板‘ 你会找到的

CSS英文全称:Cascading Style Sheets(层叠样式表)

是为了丰富网页布局的样式,在CSS没有出来之前,大家会用表格来进行分割布局,很不方便,CSS出来后就好多了。

我们平时所访问的都是服务器反馈到浏览器的HTML页面,但是正如上面说的,HTML无法满足新时代网站拥有者的表达需求,我们就会在HTML代码中加入适当的CSS代码来合理展现新的样式。

例如:

<html>

<head>

<title>测试页<title>

<style type="text/css">

.cs{width:100%height:160pxtext-align:centerline-height:160pxbackground:#f0f0f0}

.csl{width:20%height:160pxfloat:leftbackground:#fff}

.csr{width:20%height:160pxfloat:rightbackground:#fff}

</style>

</head>

<body>

<div class="cs">

<div class="csl">

<p>左框内容</p>

</div>

<div class="csr">

<p>右框内容</p>

</div>

</div>

</body>

</html>

实现网页布局的方式方法比较多,布局方式可以大概分为这几类。

布局种类:

1、table布局(网页的兴起,1995)

2、Flash布局(自由的黄金时代,1996)

3、div+css(CSS的诞生,1998)

4、栅格与响应式(移动端的兴起,2007与2010)

当前WEB前端开发使用DIV+CSS的布局方式会比较多也比较常用吧,网页布局看起来貌似简单,但是它需要综合使用很多HTML+CSS的知识,总的来说知识量是不小。如果想系统化的了解HTML+CSS方面的知识,建议你选择一本比较不错的HTML5相关书籍(主要看知识逻辑、知识的表达方式,比如《HTML5布局之路》)进行学习,让自己的知识更扎实一些,不然学的零零散散的。

Tips:学习好HTML+CSS有利于后面学习JavaScript,毕竟需要它们两者结合在一起才可以实现出可交互的前端页面。