HTML+CSS，百度首页仿写——高度还原，不信进去看图。

已于 2022-07-05 21:26:33 修改
阅读量632 收藏 11
点赞数 3
分类专栏： 百度 文章标签： css html 前端
于 2022-07-05 21:23:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48336066/article/details/125628335
版权

直接干货，
图片自己扣。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HYY</title>
    <link href="../"/>
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        body{
            min-width: 1500px;
            margin: 0 auto;
        }
        .top{
            position: relative;
            width: 100%;
            height: 60px;
        }
        .top_left{
            padding-left: 10px;
            position: relative;
            left: 0px;
            top:16px;
        }
        .top a{
            text-decoration: none;
            /*文字相关的属性*/
            color: #000000;
            font-size: 16px;
            padding-left: 20px;
        }
        .top_right{
            position: absolute;
            left: 1360px;
            top:13px;
            display: flex;
            flex-flow: row wrap;
            justify-content: center;
            align-items: center;
        }
        .top_right a{
            /*position: absolute;*/
            /*right: 91px;*/
            /*top: 18px;*/
            /*width: 50px;*/
        }
        .top_right button{
            cursor: pointer;
            font-size: 14px;
            color: white;
            background-color: #1c6aff;
            border: 1px solid white ;
            border-radius: 7px;
            text-decoration: none;
            padding: 4px;
            margin-left: 20px;
        }
        .top_right button:hover{
            cursor: pointer;
            color: #1f3eff;
            background-color: white;
            border: 1px solid #1f3eff;
            transition:0.35s;
        }
        /*中间*/
        .middle{
            display: flex;
            flex-flow: column nowrap;
            justify-content: center;
            align-items:center;
            heigth:700px;
        }
        .middle img{
            width: 330px;
            padding-bottom: 30px;
        }
        .middle .input_text{
            display: flex;
            flex-flow: row wrap;
            justify-content: center;
            align-items:center;
            position: relative;
        }
        ._text{
            width: 655px;
            height: 43px;
            border: 2px solid #b6b6b6;
            border-radius: 10px 0 0 10px;
            /*去掉右边框 - 将右边框宽度设置为0*/
            border-right:none;
            /*左填充*/
            outline: none;
        }
        ._text:hover{
            border:2px solid #4e6ef2;
        }
        /*按钮*/
        .input_button{
            cursor: pointer;
            font-size: 20px;
            width: 120px;
            height: 49px;
            background-color: #4e6ef2;
            color: white;
            border: 2px solid #4e6ef2;
            border-radius: 0 10px 10px 0;
            position: absolute;
            left: 555px;
        }
        .camera{
            position: absolute;
            top: 13px;
            left: 525px;
            float: left;
            background-image: url("camera.jpg");
            width: 23px;
            height: 23px;
            background-repeat: no-repeat;
            background-position: 0px -49px;
        }
        .camera:hover{
            cursor: pointer;   /* 把鼠标调成手型*/
            position: absolute;
            top: 13px;
            left: 525px;
            float: left;
            background-image: url("camera.jpg");
            width: 23px;
            height: 23px;
            background-repeat: no-repeat;
            background-position: 0px -73px;
        }
        .tuiJan{
            display: flex;
            flex-flow: column wrap;
            justify-content: space-between;
            align-items: center;
            padding-top: 30px;
        }
        .bsm{
            display: flex;
            flex-flow: row wrap;
            justify-content: space-between;
            align-items: center;
            position: relative;
            padding-right: 20px;
        }
        .bsm img{
            width: 28px;
            padding-right: 10px;
        }
        .tuiJan_1{
            text-decoration: none;
            color: #4fa9f2;
            cursor: pointer;
        }
        .tuiJan_1:hover{
            text-decoration: underline;
        }
        .m_new{
            width: 660px;
            display: flex;
            flex-flow: row wrap;
            justify-content: space-between;
        }
        .m_new a{
            text-decoration: none;
            margin-top: 50px;
            color: #000000;
            margin-right: 25px;
            font-size: 17px;
        }
        .m_new a:hover{
            color: #4e6ef2;
        }
        a:hover{
            color: #4e6ef2;
        }
        /*6调新闻*/
        .new{
            padding: 0;
            height: 200px;
            width: 660px;
            line-height: 30px;
            display: flex;
            flex-flow: row wrap;
            justify-content: space-between;
        }
        .new div ul li{
            list-style: none;
            margin-left: 0px;
            padding-left: 0;
        }
        .new div ul li a:hover{
            color: #3584f2;
            cursor: pointer;
            text-decoration: underline;
        }
        .new div ul{
            padding: 0;
        }
        .new_1 a{
            text-decoration: none;
            color: #414141;
            padding-left: 0px;
            font-size: 18px;
            line-height: 40px;

        }
        /*辅助模式*/
        .fu_zhu{
            position: absolute;
            right: 30px;
            top: 75%;
            background-color: #f4f3f5;
            width: 48px;
            height: 100px;
            box-shadow: black;
            border-radius: 40%;
        }
        .fu_zhu:hover{
            cursor: pointer;
        }
        .ma{
            position: absolute;
            right:0;
            top:0;
            background-image: url("fuzhu.png");
            background-position:10px;
            background-color: #f4f3f5;
            background-repeat: no-repeat;
            background-size: 60%;
            width: 48px;
            height: 48px;
            border-radius: 50%;
        }
        .ma:hover{
            box-shadow:rgba(0,0,0,.3) 0px 0px 15px;
        }
        /*绝对位置*/
        .erma{
            position: absolute;
            right: 0;
            bottom:0;
            background-repeat: no-repeat;
            background-color: #f4f3f5;
            background-image: url("ma.png");
            background-position:9px;
            background-size: 60%;
            width: 48px;
            height: 48px;
            border-radius: 50%;
        }
        .erma:hover{
            box-shadow:rgba(0,0,0,.3) 0px 0px 15px;
        }
        .foot{
            display: flex;
            flex-flow: row wrap;
            justify-content:center;
            font-size: 17px;
            line-height: 22px;
            position: fixed;
            bottom: 10px;
            background-color: white;
        }
        .foot a{
            padding:5px 5px 5px 5px ;
            margin-bottom: 0px;
            color: #BBBBBB;
            font-size: 15px;
            line-height: 24px;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="top_left">
            <a href="https://news.baidu.com/">新闻</a>
            <a href="https://www.hao123.com/">hao123</a>
            <a href="https://map.baidu.com/@12127979.3,4051219.02,12z">地图</a>
            <a href="https://tieba.baidu.com/index.html">贴吧</a>
            <a href="https://v.baidu.com/index.html">视频</a>
            <a href="https://image.baidu.com">图片</a>
            <a href="https://image.baidu.com">网盘</a>
            <a href="https://www.baidu.com/more/">更多</a>
        </div>
        <div class="top_right">
            <a href="#" class="top_r">设置</a>
            <button value="登录">登录</button>
        </div>
    </div>
    <div class="middle">
        <img src="logo.png"/>
            <!--输入框--> <!--按钮-->
        <div class="input_text">
            <input type="text" class="_text"/>
            <div class="camera"></div>
            <input type="button" value="百度一下" class="input_button">
        </div>
    </div>
    <!--搜索的框下-->
    <div class="tuiJan">
        <div class="bsm">
            <img src="boshimao.png">
            <a href="https://www.bytecollege.cn" class="tuiJan_1">早来Byte早上课，年薪百万不是个
             <img src="right.png" style="width: 17px;position: absolute;bottom: 5px; padding-left: 10px;">
            </a>
        </div>
        <div class="m_new">
            <a href="https://top.baidu.com/board?platform=pc&sa=pcindex_entry" style="font-family: 华文琥珀">
                今日热搜
                <i class="fa fa-chevron-right" aria-hidden="true" style="font-size: 12px"></i>
                <i class="fa fa-chevron-right" aria-hidden="true" style="font-size: 12px"></i>
            </a>
            <a class="hyh" href="#" style="margin-right: 5px;color: #575757">
                <i class="fa fa-refresh" aria-hidden="true" style="font-size: 15px"></i>
                换一换
            </a>
        </div>
        <div class="new">
            <div class="new_1">
                <ul>
                    <li>
                        <span style="color: #ff4000">⬆</span>
                        <a href="#">坚定不移维护香港长期繁荣稳定
                            <span style="color: #fbffff;background-color: #ff5f00;border-radius: 4px;font-size: 16px">
                                火</span>
                        </a>
                    </li>
                    <li>
                        <span style="color: #ff6b01">2</span>
                        <a href="#">行程卡摘星后火车票搜索量猛涨</a>
                        <span style="color: #fbffff;background-color: red;border-radius: 4px;font-size: 15px">
                                新</span>
                    </li>
                    <li>
                        <span style="color: #ffa000">3</span>
                        <a href="#">上海应届硕士毕业生可直接落户</a>
                    </li>
                </ul>
            </div>
            <div class="new_1">
                <ul>
                    <li>
                        <span style="color: #ffaa00">4</span>
                        <a href="#">跟生活息息相关!这些新规7月实施</a>
                    </li>
                    <li>
                        <span style="color: #756e73">5</span>
                        <a href="#">成都一公司人事称大专生只值200</a>
                    </li>
                    <li>
                        <span style="color: #756e73">6</span>
                        <a href="#">微念起诉李子柒公司案将开庭......</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="foot">
        <a href="https://www.baidu.com/duty/">关于百度</a>
        <a href="#">About Baidu</a>
        <a href="#">京公网安备11000002000001号 </a>
        <a href="#">京ICP证030173号</a>
        <a href="#" id="record">药品医疗器械网络信息服务备案（京）网药械信息备字（2021）第00159号</a>
        <a href="#"> 医疗器械网络交易服务第三方平台备案凭证（京）网械平台备字（2020）第00002号</a>
    </div>
    <!--辅助模式-->
    <div class="fu_zhu">
        <div class="ma"></div>
        <div class="erma"></div>
    </div>
</body>
</html>

效果展示：
在这里插入图片描述

H丫丫
关注
  • 3
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
baidu主页页面仿写
04-02
百度点击搜索的页面html,刚能学习的，亲测有效果
html css百度资源,HTML/CSS百度首页模仿
weixin_39912984的博客
06-02 108
> 模仿百度*{margin:0; padding:0;}.wrap{width:100%;}.header{width:100%; height:80px;}.mainbody{width:70%;height:620px;margin:0 auto;}.footer{width:640px;height:100px;margin:0 auto;}div div ul li{float:r...
CSS案例---百度首页
qq_46150052的博客
10-25 412
效果图： 实现代码： <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>百度一下，你就知道</title> <style type="text/css"> /* 百度logo */ .logo { text-al
仿写百度首页
weixin_33937499的博客
07-14 172
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> a { color: bla...
百度首页制作 （仿百度首页）
qq_45830796的博客
03-21 1426
百度首页制作 （仿百度首页） 介绍： 用html+css制作的百度首页 带搜索功能，点击会进行跳转到搜索页面 效果图： 鼠标移入悬浮效果： 代码 <!DOCTYPE html> <html lang="zn"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
HTML+CSS大作业——vivo官方商城
07-08
HTML+CSS大作业
HTML5+CSS3期末大作业——城市简介源码
05-05
HTML5+CSS3期末大作业——城市简介源码
html+css淘宝网站仿写.zip
05-08
个人仿写的淘宝网站首页，资源包含完整html+css代码和图片字体等资源，适合新手查看和仿写练习，涉及如何引用icon图标，relative和absolute定位以及精灵图等知识点，由于是自己仿写的，可能不够完美，所以有问题请...
网页设计期末大作业+html+css
05-25
9个网页布局，学校让做的网站作业，虽然是比较基础的网页静态页面，不过我也希望你能做的规范一些，我们专业制作学生网页作业，div css js 等通过dreamwear的工具实现规范化，比如文件夹的规范，代码写作的规范，...
html+css 仿写网站首页.zip
最新发布
12-14
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于...
仿百度首页
08-14
百度首页的模仿制作
简单模仿百度首页（html）
09-19
使用vscode简单模仿了百度首页，还没有涉及到css和js，适合刚学html的小白
百度首页模仿
407指导员
10-29 302
百度首页模仿 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度首页练习</title> <style> body {/*全局字体样式一致直接设置body属性继承即可*/ font-size: 14px; color: #666;
html,模仿制作百度首页
热门推荐
qq_39696269的博客
08-30 1万+
模仿百度首页，试着学习一个javaweb，第一个试着模仿 百度首页   !!!那些图片只能自己来找了!!! &lt;html&gt;     &lt;head&gt;         &lt;title&gt;百度页面&lt;/title&gt;         &lt;style&gt;             .searchBox{                 background-...
百度页面仿写
酱橙的博客
03-28 1138
一. 直接访问的地址 39.106.162.75/index.html 二.完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度一下,你就知道</title> <link rel="stylesh...
iOS转前端之仿写百度首页
kidd风的博客
07-12 1534
抱歉，这几天有点忙，部门开季度大会。。。今天来继续填坑。 前三篇我们已经介绍了HTML、CSS的一些知识，相信大家已经迫不及待想实际运用一下了。OK，今天我们来写一个Demo，模仿百度首页写一个静态的页面，后面学了JS，还可以加一些动态的东西。话不多说，上代码。 首先我们打开WebStorm，新建一个工程，先创建一个index.html文件，作为主文件： 然后需要用到
模仿百度首页
qq_51131331的博客
01-09 1202
1、展示效果： 2、网页代码： <html> <body> <tablewidth=100%> <tr> <td> <table> <tr> <td><ahref="http://news.baidu.com/">新闻</td><td></td> <td><ah...
HTML+CSS模仿百度首页(gird+flex布局)
mingluosunyi的博客
08-23 839
文章目录HTML+CSS模仿百度首页Grid布局分析flex布局分析代码 HTML+CSS模仿百度首页 Grid布局分析 百度界面分为三块：头部导航栏、中部主体部分、页脚。 中间主体部分又可以分为左右的空白区和版心。 因此我选择用grid布局将页面划分成9个区域： ‘head head head’ ‘left-blank main right-blank’ ‘foot foot foot’ flex布局分析 flex适合一维的布局，用来完成导航栏、版心和页脚的布局非常合适。 导航栏可以分为左右两个大块，
用html+css+js仿写慧聪网导航栏
06-11
<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><a href="#">慧聪社区</a>...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值