十月, 2013存档
这几天一直在学习Div+css布局.觉得不错.非常棒.下午就做了一个搜狐.页的布局.
展示图:
Html代码:
<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<title>搜狐首页</title>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″/>
<link rel=”stylesheet” type=”text/css” href=”index.css”/>
</head>
<body class=”body”>
<!–top部分–>
<div class=”top”>
<span class=”login”>登录表单</span>
<span class=”sitindex”>设置首页面</span>
<span class=”myhref”>超链接</span>
</div>
<!–logo部分–>
<div class=”logo”>
<img src=”logo.png” class=”logo”/>
</div>
<!–导航–>
<div class=”navi”></div>
<!–首页头部广告–>
<div class=”adall”>
<div class=”ad1″>招生广告</div>
<div class=”ad2″>贷款广告</div>
<div class=”ad3″>热门广告</div>
<div class=”ad4″><img src=”adright.png”/>
</div>
</div>
</body>
</html>
Css代码:
.body{
margin:0 auto;
/*border:1px solid red;*/
width:950px;
height:800px;
font-size:14px;
}
.top{
width:949px;
height:22px;
/*border:1px solid black;*/
}
.login{
width:350px;
height:22px;
background:pink;
float:left;
}
.sitindex{
width:100px;
height:22px;
background:green;
float:left;
margin-left:50px;
}
.myhref{
float:right;
background:silver;
margin-right:5px;
margin:right;
margin-top:3px;
}
/*logo*/
.logo{
width:131px;
height:71px;
float:left;
}
.logo img{
width:151px;
height:71px;
margin:3px 0 0 0;
}
.navi{
width:790px;
height:71px;
background:pink;
float:right;
margin-top:3px;
margin-right:3px;
}
/*总体广告*/
.adall{
width:945px;
height:210px;
border:1px solid silver;
margin-top:3px;
float:left;
}
/*招生*/
.ad1{
width:180px;
height:204px;
background:blue;
float:left;
margin: 3px 0 0 3px;
}
.ad2{
width:400px;
height:204px;
background:blue;
float:left;
margin:3px 3px 0 3px;
}
.ad3{
width:180px;
height:204px;
background:blue;
float:left;
margin:3px 2px 0 0;
}
.ad4{
width:170px;
height:204px;
float:left;
margin:3px 0 0 0;
border-left:1px solid silver;
}
.ad4 img{
width:160px;
height:204px;
margin-left:3px;
}
定位
常见的定位有四种
1.static 定位(默认值)
2.relative相对定位
3.absolute 绝对定位
4.fixetd 困定定位
相对定位:
这里我们看出,所谓相对定位是相对于以前的位置而从新定位.虽然它脱离的标准流,但是它的空间,不能被占用,
代码:
.div1{
width:70px;
height:30px;
background:green;
float:left;
margin-left:5px;
}
#spe{
position:relative; 相对定位
left:40px;
top:100px;
}
绝对定位:
代码:
Css:
.div1{
width:70px;
height:30px;
background:green;
float:left;
margin-left:5px;
}
#spe{
position:absolute;
left:40px;/*feft为正,则向右移动*/
top:100px;/*top为正,则向下移动*/
}
Html:
<html>
<head>
<link rel=”stylesheet” href=”index.css” type=”text/css”/>
</head>
<body>
<div class=”div1″>内容1</div>
<div id=”spe” class=”div1″>内容2</div>
</div>
<div class=”div1″>内容3</div>
<div class=”div1″>内容4</div>
</body>
</html>
从上图看.所谓绝对定位是指,对该元素最近的那个脱离了标准流的元素定位.如果没有父元素(或者有父元素,但是父元素没有脱离标准流),刚相对body左上角定位.
Fixed定位:
所谓fixed定位就是不管怎样,总是以视窗的左上角定位
注意:left top 属性对static定位是没有效果的.static 是靠margin-left ,margin-right来移动的.
接着上午的我接着做了下个综合案例,先看一下效果图
html代码:
<html> <head> <link rel="stylesheet" type="text/css" href="borks2.css"/> </head> <body> <!--div在而已起到一个--> <div class="div1"> <!--ul在布局中作用是可以控制显示内容的多少--> <ul class="faceul"> <li> <img src="1.jpg" class="img"/> </li> <li> <img src="1.jpg" class="img"/> </li> <li> <img src="1.jpg" class="img"/> </li> <li> <img src="1.jpg" class="img"/> </li> <li> <img src="1.jpg" class="img"/> </li> <li> <img src="1.jpg" class="img"/> </li> <li> <img src="1.jpg" class="img"/> </li> <li> <img src="1.jpg" class="img"/> </li> <li> <img src="1.jpg" class="img"/> </li> <li> <img src="1.jpg" class="img"/> </li> <li> <img src="1.jpg" class="img"/> </li> <li> <img src="1.jpg" class="img"/> </li> </ul> </div> </body> </html>
CSS代码:
/*外线*/ .div1{ width:500px; height:300; border:1px solid blue; margin-left:200px; } /*图片*/ .img{ width:60; height:60; } /*内线*/ .faceul{ width:400px; height:270px; border:1px solid red; margin-left:25px; margin-top:13px; padding-left:55px; } /*内内线*/ .faceul li{ list-style-type:none; float:left; width:80; height:80; border:1px solid red; margin-top:6px; margin-right:5px; } /*内图*/ .faceul li img{ margin-left:0px; margin-top:0px; width:80px; height:80px; }
1.选择器
一个元素最多有一个ID选择器,但是可以有多个类选择器.
方法如下:
<元素 class=”类选择器1 类选择器2 ”/>
特别注意:
当两个类选择器发生冲突了,则以写在css,文件中的后面的那个类选择器为准.
把各个类选择器的公共部分,单独抽取写一份,好处是可以减少CSS的冗余.
我们可以把某个cssy文件中的,共有的部分,独立写出来一份.
说明:css文件本身也会被浏览器从服务器下载到本地,方能显示效果.
2.块元素和行内元素
行内元素它只占能显示自己内容的宽度,而且他不会占据整行.而块元素它不管自己的内容有多少,会占据整行,而且会换行显示
常见的行内元素有:<a> <span> <input type=”xxxx”>
常见的块元素有:<p>
建议:尽可能使用块元素div定位,
注意:行内元素和块元素是可以互换的.
使用
Display:inline 使用行内元素当块元素使用;
Display:inline 使用块元素当行内元素使用;
代码:
.s1{
background-color:red;
display:block;/*使用s1,当块元素使用*/
}
.s2{
background-color:green;
width:100px;
display:inline;/*使用块元素,当行内使用*/
}
Css文件之间的相互引用指令
@import url(“被引入的css的url”)
展示图:
3.标准流/非标准流
流:Html元素在网页中显示的顺序
标准流:在html文件中,写在前面的元素在前面显示,写在后面的html元素在后面显示
非标准流:在html文件中,当某个元素脱离的标准流,那么它就是处于非标准流.
4.css盒子模型
盒子模型示意图:
Margin-边距 (div与外的距离)
border:边框 (div的边框)
Content:div存放的内容(图片.文章)
Paddin:内边距(内容与div的距离)
经典案例:
Html文件:
<html> <head> <title>盒子的模型</title> </head> <body> <link rel="stylesheet type="text/css" href="borks.css"/> <div class="div1"> <img src="1.jpg"/> </div> <body> </html>
Css文件:
body{ border:1px solid red; width:700px; height:500; /*如休让body自动居中*/ margin:5 auto;/*auto表示自动居中*/ } /*盒子模型概念:margin padding border content */ .div1{ width:100px; height:100px; border:1px solid blue; /*margin-top:5px; margin-left:5px;*/ margin: 5px 0px 0px 5px; /*padding-top:3px;*/ } .div1 img{ width:80px; height:80px; margin-top:10px; margin-left:10px; }