摘要：
HTML5引入了些新元素来定义页面结构。 新元素用于替换之前的<div>元素（在传统DIV约定俗成的基础进行演进）。 这些元素有： <header> 元素用于表示页眉 <nav> 元素用于表示导航 <section> 元素用于表示相关信息集中到一块 <article> 元素用于表示文章 <aside 阅读全文
摘要：
CSS 传统布局也就是DIV+CSS布局，这种布局现在还有市场。 京东上还有这类书籍出售，如《CSS3+DIV网页样式与布局从入门到精通 》等。 在CSS里讲的传统布局通常是采用DIV元素布局。 下图是传统的的布局，也是经典的网页布局。 所有的结构由div组成，关键结构块由div元素加ID属性，或加 阅读全文
摘要：
流体布局设计随着用户对浏览器窗口的扩大或缩小而伸展或收缩。这种设计通常使用百分数。 优势 页面会伸展到整个浏览器窗口，所以即使在大屏幕上，页面的周围 也没有空白； 如果用户的窗口很小，页面就会收缩以适应窗口，而不必横向滚动； 即使用户设置的字体比设计人预设的更大，这种设计也可以适应（因为页面可以伸展 阅读全文
摘要：
固定宽度布局的设计不会因为用户扩大或缩小浏览器窗口而发生变化。 这种设计通常以像素作为衡量单位。 优势 能够使用像素值精确地控制大小并定位元素 相比流体布局，设计人员能够在页面上更加自如地控制元素的外观和位置 在控制文本行的长度时可以不用考虑用户窗口的大小 相对于页面其余部分，图像的大小始终不变 劣 阅读全文
摘要：
下面的代码演示了3列布局的用法。 <!DOCTYPE html> <html> <head> <title>三列布局</title> <style type="text/css"> body { width: 960px; color: #665544; margin:0 auto;} .colum 阅读全文
摘要：
多列是网站必不可少的布局方式。 多列布局技术主要以下3个属性为基础： width:用于设置列宽 float:用于将多个列并排 margin:该属性用于在列之间创建空隙 两列布局 下面的代码演示两列布局，左宽右列窄 <!DOCTYPE html> <html> <head> <title>两列布局</ 阅读全文
摘要：
上节课我们有一个现行三列的例子。 这个例子出现了浮动。 CSS 有一个属性clear可以解决浮动的问题。它有4个值： left:盒子的左侧不能接触同一个包含元素内的其它任何元素。 right:盒子的右侧不能接触同一个包含元素内的其它任何元素。 both:盒子的左侧和右侧都不能接触同一个包含元素内的其 阅读全文
摘要：
利用CSS的float属性可以将元素并排，做出三列并排的布局。 如这样的效果 实现的原理：只要将3个元素设置float属性，属性值为left，同时指定不同比例的宽度，及高度。 下面是实现代码 <!DOCTYPE html> <html> <head> <title>元素并排</title> <met 阅读全文
摘要：
任何元素从普通流脱离里，盒子都会产生重叠。z-index属性可以控制哪个盒子显示在上层。 当使用相对定位、固定定位、绝对定位时，盒子都可能发生重叠现象。 重叠现象发生后，后出现的元素将在先出现的元素上层，会挡住先出现的元素。 最常见的是网站顶部的菜单，它应该是常显示在最上层。 如果它出现在最前面，它 阅读全文