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. 3.3.2 PCI设备对不可Cache的存储器空间进行DMA读写

    在x86处理器和PowerPC处理器中,PCI设备对"不可Cache的存储器空间"进行DMA读写的过程并不相同.其中PowerPC处理器对"不可Cache的存储器空间&q ...

  2. Android安全开发之WebView中的大坑

    0X01 About WebView 在Android开发中,经常会使用WebView来实现WEB页面的展示,在Activiry中启动自己的浏览器,或者简单的展示一些在线内容等.WebView功能强大 ...

  3. SetCooperativeLevel函数介绍（设置协作等级）

    函数声明 function SetCooperativeLevel(hWnd: HWND; dwFlags: DWORD): HResult; stdcall; 参数介绍 hWnd        Di ...

  4. APACHE服务器出现No input file specified.的完美解决方案

    启用REWRITE的伪静态功能的时候,首页可以访问,而访问内页的时候,就提示:“No input file specified.” 原因在于使用的PHP是fast_cgi模式,而在某些情况下,不能正确 ...

  5. Error creating bean with name 'com.you.user.dao.StudentDaoTest': Injection of autowired dependencies

    1.错误描述 七月 13, 2014 6:37:41 下午 org.springframework.beans.factory.xml.XmlBeanDefinitionReader loadBean ...

  6. 【原】无脑操作：IDEA + maven + SpringBoot + JPA + Thymeleaf实现CRUD及分页

    一.开发环境: 1.windows 7 企业版 2.IDEA 14 3.JDK 1.8 4.Maven 3.5.2 5.MariaDB 6.SQLYog 二.Maven设置: Maven目录下的con ...

  7. CF384 div2 E. Vladik and cards

    题意 给你一个的排列,求一个满足条件的最长子序列 每种数字的差小于等于,并且每种数字之内是连续的 解法 首先单纯认为用肯定不行的 所以应该考虑二分答案(所求长度具有二分性) 再用dp判断是否可行,这个 ...

  8. html基础加强2

    1.表单元素 表单元素一定要提交在form标签里面 2.id和name 所有元素都有ID,但只有表单元素才有name ID不可以重复,name可以重复 name属性的目的时可以将数据提交到服务器.id ...

  9. 《CLR Via C#》学习--线程开销

    线程内核对象(thread kernel object) OS为系统中创建的每个线程都分配并初始化这种数据结构之一.在该数据结构中,包含一组对线程进行描述的属性. 数据结构中还包含所谓的线程上下文(t ...

  10. Linux之权限管理

    一.文件基本权限 1) 基本权限的修改 第一位"-"为文件类型(-代表文件:d代表目录:l代表软链接文件即快捷方式),后面每3位一组. -rw-r--r-- rw-   u所有者 ...