怎样用html代码实现如下图的效果，或者用div+css+js怎么实现，跪求完整代码，越详细越好 html+css 如何实现下面的 整体hover 和onfo...
HTML\u4f7f\u7528DIV+CSS\u5982\u4f55\u5b9e\u73b0\u5de6\u8fb9\u5bfc\u822a\uff0c\u53f3\u8fb9\u663e\u793a\u5185\u5bb9\uff0c\u70b9\u51fb\u90a3\u4e2a\u5bfc\u822a\u663e\u793a\u90a3\u4e2a\u5185\u5bb91\u3001\u65b0\u5efahtml\u6587\u6863\u3002
2\u3001\u4e66\u5199hmtl\u4ee3\u7801\u3002
\u524d\u7aef\u4ea4\u6d41
\u4ea4\u4e92\u8bbe\u8ba1
\u89c6\u89c9\u8bbe\u8ba1
\u7528\u6237\u7814\u7a76
\u8bbe\u8ba1\u8336\u5427
\u524d\u7aef\u4ea4\u6d41
\u56e2\u961f\u751f\u6d3b
3\u3001\u4e66\u5199css\u4ee3\u7801\u3002
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; font-weight: normal; }
body { line-height: 1; }
:focus { outline: 1; }
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; }
nav ul, ul, li { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
a { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; background: transparent; text-decoration: none; }
a:hover { text-decoration: underline; }
ins { background-color: #ff9; color: #000; text-decoration: none; }
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom: 1px dotted #000; cursor: help; }
table { border-collapse: collapse; border-spacing: 0; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0; }
input, select { vertical-align: middle; }
.fl { float: left; display: inline-block; }
.fr { float: right; display: inline-block; }
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix { display: inline-table; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
html { font-size: 62.5%; /* 10\u00f716=62.5% */ }
body { font-size: 12px; font-size: 1.2rem; background: #F8F8F8; font-family: "\u5b8b\u4f53"; }
ul { width: 180px; margin: 0 auto; background: #fff; position: relative; z-index: 0; padding: 60px 20px 70px; }
ul li { height: 40px; line-height: 40px; text-align: center; border-bottom: 1px solid #F8F8F8; }
ul li a { color: #666; display: block; }
ul li a:hover { color: #FF5F3E; text-decoration: none; }
ul li a.hover { color: #FF5F3E; }
#lanPos { width: 225px; height: 40px; line-height: 40px; background: #F8F8F8; border-left: 5px solid #FF5F3E; position: absolute; left: -5px; top: 0; z-index: -1; transition: top .2s; }
4\u3001\u4e66\u5199\u5e76\u5f15\u7528js\u4ee3\u7801\u3002
$(function(){
$('#lanPos').css('top',$('.hover').offset().top);
$('ul li').hover(function(){
$('#lanPos').css('top',$(this).offset().top);
},function(){
$('#lanPos').css('top',$('.hover').offset().top);
})
$('ul li').click(function(){
for(var i=0;i<$('ul li').size();i++){
if(this==$('ul li').get(i)){
$('ul li').eq(i).children('a').addClass('hover');
}else{
$('ul li').eq(i).children('a').removeClass('hover');
}
}
})
})
5\u3001\u4ee3\u7801\u6574\u4f53\u7ed3\u6784\u3002
6\u3001\u67e5\u770b\u6548\u679c
\u8fd9\u6837\u554a
\u79fb\u52a8\u4e0a\u9762\u72b6\u6001
.eq:hover{
opacity:0.8;
}
\u653e\u5927\u955c
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>test</title>
</head>
<body>
<table >
<tr>
<td>开始时间</td>
<td>
<div style="float:left; border-style: inset; width:120px">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="15%" rowspan="2"><input id="hoInput" value="08" size="2" maxlength="2" style="border-width:0px; font-size: 16px" readonly="true" onFocus="focusInput(this);"></td>
<td width="5%" rowspan="2">:</td>
<td width="15%" rowspan="2"> <input id="miInput" onFocus="focusInput(this);" value="00" size="2" maxlength="2" style="border-width:0px;font-size: 16px " readonly="true" ></td>
<td width="5%" rowspan="2">:</td>
<td width="15%" rowspan="2"><input id="secInput" onFocus="focusInput(this);" value="00" size="2" maxlength="2" style="border-width:0px;font-size: 16px " readonly="true"></input></td>
<td width="15%" height="5"><input type="button" value="▲" style="height:auto; width:auto;font-size: 10px " onClick="add();"> </input></td>
</tr>
<tr>
<td width="15%" height="5"><input type="button" value="▼" style="height:auto; width:auto ;font-size: 10px" onClick="reduce();"> </input></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<script language="javascript" type="text/javascript">
function $(objId)
{
return document.getElementById(objId);
}
var curInput;
var hourMax=23;
var hourMin=00;
function focusInput(obj)
{
curInput=obj.id;
}
function add()
{
var curObj=$(curInput);
var curVal=$(curInput).value*1+1;
if (curInput=="hoInput" && curVal>23)
{
return;
}
if (curInput!="hoInput" && curVal>59)
{
return;
}
if((curVal+"").length==1)
{
curVal="0"+curVal;
}
curObj.value=curVal;
}
function reduce()
{
var curObj=$(curInput);
var curVal=$(curInput).value*1-1;
if (curVal<0)
{
return;
}
if((curVal+"").length==1)
{
curVal="0"+curVal;
}
curObj.value=curVal;
}
</script>
</body>
</html>
这样的效果好吗?好看但感觉不实用啊,你按上市增加秒，分还是小时啊?
个人建议你用个jquery时间插件datepicker
http://jqueryui.com/datepicker/
在哪截的图?用谷歌浏览器右键 审查元素,看看他们代码怎么写的,直接复制粘贴过来就行啊,
上下按钮倒容易实现，借助jquery ui
http://jqueryui.com/spinner/
但是想在一个框中分小时、分、秒，不大容易，建议分成3个框
绛旓細<table border=1><tr><td width=30>A</td><td width=60 colspan="2" rowspan="2">B</td><td width=30>C</td></tr> <tr><td rowspan="2">E</td> <td width=30>D</td></tr><tr><td colspan="3">F</td></tr></table> ...
绛旓細<div id="zuo"> <!--<input type="button" value="寰宸" class="y">--> <h1>鐧 闄</h1> <form method="post" action="ok.html"> <p class="form_zh"><input type="text" placeholder="璇疯緭鍏ヨ处鍙" class="form_zh_y" autofocus = "autofocus" required = "required"></p> ...
绛旓細鐪嬬湅鍥句簩鐨勬晥鏋溿傞氬父锛屾垜浠缁欒〃鏍煎姞鏍囬锛屼笉鏄敤鍗曞厓鏍肩殑鏂规硶灏辨槸鐢ㄥ浘鐗囷紝寰堥夯鐑︺傚叾瀹烇紝鎴戜滑鍙互鍙敤寰堜竴浜涘緢绠鍗曠殑HTML鏍囪瘑锛屽氨鍙互杞绘澗瀹炵幇缁欒〃鏍煎姞鏍囬浜嗐傝繖涓爣璇嗕技涔庡凡琚汉閬楀繕锛屽緢灏戠湅鍒颁娇鐢紝涓嶈繃瀹瀹炵幇鐨鏁堟灉杩樻槸寰堜笉閿欑殑銆備笅闈㈠氨鏉ョ湅鐪濡備綍瀹炵幇锛<fieldset style= "width:220 " ...
绛旓細<!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=utf-8" /> <title>鏃犳爣棰樻枃妗...
绛旓細鐢╤tml濡備綍鍒朵綔涓涓畝鍗曠殑缃戦〉浠ｇ爜锛1銆侀鍏,鍦ㄨ绠楁満妗岄潰涓婂垱寤轰竴涓柊鏂囦欢澶,鐒跺悗鍦ㄨ鏂囦欢澶逛腑鍒涘缓涓涓柊鐨勬枃鏈枃妗ｃ2銆佺劧鍚庡弻鍑绘墦寮甯︽湁璁颁簨鏈殑鏂囨湰鏂囨。,濡備笅鍥鎵绀,鎴戜滑缂栧啓涓涓畝鍗曠殑html浠ｇ爜銆3銆佸崟鍑烩滃彟瀛樹负鈥濈殑鍔熻兘閫夐」,鏄剧ず榛樿淇濆瓨涓虹紪鐮佷负ANSI銆4銆佹垜浠皢鏇存敼缂栫爜鍜屾枃浠跺悕,灏嗗叾鏇存敼涓哄鍥...
绛旓細2銆佺劧鍚庡弻鍑绘墦寮甯︽湁璁颁簨鏈殑鏂囨湰鏂囨。锛濡備笅鍥鎵绀猴紝鎴戜滑缂栧啓涓涓畝鍗曠殑html浠ｇ爜銆3銆佸崟鍑烩滃彟瀛樹负鈥濈殑鍔熻兘閫夐」锛屾樉绀洪粯璁や繚瀛樹负缂栫爜涓篈NSI銆4銆佹垜浠皢鏇存敼缂栫爜鍜屾枃浠跺悕锛屽皢鍏舵洿鏀逛负濡傚浘鎵绀虹殑鍥惧儚骞朵繚瀛樸5銆佺劧鍚庤繑鍥炲埌鏂板垱寤虹殑鏂囦欢澶癸紝鍙戠幇鏈変竴涓澶栫殑html鏂囦欢銆6銆佹渶鍚庯紝浣跨敤娴忚鍣ㄦ墦寮html鏂囦欢锛...
绛旓細绠鍗曠殑htm鐨勭紪鍐欒繃绋嬪涓嬶細鍏堟柊寤轰竴涓枃鏈枃浠讹紝鍙互鑷繁鍛藉悕锛濡備笅鍥锛屾垜鍛藉悕涓烘祴璇曘傜紪璇戞枃鏈紝浠ユ渶绠鍗曠殑浠ｇ爜鏍煎紡涓轰緥<html> <head> <title> </title> </head> <body> </body></html> 鍦<body></body>鍐欏叆浣犺鍐欑殑鍐呭,涓嬮潰浠ello world涓轰緥銆備慨鏀规枃浠跺悗缂鍚嶏紝灏唗xt鏀...
绛旓細<table width="100%" border="0" cellspacing="3" cellpadding="3"> <tr> <th width="25%" align="center" valign="middle" bgcolor="#eeeeee">鍖哄煙鍔炰簨澶</th> <th width="25%" align="center" valign="middle" bgcolor="#eeeeee">宀椾綅</th> <th width="25%" align="center" ...
绛旓細棣栧厛瀹氱増蹇冿紝鐒跺悗浣跨敤娴姩甯冨眬鎴栬協lex甯冨眬瀹炵幇宸﹀彸涓ゅ垪
绛旓細02鍐浠ｇ爜 鎵撳紑璁颁簨鏈紝缂栧啓浠ｇ爜锛濡備笅鍥鎵绀:03淇敼鍚庣紑鍚嶇О 灏嗚浜嬫湰鐨勫悗缂鏀逛负銆俬tml锛屽涓嬪浘鎵绀:04缃戦〉 妗岄潰涓婁細鍑虹幇涓涓綉椤碉紝濡備笅鍥炬墍绀:05杩愯缃戦〉 鏈鍚庯紝鍦ㄦ祻瑙堝櫒涓婅繍琛岀綉椤碉紝濡備笅鍥炬墍绀:鎬庢牱鐢℉TML鍒朵綔缃戦〉锛熺敤璁颁簨鏈啓缃戦〉浠ｇ爜鍙互鐢ㄨ浜嬫湰鏉ヨ緭鍏ョ綉椤典唬鐮侊紝杩欎釜鏂逛究锛岀郴缁熶竴鑸兘鑷甫浜嗭紝涓...
