同样是拿xMind写的   明天上传 CSS+DIV 总结   今天只有CSS了

但是首先涉及一下浏览器原理：  还有好多不知道的模块 但是页面的核心模块就这些了：（些许 需要补充 请关照   ）

//===================下面是CSS总结   算是 一览图 吧========不得不说标记语言很强大    也很简单  解析速度也很快==============

//======下面结合了 div 和 css组合    一览图 还没整理好  =====================

//------------------------------------- Html_Css.html --------------------------

<!DOCTYPE HTML>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>CSS属性引用综合举例-- 第一栏目的区块</title>

    <link rel="stylesheet" href="style.css" type="text/css" />

    <link rel="stylesheet" href="" type="text/css" />

</head>

<body>

<div id="wrapper">

	<div class="tit">

		<h3>

			<a href="">栏目标题</a>

		</h3>

	</div>

	<div class="list">

		<ul>

            <li><a href="">第一个选项列表</a></li>

            <li><a href="">第二个选项列表</a></li>

            <li><a href="">第三个选项列表</a></li>

            <li><a href="">第四个选项列表</a></li>

            <li><a href="">第五个选项列表</a></li>

            <li><a href="">第六个选项列表</a></li>

            <li><a href="">第七个选项列表</a></li>

            <li><a href="">第八个选项列表</a></li>

            <li><a href="">第九个选项列表</a></li>

            <li><a href="">第十个选项列表</a></li>

            <li><a href="">第11个选项列表</a></li>

            <li><a href="">第12个选项列表</a></li>

		</ul>

        <div class="nav"></div>

	</div>

</div>

</body>

</html>

　　

//--------------------------  style.css  ---z自己写的注释 见谅------------------------------

body{

    border : 10px solid  red ;

    text-align : center;/*/这里是为了让IE居中，内部区块居中显示而专门设计 兼容性设计 这样设置有 内部所有的文字都居中了*/

    font : 12px Arial,宋体；/*  设置字体为Arial  如果电脑没有此字体 就用宋体 代替*/

}

#wrapper {

    margin :0 auto; /* 代表wrapper框架与其父框架 之间的填充为 上下相距0像素 左右自动匹配像素 这样FF就会剧中对齐*/

    border : 5px double green;

    width :300px ;/*wrapper的框架宽度是 300 像素*/

    margin : 0 auto ; /* 代表wrapper框架与其父框架 之间的填充为 上下相距0像素 左右自动匹配像素 这样FF就会剧中对齐*/

    padding : 0px ; /* 字体和wrapper框架之间的距离是0px*/

    text-align : left; /*这里是为了刚才IE居中设置  产生的所有文字都居中显示一个补救措施，让文字按照正常 靠左显示&*/

}

/*内容为王    内容不可被遮挡  就像照相一样  人的头要露出来  浏览器会自动给内容显示的空间   如果自己设置大小会可能出现和与其不一样的效果*/

.tit {

    float : left;

    width : 100%;

    height : 24px;

    background : url(./images/titbg.gif);

}

.tit h3 {

    margin : 0px;

    padding : 0px;

    line-height : 24px; /*能让该行内部的内容数值居中显示，如果行高和外部区块同样高的话 内容就会在外部区块中 垂直居中显示*/

    font-size : 12px;      /*字体大小*/

    text-indent : 30px;/* 缩进30个像素点*/

    background : url(./images/tittb.gif)  no-repeat 3% 46%; /*no—repeat 不重复绘制  就是只绘制一次    3% 是在父的框子内水平 从左到右3%的位置  50% 就是水平 从上到下50%的距离 */

}

/*=========================头设计完成===============================*/

/*=========================设计下个div===============================*/

.list{

    width : 298px !important/* !important的意思L在非IE内核浏览器中的宽度 Ie不识别 这个标签*/

    width : 300px ;/* 在IE浏览器中的宽度 是指IE浏览器内核 ：trident  webkit：苹果    Firefox  */

    float : left;/* 浮动起来  向左靠*/

    border : 2px solid #d7d7d0;

    border-top : 0px;/* 上边框消失*/

}

.list ul{ /*关联选择符*/

    float : left;

    list-style-type : none;

    margin : 0px;

    padding : 0px;

}

.list ul li {

    float : left;/*!!!!!!div的浮动有继承关系  而其他元素标签没有!!!!!!*/

    line-height : 20px;

    width :40%;

    margin : 0px 5px ;  /*左右为0px   上下分别五个像素点*/

    background : url(./images/sidebottom.gif) repeat-x 0 bottom ;/* 沿着x轴重复绘制  以0点开始 底部*/

}

.list ul li a {

    padding-left : 12px;

    background : url(./images/bullet.gif) no-repeat 0 50%;

}

.nav{

    border :2px solid #99f;

    height : 5px;

    width:99%;

    float: left;

    overflow: hidden;/*在ie中规定 div的最小高度不能小于18px    hidden 是将超出的部分隐藏*/

}

a.link,a.visited{

    text-decoration : none; //文字装饰

    color : #888;

}

a:hover {

    position: relative;

    top : 1px;

    left : 1px;

    text-decoration : underline;

    color : red;

}

效果图：

其中有些都是惯例了　　:

<一> 比如说 body层里面马上就有个 div层 id=wrapper  然后在css中设置 body 标签属性为 text-align=“center”  而wrapper就设置成 margin :0 auto;

这样就保证了 在所有类型的浏览器中的兼容性

<二> 一般设置wrapper 就是第一个div层  宽度是 966px ;    还有就是div的浮动了  等明天整理出来

