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. java代码中init method和destroy method的三种使用方式

    在java的实际开发过程中,我们可能常常需要使用到init method和destroy method,比如初始化一个对象(bean)后立即初始化(加载)一些数据,在销毁一个对象之前进行垃圾回收等等. ...

  2. Davinci DM6446 Codec Engine双核通信环境的搭建

    根据前几篇文章,一个DM6446的系统已经架构完成.但是有很多人都喜欢TI的机制,毕竟双核软件开发对很多工程师来说是非常麻烦的事情,既然TI提供开发套件和开发包,那么直接做OEM就可以了,底层的东西不 ...

  3. 问题解决了，可是为什么呢？could not find the main class.program will exitmain

    今天重新学习socket编写简单的在线聊天,简单功能实现的情况下,一时心血来潮便想要把这程序打成可执行的jar包,以便于在桌面直接双击运行. 参照自己之前写的那篇<>打好两个jar包以后却 ...

  4. FusionCharts重写单系列图

    /** * @Title:FusionChart.java * @Package:com.yhd.chart.model * @Description:封装FusionChart单系列图 * @aut ...

  5. Java之split方法

    Java之split方法 1.间隔号"." (1)str.split(".") String str = "10.156.35.87"; S ...

  6. C#之AES256位加密解密

    密码学中的高级加密标准(Advanced Encryption Standard,AES),又称Rijndael加密法,是美国联邦政府采用的一种区块加密标准.这个标准用来替代原先的DES,已经被多方分 ...

  7. ClientAbortException: java.net.SocketException: Software caused connection abort: socket write erro

    1.错误描述 ClientAbortException: java.net.SocketException: Software caused connection abort: socket writ ...

  8. mini设计模式

    创建型 单例模式 饿汉式 public class Singleton () { private static Singleton instance = new Singleton(); privat ...

  9. Android破解学习之路（七）—— 乐秀视频编辑 内购破解 专业版 价值25元的破解

    按照之前的支付宝破解,搜索9000的十六进制,之后... 但是,这样测试的时候,没有破解成功,便是继续研究 搜索关键字支付失败,之后找到了指定的smali文件,观察了许久,发现里面有个switch跳转 ...

  10. 【BZOJ3626】LCA（树链剖分，Link-Cut Tree）

    [BZOJ3626]LCA(树链剖分,Link-Cut Tree) 题面 Description 给出一个n个节点的有根树(编号为0到n-1,根节点为0).一个点的深度定义为这个节点到根的距离+1. ...