精仿百度搜索页静态网页

**

html代码

**

<!-- 百度静态页面 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度一下,你就知道</title>
    <!-- 引入标题 ico图片 -->
    <link rel="Shortcut Icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="index.css">
    
</head>

<body>
    <!-- nav -->
    <div class="nav">
        <ul>
            <li><a href="###">新闻</a></li>
            <li><a href="###">hao123</a></li>
            <li><a href="###">地图</a></li>
            <li><a href="###">直播</a></li>
            <li><a href="###">视频</a></li>
            <li><a href="###">贴吧</a></li>
            <li><a href="###">学术</a></li>
            <li class="c_more">
                <a href="###">更多</a>
                <div class="more">
                    <ul>
                        <li>
                            <img src="images/baiduyun@2x-e0be79e69e.png"></img>
                            <div><span><a>&nbsp网盘</a></span></div>
                        </li>
                        <li>
                            <img src="images/zhidao@2x-e9b427ecc4.png"></img>
                            <div><a>&nbsp知道</a></div>
                        </li>
                        <li>
                            <img src="images/baike@2x-1fe3db7fa6.png"></img>
                            <div><a>&nbsp百科</a></div>
                        </li>
                        <li>
                            <img src="images/tupian@2x-482fc011fc.png"></img>
                            <div><a>&nbsp图片</a></div>
                        </li>


                    </ul>
                    <ul>
                        <li>
                            <img src="images/baobaozhidao@2x-af409f9dbe.png"></img>
                            <div><a>&nbsp宝宝</a></div>
                        </li>
                        <li>
                            <img src="images/wenku@2x-f3aba893c1.png"></img>
                            <div><a>&nbsp文库</a></div>
                        </li>
                        <li>
                            <img src="images/jingyan@2x-e53eac48cb.png"></img>
                            <div><a>&nbsp经验</a></div>
                        </li>
                        <li>
                            <img src="images/yinyue@2x-c18adacacb.png"></img>
                            <div><a>&nbsp音乐</a></div>
                        </li>
                    </ul>
                    <div class="last"><a href="">查看全部百度产品></a></div>
                </div>
            </li>
        </ul>
        <!-- 更多栏 -->

    </div>
    <!-- content -->
    <div class="content">
        <div class="logo">

        </div>
        <div class="search">
            <input type="text">
            <button>百度一下</button>
            <div class="con">

            </div>
        </div>
    </div>
    <!-- recommend -->
    <div class="recommend">
        <div class="rec_nav">
            <span class="c_span_1">推荐</span>
            <span class="c_span_2">导航</span>

        </div>
        <div class="rec_1">
            <ul>
                <li>
                    <img src="images/rec1.jpg" alt="">
                    <div>
                        <span class="span_1"><a>观测水星的好时机来了!几年首次水星西大距3月6日上演</a></span>
                        <span class="span_2">光明网&nbsp;&nbsp;03-04 19:01</span>
                    </div>
                </li>

            </ul>
            <ul>
                <li>
                    <img src="images/rec2.jpg" alt="">
                    <div>
                        <span class="span_1"><a>八年两会上,那些暖心的话,让我们多少人掉下了眼泪</a></span>
                        <span class="span_2">上观新闻&nbsp;&nbsp;03-04 19:22</span>
                    </div>
                </li>

            </ul>
            <ul>
                <li>
                    <img src="images/rec3.jpg" alt="">
                    <div>
                        <span class="span_1"><a>华为云4核0G云服务器,现可免费领取!&nbsp;&nbsp;</a></span>
                        <span class="span_2">华为云&nbsp;&nbsp;广告</span>
                    </div>
                </li>

            </ul>
            <ul>
                <li>
                    <img src="images/rec4.jpg" alt="">
                    <div>
                        <span class="span_1"><a>英国对苹果展开反垄断调查:App Store或设置不公平条款</a></span>
                        <span class="span_2">光明网&nbsp;&nbsp;03-04 19:01</span>
                    </div>
                </li>

            </ul>
            <div class="rec_1_r">
                <ul>
                    <li>百度热榜</li>
                    <li>
                        <div class="rec_1_r_1">
                            <span class="color_fe2d46">1</span>政协开幕会上这一幕让人感动
                        </div>
                        <div class="rec_1_r_2">
                            <i>1092万</i>
                        </div>
                    </li>
                    <li>
                        <div class="rec_1_r_1">
                            <span class="color_f60">2</span>院士不建议大部分孩子学奥数新
                        </div>
                        <div class="rec_1_r_2">
                            <i>452万</i>
                        </div>
                    </li>
                    <li>
                        <div class="rec_1_r_1">
                            <span class="color_faa90e">3</span>中国第三批航天员选拔完成
                        </div>
                        <div class="rec_1_r_2">
                            <i>436万</i>
                        </div>
                    </li>
                    <li>

                        <div class="rec_1_r_1">
                            <span class="color_222">4</span>海底捞将牛肉粒换成味伴侣
                        </div>
                        <div class="rec_1_r_2">
                            <i>411万</i>
                        </div>
                    </li>
                    <li>
                        <div class="rec_1_r_1">
                            <span class="color_222">5</span>为挺台湾凤梨男子狂吃凤梨险丧命
                        </div>
                        <div class="rec_1_r_2">
                            <i>390万</i>
                        </div>
                    </li>
                    <li>
                        <div class="rec_1_r_1">
                            <span class="color_222">6</span>女子贷款13万婚恋网站相亲未果
                        </div>
                        <div class="rec_1_r_2">
                            <i>499万</i>
                        </div>
                    </li>
                    <li>
                        <div class="rec_1_r_1">
                            <span class="color_222">7</span>福原爱晒亲笔信再道歉
                        </div>
                        <div class="rec_1_r_2">
                            <i>888万</i>
                        </div>
                    </li>
                    <li>
                        <div class="rec_1_r_1">
                            <span class="color_222">8</span>韩国或成世界上首个消失的国家
                        </div>
                        <div class="rec_1_r_2">
                            <i>90万</i>
                        </div>
                    </li>
                    <li>
                        <div class="rec_1_r_1">
                            <span class="color_222">9</span>委员建议高考调至6月首个周末
                        </div>
                        <div class="rec_1_r_2">
                            <i>80万</i>
                        </div>
                    </li>

                </ul>
            </div>
        </div>
        <div class="rec_2">
            <ul>
                <li>
                    <img src="images/hao123.png" alt="">
                    <div>hao123</div>
                </li>
                <li>
                    <img src="images/jingdong.png" alt="">
                    <div>京东</div>
                </li>
                <li>
                    <img src="images/tianmao.png" alt="">
                    <div>天猫</div>
                </li>
                <li>
                    <img src="images/苏宁易购.png" alt="">
                    <div>苏宁易购</div>
                </li>
                <li>
                    <img src="images/淘宝.png" alt="">
                    <div>淘宝</div>
                </li>
                <li>
                    <img src="images/haokanshipin.png" alt="">
                    <div>好看视频</div>
                </li>
                <li>
                    <img src="images/qiqiyi.png" alt="">
                    <div>爱奇艺</div>
                </li>
                <li>
                    <img src="images/bilibili.png" alt="">
                    <div>哔哩哔哩</div>
                </li>
            </ul>
            <ul>
                <li>
                    <img src="images/youku.png" alt="">
                    <div>优酷网</div>
                </li>
                <li>
                    <img src="images/weibo.png" alt="">
                    <div>微博</div>
                </li>
                <li>
                    <img src="images/tengxun.png" alt="">
                    <div>腾讯网</div>
                </li>
                <li>
                    <img src="images/souhu.png" alt="">
                    <div>搜狐网</div>
                </li>
                <li>
                    <img src="images/xinlang.png" alt="">
                    <div>新浪网</div>
                </li>
                <li>
                    <img src="images/weipinhui.png" alt="">
                    <div>唯品会</div>
                </li>
                <li>
                    <img src="images/4399.png" alt="">
                    <div>4399</div>
                </li>
                <li>
                    <img src="images/wangyi.png" alt="">
                    <div>网易</div>
                </li>
            </ul>
            <ul>
                <li>
                    <img src="images/zhidao@2x-e9b427ecc4.png" alt="">
                    <div>知道网</div>
                </li>
                <li>
                    <img src="images/guangmingwang.png" alt="">
                    <div>光明网</div>
                </li>
                <li>
                    <img src="images/yangshiwang.png" alt="">
                    <div>央视网</div>
                </li>
                <li>
                    <img src="images/renminwnag.png" alt="">
                    <div>人民网</div>
                </li>
                <li>
                    <img src="images/zhongguowang.png" alt="">
                    <div>中国网</div>
                </li>
                <li>
                    <img src="images/zhongguancun.png" alt="">
                    <div>中关村在线</div>
                </li>
                <li>
                    <img src="images/qichezhijia.png" alt="">
                    <div>汽车之家</div>
                </li>
                <li>
                    <img src="images/xueqiu.png" alt="">
                    <div>雪球</div>
                </li>
            </ul>
            <ul>
                <li>
                    <img src="images/kuaidi100.png" alt="">
                    <div>快递100</div>
                </li>
                <li>
                    <img src="images/qidian.png" alt="">
                    <div>起点中文网</div>
                </li>
                <li>
                    <img src="images/douyu.png" alt="">
                    <div>斗鱼</div>
                </li>
                <li><a href="dianhaozi.html">
                        <img src="images/dianhaozi.png" alt="">
                        <div>电耗子科技</div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- footer -->
    <div class="footer">
        <ul>
            <li>设为首页</li>
            <li>关于百度</li>
            <li>AboutBaidu</li>
            <li>百度营销</li>
            <li>使用百度前必读</li>
            <li>意见反馈</li>
            <li>京公网安备110201号</li>
            <li>京CP证D0173号</li>
            <li>@221Badu</li>
            <li>(京)经营性201740</li>
        </ul>
    </div>
    <!-- js -->
    <script>
        // 获取元素
        var input = document.querySelector('input');
        input.onfocus = function () {
            input.style.border = '2px solid  #4e6ef2';
        }
        input.onblur = function () {
            input.style.border = '2px solid #c4c7ce';
        }
        var more = document.querySelector('.more');
        var c_more = document.querySelector('.c_more')
        // css :hover 以代替js
        // c_more.onmouseover = function () {
        //     more.style.display = 'block';
        // }
        // c_more.onmouseout = function () {
        //     more.style.display = 'none';
        // }
        var c_span_1 = document.querySelector('.c_span_1');
        var c_span_2 = document.querySelector('.c_span_2');
        var rec_1 = document.querySelector('.rec_1');
        var rec_2 = document.querySelector('.rec_2');
        c_span_1.onclick = function() {
            c_span_1.style.borderBottom = '2px solid #4e6ef2';
            c_span_2.style.borderBottom = 'none';
            c_span_1.style.color = '#222';
            c_span_2.style.color = '#9195a3';
            rec_1.style.display = 'block';
            rec_2.style.display = 'none';
        }
        c_span_2.onclick = function() {
            c_span_2.style.borderBottom = '2px solid #4e6ef2';
            c_span_1.style.borderBottom = 'none';
            c_span_2.style.color = '#222';
            c_span_1.style.color = '#9195a3';
            rec_1.style.display = 'none';
            rec_2.style.display = 'block';
        }
    </script>

