段正淳的css笔记(2)圆角的做法
作者:正淳 来源:ued.taobao.com 发布时间:2007-11-01 21:52:00
标签:圆角,淘宝,css,笔记
如果您还没看过段正淳的css笔记(1)分类之间的横竖线,可以先看看!
1、css圆角的做法.
为了这个圆角,前段开发们付出的努力是在是太多了.又要考虑http连接数,又要考虑css与html的代码量与语义.
贴出的是最近考虑替换现有圆角做法的方案,可能还有许多未考虑的状况.但是大体的编写方式便是如下.好处是便于维护,只有一个图片.还可以某种程度上的任意缩放.缺点是多了无意义的html代码.
—————-css—————–
.c,.c i,.c i i,.c b,.c b b,.c p{
background-image:url(http://pics.taobao.com/bao/album/promotion/uiblog/purple.png);/*背景图片*/
background-repeat:no-repeat;
}
.c{
width:200px;/*临时定的宽度*/
background-position:0 -4px;
}
.c i{
display:block;
height:4px;
}
.c i i{
margin:0 0 0 4px;
background-position:right 0;
}
.c b{
display:block;
height:4px;
background-position:0 bottom;
}
.c b b{
margin:0 0 0 4px;
background-position:right bottom;
}
.c p{
margin:0 0 0 4px;
padding:0 4px 0 0;
background-position:right -4px;
}
—————html—————–
< div class="c">
< i>< i>< /i>< /i>
< p>
按钮按钮按钮按钮按钮按钮
按按按按按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮
< /p>
< b>< b>< /b>< /b>
< /div>
2、table的全局定义
caption这个标签在firefox下会有左边有1px空隙的bug,很讨厌.能想到的简单的方法只有-1px的margin了.
—————-css—————–
table{
border-collapse:collapse;
}
table caption,table td,table th{
border:1px solid #a2bbdd;/*边框颜色*/
background:#c3d9ff;/*背景颜色*/
}
table caption{
text-align:left;
border-bottom:none;
margin-left:-1px;
}
—————html—————–
< table>
< caption>表格标题< /caption>
< tr>
< th>标题< /th>
< th>标题< /th>
< th>标题< /th>
< th>标题< /th>
< /tr>
< tr>
< td> 内容< /td>
< td> 内容< /td>
< td> 内容< /td>
< td> 内容< /td>
< /tr>
< /table>
3、需要正视的二个标签
3.1 acronym这个标签用来解释名词很爽,但是用得太少.(我也一直想用来着,所以记下了.)
—————-css—————–
acronym{cursor:help}
—————html—————–
< acronym title="段正淳又是金庸笔下一个十分奇特的人物。他奇特在到处留情,情人极多,见一个爱一个,而又绝不是徒然风流薄幸,当他是单独对着一个情人的时候,他真是真心真意爱这个情人的,只好说这个人的感情特别丰富,别无其他解释。" >文字< /acronym>
3.2 ins这个标签忘记是在哪个网站上看到过用来在h2里显示更多的链接,后来查了书,大家都觉得有点欠妥,有点争议.
—————-css—————–
还未写入css组件…欠奉上了
—————html—————–
< h2>标题< ins>< a xhref="http://ued.taobao.com/blog/#" mce_href="http://ued.taobao.com/blog/#" >更多>>< /a>< /ins>< /h2>
0
投稿
猜你喜欢
- MySQL中有很多的基本命令,show命令也是其中之一,在很多使用者中对show命令的使用还容易产生混淆,本文主要介绍了show命令的主要用
- 1、引言小 * 丝:鱼哥,你说百度翻译的准确,还是google翻译的准确?小鱼:自己翻译的最准确。小 * 丝:你这… 抬杠。小
- 如下所示:#!/usr/bin/python#-*- coding: utf-8 -*-fin=open('add_1.txt
- 方法一一般情况下,SQL数据库的收缩并不能很大程度上减小数据库大小,其主要作用是收缩日志大小,应当定期进行此操作以免数据库日志过大1、设置数
- 三个页在同一个窗口,分别为main.htm,left.htm和right.htm。 main.htm <html> <he
- 内容摘要:您是否想让您的网站有多种显示风格呢,本文介绍了如何使用CSS结合js实现动态更换页面皮肤风格。看了下面的介绍您就明白了如何实现了这
- re正则表达式模块还包括一些有用的操作正则表达式的函数。下面主要介绍compile函数。 定义: compile(pattern[,flag
- 第一种:ROW_NUMBER() OVER()方式select * from ( select *, ROW_NUMBER() OVER(O
- 1 创建目录以及判断是否存在,如果不存在则创建import os# 创建的目录path = "yyy"if not os
- 一、什么是数据库连接池就是一个容器持有多个数据库连接,当程序需要操作数据库的时候直接从池中取出连接,使用完之后再还回去,和线程池一个道理。二
- 一、MySQL的下载 1.登陆MySQL的官网下载适用于64位系统的ZIP压缩包(https://dev.mysql.com/do
- 本文实例为大家分享了Openlayers地图比例尺控件的具体代码,供大家参考,具体内容如下1、新建一个html页面,引入ol.js和ol.c
- 每次在"万达影城"网上购票总会用到左上角选择城市的功能。如下:今天就在ASP.NET MVC中实现一下。我想最好的方式应
- 一、原理概述Query Cache就是把“查询返回的结果”缓存起来。但是,仅仅只是缓存“查询返回的结果”,其实是不准确的,Query Cac
- 之前用的Python2,连接MySQL用的是MySQLdb。现在换成python3.x了,由于 MySQLdb 模块还不支持 Python3
- 在网上看过很多版本的PHP异步请求方法,这里简单总结几个常用方法分享给大家 1、用CURL实现一步请求 CURL扩展是我们在开发过程中最常用
- 视图是一种常用的数据库对象,它将查询的结果以虚拟表的形式存储在数据中。因为视图有非常多的优点:1,可以简化操作,2,可以建立前台和后台的缓冲
- 目录一、IDEA如何连接数据库第一种方法:直接在方法体中增加连接信息方法二:二、方法代码的实现1.快递员增加快递2.快递员删除快递用数据库编
- mysql 5.6对密码的强度进行了加强,推出了 validate_password 插件。支持密码的强度要求。安装办法:在配置文件中打开[
- 业务背景最近接到一个需求,在微信公众号界面设计一个独立界面,界面上有 A 电机进、A 电机退、B 电机进、B 电机退 4 个按钮,点击对应按