|
|
Posted on 2011-03-09 18:58 xcp 阅读(382) 评论(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: 联系我
|