您的位置:首页 > 其它

详细解释织梦DEDECMS的默认模板的C…

2013-10-30 14:02 204 查看
  //调用外部CSS中调用外部CSS的语法是@import
url("file.css");直接插入到CSS文件或<style></style>之间就可以了。

  

  @import url("layout.css");

  

  @import url("page.css");

  

    //基本样式

  

  *{ /

  

  .center{ //中间主体部分,导航栏处

  

  margin:0px auto;

  

  }

  

  .w960{

  

  width:960px; //中间主体宽度960

  

  position:relative; //它可以随窗口大小变化

  

  }

  

  .mt1{ //样式mt11,距顶端8PX

  

  margin-top:8px;

  

  }

  

  .mt2{

  

  margin-top:16px;

  

  }

  

  .clear{

  

  overflow:hidden; //让浏览器窗口永远不出现滚动条

  

  }

  

  .fs-12{

  

  font-size:12px;

  

  }

  

  .fc-f60{

  

  color:#F60;

  

  }

  

  .fc-f90{

  

  color:#F90;

  

  }

  

  .ipt-txt{

  

  line-height:15px;

  

  padding:4px 5px;

  

  border-width:1px;

  

  border-style:solid;

  

  border-color:#666 #BBB #BBB #666;

  

  font-size:12px;

  

  margin-right:2px;

  

  }

  

  .btn-1{

  

  width:56px;

  

  height:23px;

  

  border:none;

  

  background:url(../images/btn-bg1.gif) no-repeat;
//不平铺,repeat-x为向上平铺

  

  line-height:25px; //行高为

  

  letter-spacing:1px; //文字间隔属性

  

  overflow:hidden;

  

  color:#2F592E;

  

  }

  

  .btn-2{

  

  width:70px;

  

  height:25px;

  

  border:none;

  

  background:url(../images/btn-bg2.gif) left top no-repeat;

  

  line-height:25px;

  

  overflow:hidden;

  

  color:#444;

  

  margin-right:2px;

  

  }

  

  另一份:

  

  .header{

  

  width:100%;

  

  padding-top:16px;

  

  overflow:hidden;

  

  }

  

  .header a{

  

  color:#777;

  

  }

  

  .header a:hover{

  

  color:#390;

  

  text-decoration:none;

  

  }

  

  .header .top{

  

  clear:both;

  

  overflow:hidden;

  

  }

  

  .header .title{

  

  float:left;

  

  padding-left:16px;

  

  }

  

  .header .title h1 a{

  

  width:200px;

  

  height:56px;

  

  display:block;//
可以理解为块。把这个区域变成块状。当然你加了宽度和高度效果不明显了。如果去掉宽度和高度试试。再去掉display试试就发现问题了   
font-size:0px;

  

  text-indent:-200px;

  

  overflow:hidden;

  

  background:url(../images/top-logo.gif) center center no-repeat;
//logo大小

  

  }

  

  .header .banner{

  

  width:480px;

  

  height:56px;

  

  float:left;

  

  margin-left:40px;

  

  overflow:hidden; //顶部图片}

  

  .header .banner img{

  

  width:480px;

  

  height:56px;

  

  display:block;

  

  }

  

  .header .rlink{

  

  width:172px;

  

  height:52px;

  

  float:left;

  

  margin-left:32px;

  

  overflow:hidden;

  

  padding-top:4px;

  

  }

  

  .header .rlink ul li{

  

  width:78px;

  

  height:21px;

  

  background:url(../images/toprlink-bg.gif) left top no-repeat;
//“收藏”等一些图标   
float:left;

  

  margin-right:8px;

  

  margin-bottom:8px;

  

  overflow:hidden;

  

  }

  

  .header .rlink ul li a{

  

  display:block;

  

  color:#777;

  

  line-height:21px;

  

  text-indent:22px;

  

  background-image:url(../images/toprlink-bg.gif);

  

  background-repeat:no-repeat;

  

  }

  

  .header .rlink ul li a:hover{

  

  color:#000;

  

  }

  

  .header .rlink ul li.r1 a{

  

  background-position:0px -21px; //背景位置:100% -12px }

  

  .header .rlink ul li.r2 a{

  

  background-position:0px -42px;

  

  }

  

  .header .rlink ul li.r3 a{

  

  background-position:0px -63px;

  

  }

  

  .header .rlink ul li.r4 a{

  

  background-position:0px -84px;

  

  }

  

  .header .welcome{

  

  float:right;

  

  margin-top:20px;

  

  padding-right:10px;

  

  color:#999;

  

  }

  

  .header .welcome a{

  

  margin:0px 3px;

  

  }

  

  .header .nav{//导航栏

  

  width:100%;

  

  height:32px;

  

  background:url(../images/nav-bg.gif) repeat-x;
//水平上平铺,导航栏背景图片   
clear:both;

  

  overflow:hidden;

  

  }

  

  .header .nav ul{

  

  height:32px;

  

  margin:0px auto;

  

  overflow:hidden;

  

  }

  

  .header .nav ul li{

  

  float:left;

  

  line-height:31px;

  

  background:url(../images/nav-bg.gif) 0px -32px no-repeat;

  

  margin-left:-2px;

  

  }

  

  .header .nav ul li a{

  

  height:32px;

  

  padding:0px 16px 0px 17px;

  

  display:block;

  

  color:#FFF;

  

  float:left;

  

  }

  

  .header .nav ul li a:hover{

  

  color:#FF3;

  

  }

  

  .header .search{

  

  height:40px;

  

  background:url(../images/search-bg.png) repeat-x;

  

  clear:both;

  

  }

  

  .header .search .form{

  

  padding-left:8px;
左部离8   
padding-top:5px; //顶部离5

  

  float:left; //从左开如排

  

  }

  

  .header .search .form h4{

  

  display:none; //文字已经变成块状了

  

  }

  

  .header .search .form input.search-keyword{

  

  width:156px;

  

  height:18px;

  

  border:none;

  

  background:url(../images/search-bg.gif) left top no-repeat;

  

  line-height:15px;

  

  font-size:12px;

  

  padding:5px 3px 0px 58px;

  

  overflow:hidden;

  

  }

  

  .header .search .form select.search-option{

  

  margin-left:2px;

  

  }

  

  .header .search .form button.search-submit{ 
//搜索按键的大小及样式   
width:68px;

  

  height:22px;

  

  border:none;

  

  background:#F00 url(../images/search-bg.gif) right top
no-repeat;

  

  font-size:0px;

  

  line-height:100px;

  

  margin-left:2px;

  

  *margin-left:5px;

  

  overflow:hidden;

  

  }

  

  .header .tags{

  

  float:left;

  

  margin-left:16px;

  

  padding-top:8px;

  

  }
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: