|
|
Posted on 2011-03-09 18:58 xcp 閱讀(393) 評論(0) 編輯 收藏 所屬分類: JQuery
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<title>歡迎進入新《網頁設計師》:web標準教程及推廣</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<meta content="all" name="robots" />
<meta name="author" content="ajie(at)netease.com,阿捷" />
<meta name="Copyright" content="www.w3cn.org,自由版權,任意轉載" />
<meta name="description" content="新網頁設計師,web標準的教程站點,推動web標準在中國的應用." />
<meta content="web標準,教程,web, standards, xhtml, css, usability, accessibility" name="keywords" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://www.w3cn.org/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" rev="stylesheet" href="css/style01.css" type="text/css" media="all" />
<style type="text/css">
*{
padding:0px;
margin:0px;
}
body{
font-size:12px;
line-height:22px;
}
img {
border:0px;
}
td{
border-collapse;/*相鄰邊被合并*/
}
/**列表控制*/
ul,li{
/*去掉ul,li默認的小圓點*/
list-style: none;
list-style-position:inside;
/*list-style-type:square;*/
list-style-image:none;
}
ul{
margin: 0px;
padding: 0px;
}
li{
/*這個背景顏色非常重要,既使是#ffffff也要設計一個，因為他來消除黑邊*/
/*background-color: #EEEEEE;*/
padding-left:20px;
background: url("more.gif") no-repeat scroll 0 0 transparent;
/*scroll 隨對象內容滾動,transparent背景透明哈*、
/*0 0是代表一個坐標，還就這強調一下就是后面那個0是代碼高，如果是一個大圖片，因為圖片是從上外下，所以 一般都是負數.*/
/*怎么設計一個將多個小圖片合為一個大圖片呢，然后怎么定位呢，這個參見（ifeng里面的登錄，搜索，更多）等按鈕button.gif,其實還有一點就是一定要設置width,hight 因為他會自動從x,y軸以width,height之大的不重復背景*/
/*
*background-attachment : scroll(背景圖像是隨對象內容滾動) | fixed(背景圖像固定)
*background-color : transparent(背景色透明) | color
*background-image : none | url ( url ) 指明路徑
*
*在這強調一下哈，因為現在網絡上有很多就一系列的小圖片做成一個大圖來作背景，再來用background-position取出
*background-position: length || length (必須是兩個值,除了取具體的值外，還可以取top | center | bottom | left | center | right)
*如 background-position: 35% 80%; background-position: top right;
*分開設置也可以：
*background-position-x：num|left,center,right
*background-position-y : length | top | center | bottom
*
*background-repeat:repeat | no-repeat | repeat-x | repeat-y
*/
}
#header{
MARGIN: 0px;
BORDER: 0px;
WIDTH: 580px;
HEIGHT: 60px;
/*BACKGROUND: #ccd2de; */
background:url(1.gif) #ccd2de no-repeat right bottom;
}
#mainbox{ /*它的高度由下一級(包含了#menu,#sidebar和#content)來決定*/
MARGIN: 0px;
WIDTH: 580px;
BACKGROUND: #FFF;
}
/*根據內容自動適應高度，當然也可以對里面的這三個div指定高度，來決定整個mainbax的高度*/
#sidebar{
FLOAT: left;
MARGIN: 2px 2px 0px 0px;
PADDING: 0px;
WIDTH: 170px;
BACKGROUND: #F2F3F7;
}
#menu{
FLOAT: right;
MARGIN: 2px 0px;
PADDING:0px;
WIDTH: 400px;
BACKGROUND: #ccd2de;
height:100px;
}
/*測試水平居中，垂直居中(要求設計高度)，完全居中(要求設計高度)*/
#menuCenter{
BACKGROUND-color:red;
height:30px;
width:40px;
overflow:hidden;/*內容超出以后隱藏*/
/*這里需要強調一下就是：position:relative,再用top,left 就是內部偏移(也就是固定在這人div里面了)，若position:absolute 就是外部偏移*/
position:relative;/*內部偏轉,相對定位*/
top:50%;
/*還要減去div的一半的高度哈*/
margin:-15px auto 0px auto;
outline: #E9E9E9 double thin;/*輪廓線（重要）*/
}
#content{
/*定位，定位*/
z-index:1;
/*position:absolute
left:0px;
top:0px;
right:0px;
buttom:0px;*/
float: right;
/*clear:both*/
/**重要 顯示塊的滾動條[上，下]**/
/**overflow:scroll;*/
overflow-x:hidden;
overflow-y:scroll; /*這個屬性跟*/
display:block;
visibility:visible;
/*外補丁*/
MARGIN: 1px 0px 2px 0px;
/*內補丁*/
PADDING:2px;
/*邊框*/
border:none;
/*尺寸*/
/*padding，margin,border 影響計算高度*/
WIDTH: 396px;
/*
min-width:**px;
max-width:**px
*/
height:200px;
/*
min-height:**px;
max-height:**px
*/
/*背景*/
BACKGROUND: #E0EFDE;
/*字體,大小，顏色,風格,線條*/
font-family:"Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋體,sans-serif;
font-size:14px;
color:blue;
font-style:oblique;
font-weight:bold;
text-decoration:underline;
/*文本相關處理:首行縮近,對象內文本溢出時顯示省略標記，對齊方式*/
text-indent:1cm;
text-overflow:ellipsis; /*(重要)這個現實生活中很有用，如果文本超出了寬度自動顯示，與overflow配合使用*/
vertical-align:middle;
/*還有一個問題，如果div的一塊顯示在底部，如vertical-align對div也不起作用，如:
<div>
<div>底部顯示<div>
</div>
這怎么來控制呢，有三種方法，第一種:padding,margion，第二種:絕對定位，第三種:在拿一個div來填充上面那一塊
<div style="height:250px;">
<div style="height:225px;">填充空白</div>
<div>真正顯示的內容</div>
</div>
*/
text-align:left;
/*要實現水平居中
* margin:0px auto;
*
* 要實現垂直居中(固定高度)
* position:relative;
* top:50%;內部偏轉，決定定位
* margin:-15px 0px 0px 0px;
*
* 要實現完全居中(固定高度)
* position:relative;內部偏轉
* top:50%;
* margin:-15px auto 0px auto; 還要減去div的高度哈
*/
layout-flow:horizontal;/*控制是橫向顯示還是豎向顯示，古代的詩歌*/
/*字間隔,行高*/
letter-spacing:2px;/*每個字或一個字母 之間的間隔*/
word-spacing:5px; /*每個字或一個[完整]單詞 之間的間隔*/
line-height:30px;
/*滾動條控制*/
scrollbar-3dlight-color:red;/*設置 滾動條亮 [邊框 左，上] 顏色*/
scrollbar-shadow-color:red;/*右下邊框*/
scrollbar-highlight-color:#000;/**設置索滾動條3D界面的 [底層邊的顏色，一般都會被覆蓋](ThreedHighlight)顏色*/
scrollbar-face-color:yellow;/*設置滾動條最上面一層的顏色*/
scrollbar-arrow-color:blue;/*設置或檢索滾動條方向[箭頭]的顏色*/
scrollbar-darkshadow-color:#ADFF2F;
}
#footer{
CLEAR: both;
MARGIN: 0px 0px 0px 0px;
PADDING: 5px 0px 5px 0px;
WIDTH: 580px;
HEIGHT: 40px;
BACKGROUND: #ccd2de;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="mainbox">
<div id="sidebar">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<ul>
</div>
<div id="menu">
<div id="menuCenter">menu</div>
</div>
<div id="content">
Every man dies , Not every man really lives
contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
</div>
</div>
<div id="footer">footer</div>
</body>
</html>
名稱: ?4C.ESL | .↗Evon
口號: 遇到新問題?先要尋找一個方案乄而不是創造一個方案こ
mail: 聯系我
|