10
5
2011
22

css之blockquote美化

blockquote即块引用,就是说是引用的东西,当然主要是有缩进的效果,这样就不同于其它的普通的文字了。如果不是块级的引用,则用q标签(不常用吧,这个就是给标签内的文字加引号而已)。虽然并不一定要用blockquote才能达到这种效果(可以用css对任意标签实现blockquote效果),但这用得还是比较流行的,当作愉乐&长见识&学习了!

    首先主题是:美化blockquote的显示效果,即然是引用,则就需要加上引号了,可文字效果的引号太无趣&不显眼了……

    那么就加图片吧!这样够显眼了吧。如下html代码

<blockquote>
 <p>Hello, I am a double quote...<p>
 <p>Hello, I am a double quote...<p>
 <p>Hello, I am a double quote...<p>
 <p>Hello, I am a double quote...<p>
</blockquote>

一般blockquote里的都段落,so都是<p>...</p>标签。如果是特例,那就特殊处理好了…… 这边里给思路,别的免了!

首先肯定是要加图片的了,但不应该修改html代码,因为如果是通过修改html代码来达到效果,那是不是每次都要进行修改呢?那么就用css来实现吧,这样只要导入css代码,就能一改全改了!

然后,即然不能修改html代码,只能通过标签的背景图片来实现了,难道?先制作好固定大小的有双引号的图片,再放入?那不定死了?如果分开两引号,刚背景图片只有一个,如何?真的只有一个吗?Are sure ?好吧,貌似……

那么,一个引号肯定是通过blockquote的背景图片来实现,那其他的只能通过内部的<p>标签来实现了。(如果内部没有标签的话?谁会这么无聊?……)

然后,如果你css选择器用得熟的话,就知道:first-child这个选择器的吧,就是选择第一个子元素。(貌似css3支持last-child选择器了!!~~)如:

/*选择blockquote下第一个p*/
blockquote p:first-child{}

既然选择到了第一个元素,那么左边的引号就交给它了!

/*选择blockquote下第一个p*/
blockquote p:first-child{
background:url(open-quote.gif) no-repeat scroll left top;
}

注意放在左上角以及不重复,但发现问题了,因为是背景,so文字在其上面。所以加上点padding-left:10px;(根据图片的大小来设置。)但问题对出现了,由于首个p标签加了padding-left,so等于进行了缩进,不好看,没办法,对所以p都进行padding-left的设置好了。

blockquote p{padding-left:10px;}

好,就剩下右引号了,这个简单,设置blockquote的背景图片就行了。

blockquote{
 background:url(close-quote.gif) no-repeat scroll right bottom;
 width:200px;/*记得加上个宽,不然是整个浏览器的宽*/
}

最终调整过的代码:

blockquote p{
 padding:10px 50px;
 margin:auto; /*让段落在blockquote中居中*/
 width:500px;/*必须定义宽,margin的居中才有效,
但如果文字少,看上去没居中的样子了,如最终效果*/
}
blockquote p:first-child{
 background:url(open-quote.gif) no-repeat scroll left top;
}
blockquote{
 background:url(close-quote.gif) no-repeat scroll right bottom;
 width:600px;
}

最终效果如下:

Hello, I am a double quote...

Hello, I am a double quote...

Hello, I am a double quote...

Hello, I am a double quote...

 

参考资料:

  blockquote引用加背景引号图片

  用途相似的标签:cite,q与blockquote

 

最近由于知识有所增长,所以对上面的css代码进行如下改进(改进了blockquote内部内容布局问题)

blockquote p{
 padding:10px 50px;
 /*margin:auto; 不需要了
 width:500px;*/
}
blockquote p:first-child{
 background:url(open-quote.gif) no-repeat scroll left top;
}
blockquote{
 background:url(close-quote.gif) no-repeat scroll right bottom;
 /*width:600px;不需要了*/
 display:inline-block;/*定义为内联块级元素,这样其默认宽不会是整个浏览器的宽度了
  而是适应内容的变化而动态的变化。 这步是修改的关键一步,关键在于inline-block的运用
*/
}

演示代码如下(终于能够接近完美的实现了,呵呵……)

Hello, I am a double quote...

Hello, I am a double quote...

Hello, I am a double quote...

Hello, I am a double quote...

Category: Web设计 | Tags: css | Read Count: 4601
Avatar_small
λ 说:
2011年10月23日 01:50

Orz...啊,找了很久了,原來我要的是first-child……終于可以去改裝評論板了……

Avatar_small
λ 说:
2011年10月23日 02:25

@λ: 貌似first-child沒什麽作用(Chromium_14.0.835.202),last-child反而有用了……因此你上面的四個hello在我看來都沒分別的……

Avatar_small
wind 说:
2011年10月23日 13:45

