在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. 蓝桥网试题 java 基础练习 数列排序

    ---------------------------------------------------------------------------------------------------- ...

  2. 【前端】:HTML

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

  3. javaweb log4j显示完整sql日志

    javaweb显示完整sql日志 所需jar包: log4j-1.2.17.jar log4jdbc-1.2.jar slf4j-api-1.7.12.jar slf4j-log4j12-1.7.12 ...

  4. Cookie与Passport安全

    对于web系统而言,由于HTTP协议无状态的特性,用户登录时需要服务端生成通行证返回给浏览器.浏览器保存该通行证并在接下来的请求中携带该通行证.通常来讲,web系统使用http cookie来保存和传 ...

  5. MongoDB学习总结(一) —— Windows平台下安装

    > 基本概念 MongoDB是一个基于分布式文件存储的开源数据库系统,皆在为WEB应用提供可扩展的高性能数据存储解决方案.MongoDB将数据存储为一个文档,数据结构由键值key=>val ...

  6. MAC上配置asp.net core开发环境

    安装.NET Core sdk https://www.microsoft.com/net/core#macos 安装VS Code https://code.visualstudio.com/Dow ...

  7. Java三大修饰符

    1.static 修饰: 修饰属性:类变量,全类共有 修饰方法:静态方法,静态方法中不能直接访问非静态的方法和属性 静态方法只能被静态方法覆盖,并且没有多态 静态的方法或者属性不依赖于对象:类名.方法 ...

  8. 普通用户创建ssh无密码访问

    jenkins:120.145.120.76 ubuntu:kasumi msc1:10.25.164.100 ubuntu:kasumi 1.创建普通用户&修改密码: $useradd ub ...

  9. 开源OSS.Social微信项目进阶介绍

    在开源OSS.Social微信项目解析的随笔中,我简单给大家分享了进行中微信项目的概要设计,主要在讲述解决思路和过程,没有详细实现和使用介绍.本着不能马虎的态度,这篇文章我来给大家分解一下项目结构,使 ...

  10. 学习笔记——Java数字处理类

    1.数字格式化 使用Java.text.DecimalFormat格式化数字,一般使用其中的DecimalFormat类.如: import java.text.DecimalFormat; publ ...