DIV+CSS架构网站的7种版面布局形式

【DIV+CSS架构网站的7种版面布局形式】的更多相关文章

DIV+CSS架构网站的7种版面布局形式

"T"结构布局形式.所谓"T"结构,就是指页面顶部为横条网站标志+广告条,下方左面为主菜单,右面显示内容的布局,整体效果类似英文字母"T",所以称之为"T,形布局.这是网页设计中用得最广泛的一种布局方式.这种布局的优点是页面结构清晰,主次分明,是初学者最容易上手的布局方法.缺点是规矩呆板,如果不注意细节色彩,很容易让人"看之无味" "口"型布局.这是一个象形的说法,就是页面一般上下各有一个广告条,…

DIV+CSS布局网站基本框架

html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C…

【使用DIV+CSS重写网站首页案例】步骤分析与代码实现

使用DIV+CSS重写网站首页案例步骤分析: 第一步:先定义一个大的 div(整个页面),然后嵌套 8 个小的 div(共八行): 第二步:(第一行)在第一个 div 里面嵌套 3 个小的 div: 第三步:(第二行)在小 div 里面写一个列表标签(需要使用 css 的 display 属性的 inline): 第四步:(第三行)在小 div 里面放置一张图片第五步:(第四行)在小 div 里面嵌套 2 个 div(在下面的 div 再嵌套 2 个 div,最后在右边的 div 里面嵌套…

使用DIV+CSS布局网站的优点和缺陷

随着WEB2.0标准化设计理念的普及,国内很多大型门户网站已经纷纷采用DIV+CSS制作方法,从实际应用情况来看,此种方法绝对好于表格制作页面的方法. 如今大部分网站仍然采用表格嵌套内容的方式来制作网站,虽然此方法对于我们来说比较熟悉.比较上手:但是,它却阻碍了一种更好的.更有亲和力的.更灵活的,而且功能更强大的网站设计方法——DIV+CSS. CSS网页布局的意义体现在如下方面: 一.使页面载入得更快由于将大部分页面代码写在了CSS当中,使得页面体积容量变得更小.相对于表格嵌套的方式,DIV…

【使用DIV+CSS重写网站首页案例】CSS引入方式

CSS引入方式(3种) *就近原则:行内引入可以覆盖内部引入的效果内部引入: * type="text/css" 为默认可以不写例子: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>  <style type="text/css"…

【使用DIV+CSS重写网站首页案例】CSS选择器

使用表格<table></table>对网站首页进行布局有缺陷,不能拖动版块,不灵活. DIV Div是一个html的标签,单独使用没有意义,必须结合CSS使用: 是一个块级元素,单独占一行: 它主要用于页面的布局: Span Div是一个html的标签,单独使用没有意义,必须结合CSS使用: 是一个内联元素,显示一行: 它主要用于对括起来的内容进行样式的修饰: CSS 层叠样式表:同一元素,同一属性,设置不同值: 解决内容与表现分离的问题(html只能将元素展现出来,内容样式无法…

【使用DIV+CSS重写网站首页案例】CSS浮动

CSS浮动: 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边缘为止由于浮动框不在文件的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 选择器之 float属性: left:向左移动 right:向右移动选择器之clear属性:用于清除浮动 left:在左侧不允许浮动元素 right:在右侧不允许浮动元素 both:在左右侧均不允许浮动元素情况演示1:(无浮动) <!DOCTYPE html> <html> <head> &l…

【使用DIV+CSS重写网站首页案例】CSS盒子模型

CSS盒子模型取值问题: 默认情况,padding.border.margin都为0: 设定区域内容的width和height,是区域内容框的尺寸: 如果设定padding/border/margin,weight和height要减去相应值,保证总尺寸不变. *padding属性/margin属性: 如果只给一个值,表示上右下左(顺时针)都是这个值: 如果给两个值10px和20px,表示上下是10px,左右是20px:…

浏览器对DIV+CSS兼容性问题大总结

浏览器对DIV+CSS兼容性问题大总结接触DIV+CSS架构已经快两年了,个人觉得css入门不难,但要学精并非一朝一夕的,现在大部分网络公司都比较主张用div+css来布局,这就面临着一个比较难的问题——浏览器的兼容性.下面整理了一下相关的兼容问题,希望大家再在其基础上补充!所有浏览器通用 (市面上主要用到的IE6 IE7 IE8 FF chrome)height: 100px; IE6 专用_height: 100px; IE6 专用*height: 100px; IE7+ 专用*+hei…

div+css通用兼容性代码整理

一.Div+css通用兼容性代码你可以在css开头加入 *html{padding:0px} <style> *html{padding:0px} /* Clear Fix */ .clearfix:after { content:”.”; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } /* Hide from IE Mac */ .clearfix…