[原创] CSS总结！！ 有关HTML第二篇 ！！的更多相关文章

  1. 前端第二篇---前端基础之CSS

    前端第二篇---前端基础之CSS 目录 一.css介绍 二.css语法 三.css的几种引入方式 四.css选择器 五.css属性相关 六.盒子模型 拓展 一.css介绍 CSS(Cascading  ...

  2. gradle教程 [原创]（eclipse/ADT下 非插件 非Android Studio/AS）纯手打 第二篇：gradle简单实战

    一个bug 一个脚印的叫你们用gradle. 1介于网络上的很多资料都是老的 不适用与现在的新版本gradle 尤其是有些gradle方法改名了老的用不了 2介于网上都是粘贴复制并且零碎我很蛋疼啊,走 ...

  3. [ 高并发]Java高并发编程系列第二篇--线程同步

    高并发,听起来高大上的一个词汇,在身处于互联网潮的社会大趋势下,高并发赋予了更多的传奇色彩.首先,我们可以看到很多招聘中,会提到有高并发项目者优先.高并发,意味着,你的前雇主,有很大的业务层面的需求, ...

  4. [转]Android开源项目第二篇——工具库篇

    本文为那些不错的Android开源项目第二篇--开发工具库篇,主要介绍常用的开发库,包括依赖注入框架.图片缓存.网络相关.数据库ORM建模.Android公共库.Android 高版本向低版本兼容.多 ...

  5. 第二篇.Bootstrap起步

    第二篇Bootstrap起步 我们可以在http://getbootstrap.com下载bootstrap的文件 点击左边的download bootstrap可以下载bootstrap的css,j ...

  6. Android开源项目第二篇——工具库篇

    本文为那些不错的Android开源项目第二篇——开发工具库篇,**主要介绍常用的开发库,包括依赖注入框架.图片缓存.网络相关.数据库ORM建模.Android公共库.Android 高版本向低版本兼容 ...

  7. chromium浏览器开发系列第二篇：如何编译最新chromium源码

    说一下为什么这么晚才发第二篇,上周和这周department的工作太多了,晚上都是十点半从公司出发,回家以后实在没有多余的精力去摸键盘了.所以请大家包涵! 上期回顾: chromium源码下载: 1. ...

  8. “MVC+Nhibernate+Jquery-EasyUI”信息发布系统 第二篇（数据库结构、登录窗口、以及主界面）

    “MVC+Nhibernate+Jquery-EasyUI”信息发布系统 第二篇(数据库结构.登录窗口.以及主界面) 一.在上一篇文章中,主要说的就是把主框架搭建起来,并且Nhibernate能达到增 ...

  9. JDFS:一款分布式文件管理实用程序第二篇(更新升级、解决一些bug)

    一 前言 本文是<JDFS:一款分布式文件管理实用程序>系列博客的第二篇,在上一篇博客中,笔者向读者展示了JDFS的核心功能部分,包括:服务端与客户端部分的上传.下载功能的实现,epoll ...

  10. webIDE 第二篇博文

    这是我做webIDE过程中的第二篇博文,之所以隔了这么长时间没更,因为确实是没有啥进度啊,没什么可写的,现在虽然依然没啥进度,但中途遇到很多坑,这些坑还是有记录下来的必要的. 因个人水平问题,可能有的 ...

随机推荐

  1. [iOS UI进阶 - 2.3] 彩票Demo v1.3

    A.需求 真机调试 "关于”模块 存储开关状态 打电话.发短信 应用评分 打开其他应用 cell 在iOS6 和 iOS7的适配 block的循环引用 屏幕适配 code source:   ...

  2. ucGUI例程收藏

    ucGUI 几个重要例程Demo   按钮的定制 #include <stddef.h> #include <string.h> #include "WM.h&quo ...

  3. JS escape、encodeURI 、encodeURIComponent 编码与解码[转]

    转至:http://jc-dreaming.iteye.com/blog/1702407 本文讨论如何对传递参数用JS编码与解码 1:编码与解码方法的对应关系 escape ------------- ...

  4. Ubuntu12.04 使用中遇到的问题

    这个随笔回记录使用Ubuntu遇到的一些问题   不定期进行整理和分类 1.Question:   ubuntu 无法检测包或者源码包 Description:Ubuntu软件中心打开时报错  无法检 ...

  5. c# 递归算法

    c# 递归算法 2009-03-13 09:44 6950人阅读 评论(8) 收藏 举报 算法c#funn2c 1)1.1.2.3.5.8.......用递归算法求第30位数的值? 首先我们可以发现从 ...

  6. opennebula虚拟机启动失败

    问题1 故障现象: Wed Jan :: [DiM][I]: New VM state is ACTIVE. Wed Jan :: [LCM][I]: New VM state is PROLOG. ...

  7. js 限定上传文件大小 类型

    方案1 :限定大小 <html> <head> <script type="text/javascript">   var isIE = /ms ...

  8. PHP linux spl_autoload_register区分大小写

    一个PHP脚本用到spl_autoload_register,在WINDOWS下运行正常,但在LINUX就include不了,后来发现WINDOWS大小写不敏感,而在LINUX下区分大小写,WINDO ...

  9. nginx将http重定向到https

    1.rewrite server { listen 80; server_name test.com; rewrite ^(.*)$ https://$host$1 permanent; } 2. n ...

  10. contiki makefile框架分析 < contiki学习之一 >

    在linux下的工程编译,基本都可以使用makefile这个工具来完成.Contiki OS亦如此,下面分析contiki整个Makefile的框架,对makefile的具体内容暂不做分析.本文依赖于 ...