分类: 好好学习预览模式: 普通 | 列表

ul和li网页布局

LiI代码的格式化:

A).格式化列表符

ul li{
list-style-type:none;

查看更多...

分类:好好学习 | 固定链接 | 评论: 2 | 引用: 0 | 查看次数: 299

简单学习css组合与CSS嵌套的写法

CSS组合

  你不必重复有相同属性的多个选择符,你只要用英文逗号(,)隔开选择符就可以了。

  比如,你有如下的代码:h2 { color: red; }
.webjx { color: red; }
.webjxcom { color: red; }

  则你可以这样写:h2,.webjx,.webjxcom { color: red; }

 使用组合,你可以一次定义多个CSS,为你节省很多字节和时间。

查看更多...

分类:好好学习 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 100

常用的10个CSS类名

很多做前端开发的在为页面元素定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”

查看更多...

分类:好好学习 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 101

CSS定位属性

CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务。

  定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然,这个功能非常强大,也很让人吃惊。要知道,用户代理对 CSS2 中定位的支持远胜于对其它方面的支持,对此不应感到奇怪。

  另一方面,CSS1 中首次提出了浮动,它以 Netscape 在 Web 发展初期增加的一个功能为基础。浮动不完全是定位,不过,它当然也不是正常流布局。我们会在后面的章节中明确浮动的含义。

一切皆为框

  div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容 ,即“块框”。与之相反,span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。

  您可以使用 display 属性 改变生成的框的类型。这意味着,通过将 display 属性设置为 block,可以让行内元素(比如 <a> 元素)表现得像块级元素一样。还可以通过把 display 设置为 none,让生成的元素根本没有框。这样的话,该框及其所有内容就不再显示,不占用文档中的空间。

  但是在一种情况下,即使没有进行显式定义,也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素(比如 div)的开头。即使没有把这些文本定义为段落,它也会被当作段落对待:

查看更多...

分类:好好学习 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 100

检验CSS书写是否标准合理

CSS用来定义网站的用户界面,并实现页面展现与内容的分离。CSS在几乎所有的网站都会用到,下面让我们花些精力来确保你的CSS书写的是否标准、合理。这些提示对CSS初学者同样会有很大的帮助。

  1. 样式表索引

    样式表头部索引定义可以帮助你和其它人弄清楚该样式表文件的相关信息,它一般是一段格式化的CSS注释文本。

    • 给出该css文件作者的相关信息
    • 定义站点的布局(几栏,静态布局/动态布局)
    • 记录文件版本号(利于多作者协作及将来更新)
    样式表索引

    样式表索引

  2. 命名锚点

    命名锚点是用来规划整个CSS文件结构的(就好像书签一样),从而使整个CSS文件获得良好的组织。

    命名锚点一般也是书写在样式表头部的索引注释中。CSS本身没有内部的锚点系统,所以我一般采用下面的小技巧来完成。在头部索引拷贝你想找到的锚点,并在整个文档中查找,从而获取该CSS节。(描述的可能不清晰,看下面图应该就明白了)

    命名锚点定义及查找

    命名锚点定义及查找

  3. 避免多余Class定义

    很多人(尤其是新手)在书写CSS中会定义不必要的Class来样式化一些元素。

    查看更多...

分类:好好学习 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 96

CSS背景全攻略

译文链接:css 背景全攻略

背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一。这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachment 等的属性,也会介绍一些有关背景(background)的常用技巧,以及 css3 中的 背景(background)(包含4个新的背景(background)属性)。

 

css2 中的背景(background)

概述

CSS2 中有5个主要的背景(background)属性,它们是:

* background-color: 指定填充背景的颜色。

* background-image: 引用图片作为背景。

* background-position: 指定元素背景图片的位置。

* background-repeat: 决定是否重复背景图片。

* background-attachment: 决定背景图是否随页面滚动。

这些属性可以全部合并为一个缩写属性: background。需要注意的一个要点是背景占据元素的所有内容区域,包括 padding 和 border,但是不包括元素的 margin。它在 Firefox, Safari ,Opera 以及 IE8 中工作正常,但是 IE6 和 IE7 中,background 没把 border 计算在内。

查看更多...

分类:好好学习 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 97

CopyRight 2006 - 2012. All rights reserved by nov99.com. 冀ICP备06019649号