采用了符合中国人阅读习惯的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 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> </tfoot>
</table>
class="table zebra"
即可实现斑马表格/ | ||||
<table width="100%" border="0" class="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 class="button inverse"> 或者 <input type="button" class="button inverse"> |
反向按钮 |
黑色 | <a class="button black"> 或者... |
黑色的按钮 |
橙色 | <a class="button orange"> 或者... |
橙色按钮 |
红色 | <a class="button red"> 或者... |
红色按钮 |
蓝色 | <a class="button blue"> 或者... |
蓝色按钮 |
玫瑰红 | <a class="button rosy"> 或者... |
玫瑰红按钮 |
绿色 | <a class="button green"> 或者... |
绿色按钮 |
粉红 | <a class="button pink"> 或者... |
粉红按钮 |
黄色 | <a class="button yellow"> 或者... |
黄色按钮 |
圆角 | <a class="button black bigrounded"> 或者... |
圆角的按钮 |
适中号 | <a class="button black medium"> 或者... |
中等号按钮 |
小号 | <a class="button black small"> 或者... |
小号按钮 |
当我还是个小女孩,
我问妈妈
将来我会变成什么样子呢?
会漂亮吗?
会富有吗?
她对我说:
世事不可强求
顺其自然吧
<p class="rgb-red">当我还是个小女孩,</p>
<p class="rgb-yellow">我问妈妈</p>
<p class="rgb-blue">将来我会变成什么样子呢?</p>
<p class="rgb-green">会漂亮吗?</p>
<p>会富有吗?</p>
<p>她对我说:</p>
<p>世事不可强求</p>
<p>顺其自然吧</p>