网页布局:
又称版式布局,是网页UI设计师将有限的视觉元素进行有机的排列组合,将理性的思维个性的化的表现出来,是一种具有个人艺术特色的视觉传达方式。传达信息的同时有美感。网页设计特点(相对纸媒来说)。特点:1、网页可以自适应宽度2、网页的长度理论上可以无限延长3:页面为:头部,主体部分,底部。
分栏又称为分列:一列布局 二列布局 三列布局 以及混合布局(用的最多),布局通过浮动和定位来完成(实现UI界面效果)。
一列布局:
body{margin:0;parding:0;}清除默认样式,各个浏览器的默认边距不一样,这样可以避免一些浏览器差异。当然也可以用*通配符把所有标签元素重置一遍,如:*{margin:0;padding:0px;},但是不推荐,因为会把所有的标签元素都给重置一遍,影响性能。需要用哪个就重置哪个吧。
水平居中,margin:0 auto
两列布局:
因为宽度要自适应,所以要设置左侧left的width:xx%;需要左右排列,所以设置float:left;另一侧right也设置width和float(left和right都可以吧,再微调)
固定宽度的情况,left和right增加一个父div#main,设置这个main的width,以及margin 0 auto;如果要精确控制left和right的宽度,可以使用px。
浮动(float)和 绝对定位(position:absolute)可以让元素脱离标准文档流。
三列布局--中间自适应:
不用浮动,用定位
左右两边分别定位(position:absolute;letf/right:xpx;top:xpx;)
中间部分使用margin值确定(margin:0 xpx 0 xpx) ---左右延生到了下面,margin值大于左右宽度才能看到隔断区域
混合布局:我们可以把一列布局加入“左”和“右”改造为混合布局。
在中部mian中加入子div 分别是(左,右)。 然后分别在style中加入“.left和.right”的样式!“left和right”都要加浮动“float”,还可以在混合布局下进行更复杂的混合布局,可以将right定义为sub_right和sub_right 分为化为更为密集的混合布局。
清除浮动有两种方法:1.clear:both 2.overflow:hidden
clear:both; //清除两边元素的浮动对他的影响
overflow: hidden; // 用在浮动元素本身清除对父元素的影响
 
其实网页布局就是块与块之间的关系:1.挨着关系 2.嵌套的关系 3.叠加的关系 进行各种组合。

利用css进行网页布局的更多相关文章

  1. 如何利用css进行网页布局

    一.单列布局(类似于搜狐网站) 如: 代码为: 二.两列布局 1.固定宽度 代码为: 2.自适应 代码为: 三.三列布局 代码为: 四.混合布局 就是在前面的基础上,在进行划分块 如: 代码为:

  2. DIV+CSS常用网页布局技巧!

    以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...

  3. PHP.4-DIV+CSS标准网页布局准备工作(下)

    DIV+CSS标准网页布局准备工作 区块属性(区块模型) 属 性 描 述 Margin(注) 是定义区块外边界与上级元素距离的属性,用1到4个值来设置元素的边界,每个值都是长度.百分比或者auto,百 ...

  4. PHP.3-DIV+CSS标准网页布局准备工作(上)

    DIV+CSS标准网页布局准备工作(上) 概述 使用"DIV+CSS"对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTML表格定位方式的区别.因为现在的网站设计标 ...

  5. 一、HTML和CSS基础--网页布局--网页布局基础

    W3C标准: 由万维网联盟制定的一系列标准,包括: 结构化标准语言(HTML和XML) 表现标准语言(CSS) 行为标准语言(DOM和ECMAScript) 倡导结构.样式.行为分离. CSS 规定的 ...

  6. 一、HTML和CSS基础--网页布局--如何用css进行网页布局

    什么叫做布局? 又称版式布局,是网页UI设计师将有限的视觉元素进行有机的排列组合. 网页设计的特点 网页可以自适应宽度 网页的高度理论上可以无限延长 网页分栏 分栏又称为分列,常见的布局分为:一列布局 ...

  7. 一、HTML和CSS基础--网页布局--网页简单布局之结构与表现原则

    结构.表现和行为分离,不仅是一项技术,更主要的是一种思想,当我们拿到一个网页时,先考虑设计图中的文字内容和内容模块之间的关系,重点放在编写html结构和语义化,然后考虑布局和表现形式.,减少HTML与 ...

  8. 如何用CSS进行网页布局---学习总结

    页面布局:对页面的文字.图形或表格进行格式设置.包括字体.字号.颜色纸张大小和方向以及页边距等 页面布局分为4种: 一栏布局 两栏布局 三栏布局 混合布局 灵活利用float.position对页面进 ...

  9. css的网页布局案例

    常见行布局: 导航使用position:fixed固定住 导航会脱离文档流,不占据空间 导致下面的元素上移,因此需要将下面的元素的padding-top设置成导航的高度 <!DOCTYPE ht ...

随机推荐

  1. 超级列表框List Ctrl

    LVCFMT_CENTER居中对齐 LONG styles; CListCtrl *str=new CListCtrl; str->Create(LVS_ICON, CRect(,,,), ); ...

  2. python 3.5 用户登录验证和输入三次密码锁定用户

    #!/usr/bin/env python #encoding: utf-8 #登录程序,输入用户和密码输出欢迎信息,输入错误三次锁定用户,不让登录 import sys print (''' 欢迎登 ...

  3. C++ primer学习方法

    C++ primer学习:   第一次可以跳着看.关键是要尽快用起来,在使用中熟练,而不是在细节中迷失.   以C++ Primer第五版为例,第一遍读的时候: Part1也就是前七章,除了6.6,6 ...

  4. Mssql显错和不显错模式下的注入

    Title:Mssql显错和不显错模式下的注入 -- 2010-10-27 19:51 近期用手工注入用习惯了,便列出最近用的Mssql语句,以后方便拿来用! -------------------- ...

  5. POSTGRESQL小玩

    因为CDH上需要用它来建HIVE的元库... 参考: http://www.cnblogs.com/mchina/archive/2012/06/06/2539003.html 一.简介 Postgr ...

  6. jboss部署应用

    简单的部署应用. 第一种方法是直接写JSP代码,然后放到指定的WAR文件夹中. 第二种,是同时META-INF下的application.xml文件,然后用JAR -CF编成WAR,再集合JSP形成E ...

  7. [LeetCode 116 117] - 填充每一个节点的指向右边邻居的指针I & II (Populating Next Right Pointers in Each Node I & II)

    问题 给出如下结构的二叉树: struct TreeLinkNode { TreeLinkNode *left; TreeLinkNode *right; TreeLinkNode *next; } ...

  8. Oracle 判断 并 手动收集 统计信息 脚本

    CREATE OR REPLACE PROCEDURE SchameB.PRC_GATHER_STATS AUTHID CURRENT_USER IS BEGIN SYS.DBMS_STATS.GAT ...

  9. 百度贴吧的网络爬虫(v0.4)源码及解析

    更新:感谢评论中朋友的提醒,百度贴吧现在已经改成utf-8编码了吧,需要把代码中的decode('gbk')改成decode('utf-8').   百度贴吧的爬虫制作和糗百的爬虫制作原理基本相同,都 ...

  10. USACO6.5-Closed Fences:计算几何

    Closed Fences A closed fence in the plane is a set of non-crossing, connected line segments with N c ...