CSS基础二
<html><head><title>div 标记范例</title><style type="text/css"><!--div{font-size:18px;/* 字号大小 */font-weight:bold;/* 字体粗细 */font-family:Arial;/* 字体 */color:#FFEEEE;/* 颜色 */background-color:#001166;/* 背景颜色 */text-align:center;/* 对齐方式 */width:300px;/* 块宽度 */height:100px;/* 块高度 */}--></style></head><body><div>这是一个div标记</div></body></html><html><head><title>div与span的区别</title></head><body><p>div标记不同行：</p><div><img src="lotus.jpg" border="0"></div><div><img src="lotus.jpg" border="0"></div><div><img src="lotus.jpg" border="0"></div><p>span标记同一行：</p><span><img src="lotus.jpg" border="0"></span><span><img src="lotus.jpg" border="0"></span><span><img src="lotus.jpg" border="0"></span></body></html>
<html><head><title>float属性</title><style type="text/css"><!--body{margin:15px;font-family:Arial;font-size:12px;}.father{background-color:#fffea6;border:1px solid #111111;padding:25px;/* 父块的padding */}.son1{padding:10px;/* 子块son1的padding */margin:5px;/* 子块son1的margin */background-color:#70baff;border:1px dashed #111111;float:left;/* 块son1左浮动 */}.son2{padding:5px;margin:0px;background-color:#ffd270;border:1px dashed #111111;}--></style></head><body><div name="code"><html><head><title>position属性</title><style type="text/css"><!--body{margin:10px;font-family:Arial;font-size:13px;}#father{background-color:#a0c8ff;border:1px dashed #000000;position:relative;width:100%;height:100%;}#block{background-color:#fff0ac;border:1px dashed #000000;padding:10px;position:absolute;/* absolute绝对定位 */left:20px;/* 块的左边框离页面左边界20px */top:40px;/* 块的上边框离页面上边界40px */}--></style></head><body><div id="father"><div id="block">absolute</div></div></body></html><html><head><title>position属性</title><style type="text/css"><!--body{margin:10px;font-family:Arial;font-size:13px;}#father{background-color:#a0c8ff;border:1px dashed #000000;width:100%; height:100%;padding:5px;}#block1{background-color:#fff0ac;border:1px dashed #000000;padding:10px;position:relative;/* relative相对定位 */left:15px;/* 子块的左边框距离它原来的位置15px */top:10%;}--></style></head><body><div id="father"><div id="block1">relative</div></div></body></html><html><head><title>z-index属性</title><style type="text/css"><!--body{margin:10px;font-family:Arial;font-size:13px;}#block1{background-color:#fff0ac;border:1px dashed #000000;padding:10px;position:absolute;left:20px;top:30px;z-index:1;/* 高低值1 */}#block2{background-color:#ffc24c;border:1px dashed #000000;padding:10px;position:absolute;left:40px;top:50px;z-index:0;/* 高低值0 */}#block3{background-color:#c7ff9d;border:1px dashed #000000;padding:10px;position:absolute;left:60px;top:70px;z-index:-1;/* 高低值-1 */}--></style></head><body><div id="block1">AAAAAAAA</div><div id="block2">BBBBBBBB</div><div id="block3">CCCCCCCC</div></body></html><html><head><style type="text/css"><!--body {margin:0px;font-size:13px;font-family:Arial;} #container{position:relative;width:100%;}#banner{height:80px;border:1px solid #000000;text-align:center;background-color:#a2d9ff;padding:10px;margin-bottom:2px;}#content{float:left;text-align:center;padding-right:200px;/* 内容往回挤200px */}#links{float:right;width:200px;border:1px solid #000000;margin-left:-200px;/* 强行往左拉回200px */text-align:center;}#footer{clear:both;/* 不受float影响 */text-align:center;height:30px;border:1px solid #000000;}--></style><title>CSS排版</title><body><div id="container"><div id="banner">banner</div><div id="content"><div name="code"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>我的博客</title><link href="1.css" type="text/css" rel="stylesheet"></head><body><div id="container"><div id="globallink"><ul><li><a href="#">个人首页</a></li><li><a href="#">控制面板</a></li><li><a href="#">我的文章</a></li><li><a href="#">我的相册</a></li><li><a href="#">我的圈子</a></li><li><a href="#">给我留言</a></li></ul><br></div><div id="parameter"><div id="author"><p name="code"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>颜色渐变的文字</title><script language="javascript">function Delta(sHex1,sHex2,iNum){//计算每个字的变化量var iHex1 = parseInt("0x"+sHex1);var iHex2 = parseInt("0x"+sHex2);return (iHex2 - iHex1)/(iNum-1);}function Colorful(sText,sColor1,sColor2){if(sText.length<=1){//如果只有一个字符，渐变无从谈起，直接输出并返回document.write("<font style='color:#"+sColor1+";'>"+sText+"</font>");return;}//RGB三色分离，分别获取变化的小量deltavar fDeltaR = Delta(sColor1.substring(0,2),sColor2.substring(0,2),sText.length);var fDeltaG = Delta(sColor1.substring(2,4),sColor2.substring(2,4),sText.length);var fDeltaB = Delta(sColor1.substring(4,6),sColor2.substring(4,6),sText.length);var sColorR = parseInt("0x"+sColor1.substring(0,2));var sColorG = parseInt("0x"+sColor1.substring(2,4));var sColorB = parseInt("0x"+sColor1.substring(4,6));for(var i=0;i<sText.length;i++){document.write("<font style='color:rgb("+Math.round(sColorR)+","+Math.round(sColorG)+","+Math.round(sColorB)+");'>"+sText.substring(i,i+1)+"</font>");/*每输出一个字符，颜色的三个分量都相应的变化当字符输出完成时，正好由sColor1变成sColor2*/sColorR += fDeltaR;sColorG += fDeltaG;sColorB += fDeltaB;}}Colorful("春节(Spring Festival)中国民间最隆重最富有特色的传统节日，它标志农历旧的一年结束和新的一年的开始 。春节一般指除夕和正月初一 。但在民间，传统意义上的春节是指从腊月初八的腊祭或腊月二十三或二十四的祭灶，一直到正月十五，其中以除夕和正月初一为高潮。在春节期间，我国的汉族和很多少数民族都要举行各种活动以示庆祝。这些活动均以祭祀神佛、祭奠祖先、除旧布新、迎禧接福、祈求丰年为主要内容。活动丰富多彩，带有浓郁的民族特色。","FF3300","3366FF");</script></head><body></body></html><html><head><title>文字跟随鼠标</title><style type="text/css"><!--body{background-color:#004593;}.spanstyle{color:#fff000;font-family:"Courier New";font-size:18px;font-weight:bold;position:absolute;/* 绝对定位 */top:-50px;}--></style><script language="javascript">var x,y;//鼠标当前在页面上的位置var step=10;//字符显示间距，为了好看，step=0则字符显示没有间距var flag=0;var message="Cascading Style Sheet";//跟随鼠标要显示的字符串message=message.split("");//将字符串分割为字符数组var xpos=new Array()//存储每个字符的x位置的数组for (i=0;i<message.length;i++) {xpos[i]=-50;}var ypos=new Array()//存储每个字符的y位置的数组for (i=0;i<message.length;i++) {ypos[i]=-50;}for (i=0;i<message.length;i++) { //动态生成显示每个字符span标记,//使用span来标记字符，是为了方便使用CSS，并可以自由的绝对定位document.write("<span id='span"+i+"' class='spanstyle'>");document.write(message[i]);document.write("</span>");}if (document.layers){document.captureEvents(Event.MOUSEMOVE);}function handlerMM(e){ //从事件得到鼠标光标在页面上的位置x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX;y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY;flag=1;}function makesnake() { //重定位每个字符的位置if (flag==1 && document.all) { //如果是IEfor (i=message.length-1; i>=1; i--) {xpos[i]=xpos[i-1]+step; //从尾向头确定字符的位置，每个字符为前一个字符“历史”水平坐标+step间隔， //这样随着光标移动事件，就能得到一个动态的波浪状的显示效果ypos[i]=ypos[i-1]; //垂直坐标为前一字符的历史“垂直”坐标，后一个字符跟踪前一个字符运动}xpos[0]=x+step //第一个字符的坐标位置紧跟鼠标光标ypos[0]=y//上面的算法将保证，如果鼠标光标移动到新位置，则连续调用makenake将会使这些字符一个接一个的移动的新位置// 该算法显示字符串就有点象人类的yx队伍一样， for (i=0; i<=message.length-1; i++) {var thisspan = eval("span"+(i)+".style"); //妙用eval根据字符串得到该字符串表示的对象thisspan.posLeft=xpos[i];thisspan.posTop=ypos[i];}}else if (flag==1 && document.layers) {for (i=message.length-1; i>=1; i--) {xpos[i]=xpos[i-1]+step;ypos[i]=ypos[i-1];}xpos[0]=x+step;ypos[0]=y;for (i=0; i<=message.length-1; i++) {var thisspan = eval("document.span"+i);thisspan.left=xpos[i];thisspan.top=ypos[i];}}var timer=setTimeout("makesnake()",10) //设置10毫秒的定时器来连续调用makesnake(),时刻刷新显示字符串的位置。}document.onmousemove = handlerMM;</script></head><body onLoad="makesnake();"></body></html>body{font-family:Arial, Helvetica, sans-serif;font-size:12px;margin:0px;padding:0px;text-align:center;/* 居中且宽度固定的版式，参考11.2节 */background-color:#000000;}#container{position:relative;margin:1px auto 0px auto;width:760px;text-align:left;background-color:#FFFFFF;border-left:1px dashed #AAAAAA;/* 添加虚线框 */border-right:1px dashed #AAAAAA;border-bottom:1px dashed #AAAAAA;}#globallink{width:760px; height:163px;/* 设置块的尺寸，高度大于banner图片 */margin:0px; padding:0px;/* 再设置背景颜色，作为导航菜单的背景色 */background: #9ac7ff url(banner.jpg) no-repeat top;font-size:12px;}#globallink ul{ list-style-type:none;position:absolute;/* 绝对定位 */width:417px;left:400px; top:145px;/* 具体位置 */padding:0px; margin:0px;}#globallink li{float:left; text-align:center;padding:0px 6px 0px 6px;/* 链接之间的距离 */}#globallink a:link, #globallink a:visited{color:#004a87;text-decoration:none;}#globallink a:hover{color:#FFFFFF;text-decoration:underline;}#parameter{position:relative;float:left;width:210px;padding:0px;margin:0px;}#parameter div#author{text-align:center;margin-top:5px;}div#author p{margin:0px 10px 0px 10px;padding:3px 0px 3px 0px;border-bottom:1px dashed #999999;border-top:1px dashed #999999;}div#author p.mypic{border:none;padding:15px 0px 0px 0px;margin:0px 0px 8px 0px;}div#author p.mypic img{border:1px solid #444444;padding:2px; margin:0px;}#parameter div{clear:both;margin-top:25px;position:relative;}#parameter div h4{/* 统一设置 */background:url(leftbg.jpg) no-repeat;font-size:12px;padding: 6px 0px 5px 27px;margin:0px;}#parameter div ul{list-style:none;margin:5px 15px 0px 15px;padding:0px;}#parameter div ul li{padding:2px 3px 2px 15px;background:url(icon1.gif) no-repeat 8px 7px;border-bottom:1px dashed #999999;/* 虚线作为下划线 */}#parameter br{display:none;}#parameter div ul li a:link, #parameter div ul li a:visited{color:#000000;text-decoration:none;}#parameter div ul li a:hover{color:#008cff;text-decoration:underline;}div#lcategory{position:relative;top:10px;margin-bottom:35px;}#main{float:left;position:relative;font-size:12px;margin:0px 20px 5px 20px;width:510px;}#main div{position:relative;margin:20px 0px 30px 0px;}#main div h3{font-size:15px;margin:0px;padding:0px 0px 3px 0px;border-bottom:1px dotted #999999;/* 下划淡色虚线 */}#main div h3 a:link, #main div h3 a:visited{color:#662900;text-decoration:none;}#main div h3 a:hover{color:#0072ff;}#main p.author{margin:0px;text-align:right;color:#888888;padding:2px 5px 2px 0px;}#main p.content{margin:0px;padding:10px 0px 10px 0px;}#footer{clear:both;/* 消除float的影响，排版相关的章节已经大量涉及 */text-align:center;background-color:#daeeff;margin:0px; padding:0px;color:#004a87;}#footer p{margin:0px; padding:2px;}