《HTML5与CSS3基础教程》学习笔记 ——Three Day
第十一章
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的更多相关文章
- 《HTML5与CSS3基础教程》笔记
以下笔记摘要页码基于 人民邮电出版社 2013年1月第1版 英文书名:HMTL5 and CSS3 Visual Quickstart Guide (Seven Edition) 前言 P2: 渐进增 ...
- 《HTML5与CSS3基础教程(第8版)》
<HTML5与CSS3基础教程(第8版)> 基本信息 原书名:HTML and CSS:visual quickstart guide 作者: (美)Elizabeth Castro ...
- HTML5与CSS3基础教程(第7版) 高清PDF扫描版
HTML5与CSS3基础教程(第7版)试读不仅介绍了文本.图像.链接.列表.表格.表单.多媒体等网页元素,也介绍了如何为网页设计结构.布局,添加动态效果.格式化等形式,此外还涉及调试和发布.聚合和吸引 ...
- HTML5与CSS3基础教程(第8版) PDF扫描版
<HTML5与CSS3基础教程(第8版)>自第1版至今,一直是讲解HTML和CSS入门知识的经典畅销书,全面系统地阐述HTML5和CSS3基础知识以及实际运用技术,通过大量实例深入浅出地分 ...
- 【02】HTML5与CSS3基础教程(第8版)(全)
[02]HTML5与CSS3基础教程(第8版)(全) 共392页. (魔芋:大体上扫了一遍.没有什么新东西,都是入门的一些基础知识.) 已看完. [美]elizabeth cast ...
- HTML5与CSS3基础教程第八版学习笔记11~15章
第十一章,用CSS进行布局 开始布局注意事项 1.内容与显示分离 2.布局方法:固定宽度和响应式布局 固定宽度,整个页面和每一栏都有基于像素的宽度 响应式布局也称为流式页面,使用百分数定义宽度 3.浏 ...
- 读书笔记之《HTML5 与 CSS3 基础教程》
1· 读前预期 考虑到对于 Web 开发零基础,凡涉足一件未知的任务,最好先理清任务的逻辑结构,然后有目的地逐步学习.为实现我们的需求和设计,必须要学习前端.后端.服务器等一系列暂时陌生的知识,在此, ...
- Python基础教程学习笔记:第一章 基础知识
Python基础教程 第二版 学习笔记 1.python的每一个语句的后面可以添加分号也可以不添加分号:在一行有多条语句的时候,必须使用分号加以区分 2.查看Python版本号,在Dos窗口中输入“p ...
- HTML5与CSS3基础教程第八版学习笔记16-21章
第十六章,表单 HTML5引入了新的表单元素.输入类型和属性,以及内置的对必填字段.电子邮件地址.URL以及定制模式验证. 元素: <input type="email"&g ...
- HTML5与CSS3基础教程第八版学习笔记7~10章
第七章,CSS构造块 CSS里有控制基本格式的属性(font-size,color),有控制布局的属性(position,float),还有决定访问者打印时在哪里换页的打印控制元素.CSS还有很多控制 ...
随机推荐
- 【OC语法快览】四、基础内存管理
Basic Memory Management 基础内存管理 If you're w ...
- angularJs项目实战!02:前端的页面分解与组装
自从上一篇文章到现在已经有将近一个月的时间,我将精力放在了前端页面分解与组装,和angularjs如何与jquery.bootstrap.D3等一系列其他类库结合使用的经验总结上.由于公司新招了一些员 ...
- 剑指 offer set 3 旋转数组的最小数字
总结 1. 没有重复元素的旋转数组可用 logn 时间内求出结果. 解法有两个步骤, 先是求出发生旋转的点(以 array[0] 为支点求得), 然后用正常的二分查找给出结果 2. 有重复元素元素的旋 ...
- QT核心编程之Qt线程 (c)
QT核心编程之Qt线程是本节要介绍的内容,QT核心编程我们要分几个部分来介绍,想参考更多内容,请看末尾的编辑推荐进行详细阅读,先来看本篇内容. Qt对线程提供了支持,它引入了一些基本与平台无关的线程类 ...
- Golang学习 - bytes 包
------------------------------------------------------------ 对于传入 []byte 的函数,都不会修改传入的参数,返回值要么是参数的副本, ...
- LeetCode45 Jump Game II
题目: Given an array of non-negative integers, you are initially positioned at the first index of the ...
- LeetCode34 Search for a Range
题目: Given a sorted array of integers, find the starting and ending position of a given target value. ...
- EasyGUI的安装
1.下载EasyGUI 在官方网站上下载http://easygui.sourceforge.net/将安装包下载下来,放到桌面上并解压. 2.安装EasyGUI ①在开始菜单的搜索中输入cmd,打开 ...
- JSON解析总结2
使用json-lib-2.4-jdk15.jar JSON工具类: import java.util.List; import net.sf.json.JSONArray; import net.sf ...
- poj 3728 The merchant 倍增lca求dp
题目: zdf给出的题目翻译: 从前有一个富饶的国度,在这里人们可以进行自由的交易.这个国度形成一个n个点的无向图,每个点表示一个城市,并且有一个权值w[i],表示这个城市出售或收购这个权值的物品.又 ...