十月, 2013存档

网站有个官网的标识了,记录一下!

    好几天没写文章了,今天抽时间就更新一下吧。这几天是为了参加朋友的婚礼,就回了老家了。回来后没什么事做就上个网吧,那上网当然第一件事就是去我的网站了,然后就随手了百度:“微语日记”然后就出现了官网了。我就晕了。这。。。我也不知道是怎么回事。但是不错。这个听说不好申请,准之我的是有了。就在这里记录一下吧。下面上图

    

Div+css设计搜狐首页头部页

这几天一直在学习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;

}

div+css定位笔记

定位

常见的定位有四种

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来移动的.

div+css盒子模型综合案例

接着上午的我接着做了下个综合案例,先看一下效果图

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;
}

div+css 选择器,块元素和行内元素,盒子模型经典案例!

1.选择器

一个元素最多有一个ID选择器,但是可以有多个类选择器.

 

方法如下:

<元素 class=”类选择器1  类选择器”/>

 

特别注意:

当两个类选择器发生冲突了,则以写在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(“被引入的cssurl”)

展示图:

 

 

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;
}