div+css怎么布局

div+css布局现在是主流,能提高网页加载速度,提高后期代码维护效率。

操作方法

  • 01

    div 所谓<div>标签我们可以理解为一个盒子。 例如:<div class="top"   style='border:1px solid #000;background-color:#EEE'>这里是Top</div

  • 02

    border:1px solid #000;(这是把边框显示出来,方便我们布局)。 background-color:#EEE;(这是背景色设置,#EEE为颜色值)。 div的设置属性有很多,我就大致说一下。 这里可以设置一下字体居中,字体距离上下边框的距离。 text-align:center;(文字横向居中) padding:30px;(字体距离上下左右边框的距离,因为左右已经超出了30px,所以这个30px就对左右不起限制作用了。)

  • 03

    同样的道理,我们可以设置一部分的布局了。 布局一个中间层。 <div class="container" style='border:1px solid #000;background-color:#ffe;text-align:center;padding:30px 0px;'> <div class="left"style='float:right;width:80%;border:1px solid #000;height:600px'>左边</div><div class="right"style='width:20%;border:1px solid #000;height:600px;'>右边</div></div> <--! float:right;向右浮动 width:80%;宽度为整个屏幕的80% border:1px solid #000;边框,方便查看。 height:600px;高度为600px。 -->

  • 04

    如果想像我的效果图一样铺满整个屏幕可以加入以下代码。 <style type="text/css">body{height:100%;  margin:0px; padding:0px;}</style>每个div,都有父容器。body就是最根源的父容器。只有把body设置为100%就可以满屏幕。

  • 05

    还可以添加以下底部啊什么的。 大家可以自己试试。

(0)

相关推荐

  • DIV+CSS 网页布局常用的书写规范

    DIV+CSS 网页布局常用的书写规范 文件命名规范: 01 全局样式:global.css :框架布局:layout.css :字体样式:font.css :链接样式:link.css :打印样式: ...

  • div+css经典布局教程

    在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础 ...

  • div+css浮动布局怎么用

    Div+css布局在网页设计中很常见,而布局中也经常会用到浮动(float)这个属性,那么div+css怎样浮动布局呢?一起来学习一下吧! 操作方法 01 首先,在一个新的HTML文件里面书写一个id ...

  • Dreamweaver 怎么网页布局 div css布局

    div+css布局已经成为当前网页布局的潮流,通过盒子模型和浮动.定位来控制页面布局比以前的表格布局容易控制多了.如何用Dreamweaver实现div+css网页布局呢.小编为你分享我的. 操作方法 ...

  • 新手学div+css的基础步骤

    本文主要介绍本人学习div+css网页布局的一种思路 软件工具 01 网页三剑客 步骤/方法 01 从局部出发:从一个小的部分的样式写起,目的是让你熟悉css样式的元素有哪些,那些元素都有一些什么作用 ...

  • 如何用DIV+CSS进行网页样式布局

    在html网页编辑中,对于新手来讲,接触最多的就是div+css:那么如何使用div+css就行网页简单布局呢 操作方法 01 一个网页设计时,我们可以将一个页面设置为头部,中间,和底部三部分:  头 ...

  • div+css网页设计基础教程

    div+css是一个网页设计师,程序员必经之路,是网站建设的基础!div+css是网页设计的最重要的元素. 操作方法 01 一.准备工作,电脑一套,Dreamweaver(网页设计软件) Dreamw ...

  • DIV + CSS 到底是什么意思?

    在很久很久以前,web工程师通过table进行页面布局(现在Google的picasa等应用还能找到table布局应用的例子),现在页面布局大都推荐div+css方式.         所谓的div+ ...

  • div+css定位position详解

    div+css定位position详解 操作方法 01 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了d ...