十月 | 2013 | 南歌鹿人

十月, 2013存档

网站有个官网的标识了，记录一下！

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

2013: 10/29
分类：: 日常信件
发表评论

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>

<head>

</head>

<!–top部分–>

<span class=”sitindex”>设置首页面</span>

</div>

<!–logo部分–>

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

}

2013: 10/26
分类：: 日常信件
2 条评论

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>

</head>

<body>

</div>

</body>

</html>

从上图看.所谓绝对定位是指,对该元素最近的那个脱离了标准流的元素定位.如果没有父元素(或者有父元素,但是父元素没有脱离标准流),刚相对body左上角定位.

Fixed定位:

所谓fixed定位就是不管怎样,总是以视窗的左上角定位

注意:left top 属性对static定位是没有效果的.static 是靠margin-left ,margin-right来移动的.

2013: 10/25
分类：: 日常信件
9 条评论

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

2013: 10/22
分类：: 日常信件
发表评论

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

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

2013: 10/22
分类：: 日常信件
发表评论

较旧条目

信息

物欲横流，许一方静土！

做一个有态度的博客！

网站有个官网的标识了，记录一下！

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

div+css定位笔记

div+css盒子模型综合案例

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

信息

文章归档

功能

搜索