together项目进度报告5

这周至现在完成了一些搜索页面相关的任务，搜索界面设计如下图

可以看到，未输入之前仅有一条平直的线和请输入关键字的提示。，担当点击输入框时，会弹出输入的光标，“请输入关键字”则会消失。当输入框内有内容时，输入的内容会变深色。并且输入框左右会有两个标志，左边的叉点击可以清空当前输入的值。右边的双圆圈点击可以搜索。

下方的关键字推荐，鼠标移上去会变大，染色也会变深，点击的话会在搜索框内显示所点击的关键词，可以搜索或修改之后再搜索。

下面是搜索部分的代码：

html：

    

        
        ◎
        ×
        

            
saasdfaasz
            
asadfsdasdd
            
aszxcdasdf
            
asdfsadfasd
        
    

css：

div.search {
    top: 50%;
    left: 50%;
    width: 600px;
    overflow: hidden;
    margin: -50px 0 0 -300px;
}
div.search>input {
    border-style: none;
    background-color: #DEE1E2;
    line-height: 50px;
    text-align: center;
    font-family: robot;
    font-size: 20px;
    border-bottom: 3px solid #999;
    outline-style: none;
    /*padding-left: 10px;*/
}
div.search>i {
    top: 0;
    display: none;
    font-style: normal;
    text-align: center;
    color: #777;
    line-height: 50px;
    width: 50px;
    cursor: pointer;
}
div.search>i.go-search {
    right: 0;
    font-size: 50px;
}
div.search>i.back-search {
    left: 0;
    font-size: 35px;
}
div.search>ul {
    text-align: center;
    overflow-x: visible;
}
div.search>ul>li {
    line-height: 25px;
    font-size: 18px;
    font-family: robot;
    float: left;
    color: #999;
    width: 21%;
    margin: 2%;
    cursor: pointer;
    overflow: visible;
    transition: 
        font-size 0.3s,
        color 0.3s;
}
div.search>ul>li:hover {
    font-size: 21px;
    color: #555;
}

搜索主要是通过js代码来实现：

var hot = $('hot').getElementsByTagName('li');
for (var i = 0; i

除此之外，发现的页面正在制作过程中，但还未完成，以下是部分html代码：

    

        

            

                

                       
                        

                    
                

                        

                    
                

                        

                    
                

                        

                    
                

                        

                    
                

                        

                    
                

                        

                    
                

                        

                    
                

                        

                    
                

                        

                    
                

                        

                    
                

                        

                    
            
            

                正在加载...
            
        
    

每个展示的框内都有一个标题

标签和一段简介。

当简介长度超过li的长度时。自动在内部生成滚动框。滚动框样式被修改，以下是滚动框的样式：

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
::-webkit-scrollbar  
{  
    width: 8px;
}  

/*定义滚动条轨道 内阴影+圆角*/  
::-webkit-scrollbar-track  
{   
    border-radius: 5px;  
    background-color: rgba(0,0,0,0);  
}  

/*定义滑块 内阴影+圆角*/  
::-webkit-scrollbar-thumb  
{  
    border-radius: 5px;
    background-color: #666;  
}  

目前为止工作量大概这么多，这周尽快将基本框架搭出来，后台就可以同步来进行了。