《精通CSS:高级Web标准解决方案》学习过程--III
来源:互联网 发布:淘宝商品资质图片 编辑:程序博客网 时间:2024/06/02 10:52
第五章:锚链接样式
俗话说人靠衣裳马靠鞍,默认的锚链接样式几乎没有人会觉得赞,因此需要对其进行梳妆打扮一番
1.锚链接的四中样式;
伪链接的设置顺序它 link visited hover active 否则会出现设置不起作用的问题。这四种伪类也可以用到其他的标签上 例如 tr:hover{background:yellow} input:focus{background: yellow}不过对版本的浏览器(IE7及以下)不支持
Tips: 1。可记忆为love hate 貌似是一堆反义词。嘿嘿。2。 为保证我们现实效果的一直 hover和focus伪类设置为一致;
2. 区分不同的链接
.通过结合属性选择和正则表达式 把不同的链接予以区分 。链接会有多种多样,有其他站点 、pdf等文件下载等。根据不同属性。设置不同样式
a[href="http:']{
background:url(需要设置的对应图片);
}
3 链接不同状态的效果
.可以采用背景图片的形式,最好把几张图片合并为一张,这样会减少对服务器的请求次数,改善用户体验。
第六章:导航和列表样式
网站中几乎到处都是列表,而导航对于一个站点的重要性也是不言而喻的,那么如何做出好看的样式那?且往下看。
1.列表标签的Tips;
不要使用list-style-image 属性,使用 background,不同的浏览器对于前面的属性解析差别较大,而且也不容易控制这个图片的位置。
结合前面学习内容的样式
ol{margin-top: 100px;list-style: none;margin: 0;padding: 0;margin-top: 10px;}ol li{float:left;margin-left: 10px;font-size: 30px;padding: 5px 12px;border: 1px solid #000;}ol li[rel='pre'] ,ol li[rel='nex']{border:none;}ol li[rel='pre']:before{content:'\00AB';padding-right: 15px;}ol li[rel='nex']:after{content: '\00BB';padding-left: 15px;}<ol><li rel='pre'>pre</li><li>1</li><li>2</li><li>3</li><li>4</li><li rel='nex'>next</li></ol>效果:
2 锚的显示要设置为block,这样我们的整个区域都可点,提高用户体验!
2.如何设置横导航的样式;
在这里写这个问题,有点感觉重复前几章的味道,但是大家就当温故而知新吧。
设置横导航,估计大家都觉得soeasy!。但是在设置浮动时候 其实父标签<ul>里面其实什么都没有,因此在织梦里面看,其实<li>标签是溢出在父标签外的,那么怎么办?方法有3
1 在父标签里面设置overflow:hidden;最为有效 ,推荐
2.在父标签里增加无意义标签<li></li> 设置属性 clear:both;
3.让父标签也浮动,然后设置对他进行清理;
3.远距离翻转;
这个标题有点操蛋,因为我都不太明白什么意思,不过书中是这么叫的 。大家可以这么理解 :翻转就是有反应的意思。
也就是你在操作是触发a 距离a比较远的b也样式或动作的变化。这个把二个标签封在一个大的标签中,然后分别定位就可以了。
第七章:数据表单样式
无论是表现大量数据还是在与用户的交互中,数据表单都意义非凡,那么设计简洁易懂的表单就是非常重要。
1.表格标签的Tips;
采用表格特有的元素,如表头 caption thead tbody tfoot summery(类似于image里面的alt属性) 这些不但有利于设置合理的结构,更有利于屏幕阅读器等设配的解析。
- 《精通CSS:高级Web标准解决方案》学习过程--III
- 记录《精通CSS:高级Web标准解决方案》学习过程
- 《精通CSS:高级Web标准解决方案》学习过程--II
- 《精通CSS:高级Web标准解决方案》学习过程--IV
- 《精通CSS:高级Web标准解决方案》学习过程--V
- css学习六:学习《精通css:高级web标准解决方案》
- 精通css高级web标准解决方案
- 精通CSS高级Web标准解决方案【读书笔记】
- 精通CSS高级Web标准解决方案
- 《精通CSS-高级Web标准解决方案》 笔记
- 精通CSS--高级WEB标准解决方案(第一章)-------读书笔记
- 《精通CSS高级WEB标准解决方案》第一章:基础知识
- 《精通CSS高级WEB标准解决方案》第七章 布局
- 精通CSS:高级web标准解决方案之读书笔记(一)
- 读书笔记--精通CSS高级Web标准解决方案(八)---布局
- 精通CSS:高级web标准解决方案之读书笔记(二)
- 精通CSS高级Web标准解决方案 Chapter 5 Styling Links
- 精通CSS:高级Web标准解决方案(第2版)
- 【翻译】GCJ 2008 APAC local onsites C Millionaire 题解
- 树的最大路径和
- javascrip基本知识总结
- cocos2dx 3.x 图层点击鼠标事件的屏蔽
- sql多表分类查询
- 《精通CSS:高级Web标准解决方案》学习过程--III
- set、list、map
- canvas -方形抽奖
- Google官方MVP示例之TODO-MVP
- iOS开发-NSAttributedString富文本
- ubuntu 搭建LAMP环境并配置
- J2SE(七)Java之类的实例化
- Android 编程下 SQLite 大数据量操作优化
- Overload(重载)Override(重写)