创意论坛
收藏本页
联系站长
网站首页[新 闻]创意产业[设 计]网 页[博弈论]下 载创意市集
网站推荐&内容
网站声明
·尊重是互相的,本人时间有限,所以不可能面面俱到,请原谅!
·拼搏在于希望,快乐在于分享!
·您任意可以传播与复制本站设计界面,
但是【界面版权】仍规属于本站所有.

·您可以任意的修改本界面以及界面的html和css代码,
但是请不要用于商业用途.

·本站所有内容采用创作共用授权--署名和非商业用途。
[新 闻]·其他信息
+  位置: 龙觉资讯 >> [新 闻] >> 站内新闻 >> 正文

龙觉资讯v4 css常用说明

作者:神说 来源:龙觉资讯 更新时间:2007-1-23 19:52:50 点击数:读取中...

网页的布局页和一般样式都在css里面了,如果实在是不明白,对比一下CSS和页面的html就可以了!
如果是真的看不懂我也没办法了.样式我已经尽量按照我知道的英文寓意写法去定义...
还是那句话,实在不行看html代码再找对应的样式.还有应用...
偶时间也不多,本来就免费的东西,我希望大家一起研究和学习,而且我还要忙着在老家找工作,抱歉了...
----------------------------------------------------------------------------------------------------------------------
.autoheight {font: 0px/0px sans-serif;clear: both;display: block;} /*处理高度无法自适应的问题*/
a:link {
 color:#333;
 text-decoration:none;

 }/*连接*/
a:visited {
 color:#666;
 text-decoration:none;
}/*已访问连接*/
a:hover {
 color:#6595D6;
 text-decoration:underline;
}/*鼠标移动上的连接*/
a:active {
 color:#f60;
 text-decoration:none;
}/*鼠标点击连接后的颜色以上连接均为通用连接*/
#announce a:link,#announce a:visited,#announce a:hover {color:#fff;}/*公告所有连接颜色为白*/
body {
 text-align:center;
 margin:0px;
 background-image:url({%picurl%}/bg.gif);
 background-position:center;
 color:#333;
 font-family: "宋体", "楷体_GB2312", "黑体";
 font-size:9pt;
 line-height:18px;
 }/*默认网页主体样式*/
html {
 scrollbar-face-color:#000;
 scrollbar-highlight-color:#000;
 scrollbar-shadow-color:#000;
 scrollbar-3dlight-color:#000;
 scrollbar-arrow-color:#fff;
 scrollbar-track-color:#666;
 scrollbar-darkshadow-color:#000;
 }/*网页的滚动条颜色和样式,xhtml认为其应该为html下属性...*/
ul,ol,img {
 margin:0px;
 padding:0px;
}/*默认在某些浏览器下ul,ol,li均有"间距,所以为了不会引起不必要的麻烦,全部使间距为:0*/
ul {
 text-align:left;
 list-style:none;
}/*去除ul下li样式同时概标签下内容左对齐*/
li {display:block;}/*忘记做什么了(@_@)*/
#toparea {
 width:990px;
 margin:0 auto;
 background-image:url({%picurl%}/topbg.gif);
 height:88px;
 position:relative;
 }/*导航上部区域总定义*/
#webname {
 width:233px;
 height:54px;
 background-image:url({%picurl%}/2ndvisual.gif);
 line-height:64px; vertical-align:middle;
 color:#FFF;
 font-weight:bold;
 position:absolute;
 left:25px;
 top:20px;background-repeat:no-repeat;text-indent:4em;
 }/*龙觉资讯 V4 激活 的样式?*/
#toptext {
 width:500px;
 height:24px;
 line-height:24px;
 vertical-align:middle;
 position:absolute;
 left:300px;
 top:30px;
 text-align:left;
 }/*激情号:做一个礼貌、节俭、真诚、热心、谦逊的80年代...的样式*/
#player {
 width:220px;
 height:160px;
 vertical-align:middle;
 position:absolute;
 left:320px;
 top:0px;
 text-align:center;
 }/*上面播放器的样式*/
#webadd {
 height:64px;
 width:100px;
 position:absolute;
 right:4px;
 top:12px;
 line-height:18px;
 }/* 加入收藏 联系站长 千里之外 样式*/
#channel {
 width:992px;
 height:40px;
 background-image:url({%picurl%}/channelbg.gif);
 margin:0 auto;
 font-weight:bold;
 color:#FFF;
 }/*频道总样式*/
#channela  {
 text-align:center;
  }
#channela li {
 line-height:35px;
 vertical-align:middle;
 float:left;
 width:80px;
 }
