网站建设新闻banner图片

网站建设了解div+css,懂得网页的布局

来源:未知     时间:2017-11-14

前两篇,我们主要讲的是html中的代码和标签,对于做seo的人来说,不要求都会编写,但要能了解和修改。一个网站是由若干个网页组成的,那么一个网页是由什么组成的呢?这里就到了本篇的主题:DIV+CSS。何为DIV+CSS?下面一起来了解一下。


定义:DIV+CSS是WEB设计标准,它是一种网页的布局方法。与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面的内容与表现相分离。
网站建设div+css

主流:主流的DIV+CSS一般是4个板块(1-2-1),上面为DIV(头部)、中间左边为DIV主体(左),中间右边为DIV主体(右),下面为DIV(底部)。

DIV是块状元素,用于组织内容,是个大容器,里面可以放图片、文字等,从而方便把网页分为几大板块布局。

CSS是样式文件,用于描述各块内容的大小、边框等样式。


DIV+CSS布局的优势:

精简的代码;

提高访问速度、增加用户体验性;

DIV+CSS适合优化seo;

缩短改版时间;

更方便搜索引擎的搜索;

DIV+CSS布局可以保持视觉的一致性;

用DIV+CSS布局可以实现全站新式统一管理,便于后期网站的维护和管理。


代码释疑:图中为网络图片,代码包括四个css元素,颜色、边框、宽度、高度。分号将不同的元素隔开。


DIV+CSS布局1-3-1布局的步骤(1-3-1共7个div)

第一步:打开Dw,打开div标签,在ID处填名称(名称建议用英文不用数字),ID号不能相同。然后输入边框,第一个设置为none、auto;

第二步:在文字(或者删掉文字均可)后面加入第二个div,none、auto;

第三步:新建div,设置left,其余不用设置;

第四步:新建div,设置right,其余不用设置;

第五步:在边框右(后)新建div,设置left,其余不用设置;

第六步:在第三步的div里新建div,设置left,其余不用设置;

第七步:第六步设置好后,在右边再新建div,设置right,其余不用设置。


来看看详细步骤(以一个div为例):

在Dw里面新建div,命名div的id(最好是英文),点击新建css规则,再点击确定,弹出窗口,先点击背景设置背景色,再点击方框。然后再在方框里设置宽、高,在右边设置左浮动和右浮动,下面可以设置auto。这是基础设置,更复杂的还需要多看视频学习。
返回列表
 品牌网站建设,为您量身定制      深圳 · 龙岗 深航网站建设
地址:深圳龙岗区坂田发达路佳兆业商品雅园2期D栋2306
联系:18926028981 传真:18926028981
邮编:518000
深圳市深航世纪科技有限公司
关于我们 | 联系我们
Copyright © 2013-2017 Hangdos. 深航科技 版权所有