做网站-如何用DIV+CSS做网页

DIV+CSS布局做网页早已是主流的方式,这样做也有很多好处,一来可以和尽可能少的代码实现丰富的页面效果,二来也能在后期维护网页时更加轻松,更易于维护,同时对于SEO的优化也有很有好处了。那么今天做网站小编就具体的操作一回如何使用DIV+CSS的方式来制作网页。

通常而言,所有的复杂的网页布局也无非就是简单的布局的组合。所以我们将以以下这个简单的示例来说明...

1、建立一个静态的html文件和一个css样式文件。

2、打开index.html文件,编辑以下代码:

其中,style.css为引入的样式文件

这个顶上的那块

为包裹信中间两块的主体

为主体中的左边块

为主体中的右边块

3、打开style.css,编辑样式代码,如下:

4、打开浏览器访问一下index.html页面,即可看到效果

总结:

当然以上做网站小编对基本的布局的一个简单的概括,对于新手而言,需要学习css知识,HTML知识,以及Javascript等前端的知识,因为真正复杂的网页布局会有很多意想不到的情况发生。尤其是一些大型网站的首页,这些网站模块比较多,元素也很多,各种效果,交互式的体验需要多多的去实践才行。

往期热点文章:

#做网站-3家国外VPS主机商对比

#做网站-页面内锚点定位的几种方法

#做网站-如何将设计稿还原为网页

#做网站-面向对象面向过程的区别

#做网站-必备的10款网站性能测试工具(推荐)

#做网站-前端工程师都用啥编辑器

#做网站-虚拟主机与独立服务器区别

#做网站-10个CSS简写技巧

做网站公众平台(zwangz888)每天为您分享原创Web开发资讯,开发经验,为您的技能充电。期待您的关注与分享,同时欢迎您留言,让我们每天进步一点点!

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20171213G0ZGGF00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券