Html+CSS模仿百度首页带搜索功能

in 日常生活 with 0 commentand 48 read

闲来没事干模仿了两个站,一个是百度首页,有搜索功能,一个是我们学校的官网。

百度
HTML


<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
  <meta name="renderer" content="webkit">
<title>百度一下,你不知道</title>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="javascript.js"></script>

</head>
<body>

<div id="top">
    <span class="wenzi1"><a href="http://news.baidu.com/">新闻</a></span>&nbsp;&nbsp;&nbsp;&nbsp;
    <span class="wenzi1"><a href="https://www.hao123.com/">hao123</a></span>&nbsp;&nbsp;&nbsp;&nbsp;
    <span class="wenzi1"><a href="http://map.baidu.com/">地图</a></span>&nbsp;&nbsp;&nbsp;&nbsp;
    <span class="wenzi1"><a href="http://v.baidu.com/">视频</a></span>&nbsp;&nbsp;&nbsp;&nbsp;
    <span class="wenzi1"><a href="http://tieba.baidu.com/">贴吧</a></span>&nbsp;&nbsp;&nbsp;&nbsp;
    <span class="wenzi1"><a href="http://xueshu.baidu.com/">学术</a></span>&nbsp;&nbsp;&nbsp;&nbsp;
    <span class="wenzi2"><a href="https://passport.baidu.com/v2/?login&tpl=mn&u=http%3A%2F%2Fwww.baidu.com%2F&sms=5">登录</a></span>&nbsp;&nbsp;&nbsp;&nbsp;
    <span class="wenzi2"><a href="http://www.baidu.com/gaoji/preferences.html">设置</a></span>&nbsp;&nbsp;&nbsp;&nbsp;
    <span class="wenzi3"><a href="">更多产品</a></span>
</div>
<div id="logo">
    <img src="" title="百度logo" alt="百度LOGO">
</div>

<!--搜索部分开始-->

<div class="container">
    <div>
        <span class="search-box">
            <form action="https://www.baidu.com/baidu" target="_blank">
               <input type="text" class="search-text" id="kw" name="word">
               <button class="btn" id="search"><input type="submit" value="">百度一下</button>
            </form>
        </span>
    </div>
</div>

<!--搜索部分结束-->

<div id="footer">
    <span>
        <a href="https://www.baidu.com/cache/sethelp/help.html">把百度设为主页</a>&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="http://home.baidu.com/">关于百度</a>&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="http://ir.baidu.com/">About Baidu</a>&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="http://e.baidu.com/?refer=888">百度推广</a>&nbsp;&nbsp;&nbsp;&nbsp;    
    </span>
    <p><br></p>
    <span>
        ©2019 Baidu
        <a href="http://www.baidu.com/duty/">使用百度前必读</a>&nbsp;
        <a href="http://jianyi.baidu.com/">意见反馈</a>&nbsp;
           京ICP证030173号&nbsp;<img src="">&nbsp;&nbsp;
           <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001">京公网安备11000002000001号</a>&nbsp;<img src="" alt="公网安备">
    </span>
</div>

<!--百度APP-->

<div class="bdapp">
    <img src="" alt="百度APP二维码">
    <p>下 载 百 度 APP</p>
    <span>有事搜一搜 没事看一看</span>
</div>

</body>
</html>

CSS


/*

时间-20190716
作业-百度练习
作者-Dongshuwen

*/
*{

margin: 0 auto;
padding: 0px;

}

top{

width: 96%;
height: 50px;
margin-top: 22px;
text-align: right;
font-size: 13px;
background-color: ;

}
.wenzi1{

font-weight: bold;

}
.wenzi3{

padding-top: 3px;
padding-bottom: 3px;

background-color: #317EF3; 

}
.wenzi3 a{

    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 5px;
    padding-right: 5px;
    color: white;
    text-decoration: none;

}
.wenzi3 a:hover{

    color: black;
    background-color: white;

}

top .wenzi1 a,#top .wenzi2 a{

color: black;

}

top .wenzi1 a:hover,#top .wenzi2 a:hover{

color: #00C;

}

logo{

width: 100%;
height: 130px;
text-align: center;
margin-top: 50px;

}

logo img{

width: 270px;
height: 129px;

}

/搜索部分/
.container{

height: 180px;
width: 100%;
text-align: center;
margin-top: 35px;

}

kw {

width: 525px;
height: 18px;
padding: 9px 7px;
font: 16px arial;
border: 1px solid #d8d8d8;
border-bottom: 1px solid #ccc;
vertical-align: top;
outline: none;
margin-right: 0;
background-image: url(images/camera.png);
background-size: 23px 23px;
background-repeat: no-repeat;
background-position: 500px 8px;

}

kw:focus{

border-top: 1px solid #38f;
border-left: 1px solid #38f;
border-bottom: 1px solid #38f;

}

.btn {

cursor: pointer;
width: 102px;
height: 38px;
padding: 0;
border: 0;
background-color: #38f;
font-size: 16px;
color: white;
margin-left: -10px;

}

.bdapp{

text-align: center;

}
.bdapp p{

}
.bdapp span{

font-size: 15px;
color: #999;

}
/Footer/

footer{

width: 98%;
height: 50px;
font-size: 12px;
position: absolute;
left: 0;
right: 0;
bottom: 50px;
color: #969696;
text-align: center;

}

footer a{

color: #969696;

}

footer a:hover{

color: #969696;

}

footer img{

width: 15px;
height: 15px;
vertical-align: middle;

}

/去除输入框的默认样式/
input{

outline:none;  
border:0px;

}

Comments are closed.