html加css仿作百度界面

已于 2022-05-17 16:23:38 修改
阅读量218 收藏 4
点赞数 1
分类专栏： 笔记 文章标签： css html
于 2022-05-17 16:22:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_66195472/article/details/124824207
版权

效果图

源码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>百度一下，你就知道</title>
    <style type="text/css">
        a {
            color: black;
        }
        
        a:link {
            text-decoration: none;
        }
        
        a:hover {
            color: #4e6ef2;
            text-decoration: none;
        }
        
        .left {
            line-height: 22px;
            font-size: 13px;
            text-align: left;
            margin: 18px 0 18px 0;
            margin-left: 30px;
        }
        
        .right {
            position: absolute;
            right: 0px;
            width: 150px;
        }
        
        .dropdown {
            text-align: center;
            position: relative;
            display: inline-block;
            padding-right: 23px;
        }
        
        .dropdown-content {
            list-style: none;
            position: absolute;
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 61px;
            padding: 12px 16px;
            line-height: 30px;
            z-index: 10px;
        }
        
        .dropdown:hover .dropdown-content {
            display: block;
        }
        
        .box {
            width: 650px;
            height: 0px;
            margin: 200px auto 100px;
            position: relative;
        }
        
        input {
            outline: none;
            border: 2px solid #a7aab5;
            height: 45px;
            width: 550px;
            box-sizing: border-box;
            text-indent: 6px;
            font-size: 16px;
            border-radius: 10px 0 0 10px;
        }
        
        .gd {
            color: #fff;
            background: #38f;
            line-height: 24px;
            font-size: 13px;
            text-align: center;
            border-bottom: 1px solid #38f;
            margin-left: 7px;
            margin-top: 10px;
        }
        
        .hot-title {
            width: 654px;
            position: relative;
            margin: 45px auto 0;
        }
        
        .baiduhot div {
            width: 50%;
            overflow: hidden;
            float: left;
            line-height: 32px;
        }
        
        .baiduyixia {
            font-size: 17px;
        }
        
        .title-content-title {
            margin: 10px 0 0;
            float: left;
            height: 32px;
            line-height: 32px;
        }
        
        .title-content-title1 {
            margin: 10px 0 0;
            margin-left: 90px;
            float: left;
            height: 32px;
            line-height: 32px;
        }
        
        .right-hot {
            float: right;
            line-height: 20px;
        }
        
        .top1 {
            color: #fe2d46;
        }
        
        .top2 {
            color: #f60;
        }
        
        .top3 {
            color: #faa90e;
        }
        
        .other-top {
            background: 0 0;
            color: #9195a3;
        }
        
        button {
            height: 45px;
            width: 100px;
            border: none;
            color: white;
            box-sizing: border-box;
            background-color: #4e6ef2;
            position: absolute;
            left: 550px;
            border-radius: 0 10px 10px 0;
            cursor: pointer;
        }
        
        .imges {
            position: absolute;
            top: -140px;
            left: 180px;
        }
        
        .cen {
            text-align: center;
            margin-bottom: 80px;
        }
        
        .buttom {
            text-align: center;
            padding-left: 30px;
            position: fixed;
            bottom: 0px;
            left: 0;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 10px;
            background-color: #fbfbfb;
        }
        
        .settings {
            position: relative;
            left: 13px;
            background-color: #4e71f2;
            color: #fff;
            border-radius: 5px;
            font-size: 12px;
            width: 50px;
            height: 25px;
            display: inline-block;
        }
        
        .dropdown-settings {
            position: relative;
            display: inline-block;
        }
        
        .dropdown-content-settings {
            display: none;
            position: absolute;
            right: -10px;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        }
        
        .dropdown-settings:hover .dropdown-content-settings {
            display: block;
        }
    </style>
</head>

