同样是拿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. VC中监测函数运行时间（一）—分钟，秒，毫秒

    //myTimer.h // [10/16/2013 Duan Yihao] #pragma once #include "StdAfx.h" ////////////////// ...

  2. EasyUI基础入门之Parser(解析器)

    前言 JQuery EasyUI提供的组件包含功能强大的DataGrid,TreeGrid.面板.下拉组合等.用户能够组合使用这些组件,也能够单独使用当中一个.(使用的形式是以插件的方式提供的) Ea ...

  3. Java模拟登陆新浪微博抓取数据【转载】

    package com.shiyimm.crawler.weibo; import java.io.FileNotFoundException; import java.io.FileReader; ...

  4. 使用QQ账号的来发送邮件

    第一步,看图操作如下: 打开QQ邮箱,在设置-帐户,然后再看下图示: 把:POP3/SMTP服务,IMAP/SMTP服务,Exchange服务,CardDAV/CalDAV服务都选择上,保存这样,便可 ...

  5. 实现经常使用的配置文件/初始化文件读取的一个C程序

    在编程中,我们常常会遇到一些配置文件或初始化文件. 这些文件通常后缀名为.ini或者.conf.能够直接用记事本打开.里面会存储一些程序參数,在程序中直接读取使用.比如,计算机与server通信.se ...

  6. socket通信简单介绍

    “一切皆Socket!” 话虽些许夸张,可是事实也是,如今的网络编程差点儿都是用的socket. ——有感于实际编程和开源项目研究. 我们深谙信息交流的价值,那网络中进程之间怎样通信,如我们每天打开浏 ...

  7. subline的安装

    简单的安装方法 使用Ctrl+`快捷键或者通过View->Show Console菜单打开命令行,粘贴如下代码: import urllib.request,os; pf = 'Package ...

  8. Computer skills one can learn within one day

    Computer related technical skills are usually thought as complicated and difficult to understand. It ...

  9. Android 定时器实现的几种方式和removeCallbacks失效问题详解

    实现定时器有很多种方式,在这里我简单的介绍几种方式 (1)使用Handler + Runnable的方式 Handler handler = new Handler(); Runnable runna ...

  10. BootStrap2学习日记3--响应式布局实用类

    BootStrap2中常用的响应式布局类如: visible-phone     仅在 手机平台显示 visible-tablet      仅在 平板电脑显示 visible-desktop   仅 ...