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. eclipse生成【带有外部jar包】的java可执行jar包

    之前有写过一篇使用eclipse生成java可执行jar包,但是最近的一次使用中无论如何都不成功,当双击执行打成的jar时,弹出如下错误: could not find the main class: ...

  2. linux 更改用户的默认shell

    由于卸载了zsh.导致用户的bash没有更新 用户无法登录.后来通过grup更改.修改/etc/passwd中的用户的shell成功 将下面的红色的更改成bash即可. root:x:::root:/ ...

  3. phpcms V9 默认模板文件目录结构_PHPCms教程

    PHPCMSV9 默认模板目录结构 templates   框架系统模板目录            announce    公告                show.html       内容页  ...

  4. ioctl，unlocked_ioctl 处理方法

    kernel 2.6.35 及之前的版本中struct file_operations 一共有3个ioctl : ioctl,unlocked_ioctl和compat_ioctl 现在只有unloc ...

  5. cookie的设置和获取

    // 创建cookiefunction setCookie(name, value, expires, path, domain, secure) { var cookieText = encodeU ...

  6. hdu5788 level up

    贴下以前写的代码 比赛前我准备着重看的 主席树 树dp 字符串 #include<bits/stdc++.h> using namespace std; typedef long long ...

  7. CF374 Maxim and Array

    贪心 如果有0先变成非0 如果负数的个数 应该变为偶数 之后就是每次将绝对值最小的值加K #include<bits/stdc++.h> using namespace std; cons ...

  8. iOS - Bluetooth 蓝牙

    1.蓝牙介绍 具体讲解见 蓝牙 技术信息 蓝牙协议栈 2.iBeacon 具体讲解见 Beacon iBeacon 是苹果公司 2013 年 9 月发布的移动设备用 OS(iOS7)上配备的新功能.其 ...

  9. Java中==与equals的区别及理解

    区别: "==" 比较的是两个引用在内存中指向的是不是同一对象(即同一内存空间),也就是说在内存空间中的存储位置是否一致. 如果两个对象的引用相同时(指向同一对象时)," ...

  10. ThreadPoolExecutor源码分析

    ThreadPoolExecutor是Java自带线程池FixedThreadPool(固定大小). SingleThreadExecutor(单线程).CacheThreadPool (无限大)的具 ...