第十一章

1、  box-sizing:border-box(让宽度和高度包含内边距和边框)

2、  clear让后面的元素显示在浮动元素的后面

3、  z-index只对只对绝对、固定、相对定位的元素有效

4、  vertical-aligh只用于行内元素

baseline/middle/sub/super/text-top/text-bottom/top/bottom/百分比/值

第十二章

1、  <link media=”only/not  screen/print/

and (min-width/max-width/resolution:value)” href=”” />

2、  <meta name="viewport" content="width=device-width,initial-scale=1" />

第十三章

1、

 body{

font-family:’ pt_sansregular’;

}

@font-face{

 font-family: 'pt_sansregular';
src: url('PTS55F-webfont.eot');
src: url('PTS55F-webfont.eot?#iefix') format('embedded-opentype'),
url('PTS55F-webfont.woff') format('woff'),
url('PTS55F-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal; }

第十四章

1、  渐变背景

1)       
默认情况下,线性渐变是从上往下渐变的, 因此在属性值中不需要指定 to bottom

background: aqua;//要放在前面

background: linear-gradient(to top right,blue,green);

background: linear-gradient(90deg,blue,green);(起点:中上线)

2)       
径向渐变

/* 默认 */
background: red;
background: radial-gradient(yellow, red); background: radial-gradient(at top,yellow, red); background: radial-gradient(closest-side at 70px 60px, yellow, lime, red);
background: radial-gradient(30px 30px at 65% 70%, yellow, lime, red)

2、 
元素设置不透明度

  • opacity:value

3、  生成内容的效果

:before和:after

.more:after {
content: " »";
}

4、  使用
sprite 拼合图像

sprite 就是通过
content:" "; 生成的空格的背景图像。将其设置为display: block;,从而可以设置与图标大小匹配的高度和宽度

.icon:before {
background-image: url(sprite.png);
content: " ";//-------------------------------------------------
display: block;//
height: 16px; /* 图标高度 */
position: absolute;
width: 16px; /* 图标宽度 */
}
a[href$=".xls"]:before {
background-position: -17px 0;
}
a[href$=".docx"]:before {
background-position: -34px 0;
}

第十五章

1、   
自定义标记

ul{

   list-style: none;

   margin-left:;

padding-left:;

}

li{

   background: url(../img/done_square.png) no-repeat 0 .1em;

   padding-left: 15px;

   line-height: 24px;

}

2、   
选择列表的起始编号

1)        
整个列表编码初始值ol里面增加start=”n”

2)        
修改有序列表某个列表编码,影响接下来的列表,在li里面增加value=”n”

3、   
控制标记的位置

list-style-position=”inside/outside(默认)”

4、   
下拉式导航

HTML:

<nav role="navigation">

         <ul class="nav">

            <li><a href="/">Home</a></li>

            <li><a href="#">Products</a>

                <ul class="subnav">

                   <li><a href="#">Phones</a></li>

                   <li><a href="#">Accessories</a></li>

                </ul>

            </li>

            <li><a href="#">Support</a>

                <ul class="subnav">

                   <li><a href="#">Community Forum</a></li>

                   <li><a href="#">Contact Us</a></li>

                   <li><a href="#">How-to Guides</a></li>

                </ul>

            </li>

            <li><a href="#">About Us</a></li>

         </ul>

         <!-- end .nav -->

      </nav>

CSS:

/* 子菜单的默认状态 */

.nav .subnav {left: -999em;/* 将子菜单移出屏幕 */position: absolute;z-index:;}

a,a:hover {text-decoration: none;}

ul {list-style: none;margin-left:;padding-left:;}

