采用了符合中国人阅读习惯的font-size:12px像素字体,行距line-height:22px像素。字体font-family:Verdana,Arial,Helvetica,sans-serif, body背景background:white;
级联样式表(Cascading Style Sheet)简称“CSS”,通常又称为“风格样式表(Style Sheet)”,它是用来进行网页风格设计的。比如,如果想让链接字未点击时是蓝色的,当鼠标移上去后字变成红色的且有下划线,这就是一种风格。通过设立样式表,可以统一地控制HTML中各标志的显示属性。
<p>采用了符合中国人阅读习惯的font-size:12px像素字体,行距line-height:22px像素。字体font-family:Verdana,Arial,Helvetica,sans-serif, body背景background:white;</p>
<h1>我是h1标签,在seo中我拥有最高的权重</h1>
<h2>我是h2标签,在seo中我拥有仅次于h1标签的权重</h2>
<h3>我是h3标签,在seo中我拥有仅次于h1,h2标签的权重</h3>
<h4>我是h4标签,在seo中我拥有仅次于h1,h2,h3标签的权重</h4>
<h5>我是h5标签,在seo中我拥有仅次于h1,h2,h3,h4标签的权重</h5>
<strong>这是一段加粗的文字</strong>
<u>这是一段下划线的文字</u>
<em>这是一段斜体的文字</em>
text-decoration:line-through;
实现同样的效果<del>这是一段删除线文字</del>
上标的文字在文字位于右上方显示这是一段上标文字
下标的文字在文字位于右下方显示这是一段下标文字
<p>上标的文字在文字位于右上方显示<sup>这是一段上标文字</sup></p>
<p>下标的文字在文字位于右下方显示<sup>这是一段下标文字</sup></p>
这是一段加大号文字
这是一段小号文字
<p><big>这是一段加大号文字</big></p>
<p><small>这是一段小号文字</small></p>
<blockquote>
就可以轻松实现一段美观的引用。级联样式表(Cascading Style Sheet)简称“CSS”,通常又称为“风格样式表(Style Sheet)”,它是用来进行网页风格设计的。比如,如果想让链接字未点击时是蓝色的,当鼠标移上去后字变成红色的且有下划线,这就是一种风格。通过设立样式表,可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表,可以扩充精确指定网页元素位置,外观以及创建特殊效果的能力。
<blockquote>级联样式表(Cascading Style Sheet)简称“CSS”,通常又称为“风格样式表(Style Sheet)”,它是用来进行网页风格设计的。比如,如果想让链接字未点击时是蓝色的,当鼠标移上去后字变成红色的且有下划线,这就是一种风格。
<blockquote>通过设立样式表,可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表,可以扩充精确指定网页元素位置,外观以及创建特殊效果的能力。</blockquote>
</blockquote>
<abbr>
就可以轻松实现。<abbr>css3</abbr> <abbr>html5</abbr>
ul
<ul>
<li>无序列表是这样表现的</li>
<li>无序列表是点点点</li>
<li>无序列表是没有罗马文字的</li>
</ul>
ol
<ol>
<li>有序列表是这样表现的</li>
<li>有序列表不是是点点点</li>
<li>有序列表是有罗马文字的</li>
</ol>
<ul class="unstyled">
<ul class="unstyled">
<li>没有样式是这样表现的</li>
<li>没有样式的列表什么也没有</li>
<li>没有样式比较干净</li>
</ul>
<ul class="circle">
<ul class="circle">
<li>圈圈列表是这样表现的</li>
<li>圈圈列表是圈圈的</li>
<li>圈圈列表跟点点很相似</li>
</ul>
<ul class="square">
<ul class="square">
<li>圈圈列表是这样表现的</li>
<li>圈圈列表是圈圈的</li>
<li>圈圈列表跟点点很相似</li>
</ul>
<ul class="cjk">
<ul class="cjk">
<li>中文123样式是这样表现的</li>
<li>中文123样式的列表什么也没有</li>
<li>中文123样式是用汉字一二三排序的</li>
</ul>
body{ background:white;}
<pre>body{ background:white;}</pre>
- body{
- background:white;
- font-size:13px;
- line-height:22px;
- }
<pre><ol><li>body{</li><li>background:white;</li><li>font-size:13px;</li><li>line-height:22px;</li><li>}</li></ol></pre>
class="table table-bordered"
即可实现带边框的表格当我还是个小女孩 | 我问我妈妈 | 将来我会变成什么样子呢 |
会漂亮吗 | 会富有吗 | 她对我说:世事不可强求,顺其自然吧 |
当我长大并恋爱了 | 我问我的心上人 | 我们将来会怎么样呢 |
生活每天都美好吗 | 我的爱人对我说: | 世事不可强求,顺其自然吧 |
<table class="table table-bordered">
<tbody>
<tr>
<td>当我还是个小女孩</td>
<td>我问我妈妈</td>
<td>将来我会变成什么样子呢</td>
</tr>
</tbody>
<tbody>
<tr>
<td>会漂亮吗</td>
<td>会富有吗</td>
<td>她对我说:世事不可强求,顺其自然吧</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>当我长大并恋爱了</td>
<td>我问我的心上人</td>
<td>我们将来会怎么样呢</td>
</tr>
<tr>
<td>生活每天都美好吗</td>
<td>我的爱人对我说:</td>
<td>世事不可强求,顺其自然吧</td>
</tr>
</tfoot>
</table>
class="table table-zebra"
即可实现斑马表格When I was just a little girl | I asked my mother | what will I be |
will I be pretty | will I be rich | here\'s what he said to me |
que sera sera | whatever will be | will be |
<table width="100%" border="0" class="table table-zebra"></table>
<form action="" method="get" enctype="multipart/form-data">
<fieldset>
<legend>注册表单</legend>
<p>
<label>姓名 <small>字符在3~9位</small></label>
<input name="" type="text" placeholder="请填写真实的姓名">
<input name="" type="text" placeholder="请填写真实的姓名" class="text radius">
</p>
<p>
<label>自我介绍:</label>
<textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>
</p>
<p>
<label>爱好:</label>
<input type="checkbox" name="checkbox" id="checkbox">
踢球
<input type="checkbox" name="checkbox" id="checkbox">
上网
<input type="checkbox" name="checkbox" id="checkbox">
冲浪 </p>
<p>
<label>性别:</label>
<input type="radio" name="radio" id="radio" value="radio">
男
<input type="radio" name="radio" id="radio" value="radio">
女 </p>
<p>
<label>学历:</label>
<select name="select" id="select">
<option value="1">大学/大专</option>
<option value="2">高中/中专</option>
<option>小学</option>
</select>
</p>
<p>
<label>文件域:</label>
<input type="file" name="fileField" id="fileField">
</p>
<p>
<label></label>
<input name="" type="submit" class="button blue" value="提交">
<input name="重置" type="reset" class="button" value="重置">
</p>
</fieldset>
</form>
<a class="button">
或者 <input type="button" class="button">
演示 | 代码 |
默认 | <a href="#" class="button">默认</a> |
反向 | <a href="#" class="button button-inverse">反向</a> |
红色 | <a href="#" class="button bg-red bg-inverse">红色</a> |
蓝色 | <a href="#" class="button bg-blue bg-inverse">蓝色</a> |
绿色 | <a href="#" class="button bg-green bg-inverse">绿色</a> |
黄色 | <a href="#" class="button bg-yellow bg-inverse">黄色</a> |
超小号 | <a href="#" class="button button-little">小号</a> |
小号 | <a href="#" class="button button-small">小号</a> |
中号 | <a href="#" class="button button-medium">中号</a> |
大号 | <a href="#" class="button button-large">大号</a> |
加大号 | |
<a href="#" class="button button-xlarge">加大号</a> |
当我还是个小女孩,
我问妈妈
将来我会变成什么样子呢?
会漂亮吗?
会富有吗?
她对我说:
世事不可强求
顺其自然吧
<p class="text-red">当我还是个小女孩,</p>
<p class="text-yellow">我问妈妈</p>
<p class="text-blue">将来我会变成什么样子呢?</p>
<p class="text-green">会漂亮吗?</p>
<p>会富有吗?</p>
<p>她对我说:</p>
<p>世事不可强求</p>
<p>顺其自然吧</p>
当我还是个小女孩,我问妈妈,将来我会变成什么样子呢?
会漂亮吗?会富有吗?
她对我说:世事不可强求,顺其自然吧
当我长大了,恋爱了,我问我的心上人,“我们将来会怎么样呢?我们的生活每天都会美好吗?”我的爱人对我说:“世事不可强求顺其自然吧。我们不能预见未来。世事不可强求顺其自然吧。”现在我有了自己的孩子,他们问我,“将来我会变成什么样子呢?会英俊吗?会富有吗?”我轻声地回答:“世事不可强求顺其自然吧。我们不能预见未来。世事不可强求顺其自然吧。”
<p class="border text-left padding-small">当我还是个小女孩,我问妈妈,将来我会变成什么样子呢?</p>
<p class="border text-center padding-small">会漂亮吗?会富有吗?</p>
<p class="border text-right padding-small">她对我说:世事不可强求,顺其自然吧</p> <p class="border text-justify padding-small">当我长大了,恋爱了,...世事不可强求顺其自然吧。”</p>
When I was just a little girl,
I asked my mother,
"What will I be?
Will I be pretty?
Will I be rich?"
When I was just a little girl,
I asked my mother,
"What will I be?
Will I be pretty?
Will I be rich?"
<p class="bg-red bg-inverse padding-small">When I was just a little girl,</p>
<p class="bg-yellow bg-inverse padding-small">I asked my mother, </p>
<p class="bg-blue bg-inverse padding-small">"What will I be?</p>
<p class="bg-green bg-inverse padding-small">Will I be pretty?</p> <p class="bg-red-light text-red padding-small">When I was just a little girl,</p>
<p class="bg-yellow-light text-yellow padding-small">I asked my mother, </p>
<p class="bg-blue-light text-blue padding-small">"What will I be?</p>
<p class="bg-green-light text-green padding-small">Will I be pretty?</p>
When I was just a little girl,
I asked my mother,
"What will I be?
Will I be pretty?
Will I be rich?"
<p class="border border-red text-red padding-small">When I was just a little girl,</p>
<p class="border border-yellow text-yellow padding-small">I asked my mother, </p>
<p class="border border-blue text-blue padding-small">"What will I be?</p>
<p class="border border-green text-green padding-small">Will I be pretty?</p>
<p class="border padding-small">Will I be rich?"</p>