div+css学习笔记.docx
《div+css学习笔记.docx》由会员分享,可在线阅读,更多相关《div+css学习笔记.docx(24页珍藏版)》请在冰豆网上搜索。
div+css学习笔记
Div+css是什么?
Div+css是一种目前比较流行的网页布局技术
Div来存放需要显示的数据(文字,图表..),css就是用来指定怎样显示,从而做到数据和显示相互的效果
原理图如下:
有时后,我们也可能把css直接嵌入到html文件中,这种方式称为内联css
基本语法:
选择器{
属性:
属性值;
…
}
我们可以简单的这样理解div+css:
div是用于存放内容(文字,图片,元素)的容器。
css是用于指定放在div中的内容如何显示,包括这些内容的位置和外观.
快速入门案例(体验案例)
Demo.html
--引入我们的css-->
My.css
.style1{
/*宽度*/
width:
400px;
height:
300px;/*一定要写一个分号*/
background-color:
silver;
border:
1pxsolidred;
margin-left:
margin-top:
250px;
padding-top:
20px;
padding-left:
40px;
网页设计的三个时期
① table网页设计
② table+css网页设计
③ div+css网页设计
css使用必要性1.可以很好的统一网站的显示风格.
css使用的基本语法
属性1:
属性2:
….
Html文件:
--css部分可以单写一个文件,然后引入,也可以直接嵌入到该html文件-->
--span元素通常用于存放小块内容-->
栏目一
栏目二
栏目三
栏目四
栏目五
Css文件:
/*.s1用术语类选择器*/
.s1{
color:
blue;
font-size:
30px;
font-style:
italic;
text-decoration:
underline;
.s2{
yellow;
12px;
.s3{
.s4{
green;
font-weight:
bold;
.s5{
#9C3131;
Css必要性2可以使用滤镜
--如何把css直接嵌入到html文件(内联css)-->
a:
linkimg{
filter:
gray;
hoverimg{
"";
Css中常用的四种选择器
1. 类选择器(class选择器)
基本使用
.类选择器{
属性名:
2. id选择器
#id选择器{
案例:
/*id选择器的使用*/
#id1{
3. html元素选择器
某个html元素{
Table{
P{
Button{
//对html元素样式分类
P:
cls{
需求人员(技术+行业背景)
财务软件(php,c++)->用友[]
4. 通配符选择器
☞css文件可以使用在各种文件(php,html,jsp,asp…)
*{
1. 通配符选择器
再比如,我们希望所有的超链接
(1)默认样式是黑色,24px,没有下划线
(2)当鼠标移动到超链接时,自动出现下划线
(3)点击后,超链接变成红色。
这又该怎么实现呢?
[test.html]
link{
black;
none;
24px;
hover{
visited{
red;
/*对同一中html元素分类*/
p.cls1{
p.cls2{
通配符选取器
该选择器可以用到所有的html元素,但是其优先权最低
☞四个选取器优先权
Id选择器>class选择器>html选择器>通配符选则器
了解->细节->深入了解->应用项目
选择器的细节问题!
1. 父子选择器使用:
/*父子选择器*/
#id1span{
☞上面选择器的含义是:
在id选择器为id1的子元素 span的样式就是。
。
xxxxx
X
xx
#id1spanspan{
#id1spanspana{
通过上面总结:
① 父子选择器可以有多级(但是在实际开发中不要过三层)
② 父子选择器有严格的层级关系
③ 父子选择器不局限于什么类型选择器
比如
#idspanspan
.s1#idspan
div#id.s2
1. 一个元素可以同时有id选择器和class选择器
新闻一
2. 一个元素最多有一个id选择器,但是可以有多个类选择器
使用方法如下:
<元素class=”类选择器1类选择器2”/>
Html部分
新闻三
Css部分:
/*给新闻三再配置一个class选择器*/
.cls1{
pink;
16px;
特别注意:
当两个类选择器发生冲突了,则以写在css文件中的后面的那个类选择器为准!
3. 我们可以把某个css文件中的选择器共有的部分,独立出来写一份比如:
.ad_stu{
136px;
196px;
#FC7E8C;
margin:
5px006px;
float:
left;
/*广告2*/
.ad_2{
background:
#7CF574;
457px;
/*房地产广告*/
.ad_house{
152px;
//上面的css可以写成:
/*招生广告*/
.ad_stu,.ad_2,.ad_house{
4. 说明css文件本身也会被浏览器从服务器下载到本地,才能显示效果.
行内元素和块元素
快速入门案例:
从案例我们看出,行内元素它只占能显示自己内容的宽度,而且他不会占据整行
块元素它不管自己的内容有多少,会占据整行,而且会换行显示
常见的行内元素有
常见块元素有
span1
span2
div1
div2
silver">这是一个段落
行内元素和块元素可以转换
使用
Display:
inline表示使用行内元素方式显示
block表示使用块元素方式显示
Css文件之间的相互引用指令(mvc)
标准流和非标准流
流:
html元素在网页中显示的顺序.
标准流:
在html文件中,写在前面的元素在前面显示,写在后面的html元素在后面显示.
非标准流:
在html文件中,当某个元素脱离的标准流,那么它就处于非标准流
Css中的盒子模型
盒子模型的示意图:
盒子模型的经典案例:
DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""
http:
//www.w3.org/TR/html4/loose.dtd">
body{
1pxsolidred;/*1px表示边框的宽度solid实线red表示颜色*/
500px;
/*如果让body自动居中*/
0auto;/*第一个用于上-下,第二个用于左-右。
auto表示自动居中*/
/*盒子模型的概念:
margin,padding,bordercontent*/
.div1{
50px;
52px;
1pxsolidblue;
/* margin-top:
5px;
5px;*/
5px0px0px5px;
/*padding-top:
35px;*/
.div1img{
盒子模型的综合案例2
分析:
思路
基本结构
--div在布局起到一个控制整个内容显示的位置-->
--ul在布局中作用是可以控制显示内容多少-->
Css文件
300px;
1pxsolidgray;
200px;
.faceul{
10px;
.faceulli{
list-style-type:
left;/*左浮动,这个知识点后面说*/
margin-right:
15px;
.faceulliimg{
作业 :
三天的内容自己小结:
更新时间:
2012年10月08日11时53分来源:
浮动
在div+css中浮动分为左浮动,右浮动,清除浮动
① 右浮动
所谓右浮动,指一个块元素向右移动,让出自己空间,向右移动直到碰到包含自己的父元素的最右边的边框.
② 左浮动
快速入门:
150px;
100px;
left;/*左浮动*/
从这个案例我们可以看出,所谓左浮动就是指:
某个块元素尽量向左边移动,这样就让出它右面的空间,让别的块元素显示.
浮动的特别说明:
如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮
动元素“卡住”:
直到有足够空间.
☞如果使用浮动属性:
则该元素不管是不是块元素,都会按照display:
block来显示.
小总结:
你可以这么理解浮动:
如果一个元素右/左浮动则:
①它本身会尽可能向右/左移动,直到碰到边框或者
别的浮动元素,特别强调浮动对块元素和行内元素都
生效!
②元素向右/左浮动,就相当于让出自己的左/右边,别
的元素就会在它的左/右边排列。
再一个案例:
DOCTYPEhtml
PUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
left;margin-right:5px;"src="2.jpg"/>爱克发kadlkaflksaflkas;lfkaslfksa;lfksafkas;lf爱克发如何清除浮动,我们在项目中说明网上有一个站点;禅意花园->csdn网页论坛开源之祖sourceforeg.net Php开源http://www.php- 模仿->()创新定位常见的定位有四种1. static定位(默认值)【left 和top无效】2. relative相对定位3. absolute绝对定位4. fixed固定定位.相对定位:这里我们看出,所谓相对定位是指,相对该元素应当显示的左上角重新定位,虽然它脱离的标准流,但是它的空间,不能被占用.绝对定位:从上图看,所谓绝对定位是指,对该元素最近的那个脱离了标准流的元素定位,如果没有父元素(或者有父元素,但是父元素没有脱离标准流),则相对body左上角定位.怎么理解上面标红的字代码:Html:
left;margin-right:
5px;"src="2.jpg"/>爱克发kadlkaflksaflkas;lfkaslfksa;lfksafkas;lf爱克发
如何清除浮动,我们在项目中说明
网上有一个站点;禅意花园->csdn网页论坛
开源之祖sourceforeg.net
Php开源http:
//www.php- 模仿->()创新
定位
常见的定位有四种
1. static定位(默认值)【left 和top无效】
2. relative相对定位
3. absolute绝对定位
4. fixed固定定位.
相对定位:
这里我们看出,所谓相对定位是指,相对该元素应当显示的左上角重新定位,虽然它脱离的标准流,但是它的空间,不能被占用.
绝对定位:
从上图看,所谓绝对定位是指,对该元素最近的那个脱离了标准流的元素定位,如果没有父元素(或者有父元素,但是父元素没有脱离标准流),则相对body左上角定位.
怎么理解上面标红的字
代码:
Html:
内容1
内容3
内容4
内容2
Css文件:
.div2{
position:
relative;
left:
top:
Fixed定位
所谓fixed定位就是不管怎样,总是以视窗的左上角定位.
☞lefttop属性对static没有效果,static定位是靠margin-leftmargin-top来移动位置的.
z-index
用于设置对象(div)显示时候,层叠的属性,z-index值越小,则越在下层显示!
!
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1