</html>

css代码

/* 初始化 */
*{
    /* 清除内外边距 */
    margin: 0;
    padding: 0;
    /* 清除小圆点 */
    list-style: none;
    /* 清除input的默认边框颜色和点击边框颜色 */
    outline:none;
    border:none;
}
li:hover{
    cursor:pointer;
}
a {
    color: black;
    text-decoration: none;
}
a:hover {
    color: #4e6ef2;
    cursor:pointer;
}


/* nav */
.nav ul {
    display: flex;
    padding: 20px;
}
.nav ul li {
    padding-right: 30px;
    font-size: 14px;
    
}


.nav .more {
    width: 300px;
    height: 200px;
    background: #ffffff;
    position: absolute;
    left: -256px;
    top: 30px;
    /* padding: 20px; */
    box-shadow: 0 2px 10px 0 rgb(0 0 0 / 15%);
    border-radius: 12px;
    display: none;
}
.nav .c_more{
    height: 50px;
    width: 50px;
    position: absolute;
    left: 450px;
   
}
.c_more:hover .more {
   display: block;
}
.c_more .more ul{
    width: 100px;
    height: 55px;
    padding:10px;
    margin-left: 10px;
}
.c_more .more ul li {
    width: 42px;
    height: 50px;
    /* background: rosybrown; */
    padding: 0 10pxpx;
    
}
.c_more .more ul li:hover a {
    color: #4e6ef2;
}
.c_more .more ul li img {
    width: 42px;
    height: 42px;
    
    /* background: red; */
}
.c_more .more ul li div {
    width: 42px;
    /* background-color: red; */
}
.c_more .more .last a{
    color: #9195a3;
}
.c_more .more .last a:hover{
    color: blue;
}
.c_more .more .last{
    position: relative;
    top: 16px;
    left: 80px;
}