#channela a:link,#channela a:visited,#channela a:hover,.paneltop a:link,.paneltop a:visited,.paneltop a:hover  {
 color:#FFF;
 font-weight:bold;
 text-decoration:none;
 }/*以上均为频道连接样式*/
#channela a:hover,,#linkt a:hover {
 text-decoration:none;border-bottom:3px solid #f09;

 }  /*鼠标移动到连接上显示的颜色*/
#main {
 width:990px;
 height:auto;
 margin:0 auto;
 background-image:url({%picurl%}/mainbg.gif);
 background-repeat:repeat-y;
 }/*主内容显示样式*/
#mainchannel {
 width:990px;
 height:auto;
 margin:0 auto;
 background-image:url({%picurl%}/mainbgchl.gif);
 background-repeat:repeat-y;
 } }/*主内容显示样式--频道样式*/
#maincontent {
 width:990px;
 height:auto;
 margin:0 auto;
 background-image:url({%picurl%}/mainbgcnt.gif);
 background-repeat:repeat-y;
 }/*主内容显示样式--内容样式*/
#line {
 width:990px;font: 0px/0px sans-serif;
 height:19px;
 background-image:url({%picurl%}/line.gif);
}/*上面的黑线的样式*/
#loopshow {
 width:470px;
 height:222px;
 text-align:center;
 margin:0 auto;
 }/*flash幻灯片的样式*/
#announce {
 width:470px;
 height:27px;
 line-height:27px;
 vertical-align:middle;
 background-color:#333;
 text-align:left;
 color:#fff;
 margin:0 auto;
 text-indent:1em;
 }/*公告的样式*/
.leftshow,.rightshow { width:247px; height:auto; text-align:left; clear:both;} /*三分栏左右区域公用样式*/
.leftshow {float:left;clear:left;}/*左边区域左对齐*/
.centershow {float:left;}/*中间区域*/
.rightshow {float:right;clear:right;}/*右边区域油对齐*/
.centershow {width:496px; height:auto; text-align:left;}/*中间区域样式*/
.leftclass,.rightclass {
 width:245px;
 height:29px;
 color:#666;
 font-weight:bold;
 line-height:29px;
 vertical-align:middle;
 }/*左右区域样式标题公用样式*/

 .leftclass {
 background-image:url({%picurl%}/leftclass.gif);
 text-indent:8em;
 }/*左边区域样式标题专用样式*/
 .rightclass {
 background-image:url({%picurl%}/rightclass.gif);
  text-indent:4em;
  }/*右边区域样式标题专用样式*/
 .centerclass {
  width:466px;
 height:37px;
 text-align:center;
 vertical-align:middle;
 line-height:37px;
 margin:0 auto;
 background-image:url({%picurl%}/middleclass.gif);
 color:#fff;
 font-weight:bold;
 }/*中间区域标题样式*/
.showopic{
  width:111px;
  height:80px;
  float:left;
  text-align:center; 
  }/*显示一个图片,参照首页新闻图片*/
.showtpic{
  width:240px;
  height:80px;
  text-align:center;
  margin:0 auto;
  }/*显示两个图片,参照首页广告创意图片*/
.showtpic img {
  padding-left:10px;
  }

.showetext{
 width:135px;
 height:80px;
 float:left;
 font-weight:bold;
 text-align:left; 
  }/*推荐文字,参照首页新闻粗体连接*/
.listred a:link {color:#633;}
.listred {
  padding-left:4px;
  color:#633;clear:both;
  }/*红色链接*/
.listblue {
  padding-left:4px;
  color:#336;clear:both;
  }
.listblue a:link {color:#336;}/*蓝色链接*/

.listc {
 width:464px;
 height:auto;
 margin:0 auto;
 }/*中间内容区域样式*/
#designlist li {
 float:left;
 width:232px;
 text-align:left;
  }/*频道首页·本月文章排行样式*/

.lione li,.litwo li {
 padding-left:8px;
 } /*列表样式*/
.lione {background-image:url({%picurl%}/lione.gif);} /*有背景*/
.litwo li {
font-weight:bold;
 }/*文字加粗*/
#styleversion {
 width:990px;
 height:28px;
 background-image:url({%picurl%}/styleversion.GIF);
 margin:0 auto;
 line-height:18px;clear:both;
 }
#v4 {
 width:230px;
 height:auto;
 text-align:left;
 margin:0 auto;
 }
#classline {
 width:729px;font: 0px/0px sans-serif;
 height:6px;background-color:#333;}
#classlist {
 width:729px;
 float:right;
 height:auto;
 background-color:#fff;
 }