<body>
    <div class="left">
        <a href="http://news.baidu.com/" target="blank">新闻</a
      >&nbsp;&nbsp;&nbsp;&nbsp;
      <a href="https://www.hao123.com/" target="blank">hao123</a
      >&nbsp;&nbsp;&nbsp;&nbsp;
      <a href="https://map.baidu.com/" target="blank">地图</a
      >&nbsp;&nbsp;&nbsp;&nbsp;
      <a href="https://tieba.baidu.com/" target="blank">贴吧</a
      >&nbsp;&nbsp;&nbsp;&nbsp;
      <a href="https://haokan.baidu.com/" target="blank">视频</a
      >&nbsp;&nbsp;&nbsp;&nbsp;
      <a href="https://image.baidu.com/" target="blank">图片</a
      >&nbsp;&nbsp;&nbsp;&nbsp;
      <a href="https://pan.baidu.com/" target="blank">网盘</a
        >&nbsp;&nbsp;&nbsp;&nbsp;
      <a href="https://www.baidu.com/more/" target="blank">更多</a
      >&nbsp;&nbsp;&nbsp;&nbsp;
      <span class="right">
        <div class="dropdown">

          <a href="#">设置</a>
    </div>
    <div class="dropdown-settings">
        <button class="settings">登录</button>
    </div>
    </span>
    </div>

    <div class="box">
        <div class="imges">
            <img src="baidu.png" height="129" width="270" />
        </div>
        <input type="text"></input>
        <button>
          <span class="soutu-btn"></span>
          <strong class="baiduyixia">百度一下</strong>
        </button>
        </form>
    </div>

    <div class="hot-title">
        百度热榜
        <div class="baiduhot">
            <div class="left-hot">
                <span class="title-content-title top">
            <span class="top1"></span>
                <a class="five" href="#">经济长期向好基本面没有改变</a>
                </span>
                <span class="title-content-title">
            <span class="top2">1</span>
                <a class="five" href="#">上海多地飘来“咖啡味” 官方回应</a>
                </span>
                <span class="title-content-title">
            <span class="top3">2</span>
                <a class="five" href="#">乌方将马里乌波尔控制权移交俄方</a>
                </span>
            </div>
            <div class="right-hot">
                <span class="title-content-title1">
            <span class="other-top">3</span>
                <a href="#">助企纾困举措密集出台</a>
                </span>
                <span class="title-content-title1">
            <span class="other-top">4</span>
                <a href="#">万元“乞丐鞋”为何遭群嘲?</a>
                </span>
                <span class="title-content-title1">
            <span class="other-top">5</span>
                <a href="#">奥密克戎超强变异株进入广东</a>
                </span>
            </div>
        </div>
    </div>
    <div class="buttom">
        <a href="#">关于百度</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href=" # ">About Baidu</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="#">使用百度前必读</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="#">帮助中心</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="#">京公网安备11000002000001号</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="#">京ICP证030173号</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="#">@2022 Baidu</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 互联网药品信息服务资格证书 (京)-经营性-2017-0020 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="#">信息网络传播视听节目许可证 0110516</a>
    </div>
</body>

</html>