@λ: 是吗?居然Chromium不识别first-child?我没试过,照理说应该可以的吧!倒是last-child好像是css3加进来的!呵呵~

Avatar_small
λ 说:
2011年10月23日 15:08

@wind: 噢~原来不是什么东东都能加first-child……-_-;; Chromium没问题。

我试了下,还能在后面加上这个,能使引用框大小随文本长度改变,引号贴近右下角:

blockquote, blockquote p {width: auto !important; display: inline-block !important; white-space: pre}

Avatar_small
wind 说:
2011年10月23日 16:44

恩,貌似可以解决这个问题,看来主要是inline-block其的作用呢,然后你用white-space:pre是让其起到pre标签的作用似乎是没有必要了啊!cool 如果加了反而让其html中的空格&回车起了作用,这样不好! 反正内部的p标签有换行的作用。

不过还是学习了,呵呵,今天刚接触到inline-block然后就有机会用了,然后就是学到了有white-space这个,可以起到pre标签的作用呢!wink

Avatar_small
wind 说:
2011年10月23日 16:46


@λ: 不是什么东东都能加first-child???什么东东不能加??好奇!

Avatar_small
λ 说:
2011年10月23日 16:47

@wind: 呵,其實我也只是用Firebug試試看的,不太懂。這兩天弄個CSS樣式了解了挺多~

Avatar_small
wind 说:
2011年10月23日 17:02

@λ: Me,too. 呵呵,我也才学没多久~

Avatar_small
wind 说:
2011年10月23日 17:04

@λ:我感觉first-child应该可以用在任意元素上的!

Avatar_small
λ 说:
2011年10月23日 19:08

@wind: 嗯,人之常情,不過沒完全設計出來。

你的博客的顏色對比度好小啊……

Avatar_small
wind 说:
2011年10月23日 20:37

@λ: 是吗我对色彩方面不大熟悉,仅仅是修改了原来的主题(加了css),但是改得一塌糊涂了呢

Avatar_small
wind 说:
2011年10月23日 20:37


@λ: 给点意见,我修改下!嘿嘿

Avatar_small
λ 说:
2011年10月23日 20:47

@wind: 這個模版的構造不錯~我以後也自己再弄一個。

色彩,沒什麽的,調一調,看看整體是否協調,有沒有突出你想要的表達重點。按百分比設置寬度的適合以文字為主的,定寬的就適合對圖文排版較高的。你至少把頁面的對比搞好吧,讓人感覺到重點,看得清楚。

文字大小最好先在最外層的框架設好基礎的大小,裏面的用百分比%或者是em為單位來設字體大小。margin/padding多用em或px,少用%。

Avatar_small
λ 说:
2011年10月23日 20:50

@λ: line-height(行高)和word-spacing/letter-spacing(字符間隔)也很重要,不然隨便弄個斜體或粗體,文字就擠在一起了。

Avatar_small
wind 说:
2011年10月23日 21:34

@λ: 确实感觉字体有点难看&看不大清的样子,我不知道设置什么字体好!

Avatar_small
λ 说:
2011年10月23日 22:08

@wind: 不用設了,Linux下字體有兩種(Windows不管了),一種是網頁自帶的,一種是自己瀏覽器設置的。Chito沒有提供網絡字體,所以我也從來不管中文字體的,英文字體……直接用模版預設的。文字算比較清晰,不擠就好了……

Avatar_small
λ 说:
2011年10月23日 22:12

Hey, 你的blockquote設置改了,這篇文章就沒說准了~你可以在頁面源代碼裏再定義一個類,并用最高優先級來改回一般的屬性嘛。<!-- <style type="text/css">...</style> -->

Avatar_small
λ 说:
2011年10月23日 22:13

@λ: -_-; 當我沒說過……竟然改了“居中”……

Avatar_small
wind 说:
2011年10月24日 22:15

@λ: 什么??blockquote我没有设置居中啊,当然关于blockquote的认知有所长进了,那么这篇文章我也会进行适当的修改的啦,呵呵!

Avatar_small
wind 说:
2011年10月24日 22:44

@λ: 终于修改了,呵呵,这个优先级&图片路径问题还真郁闷呢!

Avatar_small
λ 说:
2011年10月26日 12:31

@wind: 哈,优先级最烦了。怎么你的“引号”图片这么难看的?= =;

其实纯文字的引号也可以的,把引号弄大点就好了。

Avatar_small
枫竹梦 说:
2013年6月22日 15:19

一直想用before和after来实现,但最后一个引号不好玩!


登录 *


loading captcha image...
(输入验证码)
or Ctrl+Enter

Host by is-Programmer.com | Power by Chito 1.3.3 beta | Theme: Aeros 2.0 by TheBuckmaker.com