css中常见的代码结构及样式(平日总结)

最新推荐文章于 2022-05-20 23:47:44 发布

Jeffery-Lee

最新推荐文章于 2022-05-20 23:47:44 发布

阅读量1k

点赞数

分类专栏： CSS 文章标签： css class div border wrapper float

本文链接：https://blog.csdn.net/jayfery/article/details/6625153

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

0、代码结构

0_1、重置（建立属于自己的重置样式表）

html,body,ul,ol,li,div,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,form,fieldset,table,td,th,img{margin:0;padding:0;border:0;}
select,input,textarea,td,input,p{font-size:12px;}select,input,img{vertical-align:middle;}h1,h2,h3,h4,h5,h6,th{font-weight:normal;}

ul,ol{ list-style:none;}
a{color:#666;text-decoration:none;font-size:12px;}a:hover,.uLine,a.uLine{text-decoration:underline;}a.more{color:#58c1f1;}
.tl{text-align:left;}.tr{text-align:right;}.tc{text-align:center;}.ti{text-indent:2em;}
.fl,.u_fl li{float:left;}.fr{float:right;}

.clear{clear:both;}.clr{height:0;font-size:0;line-height:0;clear:both;overflow:hidden;}.clear-div{height:0;overflow:hidden;}

0_2、排序（根据字母排序你的元素属性,便于查找也阅读）

#header h1 {border-bottom: 1px solid #dedede;color: #000;font-size: 18px;line-height: 24px;margin-right: 48px;position: relative;z-index: 101;}

0_3、组织（html结构上有开始和结束注释）

    /*****Reset*****/
       移除元素的填充（padding）和边距（margin）。
   /*****Basic Elements*****/
     定义基本元素的样式: body, h1-h6, ul, ol, a, p, 等.
   /*****Generic Classes*****/

<div id="header"></div>

0_4、一致性（编码格式统一）

A、CSS属性

#header h1 {border-bottom: 1px solid #dedede;color: #000;font-size: 18px;line-height: 24px;margin-right: 48px;position: relative;z-index: 101;}

(我喜欢的)

#header h1 {border-bottom: 1px solid #dedede;

color: #000;

font-size: 18px;

line-height: 24px;

margin-right: 48px;

position: relative;

z-index: 101;}

B、HTML命名

wrapper 最外层

header 页头

main 主体

m_1 第一屏(即主体第一部分main_1)

m1_L 第一屏_左边栏(main_1_left)

m1l_t 第一屏_左边栏_头部(main_1_left_title)

footer 页脚

C、图片命名

h_ 页头的图片

m_ 主体的图片 (m_1_img.jpg,m_1_form.gif)

f_ 页脚的图片

1、整体布局
   <div id="wrapper">
       
       <div id="header"></div>
       
       
       <div id="main">
           
           <div class="m_1">
               
               <div class="m1_L fl">
                   <div class="m1l_1"></div>
               </div>
               
               
               <div class="m1_R fr"></div>
               
               <div class="clr"></div>
           </div>
           
       </div>
       
       
       <div id="footer"></div>
       
   </div>
2、有标题的直角框

.m1l3_t{background:url(../image/m_1_l_bg.jpg) repeat-x 0 0; width:333px;height:30px; padding:0px; margin:0px; margin-left:0px;}
.m1l3_t span{ line-height:30px;}
.m1l3_c{ padding:10px 10px 5px 10px;}
   <div style="border:1px solid #C7DC9B;height:155px;">
       
       <div class="m1l3_t">
           <span style="padding-right:10px;" class="fr"><a href="">更多新概念>></a></span>
           <span style="padding-left:28px;color:#105095; font-size:14px; font-weight:bold;">最新报名</span>
       </div>
       
       <div class="m1l3_c">
           <ul>
           <li ><span style="width:80px;"><a href="" style="color:#105095;">·[昂立教育]</a></span><span

style="width:160px;">大学英语四级</span><span style="width:40px;">王刚</span></li>
           <li ><span style="width:80px;"><a href="" style="color:#105095;">·[昂立教育]</a></span><span

style="width:160px;">大学英语四级</span><span style="width:40px;">王刚</span></li>
           <li ><span style="width:80px;"><a href="" style="color:#105095;">·[昂立教育]</a></span><span

