【HTML与CSS：结构与表现】的更多相关文章

HTML+CSS结构与表现原则

CSS网页布局即版式布局,是网页设计师将有限的视觉元素进行有机的排列组合.主要通过CSS的浮动.定位功能来实现UI设计的布局要求. 常见的布局有:一列布局,两列布局,三列布局和混合布局. HTML清除默认样式:body{margin:0;padding:0;} 浮动(float).绝对定位(position:absolute)导致元素脱离文档流(即元素所显示的位置和文档代码不一定一致). 清除浮动:clear:both 页面布局的结构与表现原则:先考虑设计图中的内容和内容模块之间的关系,重点放在…

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

结构.表现和行为分离,不仅是一项技术,更主要的是一种思想,当我们拿到一个网页时,先考虑设计图中的文字内容和内容模块之间的关系,重点放在编写html结构和语义化,然后考虑布局和表现形式.,减少HTML与CSS耦合度. 案例一:微博对话框 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd…

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

1.用div+css结构制作静态html网页不等于彻底抛弃古老的table写法.之所以不建议用table来布局网页是因为在网页加载很慢的时候要等table结构加载完成才能看到网页,其次是table的布局没有一定的语义,网页代码修改起来比较麻烦. 在写一些栏目块时,特别是数据分类较多,比如“求购信息”的栏目块,顶部可能出现“发布人.发布时间.信息标题.联系方式”等项目,像这样的地方建议还是要用table来写,因为table是专门用来写数据表格的,控制起来很方便,而且符合语义要求,还有页面中出现类似…

HTML与CSS：结构与表现

在HTML和CSS里存在着部分重复的功能,例如两者都可以设定一段文字的字体属性.既然如此,为啥还要CSS呢(至少,为啥CSS里存在着和HTML标签属性重复的东西呢)? 这是因为,HTML和CSS的用途是不同的: HTML用于标记文档结构 CSS用于展现形式 上面的文字可能比较简单抽象:下面的blog有个例子: https://www.jjxiaoliu.cn/?p=66 我们应该尽量避免使用HTML里遗存的那些和展现形式有关的标签,将它们都挪到CSS里去.…

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

结构 样式 行为真正的分离 前端初级人员会在页面上单纯的用各个div把相关内容独立开: 前端中级人员明白相关属性的设置会给元素带来什么改变,从而减少div的书写: 前端高级人员会以及其简单的和稳定的方式实现相应的效果. 代码展示: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .demo1 {…

css的元素表现

块级元素和行内元素的表现: 块级元素:块级元素和父元素的宽度一致,默认情况下就是和body的宽度一样,也可以说和浏览器窗口的宽度一致,致使同一行不能再放下另外的元素,所以块级元素表现为独占一行. 块级元素可以设置宽高. 行内元素:行内元素不能设置宽高,它的宽度是由内容撑开的.但是当将元素设置为块级元素之后就可以设置宽高了. 特别说明: 当给元素添加position:absolute或者设置float的时候,就可以设置宽高了.这是因为:position和float会隐式的改变display类型,不…

CSS结构和层叠

每个合法的文档都会生成一个文档树,从而能根据元素的祖先,属性,兄弟元素等创建选择器来选择元素.有了这个结构树,选择器才能起作用,这也是CSS继承的核心.继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用哪些值时,用户代理不仅要考虑继承,还要考虑声明的特殊性,另外需要考虑声明本身的来源,这个过程称为层叠. 1.特殊性 每个选择器都有特殊性,对于每个规则,用户代理会计算选择器的特殊性,并将这个特殊性附加到规则中的各个声明.若一个元素有两个或多个冲突的属性声明,那么有最高特殊性…

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

上一篇文章介绍了如何利用CSS选择器为元素应用各种丰富的样式,每个合法的文档都会生成一个结构树,了解这一点,就能根据元素的祖先.属性.兄弟等元素穿件选择器选择元素. 本篇文章将讨论3中机制之间的关系:特殊性.继承和层叠 特殊性 有的时候我们为同一个元素设置了不同的CSS样式代码,那么元素会启用哪一个CSS样式呢? 我们来看一下面的代码: <style type="text/css"> p{ color:red; } .first{ color:green; } </s…

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的父元素只有一个子元素正好是E,给这个E定义样式 E:empty解释:E元素没有子元素和文本内容,给这个E定义样式 例子:只要E元素是它的父级的第一个子元素,就选中.它需要同时满足两个条件,一个是“第一个子元素”,另一个是“这个子元素刚好是E”. <style> span:first-child{…

css结构选择器组合使用，选择父元素中多个子元素中某一段元素

nth-of-type()和nth-child()写法一样,这里只用nth-of-type()演示,习惯type 直接上代码 /* 从前向后选择,第6个开始 */ li:nth-of-type(n+6){ background: pink; } /* 从前向后选择,选择前6个 */ li:nth-of-type(-n+6){ background: blue; } /* 从后向前选择,倒数第6个结束 */ li:nth-last-of-type(-n+6){ background: red; }…