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章 PCI总线的数据交换

    PCI Agent设备之间,以及HOST处理器和PCI Agent设备之间可以使用存储器读写和I/O读写等总线事务进行数据传送.在大多数情况下,PCI桥不直接与PCI设备或者HOST主桥进行数据交换, ...

  2. JSP标签c:forEach报错（一）

    1.jsp标签c:forEach报错,具体错误如下: 三月 31, 2014 9:31:14 下午 org.apache.catalina.core.StandardWrapperValve invo ...

  3. 在ASP.NET 中检测手机浏览器(转)

    引言 之前做的项目中需要在浏览器查看PDF文件.在电脑端没有问题,但是手机端网页打开失败. 后来使用了pdf.js,个人认为pdf.js的页面不够清爽,就希望网站能自动检测登录设备,电脑端保持原样,手 ...

  4. View的放大->旋转->还原动画

    以UIButton为例,创建一个类,继承于UIButton /*页面的创建用storyboard*/ .h文件  @interface PTSRecommendButton : UIButton - ...

  5. Web开发工具——Jupyter notebook

    jupyter-notebook 安装及远程访问 Introduction Jupyter Notebook(此前被称为 IPython notebook)是一个交互式笔记本,支持运行 40 多种编程 ...

  6. 【BZOJ4566】找相同字符（后缀自动机）

    [BZOJ4566]找相同字符(后缀自动机) 题面 BZOJ 题解 看到多串处理,\(SA\)就连起来 \(SAM???\) 单串建自动机 然后其他串匹配 对于一个串建完\(SAM\)后 另一个串在\ ...

  7. 论文笔记（3）：STC: A Simple to Complex Framework for Weakly-supervised Semantic Segmentation

    论文题目是STC,即Simple to Complex的一个框架,使用弱标签(image label)来解决密集估计(语义分割)问题. 2014年末以来,半监督的语义分割层出不穷,究其原因还是因为pi ...

  8. 图文详解AO打印（标准模式）

    一.概述   AO打印是英文Active-Online Print的简称,也称主动在线打印.打印前支持AO通讯协议的AO打印机(购买地址>>)首先通过普通网络与C-Lodop服务保持在线链 ...

  9. 【经验随笔】 Tomcat多个APP使用相同名称环境变量导致问题

    背景介绍 之前遇到一个问题,在一个tomcat下部署了两个APP,其中一个APP不能正常从底层接口获取数据.如果将两个APP分到不同服务器上的tomcat部署,又都正常了.分析了一下: 远程调试跟代码 ...

  10. 【高斯消元】BZOJ3503 [Cqoi2014]和谐矩阵

    3503: [Cqoi2014]和谐矩阵 Time Limit: 10 Sec  Memory Limit: 128 MBSec  Special JudgeSubmit: 1197  Solved: ...