style="width:160px;">大学英语四级</span><span style="width:40px;">王刚</span></li>
           <div class="clr"></div>
           </ul>
       </div>
   </div>

.sbl_2_t{ background:url(../mbakaofu/images/m_1_l_title.jpg) no-repeat; width:321px; height:29px;}
.sbl_2_t span{ margin-left:40px; line-height:29px; color:#fff; font-weight:bold;}
.sbl_2_c{ background-color:#F4FBFF; border-left:1px solid #A1DCFF; border-right:1px solid #A1DCFF; padding-left:7px; padding-

top:5px; padding-right:5px; padding-bottom:5px;}
   <div class="sbl_2">
       <div class="sbl_2_t">
           <span>MBA MPA MPAcc辅导报名排行</span>
       </div>
       <div class="sbl_2_c">
           <div style="306px;background-color:#fff;margin-top:6px;">
               <div style="306px;background-color:#fff;height:0px;overflow:hidden;"></div>
               <div class="no1">
                   <span class="index">1</span>
                   <span class="fl"><a href="http://yanxiu.edulife.com.cn/School_349.html">昂立面授班

           </a></span><span class="fr">97人</span>
               </div>
               <div class="no1">
                   <span class="index">2</span>
                   <span class="fl"><a href="http://yanxiu.edulife.com.cn/school_979.html">驭博面授班

           </a></span><span class="fr">67人</span>
               </div>
           </div>
       </div>
   </div>

3、有标题的圆角框

.m1r_2_t{background:url(../images/m_1_r_t.jpg) no-repeat; width:636px; height:12px; overflow:hidden;}
.m1r_2_m{background:url(../images/m_1_r_m.jpg) repeat-y; width:636px;}
.m1r_2_c{ padding:0px 38px 5px 30px;}
.m1r_2_c ul{ padding-top:10px; float:left;}
.m1r_2_c ul li{line-height:24px; float:left; width:250px;}
.m1r_2_b{background:url(../images/m_1_r_b.jpg) no-repeat; width:636px; height:12px; overflow:hidden;}

   <div class="m1r_2">
       
       <div class="m1r_2_t"></div>
       
       <div class="m1r_2_m">
           <div class="m1r_2_c">
               <div>
               <ul>
               <li><strong style="margin-right:4px;">·</strong>专业1对1 迅速提高成绩 </li>
               <li><strong style="margin-right:4px;">·</strong>潜力分析、全职教师</li>
               <div class="clr"></div>
               </ul>
               <div class="clr"></div>
               </div>
           </div>
       </div>
       
       <div class="m1r_2_b"></div>
   </div>

4、选项卡
   <ul class="mll_t">
       <li class="on">本周推荐</li>
       <li>本月推荐</li>
       <div class="clr"></div>
   </ul>
   <div style="padding:10px 20px;" class="info">
       <img src="image/m_1_l_school.jpg" width="148" height="60" alt="" border="0">
   </div>
   <div style="padding:10px 20px;" class="info">
       <img src="image/m_1_l_school2.jpg" width="148" height="60" alt="" border="0">

</div>

5、JS图片切换插件

<script src="http://www.edulife.com.cn/include/jquery.js" language="javascript"></script>
<script src="http://www.edulife.com.cn/include/jquery.KinSlideshow-1.0.js" language="javascript"></script>
<script>
   $(function(){
           $("#KinSlideshow").KinSlideshow({
                   moveStyle:"right",
                   titleBar:{titleBar_height:24,titleBar_bgColor:"#fff",titleBar_alpha:0.5},
                   titleFont:{TitleFont_size:12,TitleFont_color:"#000",TitleFont_weight:"bold"},
                   btn:{btn_bgColor:"#E8ECF0",btn_bgHoverColor:"#657A8B",btn_fontColor:"#203846",btn_fontHoverColor:"#FFFFFF",btn_borderColor:"#D1D7DD",btn_borderHoverColor:"#D1D7DD",btn_borderWidth:1}
           });
       })
</script>

<div style="VISIBILITY: hidden" id="KinSlideshow">
   <a href="" target="_blank"><img src="" alt="" /></a>
   <a href="" target="_blank"><img src="" alt="" /></a>
   <a href="" target="_blank"><img src="" alt="" /></a>
</div>