css 一些应用实例

　　基本抄自http://www.w3school.com.cn/css/css_align.asp 。。把这些知识消化吸收然后以自己的话来解释一下

■　　对齐

　　●  用margin属性进行居中对齐：

.center

{

margin-left:auto;

margin-right:auto;

width:70%;

background-color:#b0e0e6;

}

　　这样做可以让center类的元素进行居中对齐。如果width被设置成100%，那么自然是没有效果的。

　　●  用position属性左右对齐

.right

{

position:absolute;

right:0px;

width:300px;

background-color:#b0e0e6;

}

　　这个很好懂，就是用绝对定位把某个元素固定地对齐其父元素的右侧。

　　●  用float属性左右对齐

　　和绝对定位类似的，float也可以左右对齐，而且其可以支持多个元素一起float之后自动地共同整合显示在页面上。而绝对定位会互相覆盖。

■　　分类显示

　　css可以让不同地元素有不同的显示，比如之前提到过好几次的行内元素和块级元素的互相转换，display属性的作用从本质上来说就是一个分类显示。

　　除了熟悉的display之外，还有以下这些属性也可以让页面分类显示：

　　cursor　　cursor属性设置光标的类型。最常用的就是设置某个元素的hover伪类的cursor属性了。比如span:hover{cursor:pointer}就可以使当光标移动到这个span上方的时候变成一只手的光标。cursor的取值有很多http://www.w3school.com.cn/cssref/pr_class_cursor.asp。常用的有pointer（手指）,wait（转菊花）, move（十字箭头，用于移动），text（I字编辑光标）等等。

　　visibility　　设置某个元素是否可见，可选值有hidden和visible。注意，visibility是hidden并不意味着这个元素不占用文档的空间，这部分空间还是被它所占用但是人看不到了

■　　导航栏

　　自定义一个导航栏用到了以下几个css的点：列表项图标省去，列表项向左浮动，超链接转换块级元素，超链接不同状态（伪类）的不通背景设置。示例如下：

<!DOCTYPE html>

<html>

<head>

<style>

ul{

list-style-type:none;

margin:0;

padding:0;

overflow:hidden;

}

li{

float:left;

}

a:link,a:visited{

display:block;

width:120px;

font-weight:bold;

color:#FFFFFF;

background-color:#bebebe;

text-align:center;

padding:4px;

text-decoration:none;

text-transform:uppercase;

}

a:hover,a:active{

background-color:#cc0000;

}

</style>

</head>

<body>

<ul>

<li><a href="#home">Home</a></li>

<li><a href="#news">News</a></li>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>

</ul>

</body>

</html>

　　效果：

　　

　　

■　　图片库

　　http://www.w3school.com.cn/css/css_image_gallery.asp

　　这个图片库比较全地用了对齐，浮动，边距调整等操作，可以看看源码学习参考一下

■　　更多css参考

　　http://www.w3school.com.cn/cssref/index.asp

【CSS】 CSS的一些应用实例和参考的更多相关文章

  1. Jquery + css 日期控件用法实例.zip

    /*==============================================================================** Filename:common.j ...

  2. css 伪类选择器:checked实例讲解

    css :checked伪类选择器介绍 css :checked伪类选择器用于选择匹配所有被选中的单选按钮(radio)或复选框(checkbox),你可以结合:checked伪类选择器和:not选择 ...

  3. 十分钟玩转 jQuery、实例大全(参考自博主索宁)

    十分钟玩转 jQuery.实例大全(参考自博主索宁) 一.简介 书写规则 支持链式操作: 在变量前加"$"符号(var $variable = jQuery 对象): 注:此规定并 ...

  4. Bulma CSS - CSS类

    Bulma CSS框架教程 Bulma CSS – 简介 Bulma CSS – 开始 Bulma CSS – CSS类 Bulma CSS – 模块化 Bulma CSS – 响应式 Bulma是一 ...

  5. CSS Reset的相关概念及实例

    原文 简书原文:https://www.jianshu.com/p/fdb79010895c 大纲 1.什么是css reset? 2.CSS reset的实例 1.什么是css reset? 个人理 ...

  6. css系列-间隔与间距实例

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. CSS Clip剪切元素动画实例

    1.CSS .fixed { position: fixed; width: 90px; height: 90px; background: red; border: 0px solid blue; ...

  8. CSS Sprite、CSS雪碧图应用实例

    CSS Sprites技术被国内一些人称为CSS雪碧图,其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”, ...

  9. css sprite讲解与使用实例

    转自:http://www.manongjc.com/article/886.html 一.什么是css sprites css sprites直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或 ...

随机推荐

  1. Android开发之仿微信显示更多文字的View

    最近开发需求中要模仿微信朋友圈文章的展开收起功能,网上找了找,发现都有问题,于是乎自己在前辈的基础上进行了一定量的修改,下边将源码贴出来供大家参考:1.主Activity布局文件就不粘贴了,很简单,就 ...

  2. R︱sparkR的安装与使用、函数尝试笔记、一些案例

    本节内容转载于博客: wa2003 spark是一个我迟早要攻克的内容呀~ ------------------------------------- 一.SparkR 1.4.0 的安装及使用 1. ...

  3. 打开CSDN论坛出现403

    打开CSDN论坛出现403 在查找资料的过程中,出现"403-禁止访问"

  4. 利用Eclipse中的Maven构建Web项目报错（一）

    利用Eclipse中的Maven构建Web项目 1.在进行上述操作时,pom.xml一直报错 <project xmlns="http://maven.apache.org/POM/4 ...

  5. ATA接口寄存器描述

    ATA接口寄存器描述 .ATA接口的三种数据传输方式 位. )MDMA(Multiword DMA)传输,用于数据传输.ATA主机控制器向ATA设备下达MDMA传输命令后,等待设备向主机发送DMARQ ...

  6. TortoiseSVN设置忽略文件和目录文件夹

    TortoiseSVN设置忽略文件和目录文件夹  在多数项目中你总会有文件和目录不需要进行版本控制.这可能包括一些由编译器生成的文件,*.obj,*.lst,或许是一个用于存放可执行程序的输出文件夹. ...

  7. 你还在为如何区分ASCII编码、GB2312编码、Unicod、UTF-8编码而烦恼吗，一篇文章让你柳暗花明

    字符编码 我们已经讲过了,字符串也是一种数据类型,但是,字符串比较特殊的是还有一个编码问题. 因为计算机只能处理数字,如果要处理文本,就必须先把文本转换为数字才能处理.最早的计算机在设计时采用8个比特 ...

  8. OWA 无法连接到Exchange

    Outlook WebAccess中无法连接到Microsoft Exchange.如果问题仍然存在,请联系您的组织的技术支持. 1.   在Exchange邮件服务器,收件人配置--邮箱--右击用户 ...

  9. JavaScript设计模式(8)-装饰者模式

    装饰者模式 1. 作用: 可用来透明地把对象包装在具有同样接口的另一对象之中,这样可以给一个方法添加一些行为,然后将方法调用传递给原始对象. 可用于为对象增加功能,用来代替大量子类. 装饰者对其组件进 ...

  10. type="submit" button的用法

    原因:关于页面刷新,或者点击某个按钮,开始能现实值,但几秒钟就会刷新掉的原因,这是因为sunmit 和button自带刷新属性,所以说少用就好,或者用returen fales 来断掉接下来的操作,当 ...