/* content */
.content {
    width: 700px;
    height: 280px;
    /* background: pink; */
    margin: auto;
}
.content .logo{
    width: 270px;
    height: 130px;
    background-image: url(images/logo.png);
    background-size: contain;
    margin: auto;
}
.content .search{
    /* background-color: aqua; */
    margin-top: 15px;
}
.content .search input{
    width: 550px;
    height: 40px;
    border:2px solid #c4c7ce;
    border-radius:10px 0 0 10px;
    /* 清除点击后的默认边线 */
    outline: none;
    padding-left: 15px;
    
}
.content .search input:hover {
    border:2px solid #a7aab5;
}
.content .search button {
    width: 100px;
    height: 43px;
    background-color: #4e6ef2;
    font-size: 18px;
    color: white;
    position: relative;
    right: 6px;
    top: 3px;
    border-radius: 0 10px 10px 0;
}
.content .search .con {
    width: 24px;
    height: 24px;
    background-image: url(images/nicon.png);
    background-position: 0 48px;   
    position: relative;
    top: -32px;
    left: 530px;
}
.content .search .con:hover {
    background-position: 0 24px;  
}


/* recommend */
.recommend {
    margin: auto;
    width: 1000px;
    height: 500px;
    /* background-color: pink; */
}
.recommend .rec_nav span {
    /* padding: 4px 10px; */
    margin: 0 10px;
    color: #9195a3;
    padding-bottom: 5px;
    border-bottom: 2px solid #4e6ef2;
}
.recommend .rec_nav .c_span_1 {
    color: #222;
    border-bottom: 2px solid #4e6ef2;
}
.recommend .rec_nav .c_span_2 {
    color: #9195a3;
    border-bottom: none;
}
.recommend .rec_nav span:hover{
    cursor:pointer;
    color: #222;
}
.recommend .rec_1 {
    display: block;
}
.recommend .rec_1 ul li{
    margin-top: 15px;
    display:flex;
    width: 560px;
    height: 130px;
    /* background: blueviolet; */
}
.recommend .rec_1 ul li img {
    width: 180px;
    height: 120px;
    border-radius: 15px;
}
.recommend .rec_1 div {
    display: block;
    margin-left: 20px;
}
.recommend .rec_1 .span_1 {
    color: #222;
    font-size: 20px;
}
.recommend .rec_1 .span_2 {
    display: block;
    margin-top: 45px;
    color: #626675;
    font-size: 14px;
}
.recommend .rec_1 .rec_1_r {
    width: 330px;
    height: 400px;
    position: absolute;
    left: 930px;
    top: 328px;
}
.recommend .rec_1 .rec_1_r li{
    width: 100%;
    height: 20px;
    font-size: 14px;
    display: flex;
    /* 弹性布局 两端对齐 */
    justify-content : space-between
}
.recommend .rec_1 .rec_1_r li:hover{
    color: #4e6ef2;
}
.recommend .rec_1 .rec_1_r li span {
    padding-right: 10px;
}
.recommend .rec_1 .rec_1_r .rec_1_r_1 {
    margin-left: 0;
}
.recommend .rec_1 .rec_1_r .rec_1_r_2 i{
    font-style: normal;
    font-size: 13px;
    color: #9195a3;
}