.channelhot {
 width:729px;
 height:37px;
 vertical-align:middle;
 line-height:37px;
 background-image:url({%picurl%}/channelhot.gif);
 text-indent:12em;
 color:#fff;
 font-weight:bold;
 text-align:left;
 }
.classtitle {
 width:364px;
 height:37px;
 color:#fff;
 text-align:left;
 background-image:url({%picurl%}/classlist.gif);
 font-weight:bold;
 text-indent:9em;
 line-height:37px;
 vertical-align:middle;
 }
.classtitle a:link,.classtitle a:hover,.classtitle a:visited {color:#fff;}
.classshowl {
 width:364px;
 float:left;
 height:auto;
 }
#special,#weektop,.classlist {
 width:350px;
 height:auto;
 margin:0 auto;
 text-align:left;
 border:1px solid #eee;
 }
.toplist li,.speciallist li  {
 float:left;
 padding-left:5px;
 width:175px;
 width/* */:/**/170px;
 width: /**/170px;
 text-align:left;
 }
.toplist a:link {
 color:#336;
 }
.speciallist a:link {
 font-weight:bold;
 }
#specialpic,.classlistpic {
 width:350px;
 height:auto;
 margin:0 auto;
 text-align:center;
 margin-bottom:4px;
 }
.classshowr {
 width:364px;
 float:right;
 height:auto;
 overflow:hidden;
 }
/*文章显示开始*/
#content  {
 width:729px;
 float:left;
 height:auto;
 background-color:#fff;
 text-align:left;
 }
#path,#stars {
 height:32px;
 vertical-align:middle;
 line-height:32px;
 }
#path {
 width:500px;
 float:left;
 text-indent:1em;
 text-align:left;
 }
#stars {
 width:200px;
 float:right;
 text-align:right;
 }
#title {
 width:700px;
 height:auto;
 margin:0 auto;
 text-align:center;
 clear:both;
 padding:4px;
 }
#ArticleBody {
 width:710px;
 height:auto;
 line-height:24px;
 word-wrap:break-word;
 overflow:hidden;
 border-top:1px solid #eee;
 margin:0 auto;
 text-align:left;
 }
#googlekeywords {
 width:719px;
 height:auto;
 text-align:left;
 margin:0 auto;
 background-color:#f7f7f7;
 border-top:2px solid #333;
 }
#articleintro {
 width:719px;
 height:auto;
 text-align:left;
 margin:0 auto;
 border:1px solid #eee;
 border-top:12px solid #333;
 }
#articletools {
 width:464px;
 margin:0 auto;
 text-align:center;
 height:32px;
 }
#pnartitle {
 width:719px;
 height:32px;
 line-height:32px;
 vertical-align:middle;
 text-align:left;
 text-indent:2em;
 }
 /*文章显示标签结束*/
 /*下载显示*/
#softintro {
 width:719px;
 height:auto;
 text-align:left;
 margin:0 auto;
 border:1px solid #eee;
 border-top:12px solid #333;
 }
 .softype {
  width:200px;
  text-align:center;
  float:left;
  border:1px solid #eee;
  border-left-width:5px;
  padding:2px;
  font-weight:bold;
  margin-bottom:3px;
  }
  .softarr {
   width:488px;
   text-align:left;
   float:right;
   border:1px solid #fff;
   border-left-width:3px;
   padding:2px;
   margin-bottom:3px;
   }
#softbody {
 width:710px;
 height:auto;
 line-height:24px;
 word-wrap:break-word;
 overflow:hidden;
 margin:0 auto;
 text-align:left;
 }
#softcontent {
 padding:4px;
 text-align:left;
 height:200px;
 }
#softpwd {
 border-color:#633;
 color:#633;
 }
#softlevel {
 border-color:#336;
 color:#336;
 }
.showsoft {text-align:left;
padding:4px;
border:1px solid #eee;
margin:0px 4px 4px 0px;
}
 /*下载显示结束*/
/*图片内容显示开始*/
 .phototype {
  width:200px;
  text-align:center;
  float:left;
  border:1px solid #eee;
  border-left-width:5px;
  padding:2px;
  font-weight:bold;
  margin-bottom:3px;
  }
  .photoarr {
   width:488px;
   text-align:left;
   float:right;
   border:1px solid #fff;
   border-left-width:3px;
   padding:2px;
   margin-bottom:3px;
   }
#photobody {
 width:710px;
 height:600px;
 line-height:24px;
 word-wrap:break-word;
 overflow:hidden;
 margin:0 auto;
 text-align:left;
 }
#photocontent {
 padding:4px;
 text-align:center;
 height:200px;
 }
