优化CSS样式

来源：互联网发布：淘宝如何预约快递编辑：程序博客网时间：2024/05/22 03:52

学习要点：

页面排版优化
表格优化设计
表单优化设计
外观风格
按钮
图片

一、页面排版优化
1) 标题和字体风格

<p class="lead">强调突出</p>

2)文本强调风格强调类文本

<p>默认</p><p class="muted">提示 浅灰色</p><p class="text-warning">警告 黄色</p><p class="text-error">错误 红色</p><p class="text-info">通知 浅蓝</p><p class="text-success">成功 浅绿</p><small>正常文本85% 不强调的文本</small>

加粗和斜体文本

<strong>加粗</strong><em>斜体</em>

3)文本对齐风格

<p class="text-left">文本左对齐</p><p class="text-center">文本居中</p><p class="text-right">文本右对齐</p>

4)缩略语风格

<attr title="我是缩略语">缩略语</attr>  当鼠标移到文本上显示全部文本<!-- initialism 缩略语字体缩小10% --><attr class="initialism" title="我是缩略语">abc</attr>

5)地址风格

<address>    <a href="#">scryc@qq.com</a><br/>    北京朝阳</address>

6)引用风格

<!-- pull-right 引用向右移动对齐 --><blockquote class="pull-right">    <p>欢迎来到我的博客</p>    <small><cite titile="http://www.lamport.me"><a href="http://www.lamport.me" target="_blank">光明大神棍</a></cite></small></blockquote>

7)列表样式

<!-- unstyled 没有样式 --><!-- 行内样式 --><ul class="unstyled inline">    <li>首页</li>    <li>二手车</li>    <li>二手市场</li>    <li>二手房</li></ul><!-- dl-horizontal 词条和解释并排显示 --><dl class="dl-horizontal">    <dt>人</dt>    <ddt>person</ddt>    <dt>物体</dt>    <ddt>thing</ddt>    <dt>好</dt>    <ddt>good</ddt></dl>

8)代码风格

<!-- 行内代码 --><p>js中定义变量：<code>var i = 0;</code></p><!-- 代码块 --><!-- pre-scrollable 如果代码多的话，会出现一个Y轴滚动条--><pre class="pre-scrollable">    &lt;p class="text-left"&gt;文本左对齐&lt;/p&gt;    &lt;p class="text-center"&gt;文本居中&lt;/p&gt;    &lt;p class="text-right"&gt;文本右对齐&lt;/p&gt;</pre>

二、表格优化设计

<h2>华语九天榜</h2><!-- 添加table样式表 --><!-- table-striped 斑马纹风格 --><!-- table-bordered 圆角边框风格 --><!-- table-hover 鼠标悬浮风格 --><!-- table-condensed 紧凑型表格 padding减半 --><table class="table table-striped table-bordered table-hover table-condensed">    <tr><th>排名</th> <th>歌曲名</th><th>歌手名</th></tr>    <tr><td>1</td><td>我，一个人</td><td>付辛博</td> </tr>    <!-- 成功 -->    <tr class="success"><td>2</td><td>他们</td><td>张惠妹</td></tr>    <tr><td>3</td><td>伤不起</td><td>郁可唯</td></tr>    <!-- 错误 -->    <tr class="error"><td>4</td><td>如果有如果</td><td>邓福如</td></tr>    <tr><td>5</td><td>狂想曲</td><td>萧敬腾</td></tr>    <tr><td>6</td><td>越来越想爱上你</td><td>SD5行堂</td></tr>    <tr class="warning"><td>7</td><td>妈妈咪呀!</td><td>张靓颖</td></tr>    <!-- 警告 -->    <tr><td>8</td><td>除下吊带前</td><td>薛凯琪</td></tr>    <!-- 信息风格 -->    <tr class="info"><td>9</td><td>如梦令（电影《大武生》主题曲）</td><td>韩庚</td></tr>     <tr><td>10</td><td>因为爱情</td><td>陈奕迅</td></tr> </table>

三、表单优化设计1) 输入框

<input type="text" placeholder="请输入姓名">

2) 文本区域

<textarea rows="3"></textarea>

3) 单选按钮和复选框

<!-- inline 行内样式 --><!-- 复选框样式 --><label class="checkbox inline">    <input type="checkbox" value="zhang">复选框</label><!-- 单选框样式 --><label class="radio inline">    <input type="radio" name="sex" value="male" checked>男</label><label class="radio inline">    <input type="radio" name="sex" value="female">女</label>

4) 下拉框

您来自的城市：

潍坊青岛信阳郑州洛阳 5) 修饰文本框

<div class="input-prepend">    <span class="add-on">电子邮件</span>    <input type="text" class="span2" placeholder="scryc@qq.com">    <span class="add-on">@qq.com</span></div><!-- input-prepend和input-append把子组件都绑定 --><div class="input-prepend input-append">    <!-- btn 按钮类 -->    <input type="button" class="btn" value="用户名">    <input type="text">    <button class="btn">注册</button></div>

6) 分段按钮下拉菜单

<!-- input-prepend和input-append把子组件都绑定 --><div class="input-prepend input-append">    <!-- btn 按钮类 -->    <input type="button" class="btn" value="用户名">    <input type="text">    <!-- btn-group 按钮下拉菜单 -->    <div class="btn-group">        <button class="btn">@163.com</button>        <!-- 辅助标签  -->        <button class="btn" data-toggle="dropdown">            <span class="caret" tabindex="-1"></span>        </button>        <ul class="dropdown-menu">            <li><a href="#">@126.com</a></li>            <li><a href="#">@sohu.com</a></li>            <li><a href="#">@qq.com</a></li>            <li><a href="#">@sina.com</a></li>        </ul>    </div>    <button class="btn">登录</button></div>

