《精通CSS:高级Web标准解决方案》学习笔记(下)
1.
background-position: left center;
两个参数分别是x和y轴方向的position
2.
background-position: 10% 20%;
用百分数表示时,定位点并不是元素的左上角,而是background上距左边10%,距右边20%的点
3.圆角框,略。内容太多,以后单独开一篇。
4.犹如下css代码:
a:link,a:visited {
text-decoration: none;
}
a:hover,a:focus,a:active{
text-decoration: underline;
}
若调换选择器的顺序,如下:
a:hover,a:focus,a:active{
text-decoration: underline;
}
a:link,a:visited {
text-decoration: none;
}
则鼠标悬停和激活样式就不起作用,这是由层叠造成的,根据w3c标准,当两个规则具有相同特殊性时,后定义的规则优先。关于优先性排序,以后我也会另开一篇。
5.锚
<a href="http://www.taoshen.com/index.html#image">image</a>
#后接元素id,且css3允许使用:target伪类为目标元素定义样式,如:
a:target{
background-color: yellow;
}
6.绝不要使用a标签来更新服务器,否则spider的爬取可能会造成误操作。a和button不要混用。
《精通CSS:高级Web标准解决方案》学习笔记(下)的更多相关文章
- 精通css 高级web标准解决方案——可视化格式模型-盒模型
1-盒模型的两种标准: IE :width 和 height属性 是包括padding和border在内的. w3c:width 和 height 属性,就是单纯的内容的宽高,padding 是内容之 ...
- 精通CSS高级Web标准解决方案(1-1选择器)
设计代码的结构 使用有意义的标记 css可以控制页面的外观并将表现与内容分隔开. 在分配ID与类名时尽量保证有意义且与表现无关. div可以对块级元素进行分组,而span可以对行内元素进行分组或标识. ...
- 精通CSS高级Web标准解决方案(2-1 可视化格式模型之框模型)
浮动.定位.框模型这些控制在页面上安排和显示元素的方式,形成CSS布局. 盒子模型 页面上的每个元素都被看成一个矩形框. 盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型.他们对盒子模型 ...
- 精通CSS高级Web标准解决方案(1-3 规划、组织与维护样式表)
对文档应用样式 对代码进行注释/*......*/ 结构性注释 自我提示 删除注释.优化样式表 样式指南:解释代码与站点的视觉设计是如何组织在一起的 站点结构.文件结构.命名规则 编码标准:(X)ht ...
- 精通css 高级web标准解决方案——可视化格式模型-定位模型
CSS 中有三种定位机制:普通流.浮动.绝对定位.(默认为普通流) 改变文档流:display: inline-block; (支持到ie8及以上) 1-匿名块框: <div> 你好! & ...
- 精通CSS高级Web标准解决方案(4、对链接应用样式)
4.1 简单的链接样式 锚可以作为内部引用,也可以作为外部链接,应该区分对待. 伪类选择器: :link 用来寻找没有访问过的链接 :visited 用来寻找已经访问过的链接 a:link{color ...
- 精通CSS高级Web标准解决方案(2-2 可视化格式模型之定位概述)
视觉格式化模型 块级元素(块框).行内元素(行内框),可以使用display改变生成的框的类型,display:block让行内元素(比如<a>)表现的跟块级元素一样,display:no ...
- web前端好书推荐 CSS权威指南《第3版,Bootstrap实战,精通CSS 高级Web标准解决方案 第2版 中文
在我的新博客中==> http://www.suanliutudousi.com/2017/08/24/web%E5%89%8D%E7%AB%AF%E5%A5%BD%E4%B9%A6%E6%8E ...
- 精通CSS高级Web标准解决方案(1-2 层叠与特殊性)
层叠与特殊性 选择器的特殊性分成四个等级,a.b.c . d 如果样式是行内样式,那么a=1 b=ID选择器的总数 c=类.伪类.属性选择器的总数 d=标签选择器与伪元素选择器数量 例如:style ...
- 精通CSS高级Web标准解决方案(7、布局)
7.1 让设计居中 7.1.1 使用自动空白边让设计居中 <body> <div id="wrapper"> </div> </body& ...
随机推荐
- super() extends() private总结demo
public class TestService { private String name; public TestService(String name) { this.name=name; } ...
- 别人走的路--uap
首先,我先谈谈我个人的经历,我今年34岁了,做了10多年的ERP实施顾问,大学刚毕业的时候是做ERP软件开发的,后来转岗做了实施顾问.根据我的个人经验,我给你几点建议.1.既然是很大的公司,那么ERP ...
- .net 安装Swagger
官网:http://swagger.io/ 教程:http://www.wmpratt.com/swagger-and-asp-net-web-api-part-1/ 1:安装Dll: https:/ ...
- EF6.0+Mysql的问题
最近在项目中使用EF for Mysql的时候遇到一个问题 public OrderManage GetOrders(OrderSearchCriteria criteria) { using (va ...
- How to customize authentication to my own set of tables in asp.net web api 2?
ssuming your table is called AppUser, convert your own AppUser domain object to IUser(using Microsof ...
- 在模型中获取网络数据,刷新tableView
model .h #import <Foundation/Foundation.h> #import "AFHTTPRequestOperationManager.h" ...
- 使用highlight.js高亮你的代码
在逛别人的博客的时候,看见别人的代码的例子使用了高亮的语法,无论是java,js还是php等等语言,都会自动的对关键字进行高亮. 于是在前几天自己写了一个博客,遇到code时,自然就想到了别人网站如何 ...
- Java设计模式(学习整理)----装饰模式
1.概念: (在我看来,模式就像是是一种思想,在这种思想的指引下,对代码和结构的一番加工和整合而已!都是套路!) 装饰模式又称包装(Wrapper)模式,是以对客户端透明的方式扩展对象的功能,是继承关 ...
- Java设计模式(学习整理)---工厂模式
1.工厂模式 1.1 为什么使用工厂模式? 因为工厂模式就相当于创建实例对象的new,我们经常要根据类Class生成实例对象,如A a=new A() 工厂模式也是用来创建实例对象的,所以以后new时 ...
- js转换/Date(........)/
eval('new ' + (datetime.replace(/\//g, ''))); 好记性不如烂笔头,记下以备后用.