这部分是html细节知识的学习。

快速入门系列--HTML-01简介

快速入门系列--HTML-02基础元素

快速入门系列--HTML-03高级元素和布局

快速入门系列--HTML-04进阶概念

边框、填充、对齐和浮动

这部分将主要介绍使用CSS控制整个Web页面的各个方面，通常来说，会使用margin（外部）和padding（内部性增加元素周围的空间，使用align和float设置元素的相对位置。对于margin来说，可以使用margin-top/right/bottom/left设置，记住顺序为顺时针，同时注意在设置百分比边距时，一定记住是相对的百分比，比如外部容器为页面的25%，那么内部的margin:25%其实是这25%的25%。此外，如果有两个带边框的元素彼此堆叠在一起，但他们之间没有边距，那么它们接触的位置似乎有双边框，可以同时将这两个边框减半，达到美观的效果。

常见的对齐包括text-align水平对齐，vertical-align垂直对齐，前者可以设置为left,right,center,justify两端对齐，后者可以设置为top元素的顶部与当前行对齐，middle元素中部与父元素中部对齐,bottom,text-top将元素的顶部与其父元素的顶部对齐,baseline,text-bottom。对于float来说，一定要注意窗口的大小，当宽度不足时，会造成块元素的换行，对原有样式产生较大影响。此外，不要注意当需要去除浮动的影响时，可以使用clear属性，包括left,right,both,none和inherit，指定clear:left确保左边不允许出现其他的浮动元素。

方框模型和定位

HTML中的每个元素被视为一个方框，在考虑元素的真正高度和宽度时，就必须把方框模型的所有元素都考虑在内，通过下图对方框模型有个形象的了解。

因此元素的总高度实际上是width + padding-left + padding-right + border-left + border-right + margin-left + margin-right，在实际项目中，一定不要忘了设置默认的边距属性，因为不同浏览器会有差异。

相对定位是HTML使用的默认定位类型position:relative，可以把其当做跳棋的布置，从左到右排列，达到边缘就移到下一行，而另外一种是绝对定位position:absolute，允许设置HTML内容在页面上的精准位置（仍然会相对于父元素，绝对与子元素之间），此外，可以使用Z-index来管理元素的层叠位置,值大的位于值小的上面。

接下来讨论元素周围的内容流，首先得一个概念是当前行，其表示一个用于在页面上放置元素的不可见的行，这一行涉及页面上的元素留，当在页面的水平和垂直方向上一个接一个的排列元素时，它就可以派上用场。通常可以通过float，clear,overflow在控制文本流，overflow用于当元素太小时，控制文本的溢出，当元素的长宽设置过小时，可以通过设置visible自动扩大元素，hidden允许溢出的文本隐藏，scroll可以给元素增加滚动条。

Tip:验证样式表，http://jigsaw.w3.org/css-validator/

固定布局和流式布局

一个非常有名的博客平台WordPress(wordpress.org/themes),有空的时候非常推荐看看，对于nodejs来说,ghost是一个不错的开源应用。对于大部分的web站点来说，一般会使用固定布局、流动布局或响应式布局，尤其针对现在的多终端环境来说，合理的折中是固定/流动混合布局，或者响应式的布局。在设置时，可以使用min-width（不包括填充、边框和边距）来保证流动式布局至少可以达到最基本的显示效果。在2010年，设计师Ethan Marcotte创造了术语响应式web设计，主要涉及一个媒体查询的概念，一个简单的示例如下。

<link rel="stylesheet" type="text/css" media="screen and (max-device-width:480px)" href="xxx.css">

Tip:em(字母m的宽度)的使用，用于弹性布局，不过该方式构建web页面将非常麻烦，此外在页面中，经常可以使用-1000em等方式，隐藏元素。

CSS列表处理：在列表中，可以通过list-style-position来设置指示符的位置，inside表示指示符位于<li>标签中，outside（默认值）则相反，而将list-style设置为none可以保证列表项前不会上放置任何图标。

CSS设计导航系统：不同于简单的项目符号或编号列表，导航元素一般会需要如下特性：用户鼠标光标会改变，以指示元素是可单击的；当鼠标悬停在元素上时，元素周围的区域会改变外观；内容区域在视觉上显得与普通文本不同。比如相对于页面中的链接元素，nav中的链接元素可以使用text-decoration:none属性来去除蓝色下划线，为了表示出样式的不同，可以使用伪类选择器nav li a:link, nav li a:visited和nav li a:hover, nav li a:active两组。此外，如果需要实现水平导航，可以将ul和li的display属性设置为inline，还可以设置line-height的高度。

使用鼠标修改文本显示：这部分首先介绍一个工具提示的例子，如下所示，同时可以使用类似方式利用CSS显示额外的翻转文本，而通常更为常见的通过不同的事件触发显示不同样式的例子这儿就不一一介绍了。

 <head>
 <meta charset="utf-8">
 <title>实现hit, tooltip效果</title>
 <style type="text/css">
 a{
 text-decoration: none;
 font-weight: bold;
 }
 a.tip{
 position: relative;
 z-index: 24;
 }
 a.tip:hover{
 z-index: 25;
 }
 a.tip span{
 display: none;
 }
 a.tip:hover span{
 font-weight: normal;
 font-style: italic;
 display: block;
 position: absolute;
 top: 20px;
 left: 25px;
 width: 150px;
 padding-left: 3px;
 border:1px solid #000;
 background-color: #ddd;
 color: #000;
 }
 </style>
 </head>
 <body>
 <a href="http://www.ctrip.com" class="tip">Ctrip<span>一个不错的公司</span></a>
 </body>

