今天天天高考网小编整理了院校排名css表单 使用CSS对HTML表单进行修饰,效果与excel表格类似,可...，希望在这方面能够更好的帮助到考生及家长。
求大神帮我解决一个html用css*的表单
在同一文件夹新建两文件：demo31.css 和 demo31.html
-----------------------------------------
/* demo31.css 内容如下 */
*{
padding: 0;
margin: 0;
color: #333;
font-size: 15px;
}
table td, table th{
padding: 5px;
text-align: center;
}
.table-title{
font:normal 25px '700' "微软雅黑";
}
.table-itemClo{
background-color: #999;
}
.table-itemClo th{
font:normal 18px '700';
color: #fff;
width: 100px;
}
.table-itemsTit{
background-color: #ddd;
font-weight: 700;
}
.table-itemRowTh{
font-weight: 700;
}
--------------------------------------------------
demo31.html 内容如下（本句不要粘贴进去）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="demo31.css"/>
</head>
<body>
<table border="" cellspacing="0" cellpadding="0">
<tr>
<th class="table-title" colspan="5">浏览器兼容性一览表</th>
</tr>
<tr class="table-itemClo">
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
<tr>
<th class="table-itemsTit" colspan="5">浏览器兼容性一览表</th>
</tr>
<tr>
<td class="table-itemRowTh">Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td class="table-itemRowTh">Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td class="table-itemRowTh">Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th class="table-itemsTit" colspan="5">浏览器兼容性一览表</th>
</tr>
<tr>
<td class="table-itemRowTh">Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td class="table-itemRowTh">Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td class="table-itemRowTh">Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>
</body>
</html>
css 里表单样式
1、按钮的margin-left:-10px;这样的负值。或者学度娘，取消input边框另作。
2、css里面font-size:16px;"Times New Roman",Georgia,Serif;这样。
3、可以设置input的type为image，然后加背景图片。
给出一个例子
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>test</title>
<link rel="stylesheet" href="css.css" type="text/css" media="screen">
<script src="http://libs.baidu.com/jquery/1.7.0/jquery.min.js"></script>
</head>
<body>
<div class="search">
<input id="search" type="text" autofocus="autofocus" >
<div class="submit">搜索</div>
</div>
<style type="text/css">
.search{width:300px;overflow: hidden;border:1px solid #ddd;font-size:16px;height:2em;line-height: 2em;}
.search:hover{border:1px solid #00af60;}
.search input#search{padding-left: 10px;outline: none;width:230px;border:0;}
.search .submit{cursor:pointer;float: right;padding:0 10px;color: #00af60;border-left: 1px solid #ddd;}
.search:hover .submit{background: #00af60;color:#FFF;border:0;/*background:url(1.jpg)*/}
</style>
<script type="text/javascript">
$(function(){
$('.search').hover(function(){$('#search')[0].focus()});//
$('.search .submit').click(function(){
alert("在此检查然后js提交");
})
})
</script>
</body>
</html>
css中如何*表单下拉列表框
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
* { margin:0; border:0; padding:0; list-style:none; list-style-type:none;}
.nav { width:1000px; float:left;}
.nav li { float:left; width:99px; margin-right:1px; display:inline;}
.nav li span { display:block; width:99px; height:30px; line-height:30px; text-align:center; background:#C03; cursor:pointer;}
.nav li p { top:30px; left:0; width:99px; height:auto; display:none;}
.nav li p a { display:block; width:99px; height:28px; line-height:28px; text-align:center; margin-top:1px; background:#F03; color:#fff;}
.nav li:hove span { background:#30F;}
.nav li:hover p { display:block;}
.nav li p a:hover { background:#36F;}
.bga { float:left; background:#336; width:100%; height:100px; color:#fff;}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#"><span>频道1</span></a>
<p><a href="#">频道1-1</a><a href="#">频道1-2</a><a href="#">频道1-3</a><a href="#">频道1-4</a></p>
</li>
<li><a href="#"><span>频道2</span></a></li>
</ul>
<div class="bga">111</div>
</body>
</html>
上面是用li:hover实现的，下面用JS实际，在网上找了一个JQ的。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
* { margin:0; border:0; padding:0; list-style:none; list-style-type:none;}
.nav { width:1000px; float:left;}
.nav li { float:left; width:99px; margin-right:1px; display:inline;}
.nav li span { display:block; width:99px; height:30px; line-height:30px; text-align:center; background:#C03; cursor:pointer;}
.nav li p { top:30px; left:0; width:99px; height:auto; display:none;}
.nav li p a { display:block; width:99px; height:28px; line-height:28px; text-align:center; margin-top:1px; background:#F03; color:#fff;}
.nav li.on span { background:#30F;}
.nav li.on p { display:block;}
.nav li p a:hover { background:#36F;}
.bga { float:left; background:#336; width:100%; height:100px; color:#fff;}
</style>
<script type="text/javascript" src=" http://mat1.gtimg.com/www/asset/lib/jquery/jquery/jquery-1.11.1.min.js "></script>
</head>
<body>
<ul class="nav">
<li><a href="#"><span>频道1</span></a>
<p><a href="#">频道1-1</a><a href="#">频道1-2</a><a href="#">频道1-3</a><a href="#">频道1-4</a></p>
</li>
<li><a href="#"><span>频道2</span></a></li>
</ul>
<div class="bga">111</div>
<script type="text/javascript">
$('.nav li').each(function(){
$(this).hover(function(){
$(this).addClass('on').siblings().removeClass('on');
});
});
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
* { margin:0; border:0; padding:0; list-style:none; list-style-type:none;}
.nav { width:1000px; float:left;}
.nav li { float:left; width:99px; margin-right:1px; display:inline;}
.nav li span { display:block; width:99px; height:30px; line-height:30px; text-align:center; background:#C03; cursor:pointer;}
.nav li p { top:30px; left:0; width:99px; height:auto; display:none;}
.nav li p a { display:block; width:99px; height:28px; line-height:28px; text-align:center; margin-top:1px; background:#F03; color:#fff;}
.nav li:hove span { background:#30F;}
.nav li:hover p { display:block;}
.nav li p a:hover { background:#36F;}
.bga { float:left; background:#336; width:100%; height:100px; color:#fff;}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#"><span>频道1</span></a>
<p><a href="#">频道1-1</a><a href="#">频道1-2</a><a href="#">频道1-3</a><a href="#">频道1-4</a></p>
</li>
<li><a href="#"><span>频道2</span></a></li>
</ul>
<div class="bga">111</div>
</body>
</html>
上面是用li:hover实现的，下面用JS实际，在网上找了一个JQ的。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
* { margin:0; border:0; padding:0; list-style:none; list-style-type:none;}
.nav { width:1000px; float:left;}
.nav li { float:left; width:99px; margin-right:1px; display:inline;}
.nav li span { display:block; width:99px; height:30px; line-height:30px; text-align:center; background:#C03; cursor:pointer;}
.nav li p { top:30px; left:0; width:99px; height:auto; display:none;}
.nav li p a { display:block; width:99px; height:28px; line-height:28px; text-align:center; margin-top:1px; background:#F03; color:#fff;}
.nav li.on span { background:#30F;}
.nav li.on p { display:block;}
.nav li p a:hover { background:#36F;}
.bga { float:left; background:#336; width:100%; height:100px; color:#fff;}
</style>
<script type="text/javascript" src=" http://mat1.gtimg.com/www/asset/lib/jquery/jquery/jquery-1.11.1.min.js "></script>
</head>
<body>
<ul class="nav">
<li><a href="#"><span>频道1</span></a>
<p><a href="#">频道1-1</a><a href="#">频道1-2</a><a href="#">频道1-3</a><a href="#">频道1-4</a></p>
</li>
<li><a href="#"><span>频道2</span></a></li>
</ul>
<div class="bga">111</div>
<script type="text/javascript">
$('.nav li').each(function(){
$(this).hover(function(){
$(this).addClass('on').siblings().removeClass('on');
});
});
</script>
</body>
</html>
使用CSS对HTML表单进行修饰,效果与excel表格类似,可...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
input{ border:0px;}
.ov{ border:2px solid #009999;}
.input{ border:0px;}
</style>
</head><body>
<form id="form1" name="form1" method="post" action="">
<table width="366" border="0" cellspacing="1" bordercolor="#333333" bgcolor="#333333">
<tr>
<td width="17" bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"> </td>
<td width="168" bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>A</label></td>
<td width="204" bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>B</label></td>
</tr>
<tr>
<td width="17" bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'">1</td>
<td width="168" bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>
<input type="text" name="textfield" />
</label></td>
<td width="204" bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>
<input type="text" name="textfield2" />
</label></td>
</tr>
<tr>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'">2</td>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>
<input type="text" name="textfield3" />
</label></td>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>
<input type="text" name="textfield4" />
</label></td>
</tr>
<tr>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'">3</td>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>
<input type="text" name="textfield5" />
</label></td>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>
<input type="text" name="textfield6" />
</label></td>
</tr>
<tr>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'">4</td>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>
<input type="text" name="textfield7" />
</label></td>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>
<input type="text" name="textfield8" />
</label></td>
</tr>
<tr>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'">5</td>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>
<input type="text" name="textfield9" />
</label></td>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>
<input type="text" name="textfield10" />
</label></td>
</tr>
</table>
</form>
</body>
</html>
做了一个，功能差不多的。
<html xmlns=" http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
input{ border:0px;}
.ov{ border:2px solid #009999;}
.input{ border:0px;}
</style>
</head><body>
<form id="form1" name="form1" method="post" action="">
<table width="366" border="0" cellspacing="1" bordercolor="#333333" bgcolor="#333333">
<tr>
<td width="17" bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"> </td>
<td width="168" bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>A</label></td>
<td width="204" bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>B</label></td>
</tr>
<tr>
<td width="17" bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'">1</td>
<td width="168" bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>
<input type="text" name="textfield" />
</label></td>
<td width="204" bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>
<input type="text" name="textfield2" />
</label></td>
</tr>
<tr>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'">2</td>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>
<input type="text" name="textfield3" />
</label></td>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>
<input type="text" name="textfield4" />
</label></td>
</tr>
<tr>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'">3</td>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>
<input type="text" name="textfield5" />
</label></td>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>
<input type="text" name="textfield6" />
</label></td>
</tr>
<tr>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'">4</td>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>
<input type="text" name="textfield7" />
</label></td>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>
<input type="text" name="textfield8" />
</label></td>
</tr>
<tr>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'">5</td>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>
<input type="text" name="textfield9" />
</label></td>
<td bgcolor="#FFFFFF" onmousedown="this.className='ov'" onmouseout="this.className='input'"><label>
<input type="text" name="textfield10" />
</label></td>
</tr>
</table>
</form>
</body>
</html>
做了一个，功能差不多的。
以上，就是天天高考网小编给大家带来的院校排名css表单 使用CSS对HTML表单进行修饰,效果与excel表格类似,可...全部内容，希望对大家有所帮助！
如果你需要图片压缩,天天高考小编推荐个不错的在线图片压缩网站：https://www.yasuotu.com/
TAG：
本文标题：院校排名css表单 使用CSS对HTML表单进行修饰,效果与excel表格类似,可...
wap地址： https://m.ttjm.com/zixun/386732.html
教育" class="thumb">
教育" class="thumb">
