HTML+CSS结构与表现原则
CSS网页布局即版式布局,是网页设计师将有限的视觉元素进行有机的排列组合。主要通过CSS的浮动、定位功能来实现UI设计的布局要求。
常见的布局有:一列布局,两列布局,三列布局和混合布局。
HTML清除默认样式:body{margin:0;padding:0;}
浮动(float)、绝对定位(position:absolute)导致元素脱离文档流(即元素所显示的位置和文档代码不一定一致)。
清除浮动:clear:both
页面布局的结构与表现原则:先考虑设计图中的内容和内容模块之间的关系,重点放在编写HTML结构和语义化,然后考虑布局和表现形式。
网页换肤即相同的HTML结构,不同的样式。
图片来自于慕课网
HTML+CSS结构与表现原则的更多相关文章
- 一、HTML和CSS基础--网页布局--网页简单布局之结构与表现原则
结构.表现和行为分离,不仅是一项技术,更主要的是一种思想,当我们拿到一个网页时,先考虑设计图中的文字内容和内容模块之间的关系,重点放在编写html结构和语义化,然后考虑布局和表现形式.,减少HTML与 ...
- 网页简单布局之结构与表现原则(HTML/CSS)
结构 样式 行为真正的分离 前端初级人员会在页面上单纯的用各个div把相关内容独立开: 前端中级人员明白相关属性的设置会给元素带来什么改变,从而减少div的书写: 前端高级人员会以及其简单的和稳定的方 ...
- 初学者用div+css结构写网页的几个误区
1.用div+css结构制作静态html网页不等于彻底抛弃古老的table写法.之所以不建议用table来布局网页是因为在网页加载很慢的时候要等table结构加载完成才能看到网页,其次是table的布 ...
- HTML与CSS:结构与表现
在HTML和CSS里存在着部分重复的功能,例如两者都可以设定一段文字的字体属性.既然如此,为啥还要CSS呢(至少,为啥CSS里存在着和HTML标签属性重复的东西呢)? 这是因为,HTML和CSS的用途 ...
- css的元素表现
块级元素和行内元素的表现: 块级元素:块级元素和父元素的宽度一致,默认情况下就是和body的宽度一样,也可以说和浏览器窗口的宽度一致,致使同一行不能再放下另外的元素,所以块级元素表现为独占一行. 块级 ...
- CSS结构和层叠
每个合法的文档都会生成一个文档树,从而能根据元素的祖先,属性,兄弟元素等创建选择器来选择元素.有了这个结构树,选择器才能起作用,这也是CSS继承的核心.继承是从一个元素向其后代元素传递属性值所采用的机 ...
- Web前端新人笔记之CSS结构和层叠
上一篇文章介绍了如何利用CSS选择器为元素应用各种丰富的样式,每个合法的文档都会生成一个结构树,了解这一点,就能根据元素的祖先.属性.兄弟等元素穿件选择器选择元素. 本篇文章将讨论3中机制之间的关系: ...
- react&webpack使用css、less && 安装原则 --- 从根本上解决问题。
在webpack-react项目中,css的使用对于不同人有不同的选择,早起是推荐在jsx文件中使用 css inline js的,但是这种方法要写很多对象来表示一个一个的标签,并且对于这些对象,我们 ...
- 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 ...
随机推荐
- HDU2196 Computer(树形DP)
和LightOJ1257一样,之前我用了树分治写了.其实原来这题是道经典的树形DP,感觉这个DP不简单.. dp[0][u]表示以u为根的子树中的结点与u的最远距离 dp[1][u]表示以u为根的子树 ...
- POJ2125 Destroying The Graph(二分图最小点权覆盖集)
最小点权覆盖就是,对于有点权的有向图,选出权值和最少的点的集合覆盖所有的边. 解二分图最小点权覆盖集可以用最小割: vs-X-Y-vt这样连边,vs和X部点的连边容量为X部点的权值,Y部和vt连边容量 ...
- BZOJ2216 : [Poi2011]Lightning Conductor
$f[i]=\max(a[j]+\lceil\sqrt{|i-j|}\rceil)$, 拆开绝对值,考虑j<i,则决策具有单调性,j>i同理, 所以可以用分治$O(n\log n)$解决. ...
- jquery插件 源码
下面是对Jquery几个经常用到的地方进行的增强. 功能是参考百度七巧板JS框架来完成的. 一.页面属性 $.page.getHeight():获取页面高度 $.page.getWidth():获取页 ...
- slice、substring和substr
首先,他们都接收两个参数,slice和substring接收的是起始位置和结束位置(不包括结束位置),而substr接收的则是起始位置和所要返回的字符串长度.直接看下面例子: 1 var tes ...
- 编程中i++与++i的区别
- com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: Unknown column '??????' in 'field list'
严重: Servlet.service() for servlet jsp threw exceptioncom.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErro ...
- hdu 猜数字
这题的意思是找到最大的n使得m次之内的猜测可以猜到1~n之间的任何值.这里是二分思想的逆过程,1~h个数最多猜测log2(n+1)次(n为奇数),故 n=2^m-1; #include"io ...
- gif 录制 屏幕 工具
写博客或者提出问题时,很多时候需要gif才能说明问题 window录制攻略 https://pan.baidu.com/s/1gdCX1Gf mac录制攻略 第一步:打开mac内置的播放器QuickT ...
- 完美洗牌&洗牌
完美洗牌问题,给定一个数组a1,a2,a3,...an,b1,b2,b3..bn,把它最终设置为b1,a1,b2,a2,...bn,an这样的. O(n)的算法,O(n)的空间. 对于前n个数,映射为 ...