.color_fe2d46 {
    color: #fe2d46;
}
.color_f60 {
    color: #f60;
}
.color_faa90e {
    color: #faa90e;
}
.color_222 {
    color: #222;
}
.recommend .rec_2 {
    /* 80 64? */
    height: 500px;
    width: 1000px;
    display: none;

}
.recommend .rec_2 ul {
    margin-top: 20px;
    height: 100px;
    text-align: center;
    display:flex;
}
.recommend .rec_2 ul li {
    padding: 0 10px;
    margin-right: 25px;
    width: 80px;
    height: 80px;
}
.recommend .rec_2 ul li:hover {
    color: #4e6ef2;
}
.recommend .rec_2 ul li img {
    width: 64px;
    height: 64px;
}

   

/* footer */

.footer{
    width: 100%;
    height: 40px;
    background: #F5F5F6;;
    position: fixed;
    left: 0;
    bottom: 0;
}
.footer ul{
    width: 1200px;
    display: flex;
    margin: auto;
    line-height: 40px;
}
.footer ul li {
    padding: 0 10px;
    font-size: 14px;
    color: #bbb;
}
.footer ul li:hover {
    cursor:pointer;
    color: #000;
}

**

image 图片

**
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

已标记关键词 清除标记
相关推荐
仿百度搜索引擎软件蜘蛛组件包括三大功能模块:链接采集、网页分析、无效网页扫描; 自动识别GB2312、BIG5、UTF-8、Unicode等网页编码; 文件类型证察防止非文本类型文件采集; 蜘蛛可以采集ASP、PHP、JSP等动态数据网页和HTML、SHTML、XHTML等静态网页; 支持续采功能,如果因系统、网络等故障问题终止采集,系统将在下次启动采集时提示您是否“继续采集”或“结束任务”; 采集任务管理功能可以设置多个采集任务安排计划工作,每一个采集任务将会顺次运行; 本程序完全高仿百度,有自主开发的蜘蛛智能抓取网页功能,非网络上仅仅只是界面模仿的免费程序! 程序包含15大功能! 1.网页搜索 2.搜索风云榜 3.网址导航 4.竞价排名 5.蜘蛛智能抓取网页 6.网站qp值智能排名 7.后台违法关键字过滤 8.网站智能分类 9.违法作弊网站一键删除 10.网站登录入口 11.信息反馈留言板 12.搜索右侧自定义广告 13.已收录网站和网页统计 14.网站一键收录 15.客户端蜘蛛系统和web蜘蛛系统 演示截图请见code文件夹! 程序运行环境:PHP+MYSQL 负载亿级数据! 程序官方演示地址: http://www.kuaso.com/ 程序购买和服务 http://www.kuaso.com/a/buy.html 程序后台演示图片 http://www.kuaso.com/a/wzht.html 蜘蛛后台演示图片 http://www.kuaso.com/a/ht.html 本程序为演示程序,已经删除蜘蛛系统和竞价排名系统! 运行install.php 填入信息安装 后台admin 账号admin 密码admin 本演示程序包含数据为 已收录网站:197 已收录网页:1274
hao123源码--仿hao123源码--免费hao123.com网址之家纯净整站源码下载(蛋散2011.4.3更新) 本源码一比一模仿hao123.com网址之家,纯html,没有后台,大小仅3.06M,绿色轻巧,完全免费,真正纯净绿色,无多余文件,无恶意广告,本源码持续更新…… 网站网址在hao123的基础上结合114la、hao123、265三大巨头,根据网友受欢迎程度和Aleax排名一一对比选取,纠正一些失效链接和页面,内外页网址均已更新至2011.4.3。首页名站修改为真正名站,做最正规的导航(原hao123首页名站嫌疑广告较多,如图,非广告地方,没有突显颜色,一般很难分辨出来),此版本只保留一个“淘宝特卖”广告,相信99%的站长都做淘宝吧,把它替换成你的就行了。 小提示: 个性设置没多大用处,且占空间,没有保留。顶部天气预报采用114la的天气预报,同样是weather中国天气网的天气数据,但样式更美观,城市定位更加准。 修改提示: 把www.hao123.com地址替换成你的地址,首页默认搜索引擎修改在js/config.js,留言板登陆http://你的网站/inc/book/look.asp 密码:123456 更新: 1.修正了天气预报有时服务器错误的问题。 2.修正彩票开奖结果不能正常显示的问题。 3.首页百度搜索引擎更多类目增加“经验”、“身边”。 4.有限整理一些图片存放,使更细致。 5.整站网址同步hao123更新至2011.4.3(百度真够快的,才一个多月,内页地址更新了许多,部份架构也改了) 6.无多余文件。
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页