在div+css取代Table成为主流的时代,学会用其进行随心所欲的布局是一个不可回避的技能。那么,重点掌握哪几个要点呢?

  1. 整体布局:从整体到局部的顺序进行布局,逐步定义div集css样式;
  2. 灵活运用margin,width,display等属性进行居中、自适应宽度与否、块级/内联元素异或隐藏元素
  3. float:浮动标签
  4. 块级元素与内联元素:是否整行占用
  5. 相对定位与绝对定位:在二级菜单中经常用到。

最后,还是在实践中摸索经验。欢迎交流。

对于用div+css随心所欲布局的思考的更多相关文章

  1. 【转】一个DIV+CSS代码布局的简单导航条

    原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...

  2. 总结与学习DIV+CSS网页布局技巧

    以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...

  3. div,css&table布局有哪些区别

    DIV+CSS布局与TABLE布局相比,有哪些优点? 1.代码少,页面文件小,下载快 Div+css的布局现在属于国际W3C标准,table不是. 都知道用div的布局代码肯定少,所有的样式都在CSS ...

  4. <转载>div+css布局教程之div+css常见布局结构定义

    在使用div+css布局时,首先应该根据网页内容进行结构设计,仔细分析和规划你的页面结构,你可能得到类似这样的几块: 页面层容器.页面头部.标志和站点名称.站点导航(主菜单).主页面内容.子菜单.搜索 ...

  5. 常见div+css网页布局(float,absolute)

    网页布局-常见 1,           float布局 (1)常规方法 <div id="warp">     <div id="column&quo ...

  6. 利用Div+CSS整体布局页面的操作流程

    简单的网页布局(Div+CSS)<CSS盒模型+Div嵌套>: <!DOCTYPE html><html> <head>  <meta chars ...

  7. 第6天:DIV+CSS页面布局实战

    今天我从早上9:00写代码一直写到下午18:00,写的我差点抑郁了,还好最后终于写出了一个完整页面,没有做动画效果,就是练习了一下DIV+CSS布局,做的是福务达(www.zzfwd.cn)的主页,真 ...

  8. div css float布局用法

    float的应用与用法 想要知道float的用法,首先你要知道float在网页中的用处. 浮动的目的就是为了使得设置的对象脱离标准文档流. 什么是标准文档流? 网页在解析的时候,遵循于从上向下,从左向 ...

  9. DIV+CSS标准化布局

    1.DIV+CSS布局 说明:在网页开发制作中,需要对页面内容进行“模块化标准布局”,把内容放入到某个位置,让页面形成固定规律展示出来 模块化:在网页中所有的内容都是以块来展示的 标准化:在开发网站时 ...

随机推荐

  1. Wireshark网络抓包(一)——数据包、着色规则和提示

    一.数据包详细信息 Packet Details面板内容如下,主要用于分析封包的详细信息. 帧:物理层.链路层 包:网络层 段:传输层.应用层 1)Frame 物理层数据帧概况 2)Ethernet ...

  2. 蓝桥网试题 java 算法训练 区间k大数查询

    -------------------------------------------------------------------------- 数组也有sort方法 尽量把输入和操作分开写 -- ...

  3. C++编程练习(7)----“KMP模式匹配算法“字符串匹配

    子串在主串中的定位操作通常称做串的模式匹配. KMP模式匹配算法实现: /* Index_KMP.h头文件 */ #include<string> #include<sstream& ...

  4. 【前端】:HTML

    前言: 最近开始学前端了,这篇博客主要介绍html的一些主要标签,写完这篇博客,我会用刚学的html做一个简单的登陆界面~~ 一.HTML介绍 HTML(Hyper Text Mark-up Lang ...

  5. ZooKeeper的不同类型的Znodes

    在ZooKeeper中有3个不同类型的znodes:persistent, ephemeral, sequential Persistent Znodes(默认)在ZooKeeper中,这是默认的zn ...

  6. jQuery_第五章_事件和动画

    Jquery中的事件与动画 一.window.onload和$(document).read()的细微差别 (1)执行时机 window.onload:所有元素(包括元素的所有关联文件)完全加载到浏览 ...

  7. 【java基础之jdk源码】Object

    最新在整体回归下java基础薄弱环节,以下为自己整理笔记,若有理解错误,请批评指正,谢谢. java.lang.Object为java所有类的基类,所以一般的类都可用重写或直接使用Object下方法, ...

  8. python2.7读汉字的时候出现乱码,如何解决

    我使用的是window系统,安装Anaconda,所以用的是. 1.数据形式 2.读进来乱码 3.解决办法 3.1方法1 import pandas as pd #pd.read_csv('c:/us ...

  9. Java多线程编程(四)—浅谈synchronized与lock

    一.共享资源竞争问题 在Java语言的并发编程中,由于我们不知道线程实际上在何时运行,所以在实际多线程编程中,如果两个线程访问相同的资源,那么由于线程运行的不确定性便会在这种多线程中产生访问错误.所以 ...

  10. Synchronize执行过程

    Synchronize执行过程及原理 在windows原生应用程序开发中,经常伴随多线程的使用,多线程开发很简单,难点就是在于线程的同步,在Delphi中提供了VC中不具备的一个过程Synchroni ...