在介绍CSS3变形transformation,渐变transition和动画animation之前，需要了解浏览器的差异，比如chrome和safari使用-webkit，firefox使用-moz，微软使用-ms,Opera使用-o前缀，这是基于不同浏览器内核决定的。对于2D图形，可以使用transform:translate(x,y)平移元素，使用rotate(45deg)旋转元素，使用scale(.5)缩放元素，skewX(45deg)扭曲元素。

对于3D图像来说，需要在2D图形的基础上增加Z轴深度，通常通过透视图perspective来绘制图形，提供从特定点(vanishing point没影点)查看它们彼此之间的高度、宽度和深度。使用方式为perspective:500px, transform-style:preserve-3d,rotate(180deg), translateZ(75px)。CSS的渐变可以通过transition:transform 5s ease-in 1s;

而对于动画来说，有一个关键的概念，即关键帧，@keyframes spin{ from {} to {}}, animation:spin 5s infinite linear，看到这不经想到还是jQuery方便。

该部分内容比较复杂，在之后使用到时再回顾学习。

参考资料：

  1. 版) [M]. 北京:人民邮电出版社, 2014.

Html与CSS快速入门03-CSS基础应用的更多相关文章

  1. Html与CSS快速入门02-HTML基础应用

    这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 示例 ...

  2. Html与CSS快速入门01-基础概念

    Web前端技术一直是自己的薄弱环节,经常为了调节一个简单的样式花费大量的时间.最近趁着在做前端部分的开发,果断把这部分知识成体系的恶补一下.内容相对都比较简单,很类似工具手册的学习,但目标是熟练掌握. ...

  3. Html与CSS快速入门04-进阶应用

    这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 之前 ...

  4. CSS快速入门（四）

    目录 CSS快速入门(四) 浮动 float属性 clear属性 浮动解决的问题及其影响 解决父标签塌陷的方法 浮动案例 定位 什么是脱离文档流 定位的两种方法 position定位 static定位 ...

  5. 快速入门系列--WebAPI--01基础

    ASP.NET MVC和WebAPI已经是.NET Web部分的主流,刚开始时两个公用同一个管道,之后为了更加的轻量化(WebAPI是对WCF Restful的轻量化),WebAPI使用了新的管道,因 ...

  6. [转]快速入门系列--WebAPI--01基础

    本文转自:http://www.cnblogs.com/wanliwang01/p/aspnet_webapi_base01.html ASP.NET MVC和WebAPI已经是.NET Web部分的 ...

  7. C#快速入门笔记(1)——基础语法

    C#快速入门笔记(1)——基础语法 总体框架:

  8. CSS快速入门基础篇，让你快速上手（附带代码案例）

    1.什么是CSS 学习思路 CSS是什么 怎么去用CSS(快速上手) CSS选择器(难点也是重点) 网页美化(文字,阴影,超链接,列表,渐变等) 盒子模型 浮动 定位 网页动画(特效效果) 项目格式: ...

  9. CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性

    大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成 ...

随机推荐

  1. Python操控mysql数据库

    导入库——MySQLdb 1.链接MySQL conn=MySQL.connect(host=',port=3306) 此处主机用ip地址,不能使用'localhost',不然会显示链接错误. 2.选 ...

  2. [转]jQuery实现清空table表格除首行外的所有数据

    1.其实网上有很多版本,试了好几个都不行,最后还是查到了一个非常方便的:不会清除表格第一行表头部分. 其中J_tab_fam是table的id. 1 $("#J_tab_fam  tr:no ...

  3. Last non-zero Digit in N!(阶乘最后非0位)

    Last non-zero Digit in N! Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Jav ...

  4. uva 11357 Matches

    // uva 11357 Matches // // 题目大意: // // 给你n个火柴,用这n个火柴能表示的非负数有多少个,不能含有前导零 // // 解题思路: // // f[i] 表示正好用 ...

  5. ArcGIS百米网格自动生成

    最近需要用百米网格进行空间叠加分析,首先得自动生成百米网格数据.经过查找,发现ARCgis可以自动生成网格.方法如下 2.创建格网(Creat Fishnet).需要用到ArcGIS的ArcToolb ...

  6. MSSQL数据库中Text类型字段在PHP中被截断之解 (转)

    在PHP中使用了MSSQL数据库,恰巧数据库中又使用了Text类型字段,于是问题产生了.每次从数据库中查询得到的数据总是被莫名的截断,一开始是以为我使用的PHP框架中对字符串的长度有所限制,后来发现这 ...

  7. ORACLE基本知识

    一.数据库名  什么是数据库名? 数据库名就是一个数据库的标识,就像人的身份证号一样.他用参数DB_NAME表示,如果一台机器上装了多全数据库,那么每一个数据库都有一个数据库名.在数据库安装或创建完成 ...

  8. 《利用Python进行数据分析》第8章学习笔记

    绘图和可视化 matplotlib入门 创建窗口和画布 fig = plt.figure() ax1 = fig.add_subplot(2,2,1) ax2 = fig.add_subplot(2, ...

  9. FUND

    The Shaanxi Natural Science Plan Project of China Grant NO.: 2014JM8322

  10. 浏览器 onbeforeunload 事件 兼容写法

    window.onbeforeunload = onbeforeunload_handler; function onbeforeunload_handler() { var warning = &q ...