10个最常用的CSS className

    技术2022-05-12  13

     很多做前端开发的在为页面元素定class的时候经常会拿不定主意,导致随意使用class,一个好的class要能够描述出某个特定元素的表现, 在符合团队开发流程、规范的情况下也要注意在工作中形成一套自己的风格,下面是我最经常使用的个人认为命名比较恰当和有一定作用的10个class。

      1.class=”fixed”

      fixed这个class几乎出现在没个样式文件中,用在为包含浮动子元素的容器元素清除浮动,样式如下

     

    以下为引用的内容:

    .fixed:after{  content:".";  display:block;  height:0;  clear:both;  visibility:hidden;  } .fixed{  display:block;  } /*  */ .fixed{  min-height:1%;  } * html .fixed{  height:1%;  }

    这个样式就可以用在下面的情形,每个li都是浮动的:

     

    以下为引用的内容:

     <ul class="fixed">  <li><img src="images/img_01.jpg" alt="First Thumb" /></li>  <li><img src="images/img_02.jpg" alt="Second Thumb" />    ...</li> </ul>

      2.class=”alt”

      alt是”alternative”(交替)的简称,这个class用在有一组样式一样的元素,需要为其中的某几个设定特别的样式,比如一组向左浮动的图片中需要有一张是向右浮动,可以这样:

     

    以下为引用的内容:

     #content img{  float:left;  display:inline;  margin-right:10px;  border:1px solid #ccc;  padding:1em 0;  background:#fff;  } #content img.alt{  float:right;  margin-right:0;  margin-left:10px;  }

      3.class=”selected”

      这个最经常用的,用来处理mouseover或选中元素的效果。

     

    以下为引用的内容:

    <li class="selected"><a href="/about">About Us</a></li>

      4.class=”first”, class=”last”

      直到99.9% 的浏览器支持:first-child和:last-child这两个伪类之前,class=”first”, class=”last”用的地方还是很多的。

      5.class=”image”

      平常选择图片元素一般用类似(#container img)这样的标签选择器,但是我这里的class=”image”是用在包含图片的容器元素,假如你正在做一个新闻列表,需要在新闻标题下面加一行带图片和说明文字,并且向右浮动,可以这样做:

     

    以下为引用的内容:

      <img src="/images/img_me.jpg" alt="my funny face" />  This is me trying to look cool!    The rest of the content here  ...

      6. class=”inner”

      inner也是经常使用的class,而且大部分上是用来制造视觉上的额外效果,用来给嵌套在容器里的子容器定义样式(比如制作双背景图片效果):

      7.class=”link”

      link跟image类似,我用来嵌套一个A标签,最经常用来制作”Read More”链接:

     

    以下为引用的内容:

    <a href="#">Read more...</a>

      8.class=”one”, class=”two”, class=”three”…

      这些class用在需要区别每个子元素的列表项,比如用移动背景图片来制作导航菜单:

     

    以下为引用的内容:

    <ul>  <li class="one"><a href="#">Home</a></li>  <li class="two"><a href="#">About</a>    ...</li> </ul>

      9.class=”even”, class=”odd”

      用来实现隔行换样式,一般用在表格和列表:

     

    以下为引用的内容:

     <ul>  <li class="even">Content</li>  <li class="odd">Content</li>  <li class="even">Content</li>  <li class="odd">Content</li> </ul>

      10.class=”section”

      一般用在为指定内容中特定部分添加特定的样式:

     

    以下为引用的内容:

    <div class="section">  content here...</div>


    最新回复(0)