.nav {background: #fff;}

.nav>li {float: left;padding-right: 10px;}

.nav ul {background: #fff;z-index:;border-bottom: 1px solid #fff;}

.nav ul li {border-bottom: 1px solid gray;line-height: 24px;padding: 2px 5px;}

/* 当鼠标停留在父元素li上时子菜单的状态 */

.nav li:hover .subnav {left: auto;/* 让子菜单回到自然状态 */}

《HTML5与CSS3基础教程》学习笔记 ——Three Day的更多相关文章

  1. 《HTML5与CSS3基础教程》笔记

    以下笔记摘要页码基于 人民邮电出版社 2013年1月第1版 英文书名:HMTL5 and CSS3 Visual Quickstart Guide (Seven Edition) 前言 P2: 渐进增 ...

  2. 《HTML5与CSS3基础教程(第8版)》

    <HTML5与CSS3基础教程(第8版)> 基本信息 原书名:HTML and CSS:visual quickstart guide 作者: (美)Elizabeth Castro    ...

  3. HTML5与CSS3基础教程(第7版) 高清PDF扫描版​

    HTML5与CSS3基础教程(第7版)试读不仅介绍了文本.图像.链接.列表.表格.表单.多媒体等网页元素,也介绍了如何为网页设计结构.布局,添加动态效果.格式化等形式,此外还涉及调试和发布.聚合和吸引 ...

  4. HTML5与CSS3基础教程(第8版) PDF扫描版​

    <HTML5与CSS3基础教程(第8版)>自第1版至今,一直是讲解HTML和CSS入门知识的经典畅销书,全面系统地阐述HTML5和CSS3基础知识以及实际运用技术,通过大量实例深入浅出地分 ...

  5. 【02】HTML5与CSS3基础教程(第8版)(全)

    [02]HTML5与CSS3基础教程(第8版)(全)   共392页.   (魔芋:大体上扫了一遍.没有什么新东西,都是入门的一些基础知识.) 已看完.       [美]elizabeth cast ...

  6. HTML5与CSS3基础教程第八版学习笔记11~15章

    第十一章,用CSS进行布局 开始布局注意事项 1.内容与显示分离 2.布局方法:固定宽度和响应式布局 固定宽度,整个页面和每一栏都有基于像素的宽度 响应式布局也称为流式页面,使用百分数定义宽度 3.浏 ...

  7. 读书笔记之《HTML5 与 CSS3 基础教程》

    1· 读前预期 考虑到对于 Web 开发零基础,凡涉足一件未知的任务,最好先理清任务的逻辑结构,然后有目的地逐步学习.为实现我们的需求和设计,必须要学习前端.后端.服务器等一系列暂时陌生的知识,在此, ...

  8. Python基础教程学习笔记:第一章 基础知识

    Python基础教程 第二版 学习笔记 1.python的每一个语句的后面可以添加分号也可以不添加分号:在一行有多条语句的时候,必须使用分号加以区分 2.查看Python版本号,在Dos窗口中输入“p ...

  9. HTML5与CSS3基础教程第八版学习笔记16-21章

    第十六章,表单 HTML5引入了新的表单元素.输入类型和属性,以及内置的对必填字段.电子邮件地址.URL以及定制模式验证. 元素: <input type="email"&g ...

  10. HTML5与CSS3基础教程第八版学习笔记7~10章

    第七章,CSS构造块 CSS里有控制基本格式的属性(font-size,color),有控制布局的属性(position,float),还有决定访问者打印时在哪里换页的打印控制元素.CSS还有很多控制 ...

随机推荐

  1. iOS开发——UI篇Swift篇&UIImageView

    UIImageView override func viewDidLoad() { super.viewDidLoad() titleLabel.text = titleString //通过坐标和大 ...

  2. 计划任务命令crontab、at

    一.为计划任务提供支持 开始为系统建立计划任务之前,需要为系统添加相关设置,以确保计划任务能够正确运行.计划任务需要的支持主要包括两个方面:正确运行系统服务.准确的系统时间. 1.正确运行系统服务 为 ...

  3. oracle之报错:ORA-00054: 资源正忙,要求指定 NOWAIT_数据库的几种锁

    问题如下: SQL> conn scott/tiger@vm_databaseConnected to Oracle Database 11g Enterprise Edition Releas ...

  4. python脚本初探---新手如何直接编写一个hello world模块即可执行的.py文件

    废话不多说,就讲一下这个背景吧: 事情是这个样子的~ 本着好学的精神,咱就买了本书,学习python结果呢,发现python的教程都是一个样子滴,上来的第一个hello world 都是通过IDLE来 ...

  5. js中获取函数的参数

    刘海波 2015/2/11 9:11:43 tmp = tmp.replace(/\{(\d+)\}/g, function($1, $2) {return addrow.arguments[pars ...

  6. 深入理解Redis中的主键失效及其实现机制

    参考:http://blog.sina.com.cn/s/articlelist_1221155353_0_1.html 作为一种定期清理无效数据的重要机制,主键失效存在于大多数缓存系统中,Reids ...

  7. Linux下的lds链接脚本基础

    转载:http://soft.chinabyte.com/os/104/12255104.shtml   今天在看uboot引导Linux部分,发现要对链接脚本深入了解,才能知道各个目标文件的内存分布 ...

  8. Xamarin自学教程(Android)之一

    废话少说,我们直接开始吧.有兴趣的就一起,我慢慢写,咱们一起慢慢学.希望两个月内能基本完成基于Xamarin的Android开发内容. 还是一样,先来安装开发环境吧.跟着做就行了. 首先,我们到微软的 ...

  9. DML 数据操纵语言

    1.INSERT(插入)语言结构 INSERT INTO table(表名)(要插入的列名) VALUES(要插入的具体值): table:要插入数据的表的表名 column[,column]:表中要 ...

  10. Linux查看和改变网卡的一些信息

    昨天遇到一个问题,就是网卡的速率问题.本身是1000Mb,可是显示为10Mb,这个问题对于我这个菜鸟来说是个难以解决的问题.当然,第一件事是查询Linux中哪个命令能 改变网卡的速率. localho ...