zoukankan      html  css  js  c++  java
  • 页面布局设置

    页面布局设置 

    Web 2010-09-29 08:57:50 阅读5 评论0   字号: 订阅

    在1024*768的机器上如果正常的话,建议的最大页面度和页面高度为:
    1024-28=996 px
    768-170=598 px

    东西都是我自己搞模版的时候正好需要,以后怕再找东西,就放在博客里了。不晓得为什么会有人这样?博客宣传里不是提倡这里是生活的地方么,难道平民草根在这里就不能生活了?


    @import url("/fbui/share/comment_1.css");
    @import url("/fbui/share/search_1.css");
    @import url("/fbui/share/calendar_1.css");
    .rss,.rss_c{display:none;}/* 去掉rss图标 */
    en {display:none;}或.cn {display:none;}/*  语言 */



    1、body{background:背景颜色;color:前景颜色;background:url(图片地址);font-familiy:字体;font-size:字体大小;}

    2、a:link{}/* 全局超链接设置 */
          a:hover{}
          a:visited{}
    #XXX{定义普通状态字体和这块儿区域的样式}   -------这个#XXX{}是本身存在的,下面的三个是后添加的
    #XXX a:link{定义链接字体样式}
    #XXX a:hover{定义鼠标移到链接时的字体字体样式}
    #XXX a:visited{定义已访问过的链接}

    3、布局
           (1)、页面居中,边拦居左
    #wrapper {778px;margin:auto;}
       #head{}
       #main{}
            #sidebar {float:left;200px;}
            #content {margin:0 0 0 205px;}
      #footer{}

           (2)、页面居中,边拦居右
    #wrapper {778px;margin:auto;}
       #head{}
       #main{}  
            #sidebar {float:right;200px;}
            #content {margin:0 205px 0 0;}
       #footer{}

           (3)、页面全屏,边拦居右
    #head{}
    #main{}
          #sidebar {float:right;200px;}
          #content {margin:0 205px 0 0;}
    #footer{}

           (4)、页面全屏,边拦居左
    #head{}
    #main{}
        
    #sidebar {float:left;200px;}
         #content {margin:0 0 0 205px;}
    #footer{}

    4、#sidebar边栏
    #sidebar h2{}/* 边栏头部 */
         .sidesub{}/* 边栏框体 */
         .sidesub h3{}/* 边栏头部标题 */
         .sidesub h3 span{}/* 边栏头部标题内容 */
         .sidesub_c{}/* 边栏头部内容项 */
         .sidesub. space{}/* 边栏底部 */
    #sfooter{}/* 边栏底部*/
    边栏个别设置以id=lastestpost为例
    #lastestpost{}
    #lastestpost h3{}
    #lastestpost h3 span{}
    #lastestpost _c{}
    #lastestpost .spaces{}
    最新发表lastestpost
    最近推荐highlight
    最新回复comment
    统计信息total
    日志搜索search
    友情链接links
    其他信息other

    5、#content
    #chead{}/* 内容头部及内容 */
    #log{}/* 日志部分 */
      #loghead{}/* 日志部分头部 */
      #loghead span{}/* 日志部分头部内容 */
      #log.notes{}/* 日志部分公告*/


      .normallog{}/* 普通日志列表 */
                    .normallog h4{}/* 列表之标题和时间 */
          .normallog h4.time{}/* 时间和按钮 */
          .normallog h4 a{}/* 标题 */
              .normallog h5{}/* 列表之栏目与作者 */
                            .normallog h5 .auther{}/* 栏目 */
                            .normallog h5 .category{}/* 作者 */ 
          .normallog .text{}/* 列表之简介 */
          .normallog h6{}/* 列表之计数 */
                            .normallog h6{}/* 回复 */
                            .normallog h6 .track_c{}/* 引用 */
                            .normallog h6 .read_c{}/* 阅读 */
     
       .photolog {} /* 图片日志列表 */
         .smallimages {}/* 图片缩略图 */
         
    .photolog h3 {} /* 图片之标题  */
                   
    .photolog ul {}/* 图片之计数和时间 */
                          
    .photolog .hits {} /* 阅读  */
                          
    .photolog .commrnts {}/* 回复 */
                          
    .photolog .posttime {} /* 时间 */
                
     .photolog p {} /* 图片之简介 */

           .loglog {} /* 日志内容 或 */
                 
     .loglog h4 {} /* 日志之标题和时间 */
                           
    .loglog h4 .time {}/* 时间和按钮 */
                           
    .loglog h4 a {} /* 标题 */
                  
    .loglog .text {} /* 日志之简介 */
                   .
    loglog h6 {} /* 日志之计数 */
                            
    .loglog h6 .auther {}/* 栏目 */ 
                           
    .loglog h6 .category {} /* 作者 */
                           
    .loglog h6 .commment_c {}/* 回复 */
                           
    .loglog h6 .track_c {} /* 引用 */
                           
    .loglog h6 .read_c {} /* 阅读 */

    6、底部
    #footer{}/* 底部框体 */
    #footer p{}/* 底部内容 */

    CSS具体

    1、FONT:
    字体属性

    颜色和背景属性

    文本属性

    容器属性

    填充距属性

    边框属性

    分级属性

    鼠标

    鼠标属性

    定位属性

    滤镜:filter:filtername(parameters)
    滤镜属性列表

  • 相关阅读:
    leetcode-19-merge
    leetcode-18-remove
    R-codes-tips
    python-bioInfo-codes-2
    Java-framework-Vaadin
    leetcode-17-BST
    生物信息学-知识笔记-1
    leetcode-16-greedyAlgorithm
    perl-tips-1
    计算机网络HTTP、TCP/IP包
  • 原文地址:https://www.cnblogs.com/21xz/p/1861644.html
Copyright © 2011-2022 走看看