外贸营销

·如何写出漂亮的HTML代码 p strong Misquotations /strong are the only quotations padding: 20px 10px 10px 20px; margin: 0; 图 4-1 为了制作引号圆角而以Phot......

·如何写出漂亮的HTML代码

  <p><strong>Misquotations</strong> are the only quotations
  padding: 20px 10px 10px 20px;
  margin: 0;

图 4-1 为了制作引号圆角而以Photoshop创建的3张图片

在书写这段文字的时候,大多数浏览器都不会特别处理我们刚加上的cite属性,但是在能够处理cite属性的进阶css技巧或者scripting程序出现之后,事情就会开始变得有趣了.引言出处本身也是帮助描述标签内容的额外资讯,未来将会十分具有价值.

试着把加上cite想成把硬币丢进储蓄罐,这些硬币现在值不了多少,但是未来你将会庆幸一路上你有把它们全部存起来.

网页教学网

  }

我们把整个组件的宽度设为270像素,与提供顶部圆角,开引号效果的top.gif宽度相同,同时我们也照顾了一下文字效果,为它指定了字体,大小和颜色.最后,我们置中所有文字,并以最后一条规则指定了背景色,背景图以及背景图的显示位置. Webjx.Com

三张图片

图4-1 是刚建立的三张图片,一张是开引号,顶部圆角,一张是闭引号,最后一张是底部的两个圆角.

  line-height: 1em;


  <p>&#8212;Hesketh Pearson</p>

misquoted.</p>

blockquote {

misquoted.</p>

在2003年早秋,差不多是在我看着至爱的红袜队迎向历史性冠军之时,我决定抛弃GIF图片,换上加了样式的<blockquote>标签.

网页教学网

标记元素

目前,你只能以background或者background-image属性为一个元素指定单张背景图,因此,我们将为<blockquote>里的每个段落加上id. 网页教学网

我们来仔细研究每个方法，并且找到最便于完成任务的“工具”，更重要的是，要弄清楚为什么它是最棒的工具。

Webjx.Com

来看看我们会在这个示例接下来的步骤里中使用的标记方法:

·iframe代码—网页中嵌入其他网页

此时,任何出现在引用范围之内的<strong>就会变成黑色(不能更黑了),另外由于引用的其他部分使用了一般的font-weight,因此我们以normal取代<strong>预设的粗体样式.

方法B:以class处理?

<div>

由于在包围引用内容的<div>标签里加了class="quotation",因此我们能够为它指定独特的css样式,但是HTML拥有专门解决这个问题的完美标签,因此建立这个特别分类似乎有点多余,我们马上就会看到这个完美的HTML标签. Webjx.Com

  <p id="quote"><strong>Misquotations</strong> are the only quotations

</blockquote> Webjx.Com

  padding: 0;

  <p>&#8212; Hesketh Pearson </p>
此时浏览器会在适当的地方使用双引号和单引号,像是这样.

I said, Herman, do you like bubblegum? And he said, Yes. Bubblegum is what Harry calls delicious. Webjx.Com

  font-size: 150%;

that are <strong>never</strong> misquoted.</p>

这在可视化浏览器上多半会显示成这样:

  font-size: 60%; 网页教学网
  margin: 0;
行内引用

要怎么处理简短,应该是在行内参考的引用呢?举例来说,如果你在这句子中提到其他人说过的话,这时就可以用<q>标签:

Chapter 4 引用

“Misquotations are the only quotations tha are never misquoted” (只有错误的引用永远不会被误用) Webjx.Com

  width: 270px;
  background: #eee url(top.gif) no-repeat top left;


  line-height: 1em;
  padding: 0;
不需要引号

大多数可视化浏览器会在使用<q>和</q>的时候自动加上引号,因此你不用自己输入,W3C也建议加上lang属性标识所应用的内容语言,某些语言可能会显示不同的引号.

I said, <q lang="en-us">Herman, do you like bubblegum? </q> And he said, <q lang="en-us">Yes, the kind that comes with a comic.</q> 网页教学网

  background: url(end_quote.gif) no-repeat right bottom;
#quote {

然后这段是需要加上的额外css规则的内容:

#quote strong {
强调特殊文字

我为Fast Company额外加上的引用样式之一是在引用范围内使用<strong>标签来强调特定重点文字的效果.这能进一步模仿杂志上使用的排版风格. 网页教学网

借着使用<strong>,我们能确保大多数不支持样式或是非可视化浏览器仍然可以得到粗体或强调的效果(在这个例子中很合理),同时我又能以CSS特别指定改用深色显示<blockquote>范围内的<strong>标签.

·HTML网页超链接标记<A>学习教程
  margin: 0;



  }

我们再度取消段落上下的预设补丁,改在底部加上一些内部补丁.第三张图片已经到位了.为引用内容加上两个圆角,借以padding代替margin设定author部分的排列方式,我们得以让圆角图出现在适当的位置上,也就是最底部. 网页教学网

让我们看看怎么书写这个属性:

方法C:<blockquote>最棒

<blockquote>
#quote {
·标记语言——网页应用CSS样式


</blockquote>

网页教学网

原文出处 Webjx.Com

·用CSS编写一个网页导航栏
为<blockquote>加上样式

Fast Company从杂志存档里选出每日引言放在首页,已经行之有年了,为了保留FC的印刷体裁和强调效果,因此有很长一段时间这个引言被做成GIF图片,让设计者能以任何方式处理字型,达成期望的效果. 网页教学网

·返回到上一页的html代码的几种写法
</blockquote>

W3C建议使用<blockquote>标记长引用(区块级内容),这个标签正是为了处理我们正在讨论的状况设计的,借着使用这个标签,我们能为内容加上结构意义,同时能提供独特的标记以便为可视化浏览器设定样式.

网页教学网

<blockquote cite="http://www.somesite.com/path/to/page.html">

  font-weight: normal;

<p>&#8212; Hesketh Pearson</p> Webjx.Com

结果

图4-2是典型的现代浏览器所能看到的结果,圆角外边框十分完整,两个引号则漂亮的藏在文字后方.这个方法最棒的地方是整个外框可以扩大,代表你能放进去任何长度的引用内容,外框会配合引言长度自动放大或缩小(自适应),而且引号与圆角都会停留在适当的位置.这也代表视力不佳的使用者方法字体时,引用于外框的设计不会被破坏.

  <p>Misquotations are the only quotations that are never

  width: 270px;
  <p>Misquotations are the only quotations that are never

这三张图片背景都是透明的,以便我们用css来控制背景的颜色.同时我们以白色制作了圆角,灰色制作了引号.

网页教学网

  margin: 0 10px 0 0;
  padding: 20px 20px 10px 20px;

共4页:

上一页