CSS特效

1.只有下边框的文本框和像文字的按钮

效果图:

View Code
<html>
<head>
<title>像文字一样的按钮</title>
<style>
<!--
body{
    background-color:#daeeff;            /* 页面背景色 */
}
form{
    margin:0px; padding:0px;
    font:14px;
}
input{
    font:14px Arial;
}
.txt{
    border-bottom:1px solid #005aa7;    /* 下划线效果 */
    color:#005aa7;
    border-top:0px; border-left:0px;
    border-right:0px;
    background-color:transparent;        /* 背景色透明 */
}
.btn{
    background-color:transparent;        /* 背景色透明 */
    border:0px;                            /* 边框取消 */
}
-->
</style>
   </head>
<body>
<form method="post">
    请输入您的信息: <input type="text" name="name" id="name" class="txt">
    <input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" class="btn">
</form>
</body>
</html>

 

2.七彩的下拉菜单

效果图:

CSS特效

View Code
<html>
<head>
<title>七彩的下拉菜单</title>
<style>
<!--
.blue{
    background-color:#7598FB;
    color: #000000;
}
.red{
    background-color:#E20A0A;
    color: #ffffff;
}
.green{
    background-color:#3CB371;
    color: #ffffff;
}
.yellow{
    background-color:#FFFF6F;
    color: #000000;
}
.cyan{
    background-color:00FFFF;
    color:#000000;
}
.purple{
    background-color:800080;
    color:#FFFFFF;
}
-->
</style>
   </head>
<body>
<form method="post">
    <p><label for="color">Select your favorite color:</label>
    <select name="color" id="color">
        <option value="">Select One</option>
        <option value="blue" class="blue">blue</option>
        <option value="red" class="red">red</option>
        <option value="green" class="green">green</option>
        <option value="yellow" class="yellow">yellow</option>
        <option value="cyan" class="cyan">cyan</option>
        <option value="purple" class="purple">purple</option>
    </select></p>
    <p><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit"></p>
</form>
</body>
</html>

 

 

3.直接输入的Excel表格

 效果图:

CSS特效

View Code
<html>
<head>
<title>直接输入的Excel表格</title>
<style>
<!--
table.formdata{
    border:1px solid #5F6F7E;
    border-collapse:collapse;
    font-family:Arial;
}
table.formdata caption{
    text-align:left;
    padding-bottom:6px;
}
table.formdata th{
    border:1px solid #5F6F7E;
    background-color:#E2E2E2;
    color:#000000px;
    text-align:left;
    font-weight:normal;
    padding:2px 8px 2px 6px;
    margin:0px;
}
table.formdata td{
    margin:0px;
    padding:0px;
    border:1px solid #ABABAB;    /* 单元格边框 */
}
table.formdata input{
    width:100px;
    padding:1px 3px 1px 3px;
    margin:0px;
    border:none;                /* 输入框不要边框 */
    font-family:Arial;
}
.btn{
    border:1px solid #0083f2;
    font-family:Arial;
}
-->
</style>
   </head>
<body>
<form method="post">
<table class="formdata">
<caption>公司销售统计表 2004~2007</caption>
<tr>
<th></th>
<th scope="col">2004</th>
<th scope="col">2005</th>
<th scope="col">2006</th>
<th scope="col">2007</th>
</tr>
<tr>
<th scope="row">硬盘(Hard Disk)</th>
    <td><input type="text" name="harddisk2004" id="harddisk2004"></td>
    <td><input type="text" name="harddisk2005" id="harddisk2005"></td>
    <td><input type="text" name="harddisk2006" id="harddisk2006"></td>
    <td><input type="text" name="harddisk2007" id="harddisk2007"></td>
</tr>
<tr>
    <th scope="row">主板(Mainboard)</th>
    <td><input type="text" name="mainboard2004" id="mainboard2004"></td>
    <td><input type="text" name="mainboard2005" id="mainboard2005"></td>
    <td><input type="text" name="mainboard2006" id="mainboard2006"></td>
    <td><input type="text" name="mainboard2007" id="mainboard2007"></td>
