CSS层叠样式表3

一   DIV+CSS布局

1.1   div和span

DIV和SPAN在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式

DIV和SPAN的区别在于,SPAN是内联元素,DIV是块级元素

1.2   盒模型

margin   盒子外边距

padding   盒子内边距

border   盒子边框宽度

width   盒子宽度

height   盒子高度

1.3   布局相关的属性

1.3.1   position   定位方式

正常定位   relative

根据父元素进行定位   absolute

根据浏览器窗口进行定位   fixed

没有定位   static

继承   inherit

1.3.2   定位

离页面顶点的距离   left(左),right(右),top(上),bottom(下)

1.3.3   z-index   层覆盖先后顺序(优先级)

1.3.4   display   显示属性

display:none   层不显示

display:block   块状显示,在元素后面换行,显示下一个元素

display:inline   内联显示,多个块可以显示在一行内

1.3.5   float   浮动属性

left   左浮动

right   右浮动

1.3.6   clear   清除浮动

clear:both

1.3.7   overflow   溢出处理

hidden   隐藏超出层大小的内容

scroll   无论内容是否超出层大小都添加滚动条

auto   超出时自动添加滚动条

1.4   兼容问题及高效开发工具

1.4.1   兼容性测试工具

IE  Tester

Multibrowser

1.4.2   常用的浏览器

Firefox

Google  chrome

opera

1.4.3   高效的开发工具

1.4.3.1   轻级的

Notepad++

sbulime  Text

记事本                                  根据自己的需要来选择

1.4.3.2   重量级的

WebStorm

Dreamweaver

1.4.4   网页设计工具

fireworks

photoshop

1.5   判断IE的方法       条件注释只在IE浏览器

1.5.1   条件判断格式

<!--[if  条件  版本]>  那么显示  <![endif]-->

1.5.2   不等于

[if  !IE  8]      除了IE8都可以显示

1.5.3   小于

[if   it  IE  5.5]       如果IE浏览器版本小于6的显示

1.5.4   大于

[if  gt  IE  5]      如果IE浏览器版本大于5的显示

1.5.5   小于或等于

[if  lte  IE  6]      如果IE浏览器版本小于6的显示

1.5.6   大于或等于

[if  gte  IE  7]      如果IE浏览器版本小于7的显示

1.5.7   大于和小于之间

[if   (gt  IE  5)&(it  IE  7)        如果IE浏览器版本大于IE5小于7的显示

1.5.8   或

[if  (IE  6)|(IE  7)]      如果是IE6或者IE7显示

1.5.9   仅

<!--[if  IE  8]>      如果是IE8,就只显示IE8

1.6   《DIV+CSS网页布局实战》

先分析,再切图,然后搭建框架,慢慢的循序渐进,下一步解决兼容,最后完成

时间: 2024-10-12 13:51:02

CSS层叠样式表3的相关文章

CSS层叠样式表

层叠样式表     Cascading Style Sheet 一.层叠样式表的分类:1.外部——.css文件2.内嵌——<head></head>3.内联——放在标记的style属性上 优先级为:内联>内嵌>外部 二.选择器.(一)基本选择器1.ID选择器:#2.class选择器:.3.标签选择器:标签名 优先级为:#>.>标签名 (二)组合选择器1.用逗号隔开.并列关系2.用空格隔开.后代关系.3.筛选:选择器.class选择器.

HTML CSS 层叠样式表 一

CSS,全拼Cascading Style Sheets,层叠样式表,用于控制html<body>的元素的样式和布局. 一.CSS的三种引用方式 1.内嵌 <div style="width:200px;height:200px;color:red;background-color:blcak"></div> 内嵌 样式为宽200像素,像素必须加px或者em或者百分比:宽度为200像素:字体颜色为红色:背景颜色为黑色:可以无限添加属性,用分号;隔开.

CSS层叠样式表(一)

一.css含义 层叠样式表,用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言.CSS目前最新版本为CSS3. 二.几种样式控制方式(就近原则) 1.行内样式 <body> <div style="color:red;"></div> </body> 2.内联样式 <head> <title>这是内联样式</title> <style type="text/css"

实验时css层叠样式表不更新的情况

自定义了CSS的样式,希望在页面中起作用.因为MVC中Views/Shared/_Layout.cshtml是所有试图的公共文件,如下: <!DOCTYPE html> <html> <head> <title>@ViewBag.Title</title> <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet"

CSS层叠样式表01

CSS(Cascading Style Sheets)层叠样式表 用于修饰HTML标签的样式 CSS注释 一般来说,CSS是一个独立的文件,由于它的内容是修饰HTML标签的样式,为了方便后期的维护和修改,所以我们人为使用注释说明当前样式的是用于修饰什么内容的 单行注释:/*注释文本*/ 多行注释:就是在单行注释中换行即可 /* 注释1 注释2 */ 养成习惯 /*这是首页的css样式文件(说明css文件的作用)*/ /*页面通用样式*/ /*顶部导航条样式*/ /*侧边菜单栏样式*/ CSS语法

CSS层叠样式表导读

1.1CSS层叠样式表导读: 能够说出什么是CSS 能够使用CSS基础选择器 能够设置字体样式 能够设置文本样式 能够说出CSS的三种引入方式 能够使用Chrome调试工具调试样式 目录: CSS简介 CSS基础选择器 CSS字体属性 CSS的引入方式 综合案例 Chrome调试工具 原文地址:https://www.cnblogs.com/GZ1215-228513-Chichy/p/12232095.html

HTML CSS 层叠样式表 二

一. #ID{ width:宽度px; height:高度px; background-color:red;      背景颜色的两种加法 background:rgba(x,x,x,x)  rgba颜色 最后一个值为透明度 1为不透明,0为全透明. background:url(图片.jpg) np-rereat; 背景图添加 repeat是平铺 background-image:url(图片.jpg); 背景图添加 background-size;100%; 背景图拉伸100%  几乎不会用

HTML CSS 层叠样式表 四

一.页面布局:div+css布局 1.<style > *{ margin:0px; padding:0px; } #ad{ width:100px; height:100px; background-color:red; position:fixed;       定位:固定定位,需要设置距离边框的距离:相对于浏览器窗口位置固定 right:0px; top:100px; } .class{ float:left;     流式布局:从左往右.right从右往左.如果有序号,也会从右往左排.

CSS层叠样式表的理解(一)

使用css时,很多的问题都出现在盒子模型,所以要深刻理解盒子模型,才能够做好css. 盒子模型: margin:外边距 与父亲标签的content边界之间的距离(可以认为content边界位置存在,但不占任何像素) border:边框 标签自身的边框的粗细 padding:内边距 标签与自己的子元素(孩子标签)的content边框的距离 content:数据 content的边框,数据的位置,不占任何像素,但位置确实存在. [不占任何像素,位置确实存在,这句话可以这么理解,当div标签中没有任何

CSS 层叠样式表

语法: 层叠样式表有着简单的语法并且使用一些英语关键词来指定各种样式属性的名字.一个样式表包括一系列规则.每个规则或者规则集包含一个或多个选择器和一个声明块. 选择器 在层叠样式表中,选择器经常用来声明部分标记样式,而这些标记样式通过匹配的标签和属性来运用到标签样式自身.选择器可以运用在: 所有指定类型的元素,例如, 第二级头标签 h2 由属性指定的元素,特别是 id:文档中独一无二的标识符 class:文档中独一无二的多元素组. 在文档数中,元素依赖其他元素的相对位置 类和ID都是大小写敏感的