#photointro {
 width:719px;
 height:auto;
 text-align:left;
 margin:0 auto;
 border:1px solid #eee;
 border-top:12px solid #333;
 }
.center {
 margin:0 auto;
}
.picc {
 width:454px;
 height:auto;
 margin:0 auto;
 }
/*图片内容显示结束*/
#commondbody {
 width:710px;
 height:auto;
 line-height:24px;
 word-wrap:break-word;
 overflow:hidden;
 margin:0 auto;
 text-align:left;
 }/*通用页样式*/

.ads1 {
 width:729px;
 height:auto;
 float:right;
 }/*右半栏广告样式*/

.ads2 {
 width:992px;
 height:100px;
 margin:0 auto;
 border-top:1px solid #333;
 border-bottom:1px solid #333;
 }
/*频通栏广告class */
.paddingone {
 padding:4px 10px 6px 10px;
 text-align:left;
 }/*内部空白区域1*/
.paddingtwo {
 padding:4px 10px 6px 10px;
 text-align:center;
 }/*内部空白区域2 */
#lists,.lists {
float:left;
width:450px;
height:auto;}/*栏目显示栏目内容列表*/
#newpic,.newpics {
float:left;
width:250px;
height:auto;
text-align:left;
border:1px solid #eee;
}/*栏目显示经典图文*/
.linepic div {float:left;text-align:center;border:1px solid #eee;padding:2px;line-height:18px;margin-bottom:8px;display:inline; margin-left:4px;}
#linkv,#linkt {text-align:center; width:468px; margin:auto 0;}
#linkv img {margin:2px;}
#linkt a {margin:8px; line-height:21px;}
/*留言版*/
.showguest {border:1px solid #eee;
border-left-width:5px;
padding:4px;
margin-bottom:4px;
text-align:left;
}/*显示留言*/
.showreplay {
text-align:left;
color:#336;
padding:2px;
} /*留言回复*/
/**/
/*网站下部内容*/
.ccontent {display:block;padding:3px;border:1px dotted #336;}
#navbar {margin: 0 auto; width:1000px;} 
#minds {width:383px; height:auto; text-align:left;}
#navmenu {width:580px; text-align:left;}
#minds,#navmenu {padding-left:16px; height:auto; float:left;}
.channel {line-height:21px; float:left;}
.b {font-weight:bold;}
.channel dt {padding-left:8px;}
#mindtexts {padding:12px;}
.red {color:#633;}/"文字红色"/
.blue {color:#336;}/*文字蓝色*/
/*lightbox 2.02效果专用样式,;懒的解释了,自己研究吧...*/
#photolightbox {margin:0 auto;}
#lightbox{
 position: absolute;
 top: 40px;
 left: 0;
 width: 100%;
 z-index: 100;
 text-align: center;
 line-height: 0;
 }

#lightbox a img{ border: none; }

#outerImageContainer{
 position: relative;
 background-color: #fff;
 width: 250px;
 height: 250px;
 margin: 0 auto;
 }

#imageContainer{
 padding: 10px;
 }

#loading{
 position: absolute;
 top: 40%;
 left: 0%;
 height: 25%;
 width: 100%;
 text-align: center;
 line-height: 0;
 }
#hoverNav{
 position: absolute;
 top: 0;
 left: 0;
 height: 100%;
 width: 100%;
 z-index: 10;
 }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
 width: 49%;
 height: 100%;
 background: transparent url({%picurl%}blank.gif) no-repeat; /* Trick IE into showing hover */
 display: block;
 }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url({%picurl%}prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url({%picurl%}nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
 font: 10px Verdana, Helvetica, sans-serif;
 background-color: #fff;
 margin: 0 auto;
 line-height: 1.4em;
 }

#imageData{
 padding:0 10px;
 }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; } 
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }   
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; } 
  
#overlay{
 position: absolute;
 top: 0;
 left: 0;
 z-index: 90;
 width: 100%;
 height: 500px;
 background-color: #000;
 filter:alpha(opacity=60);
 -moz-opacity: 0.6;
 opacity: 0.6;
 }
 

.clearfix:after {
 content: ".";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
 }

* html>body .clearfix {
 display: inline-block;
 width: 100%;
 }

* html .clearfix {
 /* Hides from IE-mac \*/
 height: 1%;
 /* End hide from IE-mac */
 } 
#photolightbox {border:1px dotted #ccc;padding:6px; width:400px; margin: 0 auto;}

+ 频道推荐图文
08上海国际创意产
《变形金刚》海报
Google正式推办公
第二届PJBlog2 S
乔布斯去留引发忧
+ [新 闻]·频道头条关注