l小小怪l
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何用html+css 写出百度界面 ---
N_06010的博客
05-25 1084
HTML+CSS简单应用实例——百度页面的制作
安卓仿作微信界面
07-23
上次看到网上有朋友求微信仿作的源码，今天就分享一下，效果相对不错，注解较多
HTML仿百度首页登录后的静态界面代码
10-24
有关于仿百度首页登录后的静态界面代码，有些功能还没有完善，所以希望能借这次机会跟几位大佬互相讨论下，帮忙完善下其他功能！不过做完的一些功能可以互相参考借鉴！
仿照京东html界面
10-22
仿照京东的html界面包含轮播，以及各式各样的js 互动效果、
html+css编写百度首页例子
11-30
百度首页很经典,使用HTML+ccss,适合新手参考！
百度新闻页面布局html+css
02-28
页面布局，网页设计，新闻列表 标签的使用练习
利用html和css完成百度首页的制作（百度一下）
hhahahhahahhha的博客
06-14 3271
通过分析可以知道该部分由俩个部分组成，这样就可以采取二分布局的方式进行布局，而其中的左右两个部分也各自分成二个部分但是由于是上下分布所以不需要采取二分布局，不需要使用悬浮的方式。（1）分析可得百度首页的顶部是有俩部分得来的，所以可以采取二分法的办法来实现，用一个大盒子里放二个小盒子，才去左边的左悬浮和右边的右悬浮。分析可得可以采取在一个盒子里放置一个文本框和一个按钮，但是要做到和百度首页一样的程度要使用border-radius进行边框的优化，使其变的圆润。以及使用hover标记进行鼠标的触控反馈。
html+css 简单百度页面
m0_67301721的博客
05-19 231
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
用html+css制作百度首页
azsx582的博客
12-21 6404
刚入门，做个百度首页来巩固一下刚学的html和css知识。 这是原网页： 这是我做的效果图： 实力有限，只能做成这样，有兴趣的可以参考一下，代码如下： 百度一下，你就知道 新闻 hao123 地图 视频 贴吧 学术 更多
【前端】利用HTML标签+css实现百度页面【HTML+CSS+JavaScript(JS)】
cc2855816075的博客
02-11 913
效果： 免费下载：https://download.csdn.net/download/cc2855816075/80141329 代码：（图片见上方链接↑） <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>百度</title> <style type="text/css"> #nvgn-bar{/*最上方导航栏*/
模拟百度页面
m0_63004006的博客
05-22 946
具体代码如下： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>百度一下，你就知道</title> <style type="text
小米官网多界面的仿作界面.zip
06-26
利用Less与jQuery仿做小米官网多个界面，界面相似度很高，适合大一学生交web作业。交作业的兄弟来排个队哈哈。
模拟小米商城的网页界面
02-19
一个单纯的HTML界面，小米商城主界面的仿作，除了没有后台界面和数据库，基本功能健全
仿百度首页
08-14
百度首页的模仿制作
html5仿苹果官网源码+报告
05-30
仿的苹果13官网，display:flex; 布局方式。 响应式布局@media screen and (max-width:970px)，当符合条件时width：100%，中间导航栏通过display: none;实现隐藏，然后将苹果图标居中。 中间的内容有个过渡的效果，...
原生html里面使用百度地图，实现标点以及掩膜效果
最新发布
abcde_12_q的博客
03-01 1436
实现遮盖，标点效果
HTML+CSS百度网页制作3.0
weixin_65717727的博客
05-22 3272
<!DOCTYPEhtml> <html lang="ch_CN"> <head> <meta charset="UTF-8"> <title>百度首页</title> <style type="text/css"> a { color: black; } a:link { tex...
JavaScript仿照移动端APP百度地图制作H5的滑动面板
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
09-11 305
在上面的代码中，我们首先在HTML中创建了一个包含三个滑动面板的滑动容器。然后，我们使用CSS隐藏了所有的滑动面板，只显示第一个滑动面板。最后，我们使用JavaScript编写了一个函数来显示指定的滑动面板。当点击按钮时，将调用这个函数来显示相应的滑动面板。要使用JavaScript和HTML制作滑动面板，可以使用一些现有的库，如jQuery Mobile或Swiper。下面是一个简单的示例，使用纯JavaScript和CSS来创建一个基本的滑动面板。
制作百度页面（HTML+CSS基础知识）
m0_74766888的博客
02-01 1452
只用CSS和HTML的基础知识创建一个百度页面
用html和css仿作苹果网站
05-20
<link rel="stylesheet" type="text/css" href="style.css"> <!-- 导航栏 --> <li><a href="#">iPhone</a></li> <li><a href="#">iPad</a></li> <li><a href="#">MacBook</a></li> <li><a href...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值