zoukankan      html  css  js  c++  java
  • css命名简单框架

    转自许未来

    /*本文只针对个别在跨浏览器不同效果的元素设置进行注释和注意要点,其他均不做修改注释*/
    /*本文针对公司其他成员css水平,进行弱化处理。目的是为了提高工作效率。*/
    /*下拉菜单请参照:http://bbs.blueidea.com/thread-2854011-1-1.html*/
    /*{}(大括号)内为空时,除ul元素外,其他均自己定义*/
    引用

    body,ul,ol,p,span,dd,dt,h1,h2,h3,h4,h5,h6{ margin:0px; padding:0px;}/*初始化元素/内联外联值为0/但最好加上font-size:XXpx*/
    div{ overflow:hidden}
    body,body a{ color:#000; font:Arial, Helvetica, sans-serif 12px; text-decoration:none}
    body a:link{ text-decoration:none;}
    body a:hover{}
    body a:visited{}/*全局文字属性结束*/
    ol,li{ list-style:none;}/*如需居内则为list-style:inside*/
    p{ text-indent:2em}/*首行缩进两字符宽度,无需更改,使用时可按“<p class="xxx"></p>” 设置进一步样式*/
    /**************************以上均为全局属性,一般无需修改**************************************/
    h1{ font:"宋体" 16px bold; line-height:30px; text-align:center; border-bottom:1px dashed #ccc;}/*设置默认H1样式*/
    h2{ font:"宋体" 14px bold; line-height:26px; text-align:left; border-bottom:1px solid #ccc}
    h3{}
    h5{}
    h4{}

    /***************************hx样式,如颜色不同请自行增加,根据实际情况进行简写****************************/
    .fontnews{}
    .fontnews li{}
    .fontnews li a{}
    .fontnews li a:hover{}
    /*例:
    .fontnews{}
    .fontnews li{ height:14px; padding:4px 0px; border-bottom:1px dashed #ccc;}
    .fontnews li a{ text-decoration:none; font:12px; color:#000;}
    .fontnews li a:hover{ color:#ff0000}
    */
    /*新闻列表,如需高级设置请参照:http://bbs.blueidea.com/thread-2848618-1-1.html*/

    .piclist{}
    .piclist div{}/*图片列表*/
    /*例:
    .piclist{ overflow:hidden; padding:10px;}/*piclist全局
    .piclist div{ padding-right:10px; overflow:hidden; float:left;}/*使用嵌套思维,piclist下的所有div的属性,如有不同,请用#+ID号来区别,此方法可解决IE6下piclist 无法解析高度的情况。不需任何hack
    .piclist a{ color:#cc0000; line-height:22px; font-weight:bold; font-size:12px;}/*piclist下文字a及链接属性简单版。
    .piclist a:hover{ color:#000; }/文字及链接鼠标状态
    */
    /***************************图片列表****************************/

    .fontview{}/*view页*/
    /*例
    .fontview{ padding:10px; line-height:26px; font:14px; color:#555; text-decoration:none;}
    */


    /***********************************通用型*************************************/
    .gm{}
    .gmfl{ float:left;}/*左浮动*/
    .gmfr{ float:right;}/*右浮动*/
    .gmpadding10px{ padding:10px;}/* 内联10px*/
    .gmflpadding10px{ padding:10px; float:left}/*内联10px并左浮动*/
    .gmfrpadding10px{ padding:10px; float:right}/*内联10px并右浮动*/
    /************************************************************/
    .img{}
    /**************IMG*****************/
    /*
    例:
    [color=#FF1493].img
    { padding:2px; border:2px solid #ccc; background:#fff;}内联2px,背景白色,直线边框粗1px;
    */[/color]

    .select{}
    .input{}/*输入文本框*/
    .search{}/*搜索*/
    .insearch{}/*搜索内*/
    .searchselect{}/*搜索条*/
    .serachbuttom{}/*搜索按钮*/
    /*************************select/表单/下拉等******************************/

    .listbox{}/*表格整体框架*/
    .listbox-table{}/*表格的宽度*/
    .listbox-header{}/*表格头部文字样式*/
    .listbox-entry{}/*表格正文文字样式*/
    /********************table*********************/

    .clear{ clear:both;}

    .clearleft{ clear:left}
    .clearright{ clear:right}
    /*************************清除浮动项**************************/

    /*开始布局layout设置*/
    #wrapper{}/*整体大框架*/
    #inwrapper{}/*大框架内*/
    .top{}/*顶部及banner*/
    .intop{}/*顶部及banner内*/
    .logo{}/*logo*/
    .inlogo{}/*logo内*/
    .banner{}/*banner*/
    .menu{}/*导航:*/
    .inmenu{}/*导航内*/
    .Menuul{}/**/
    .Menuul li{}/**/
    .Menuul li a{}/**/
    .inmenu_xiala{}/*下拉菜单*/
    .Inmenu_xialaul{}/**/
    .Inmenu_xialaul li{}/**/
    .Inmenu_xialaul li a{}/**/
    .mainWrapper{}/*主体内容*/
    .inmainwrapper{}/*主体内容内*/
    .sideleft{}/*左侧拦*/
    .insideleft{}/*左侧内*/
    .sideright{}/*右侧栏*/
    .insideright{}/*右侧内*/
    .sidecenter{}/*中间*/
    .insidecenter{}/*中间内*/
    .foot{ clear:both}/*底部*/
    .infoot{}/*底部内*/
  • 相关阅读:
    postman一健导入swagger api所有接口
    pycharm 通过project interpreter国内镜像源设置
    Linux常用软件tree,autojump,lrzsz安装
    文献下载好用网站推荐
    SCIP,Clp,Gurobi和Cplex安装
    Linux下SuperLU安装
    【微服务理论】康威定律
    项目实战:动态系统的设计(类似朋友圈)
    认知提升:工作和薪资
    博客园美化 Cnblogs-Theme-SimpleMemory
  • 原文地址:https://www.cnblogs.com/yuzhongwusan/p/1276759.html
Copyright © 2011-2022 走看看