建站分享(五)了解div+css,懂得网页的布局

二叶草 2020年1月22日10:03:23建站评论阅读模式
建站分享(五)了解div+css,懂得网页的布局

前两篇,我们主要讲的是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布局可以实现全站新式统一管理,便于后期网站的维护和管理。

建站分享(五)了解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。这是基础设置,更复杂的还需要多看视频学习。

建站分享(五)了解div+css,懂得网页的布局

打开Dw找到div打开按钮

建站分享(五)了解div+css,懂得网页的布局

输入id(最好是英文字母),点击新建规则,再点确定

建站分享(五)了解div+css,懂得网页的布局

弹出窗口,设置背景颜色

建站分享(五)了解div+css,懂得网页的布局

在方框中设置宽高漂浮和auto

建站分享(五)了解div+css,懂得网页的布局

输入设置后,点击确定,设计出的div页面

建站分享(五)了解div+css,懂得网页的布局

div对应的代码

上述为新建一个div步骤,其它div新建也可以根据这个设置。本期div+css就简单为您分享到这里。更复杂的div+css还需要多看视频教程学习,对于seo人员来说,不要求会写代码,但要懂网页的布局,有网页设计思维。这是很重要的。

本文来源于:建站分享(五)了解div+css,懂得网页的布局-变化吧门户
特别声明:以上文章内容仅代表作者本人观点,不代表变化吧门户观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与变化吧联系。

  • 赞助本站
  • 微信扫一扫
  • weinxin
  • 加入Q群
  • QQ扫一扫
  • weinxin
二叶草
怎么做一个赚钱的小说网站 建站

怎么做一个赚钱的小说网站

从2007年做站,刚好十年了。时间过得真快。因为自己是兼职做站,所以一直断断续续,也没有什么大的成绩。做过地方论坛,电影站,股票站,文章站,小说站等,能尝试的都尝试了。学了很多东西,也浪费了不少时间,...
下篇 | 172个搜索引擎术语,你都知道吗? 建站

下篇 | 172个搜索引擎术语,你都知道吗?

上篇中已经介绍了名词介绍、展现样式、工作原理、网站建设四个小部分,下篇将继续介绍页面优化、链接建设、数据分析和其他等部分。请戳链接《上篇 | 172个搜索引擎术语,你都知道吗?》 5 页面优化 网页导...
网站优化100个法则,排名稳居第一的秘籍(1~100汇总篇) 建站

网站优化100个法则,排名稳居第一的秘籍(1~100汇总篇)

我们这次来个猛地!总结网站优化的100个法则,这些经验和盘托出,希望能够帮助到朋友们!这些规则就像是交通指示灯一样,按照这些规则走的,排名就好,不按照这些走的,排名可想而知。 1、域名年龄老的网站排名...
网站SEO中要避免哪些蜘蛛陷阱呢? 建站

网站SEO中要避免哪些蜘蛛陷阱呢?

我们从事网站优化的过程中,尤其是现在收入对于网站而言是非常重要的网站,只有有了比较不错的收录之后,才有可能会取得不错的排名,因此在网站设计的时候,我们就要尽可能的让蜘蛛能够获取到网站的全部内容信息,如...

发表评论