</tr>
<tr>
    <th scope="row">内存条(Memory Disk)</th>
    <td><input type="text" name="memory2004" id="memory2004"></td>
    <td><input type="text" name="memory2005" id="memory2005"></td>
    <td><input type="text" name="memory2006" id="memory2006"></td>
    <td><input type="text" name="memory2007" id="memory2007"></td>
</tr>
<tr>
    <th scope="row">机箱(Case)</th>
    <td><input type="text" name="case2004" id="case2004"></td>
    <td><input type="text" name="case2005" id="case2005"></td>
    <td><input type="text" name="case2006" id="case2006"></td>
    <td><input type="text" name="case2007" id="case2007"></td>
</tr>
<tr>
<th scope="row">电源(Power)</th>
    <td><input type="text" name="power2004" id="power2004"></td>
    <td><input type="text" name="power2005" id="power2005"></td>
    <td><input type="text" name="power2006" id="power2006"></td>
    <td><input type="text" name="power2007" id="power2007"></td>
</tr>
<tr>
    <th scope="row">CPU风扇(CPU Fan)</th>
    <td><input type="text" name="cpufan2004" id="cpufan2004"></td>
    <td><input type="text" name="cpufan2005" id="cpufan2005"></td>
    <td><input type="text" name="cpufan2006" id="cpufan2006"></td>
    <td><input type="text" name="cpufan2007" id="cpufan2007"></td>
</tr>
<tr>
<th scope="row">总计(Total)</th>
    <td><input type="text" name="total2004" id="total2004"></td>
    <td><input type="text" name="total2005" id="total2005"></td>
    <td><input type="text" name="total2006" id="total2006"></td>
    <td><input type="text" name="total2007" id="total2007"></td>
</tr>
</table>
<p><input type="submit" name="btnSubmit" id="btnSubmit" value="Add Data" class="btn">
<input type="reset" value="Reset All" class="btn"></p>
</form>
</body>
</html>

 

 

4.热点调查

效果图:

CSS特效

View Code
<html>
<head>
<title>Sina调查问卷</title>
<style>
<!--
table.outside{                    /* 外层表格 */
    background:url(bg1.jpg);
    font-size:12px;
    padding:0px;
}

td.title{                        /* 表格标题 */
    color:#FFFFFF;
    font-weight:bold;
    text-align:center;
    padding-top:3px;
    padding-bottom:0px;
}
td.tdoutside{
    padding:0px 1px 4px 1px;
}
table.inside{                    /* 内层表格 */
    width:269px;
    font-size:12px;
    padding:0px;
    margin:0px;
}
td.tdinside{
    padding:7px 0px 7px 10px;
    background-color:#FFD455;
}
form{
    margin:0px; padding:0px;
}
input{
    font-size:12px;
}
a{
    color:#000000;
    text-decoration:underline;
}
-->
</style>
   </head>
<body>
<table class="outside">
    <tr><td class="title">热点调查</td></tr>
    <tr><td class="tdoutside">
        <form method="post">
        <table class="inside" cellspacing="0"> 
            <tr>
                <td class="tdinside">
                中非黄岩岛,中日钓鱼岛.中国胜率多少<br>
                <input type="radio" name="q_498" value="2749">超过90%<br>
                <input type="radio" name="q_498" value="2750">50%到90%<br>
                <input type="radio" name="q_498" value="2751">40%到50%<br>
                <input type="radio" name="q_498" value="2752">40%到50%<br>
                <input type="radio" name="q_498" value="2753">30%以下<br>
                <input type="submit" value="提交">
                <input type="button" name="viewresult" value="查看"> <a href="#">更新军事新闻</a> 
                </td>
            </tr>
        </table>
        </form>
    </td></tr>
</table>
</body>
</html>

 

 

你可能感兴趣的:(css)