Question

怎么修改这个html网页代码？谢谢！

下面是html代码和CSS代码

html代码：
<div id="searchBox"> <form action="{dede:global.cfg_cmsurl/}/plus/search.php"" class="form" name="formsearch"> <h4>搜索</h4> <input name="keyword" type="text" class="searchInput" id="search-keyword" value="SEARCH THE SITE" onfocus="if(this.value=='SEARCH THE SITE'){this.value='';}" onblur="if(this.value==''){this.value='SEARCH THE SITE';}"/> <input name="submit" type="image" class="searchSubmit" src="{dede:global.cfg_templets_skin/}/images/search_btn.jpg" alt="点击搜索!" /> </form> </div>
CSS代码：
#searchBox{/* 搜索框架 */ width:220px; height:235px; background:#fff; border:1px solid #CCC; float:left; overflow:hidden; clear:both;}#searchBox h4 { display:none; font-size:0px;}input.searchInput{/* 搜索输入框 */ float:left; width:160px; font-size:10px; font-family:Arial; color:#868686; margin-left:10px; margin-top:13px; padding:5px 5px; border:1px solid #e7e7e7;}input.searchSubmit{/* 提交搜索按钮 */ cursor:pointer; float:left; height:25px; width:27px; margin-top:13px; margin-left:5px;}

将以下的图片1修改成图片2的样式

修改成

点击"搜索词"能直接打关键词的搜索页面。





Answer 1

这是要这样的效果： 如果我点击”搜索词1“，SEARCH THE SITE 就变成”搜索词1“，是这个意思么。有个拙见，给input加个css（vertical-align:middle），如果是的话代码如下：

CSS：

*{
    margin:0 auto;
    padding:0;}
li{
    list-style:none;
    float:left;
    width:100px;
    height:30px;
    padding-top:10px;
    display:block}
.shousuo{
    width:200px;
    height:235px;}
.shousuo li a{
    display:block;
    width:60px;
    height:20px;
    color:#000;
    font-family:"\9ED1\4F53";
    border:1px solid #CCC;
    font-size:14px;
    line-height:20px;
    text-decoration:none;
    text-align:center;
    outline:none}

html：

<div id="searchBox">
    <form action="{dede:global.cfg_cmsurl/}/plus/search.php" class="form" name="formsearch">
       <h4>搜索</h4>         
       <input name="keyword" type="text" class="searchInput" id="search-keyword" value="SEARCH THE SITE" onfocus="if(this.value=='SEARCH THE SITE'){this.value='';}"  onblur="if(this.value==''){this.value='SEARCH THE SITE';}"/>             
       <input name="submit" type="image" class="searchSubmit" src="{dede:global.cfg_templets_skin/}/images/search_btn.jpg" alt="点击搜索!" /> 
        <div class="shousuo">
            <ul>
            <li><a href="javascript:;">搜索词1</a></li>
            <li><a href="javascript:;">搜索词2</a></li>
            <li><a href="javascript:;">搜索词3</a></li>
            <li><a href="javascript:;">搜索词4</a></li>
            <li><a href="javascript:;">搜索词5</a></li>
            <li><a href="javascript:;">搜索词6</a></li>
            <li><a href="javascript:;">搜索词7</a></li>
            <li><a href="javascript:;">搜索词8</a></li>
            </ul>
        </div>
     </form>
  </div>

js：

$(function(){
    $(".shousuo li a").click(function(){
        var text=$(this).text();
        $(".searchInput").val(text);
        })
    
    })

如果不是请追问。当然css需要你略作调整

追问

　　‍例如：点击关键词“搜索词1”跳到的页面和在搜索框中输入关键词"搜索词1"进行搜索跳到的页面是同一个搜索结果页面，是同一样的效果。
　　我在搜索文本框下加一些搜索关键词，目的是让别人更容易、方便去搜索出结果。因为这些搜索关键词可以基本上概括出站点的所有内容。
最好能帮我写完整的Css代码和html代码，复制-粘贴，替换到我之前的代码中就可以用，哪就好了```

Answer 2

你是想怎么改？ 直接可以填div标签 设置长宽高 往里面填数据再设置边框显示出来就可以 最后在布局一下

Answer 3

先做好样式，再写js，等我周末有空帮你写好了

追问

好的···