原形边框样式
<img alt="image" style="border-radius: 50%;" src="static/img/profile_small.jpg">
该样式也适合其他页面元素,效果如下:
原图
效果图
一、添加背景音乐
<body background="image/img23.jpg" onLoad="genZhong()"> <embed src="miuse/lang.mp3" width="0" height="0" loop="true"></embed> </body>
二、表格
一、表格细边框 1、背景色 <table width="707" height="194" align="center" cellpadding="2" cellspacing="1" bgcolor="#c9c9c9" > <tr bgcolor="#c9c9c9"> <td width="170" align="right" bgcolor="#e8e8e8">请输入车牌号:</td> <td width="200" bgcolor="#e8e8e8"><input type="text" name="chePiaoHao" id="chePiaoHao" /></td> <td width="337" bgcolor="#e8e8e8">[格式:奥BXXXXXX]</td> </tr> </table> 2、样式 table,table td,table th{border:1px solid #ff0000;border-collapse:collapse;} 说明: border-collapse:collapse:表示表格两边的边框合并为一条 二、表格下滑线 1、用背景颜色、背景图片....设置 <tr> <td height="1" colspan="2" bgcolor="#C0C0C0"></td> </tr> <tr> <td height="1" colspan="2" background="./images/xian01.gif"></td> </tr>
三、页面、字体
1、加粗字体:font-weight:bold;
2、设置透明度:filter:Alpha(opacity=40);
3、设置字体:.font{font-family:"楷体";}
四、给页面控件添加背景图片
例: <tr style="background: url('${ctx}/images/desk/top_bg.jpg') ;">
或
<tr style="background: url('${ctx}/images/desk/top_bg.jpg') no-repeat 3px 33px;">
注:两个坐标表示上下和左右
五、图片坐标的一个特别有用的用法
<img src="images/bt_1.jpg" width="481" height="34" usemap="#Map1"/> <map name="Map1" id="Map1"> <area shape="rect" coords="414,8,471,28" href="MsgList.jsp?kindId=14151" target="_blank"/> </map> 说明:表示当点击图片的相对坐标:coords="414,8,471,28"时,链接到MsgList.jsp页面。
六、页面锚标记
例如我们在做一个很长的网页时,需要在页面内做一个导航,点击导航里的链接不是新开一个窗口或者跳转到其他网址,而是跳转到当前页的某一个位置。那么所要跳转到的那个位置,我们就叫做锚点,它是一种在页面内部定位的方式。 设置锚点也是很简单的,例如一个文章分了三段,每段有个标题,标题的代码是这样的 <h2>我是标题一</h2> <h2>我是标题二</h2> <h2>我是标题三</h2> 如果我想要在页面内设置锚点,做一个索引,点击相应的索引标题就跳转到相应的段落,那么就只要在标题所在的html标签里面设置一个ID,然后链接过去即可,可以像下面这样设置ID: <h2 id="a">我是标题一</h2> <h2 id="b">我是标题二</h2> <h2 id="c">我是标题三</h2> 然后在索引里面这样设置超链接就可以实现和锚点的连接了 <a href="#a">点击我就会跳到第一段</a> <a href="#b">点击我就会跳到第二段</a> <a href="#c">点击我就会跳到第三段</a> 例: <body> <a id="#a">第一段</a> <a id="#b">第二段</a> <a id="#c">第三段</a> <p style="height:300px;" id="a">第一段。。。。。。。。。。。。。</p> <p style="height:300px;" id="b">第二段。。。。。。。。。。。。。</p> <p style="height:300px;" id="c">第三段。。。。。。。。。。。。。</p> </body>
七、类似分组框
<div id="serachReq" style="font-size: 13px;line-height: 20px;"> <fieldset> <legend>查询条件</legend> <table> <tr style="font-size: 13px;"> <td> 用户编号:<input type="text" name="id" id="id"></td> <td> 用户名:<input type="text" name="account" id="account"></td> <td> <a href="javascript:void(0)" class="easyui-linkbutton" plain="true" iconCls="icon-search" onclick="Serach()">查找</a> </td> <td> <a class="easyui-linkbutton" plain="true" iconCls="icon-redo" onclick="clearSerach()">清空查询条件</a> </td> </tr> </table> </fieldset> </div>
效果图:
8、整个页面加上背景色
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" charset="utf-8" src="http://fusion.qq.com/fusion_loader?appid=1101819552&platform=pengyou"></script> <style> #tencentBody {width:100%; height:863px; margin:0px; padding:0px; background-color:#226CC5;} #divTencent {width:100%; height:100%; margin:0px; padding:0px;} #iframeTencent {width:100%; height:100%; margin:0px; padding:0px;} </style> <script> function qDianChongZhi(){ fusion2.dialog.recharge(); } </script> </head> <body id="tencentBody"> <input type="button" value="....." onclick="qDianChongZhi();" /> <div id="divTencent"> <iframe id="iframeTencent" src="http://192.168.3.187:8080/support/login.jsp" frameborder="0" scrolling="no"></iframe> </div> </body> </html>
9、设置input文本框的输入字符限制
<input type="text" maxlength="10" /> //最大容许输入10个字符
10、html状态码
http://yige.org/tags/ref_httpmessages.php
11、背景截取图片、不重复
background: url(../images/list_bg.gif) -336px -30px no-repeat;
12、页面tille 显示logo
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="icon" href="themes/default/images/logo_title.png" type="image/x-icon"/> <title>管理后台登录</title> </head>
效果图:
说明:
<link rel="icon" href="dwz/themes/default/images/logo_title.png" type="image/x-icon"/>给标题加logo,href=" " 为logo图片路劲
13 兼容样式,当样式不正常时用"*"标识的样式
.input_ys_box {margin: 0 auto;padding-left:32px;*padding-left:10px;padding-top:38px;*padding-top:24px;margin-bottom: 10px;}
一、添加背景音乐
<body background="image/img23.jpg" onLoad="genZhong()"> <embed src="miuse/lang.mp3" width="0" height="0" loop="true"></embed> </body>
二、表格
一、表格细边框 1、背景色 <table width="707" height="194" align="center" cellpadding="2" cellspacing="1" bgcolor="#c9c9c9" > <tr bgcolor="#c9c9c9"> <td width="170" align="right" bgcolor="#e8e8e8">请输入车牌号:</td> <td width="200" bgcolor="#e8e8e8"><input type="text" name="chePiaoHao" id="chePiaoHao" /></td> <td width="337" bgcolor="#e8e8e8">[格式:奥BXXXXXX]</td> </tr> </table> 2、样式 table,table td,table th{border:1px solid #ff0000;border-collapse:collapse;} 说明: border-collapse:collapse:表示表格两边的边框合并为一条 二、表格下滑线 1、用背景颜色、背景图片....设置 <tr> <td height="1" colspan="2" bgcolor="#C0C0C0"></td> </tr> <tr> <td height="1" colspan="2" background="./images/xian01.gif"></td> </tr>
三、页面、字体
1、加粗字体:font-weight:bold;
2、设置透明度:filter:Alpha(opacity=40);
3、设置字体:.font{font-family:"楷体";}
四、给页面控件添加背景图片
例: <tr style="background: url('${ctx}/images/desk/top_bg.jpg') ;">
或
<tr style="background: url('${ctx}/images/desk/top_bg.jpg') no-repeat 3px 33px;">
注:两个坐标表示上下和左右
五、图片坐标的一个特别有用的用法
<img src="images/bt_1.jpg" width="481" height="34" usemap="#Map1"/> <map name="Map1" id="Map1"> <area shape="rect" coords="414,8,471,28" href="MsgList.jsp?kindId=14151" target="_blank"/> </map> 说明:表示当点击图片的相对坐标:coords="414,8,471,28"时,链接到MsgList.jsp页面。
六、页面锚标记
例如我们在做一个很长的网页时,需要在页面内做一个导航,点击导航里的链接不是新开一个窗口或者跳转到其他网址,而是跳转到当前页的某一个位置。那么所要跳转到的那个位置,我们就叫做锚点,它是一种在页面内部定位的方式。 设置锚点也是很简单的,例如一个文章分了三段,每段有个标题,标题的代码是这样的 <h2>我是标题一</h2> <h2>我是标题二</h2> <h2>我是标题三</h2> 如果我想要在页面内设置锚点,做一个索引,点击相应的索引标题就跳转到相应的段落,那么就只要在标题所在的html标签里面设置一个ID,然后链接过去即可,可以像下面这样设置ID: <h2 id="a">我是标题一</h2> <h2 id="b">我是标题二</h2> <h2 id="c">我是标题三</h2> 然后在索引里面这样设置超链接就可以实现和锚点的连接了 <a href="#a">点击我就会跳到第一段</a> <a href="#b">点击我就会跳到第二段</a> <a href="#c">点击我就会跳到第三段</a> 例: <body> <a id="#a">第一段</a> <a id="#b">第二段</a> <a id="#c">第三段</a> <p style="height:300px;" id="a">第一段。。。。。。。。。。。。。</p> <p style="height:300px;" id="b">第二段。。。。。。。。。。。。。</p> <p style="height:300px;" id="c">第三段。。。。。。。。。。。。。</p> </body>
七、类似分组框
<div id="serachReq" style="font-size: 13px;line-height: 20px;"> <fieldset> <legend>查询条件</legend> <table> <tr style="font-size: 13px;"> <td> 用户编号:<input type="text" name="id" id="id"></td> <td> 用户名:<input type="text" name="account" id="account"></td> <td> <a href="javascript:void(0)" class="easyui-linkbutton" plain="true" iconCls="icon-search" onclick="Serach()">查找</a> </td> <td> <a class="easyui-linkbutton" plain="true" iconCls="icon-redo" onclick="clearSerach()">清空查询条件</a> </td> </tr> </table> </fieldset> </div>
效果图:
8、整个页面加上背景色
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" charset="utf-8" src="http://fusion.qq.com/fusion_loader?appid=1101819552&platform=pengyou"></script> <style> #tencentBody {width:100%; height:863px; margin:0px; padding:0px; background-color:#226CC5;} #divTencent {width:100%; height:100%; margin:0px; padding:0px;} #iframeTencent {width:100%; height:100%; margin:0px; padding:0px;} </style> <script> function qDianChongZhi(){ fusion2.dialog.recharge(); } </script> </head> <body id="tencentBody"> <input type="button" value="....." onclick="qDianChongZhi();" /> <div id="divTencent"> <iframe id="iframeTencent" src="http://192.168.3.187:8080/support/login.jsp" frameborder="0" scrolling="no"></iframe> </div> </body> </html>
9、设置input文本框的输入字符限制
<input type="text" maxlength="10" /> //最大容许输入10个字符
10、html状态码
http://yige.org/tags/ref_httpmessages.php
11、背景截取图片、不重复
background: url(../images/list_bg.gif) -336px -30px no-repeat;
12、页面tille 显示logo
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="icon" href="themes/default/images/logo_title.png" type="image/x-icon"/> <title>管理后台登录</title> </head>
效果图:
说明:
<link rel="icon" href="dwz/themes/default/images/logo_title.png" type="image/x-icon"/>给标题加logo,href=" " 为logo图片路劲
13 兼容样式,当样式不正常时用"*"标识的样式
.input_ys_box {margin: 0 auto;padding-left:32px;*padding-left:10px;padding-top:38px;*padding-top:24px;margin-bottom: 10px;}