7) 搜索框

<form class="form-search">    <div class="input-append">        <input type="text" class="span3">        <button type="submit" class="btn">快速搜索</button>    </div></form>

8) 一个注册表单

<!-- 表单的水平布局 --><h3>用户登录</h3><form action="" method="post" class="form-horizontal">    <div class="control-group">        <div class="control-label">            <label for="username">用户名：</label>        </div>        <div class="controls">            <input type="text" id="username">        </div>    </div>    <div class="control-group">        <div class="control-label">            <label for="pass">密   码：</label>        </div>        <div class="controls">            <input type="password" id="pass">        </div>    </div>    <div class="control-group">        <div class="control-label">            <label for="validate">验证码：</label>        </div>        <div class="controls">            <input type="text" id="validate">            <img src="img/getcode.jpg">        </div>    </div>    <div class="control-group">        <div class="controls">            <label for="keepLogin">            <input type="checkbox" id="keepLogin">            记住我的登录信息</label>        </div>    </div>    <div class="control-group">        <div class="controls">            <button type="sumbit">登录</button>            <a href="#" class="reg">用户注册</a>        </div>    </div></form>

9) 圆角搜索框四、外观风格1) 定制大小

<label><input type="text" class="input-mini" placeholder="input-mini"></label><label><input type="text" class="input-small" placeholder=".input-small"></label><label><input type="text" class="input-medium" placeholder=".input-medium"></label><label><input type="text" class="input-large" placeholder=".input-large"></label><label><input type="text" class="input-xlarge" placeholder=".input-xlarge"></label><label><input type="text" class="input-xxlarge" placeholder=".input-xxlarge"></label><!-- 块状显示，100% --><label><input type="text" class="input-block-level" placeholder=".input-block-level"></label><div class="controls-row">    <input type="text" class="span1" placeholder=".span1">    <input type="text" class="span6" placeholder=".span6">    <input type="text" class="span5" placeholder=".span5"></div>

2) 定制不可编辑的样式控件

<!-- uneditable-input 不可编辑的控件 --><input type="text" class="span4 uneditable-input" placeholder=".span4" disabled="disabled"><label class="span4 uneditable-input">不可编辑的</label>

3) 定制帮助文本

<input type="text"><span class="help-inline">同行显示 .help-inline</span><br/><input type="text"><span class="help-block">换行显示 .help-block</span>

4) 定制表单行为

<!-- form-actions 定制表单行为--><form class="form-actions form-horizontal">    <div class="control-group">        <div class="control-label">            <label for="username">用户名：</label>        </div>        <div class="controls">            <input type="text" id="username">        </div>    </div>    <div class="control-group">        <div class="control-label">            <label for="pass">密码：</label>        </div>        <div class="controls">            <input type="password" id="pass">        </div>    </div>    <div class="control-group">        <div class="controls">            <button class="btn">取消</button>            <button class="btn btn-primary">确定登录</button>        </div>    </div></form>

五、按钮1) 定制按钮

<button class="btn">默认</button><button class="btn btn-info">信息</button><button class="btn btn-primary">主要</button><button class="btn btn-success">成功</button><button class="btn btn-warning">警告</button><button class="btn btn-danger">危险</button><button class="btn btn-inverse">反向</button><button class="btn btn-link">链接</button>

2) 大小

<button class="btn btn-info btn-large">信息</button><button class="btn btn-info">信息</button><button class="btn btn-info btn-small">信息</button><button class="btn btn-info btn-mini">信息</button>

3) 块状元素

<button class="btn btn-info btn-block">信息</button>

六、图片1) 图片风格

<div class="row-fluid">    <div class="span3 text-center">        <img src="img/1.png">        <h3>正常效果</h3>    </div>    <div class="span3 text-center">        <img src="img/1.png" class="img-rounded" title="圆角图片">        <h3>圆角效果</h3>    </div>    <div class="span3 text-center">        <img src="img/1.png" class="img-circle" title="圆形图片">        <h3>圆形图片</h3>    </div>    <div class="span3 text-center">        <img src="img/1.png" class="img-polaroid" title="镶边图片">        <h3>镶边图片</h3>    </div></div>

2) 图标风格

<i class="icon-search"></i><!-- icon-white 反色图标 --><i class="icon-search icon-white"></i>

模仿视频播放

<div class="btn-toolbar">    <div class="btn-group">        <a class="btn" href="#"><i class="icon-play"></i></a>        <a class="btn" href="#"><i class="icon-pause"></i></a>        <a class="btn" href="#"><i class="icon-stop"></i></a>        <a class="btn" href="#"><i class="icon-backward"></i></a>        <a class="btn" href="#"><i class="icon-forward"></i></a>    </div></div>

<!-- 导航图标 --><ul class="nav nav-pills">    <li class="active"><a href="#"><i class="icon-home icon-white"></i> 首页</a></li>    <li><a href="#"><i class="icon-book"></i> 资料</a></li>    <li><a href="#"><i class="icon-pencil"></i> 写日志</a></li>    <li><a href="#"><i class="icon-film"></i> 视频<a></li></ul>

<!-- 表单图标 --><form class="form-actions form-horizontal">    <div class="control-group">        <label class="control-label" for="email">邮箱</label>        <div class="controls">            <div class="input-prepend">                <span class="add-on"><i class="icon-envelope"></i></span>                <input type="text" class="span2" id="email">            </div>        </div>        <label class="control-label" for="pass">密码</label>        <div class="controls">            <div class="input-prepend">                <span class="add-on"><i class="icon-lock"></i></span>                <input type="text" class="span2" id="pass">            </div>        </div>    </div></form>

0 0