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. 找模式串[XDU1032]

    Problem 1032 - 找模式串 Time Limit: 1000MS   Memory Limit: 65536KB   Difficulty: Total Submit: 644  Acce ...

  2. tiledmap2

    1 1.1 将tiledmap 保存为xml格式 1.2 在unity当中设置摄像机为"Orthogonal", 1.3 拖拽tiledmap prefab从project视图到H ...

  3. CSS透明度大汇总

    近年来,CSS不透明算得上是一种相当流行的技术,但在跨浏览器支持上,对于开发者来说,可以说是一件令人头疼的事情.目前还没有一个通用方法,以确保透明度设置可以在目前使用的所有浏览器上有效. 这篇汇总主要 ...

  4. 【C语言】06-基本数据类型

    C语言有丰富的数据类型,因此它很适合用来编写数据库,如DB2.Oracle都是C语言写的. C语言的数据类型大致可以分为下图中的几类: 回到顶部 一.变量 跟其他语言一样,C语言中用变量来存储计算过程 ...

  5. imread() not working in OpenCV 2.4.11 Debug mode

    The OpenCV function imread() not working in OpenCV 2.4.11 Debug mode of VS2010 under Win32, the way ...

  6. 《GK101任意波发生器》升级固件发布（版本：1.0.2build539）

    一.固件说明: 硬件版本:0,logic.3 固件版本:1.0.2.build539 编译日期:2014-10-08 ====================================== 二. ...

  7. Ubuntu彻底删除MySQL重装MySQL

    1.删除 mysql         sudo apt-get autoremove --purge mysql-server-5.0         sudo apt-get remove mysq ...

  8. Scrum会议9(Beta版本)

    组名:天天向上 组长:王森 组员:张政.张金生.林莉.胡丽娜 代码地址:HTTPS:https://git.coding.net/jx8zjs/llk.git SSH:git@git.coding.n ...

  9. Apache Spark源码走读之7 -- Standalone部署方式分析

    欢迎转载,转载请注明出处,徽沪一郎. 楔子 在Spark源码走读系列之2中曾经提到Spark能以Standalone的方式来运行cluster,但没有对Application的提交与具体运行流程做详细 ...

  10. 简单排序算法 C++类实现

    简单排序算法: 冒泡排序 插入排序 选择排序 .h代码: // // SortClass.h // sort and selection // // Created by wasdns on 16/1 ...