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

来源:互联网 发布:网络保密十不准 编辑:程序博客网 时间:2024/04/30 20:44
  //调用外部CSS中调用外部CSS的语法是@importurl("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 topno-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;
  
  }
原创粉丝点击