CSS网页布局即版式布局，是网页设计师将有限的视觉元素进行有机的排列组合。主要通过CSS的浮动、定位功能来实现UI设计的布局要求。

常见的布局有：一列布局，两列布局，三列布局和混合布局。

HTML清除默认样式：body{margin:0;padding:0;}

浮动（float）、绝对定位（position：absolute）导致元素脱离文档流（即元素所显示的位置和文档代码不一定一致）。

清除浮动：clear:both

页面布局的结构与表现原则：先考虑设计图中的内容和内容模块之间的关系，重点放在编写HTML结构和语义化，然后考虑布局和表现形式。

网页换肤即相同的HTML结构，不同的样式。

图片来自于慕课网

HTML+CSS结构与表现原则的更多相关文章

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

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

  2. 网页简单布局之结构与表现原则（HTML/CSS）

    结构 样式 行为真正的分离 前端初级人员会在页面上单纯的用各个div把相关内容独立开: 前端中级人员明白相关属性的设置会给元素带来什么改变,从而减少div的书写: 前端高级人员会以及其简单的和稳定的方 ...

  3. 初学者用div+css结构写网页的几个误区

    1.用div+css结构制作静态html网页不等于彻底抛弃古老的table写法.之所以不建议用table来布局网页是因为在网页加载很慢的时候要等table结构加载完成才能看到网页,其次是table的布 ...

  4. HTML与CSS：结构与表现

    在HTML和CSS里存在着部分重复的功能,例如两者都可以设定一段文字的字体属性.既然如此,为啥还要CSS呢(至少,为啥CSS里存在着和HTML标签属性重复的东西呢)? 这是因为,HTML和CSS的用途 ...

  5. css的元素表现

    块级元素和行内元素的表现: 块级元素:块级元素和父元素的宽度一致,默认情况下就是和body的宽度一样,也可以说和浏览器窗口的宽度一致,致使同一行不能再放下另外的元素,所以块级元素表现为独占一行. 块级 ...

  6. CSS结构和层叠

    每个合法的文档都会生成一个文档树,从而能根据元素的祖先,属性,兄弟元素等创建选择器来选择元素.有了这个结构树,选择器才能起作用,这也是CSS继承的核心.继承是从一个元素向其后代元素传递属性值所采用的机 ...

  7. Web前端新人笔记之CSS结构和层叠

    上一篇文章介绍了如何利用CSS选择器为元素应用各种丰富的样式,每个合法的文档都会生成一个结构树,了解这一点,就能根据元素的祖先.属性.兄弟等元素穿件选择器选择元素. 本篇文章将讨论3中机制之间的关系: ...

  8. react&webpack使用css、less && 安装原则 --- 从根本上解决问题。

    在webpack-react项目中,css的使用对于不同人有不同的选择,早起是推荐在jsx文件中使用 css inline js的,但是这种方法要写很多对象来表示一个一个的标签,并且对于这些对象,我们 ...

  9. CSS结构伪类E:first-child/last-child/only-child/empty

    E:first-child解释:E的父元素的第一个子元素正好是E,给这个E定义样式 E:last-child解释:E的父元素的最后一个子元素正好是E,给这个E定义样式 E:only-child解释:E ...

随机推荐

  1. BZOJ3745 : [Coci2014]Norma

    考虑枚举右端点,用线段树维护[i,nowr]的答案. 当右端点向右延伸时,需要知道它前面第一个比它大/小的数的位置,这里面的最值将发生改变,这个使用单调队列求出,然后将所有的l都加1. 注意常数优化. ...

  2. CSS3选择器（三）之伪类选择器

    伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总 结一下CSS中常用的伪类选择器的使用方法,最后把重心放 ...

  3. sum()over()和count()over()分析函数

    创建测试表 ),sales ),dest ),dept ),revenue number); 插入测试数据 ); ); ); ); ); ); ); commit; 查看表记录 SQL> sel ...

  4. MyEclipse10整合Axis2插件

    1.下载axis2的eclipse插件 2.把下载好的两个插件包解压后放置myeclipse10安装目录下的dropins文件夹中 3.重启MyEclipse10后 File->New-> ...

  5. 【C语言】08-数组

    为了让大家更好地学习和理解数组,我们先来认识一下内存中的"地址". 地址 1.计算机中的内存是以字节为单位的存储空间.内存的每一个字节都有一个唯一的编号,这个编号就称为地址.凡存放 ...

  6. cookie 换肤

    jquery.Cookies.js /** * Cookie plugin * * Copyright (c) 2006 ziqiu.zhang * Dual licensed under the M ...

  7. Lucene实战(第2版)》

    <Lucene实战(第2版)>基于Apache的Lucene 3.0,从Lucene核心.Lucene应用.案例分析3个方面详细系统地介绍了Lucene,包括认识Lucene.建立索引.为 ...

  8. SqlParameter 基本用法

    因为通过SQL 语句的方式,有时候存在脚本注入的危险,所以在大多数情况下不建议用拼接SQL语句字符串方式,希望通过SqlParameter实现来实现对数据的操 作,针对SqlParameter的方式我 ...

  9. 为什么我不再用 .NET 框架（转）

    NET平台很棒.真的很棒.直到它不再那么棒.我为什么不再用.NET?简单来说,它限制了我们选择的能力(对我来说很重要),转移了我们的注意力,使得我们向内认知它的安全性,替代了帮助我们认知外面广阔世界的 ...

  10. hadoop MapReduce 笔记

    1.        MapReduce程序开发步骤 编写map 和 reduce 程序–> 单元测试 -> 编写驱动程序进行验证-> 本地数据集调试 ->  部署到集群运行 用 ...