请问用div+css怎么布局优酷的搜索框的内容呀?
- 提问者网友:抽煙菂渘情少年
- 2021-05-24 20:33
- 五星知识达人网友:往事埋风中
- 2021-05-24 21:02
<!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>优酷的搜索框</title>
<link href=" http://static.youku.com/v1.0.0606/index/css/youku.css" rel="stylesheet" type="text/css" />
</style>
</head>
<body>
<div class="search">
<form id="headSearchForm" onsubmit="return dosearch(this);" name="headSearchForm" action=" http://www.soku.com/search_video" method="get">
<div class="soTool">
<div class="soCore">
<div class="soSelect">
<div id="headSlected" class="option_current" onclick="if(document.getElementById('headSel').style.display=='none'){document.getElementById('headSel').style.display='block';}else {document.getElementById('headSel').style.display='none';};return false;">视频</div>
<div class="option_arrow">
<a onclick="if(document.getElementById('headSel').style.display=='none'){document.getElementById('headSel').style.display='block';}else {document.getElementById('headSel').style.display='none';};return false;" href="#"><span class="arrow"><span>v</span></span></a>
</div>
<div class="clear"></div>
<ul id="headSel" class="options" style="display:none" onmouseout="drop_mouseout('head');" onmouseover="drop_mouseover('head')">
<li><a onclick="return search_show('head','video',this)" href="#">视频</a></li>
<li><a onclick="return search_show('head','playlist',this)" href="#">专辑</a></li>
<li><a onclick="return search_show('head','bar',this)" href="#">看吧</a></li>
<li><a onclick="return search_show('head','user',this)" href="#">空间</a></li>
</ul>
</div>
<div class="soText">
<input id="headq" class="txtSearch" type="text" maxlength="200" value="" name="q" autocomplete="off" />
<input id="searchdomain" name="searchdomain" type="hidden" value=" http://www.soku.com">
<input id="headSearchType" name="searchType" type="hidden" value="video">
</div>
<div class="soButton" >
<div class="btnSearch">
<a onclick="return dosearch(document.getElementById('headSearchForm'));" href="#">搜索</a>
</div>
</div>
<div class="clear"></div>
</div><!--soCore end-->
<div id="searchextend0" class="soExtend">
<input id="sbtPost" class="radio" type="radio" onclick="csbt(this,this.form.sbts);" name="sbt" value="post"/> <label for="sbtPost">搜贴子</label>
<input id="sbtUser" class="radio" type="radio" onclick="csbt(this,this.form.sbts);" name="sbt" value="user"/> <label for="sbtUser">按作者搜</label>
<input type="hidden" name="sbts" value="bar"/>
</div>
<div id="sorelated" class="soRelated">
<a target="_blank" href=" http://www.soku.com/search_video/q_%E6%B3%A1%E6%B2%AB%E4%B9%8B%E5%A4%8F" class="">泡沫之夏</a>
<a target="_blank" href=" http://www.soku.com/search_video/q_%E5%B0%B1%E6%83%B3%E7%88%B1%E7%9D%80%E4%BD%A0" class="">就想爱着你</a>
<a target="_blank" href=" http://www.soku.com/search_video/q_%E5%8F%88%E7%9C%8B%E6%B5%81%E6%98%9F%E9%9B%A8" class="">又看流星雨</a>
<span class="lineBreak">|</span>
<a target="_blank" href=" http://www.youku.com/v_olist/c_97.html">热播剧集</a> <span class="lineBreak">|</span>
<a charset="0-630-1" href=" http://www.soku.com/search_top/" target="_blank">排行榜</a>
<a charset="0-062-7" href="javascript:advancedsearch();void(0);">高级搜索</a>
</div>
</div><!--soTool end-->
</form>
</div><!--search end-->
</body>
</html>
这个代码不错,,我也收藏了!