html+css 百度界面

最新推荐文章于 2024-02-01 15:08:06 发布
最新推荐文章于 2024-02-01 15:08:06 发布
阅读量552 收藏 2
点赞数
分类专栏： 前端 文章标签： webview css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_63198259/article/details/124906610
版权

html界面

<!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>百度一下，你就知道</title>
    <link rel="stylesheet" href="./baidu.css">
</head>
<body>
    <header class="top">
        <!-- 导航栏开始 -->
        <nav>
            <a href="http://news.baidu.com/">新闻</a>
            <a href="https://www.hao123.com/">hao123</a>
            <a href="https://map.baidu.com/">地图</a>
            <a href="https://live.baidu.com/">直播</a>
            <a href="https://haokan.baidu.com/?sfrom=baidu-top">视频</a>
            <a href="https://tieba.baidu.com/index.html">贴吧</a>
            <a href="https://xueshu.baidu.com/">学术</a>
            <a href="https://www.baidu.com/more/">更多</a>
        </nav>
        <!-- 导航栏结束 -->
    </header>

    <!-- 搜索框上的图片 图片路径可更改 -->
    <div class="picture">
        <a target="blank" href="file:///C:/Users/huawei/OneDrive/%E5%9B%BE%E7%89%87/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7/360%E6%88%AA%E5%9B%BE20220522084548676.jpg"><img src="../image/100.png" width=270px  target="blank" /></a>
    </div>

    <!-- 搜索框开始 -->
    <div class="search">
        <div class="div1">
            <input type="text" width=546px height=45px />
        </div>
        <!-- 百度一下按钮 -->
        <div class="div2">
            <input type="button" width=110px height=45px value="百度一下"/>
        </div>
    </div>
    <!-- 搜索框结束 -->

    <!-- 百度热搜开始 -->
    <div class="hot_search">
        <div>
            <a href="https://top.baidu.com/board?platform=pc&sa=pcindex_entry">百度热搜</a>
        </div>
        <!-- 热搜词条 -->
        <div>
            <div class="hot_search_list1">
                <ul>
                    <li><a href="https://mbd.baidu.com/newspage/data/videolanding?nid=sv_7573517534280825817&sourceFrom=pc_feedlist" target="blank"><font color="red"> 1 </font>  袁隆平院士逝世一周年 120秒缅怀斯人 <span>&nbsp;热&nbsp;</span></a></li>
                    <li><a href="https://baijiahao.baidu.com/s?id=1733292689909006423" target="blank"><font color=#FF8C00> 2 </font> 产业升级态势没有改变  </a></li>
                    <li><a href="https://baijiahao.baidu.com/s?id=1733481772022730560&wfr=spider&for=pc" target="blank"><font color=#FFA500> 3 </font>  上海昨日新增本土52+570新增本土死亡3例 </a></li>
                </ul>
            </div>
            <div class="hot_search_list2">
                <ul>
                <li><a href="https://m.gmw.cn/2022-05/22/content_1302958209.htm" target="blank"><font color="gray"> 4 </font> 风吹过稻田我又想您了 </a></li>
                <li><a href="https://baijiahao.baidu.com/s?id=1733481882132224570&wfr=spider&for=pc" target="blank"><font color="gray"> 5 </font>  金鹰奖取消观众喜爱的男女演员奖 </a></li>
                <li><a href="https://baijiahao.baidu.com/s?id=1733450962630802309" target="blank"><font color="gray"> 6 </font>  两个中立国不再中立 释放什么信号? </a></li>
                </ul>
            </div>
        </div>
        <!-- 百度热搜结束 -->
    </div>

    <!-- 尾部开始 -->
    <footer class="bottom">
        <div>
            <a class="bottom_" target="blank" href="https://www.baidu.com/cache/setindex/index.html">设为首页</a>
            <a class="bottom_" target="blank" href="https://home.baidu.com/">关于百度</a>
            <a class="bottom_" target="blank" href="https://ir.baidu.com/">About baidu</a>
            <a class="bottom_" target="blank" href="https://www.baidu.com/duty/">使用百度前必读</a>
            <a class="bottom_" target="blank" href="http://help.baidu.com/newadd?prod_id=1&category=4">意见反馈</a>
            <a class="bottom_" target="blank" href="https://help.baidu.com/">帮助中心</a>
            <a class="bottom_" target="blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001">京公网安备11000002000001</a>
            <a class="bottom_" target="blank" href="https://beian.miit.gov.cn/#/Integrated/index">京ICP证030173号</a>
            <a href="#">2021baidu</a>
            <a href="#">（京）-经营性-2017-0020</a>
            <a class="bottom_" target="blank" href="https://www.baidu.com/licence/">信息网络传播视听节目许可证0110516</a>
        </div>
    </footer>
    <!-- 尾部结束 -->
</body>
</html>

css界面

*{
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-family: '微软雅黑';
    box-sizing: border-box;
}


.top{
    /* 定义导航栏的位置 
    设置外边距使其距顶部20px 距离左右侧边均为25px 距底边5px
    margin：上 右 下 左 ;
    margin: 上  左右  下  ;
    margin: 上下 左右 ;
    margin: 四周 ;
*/
    margin: 20px 25px 5px ;
}

/* 删掉超链接自带的下划线 */
a{
    text-decoration: none;
}


nav a{
    /* 设置内边距 */
    padding-right: 23px;
    /* 定义字体颜色 */
    color: dimgray;
}

/* 当鼠标悬停在此处时的状态 */
nav a:hover{
    padding-right: 23px;
    text-decoration: none;
    color:blue;
}


.picture{
    /* 居中 */
    text-align: center;
}

.search{
    padding-top: 20px;
    /* 定义两个容器的排列方式 flex默认为水平布局 */
    display: flex;
    /* 居中 */
    justify-content: center;
    margin-top: -10px;
    margin-bottom: 30px;
}

.div1 input{
    /* 设置文本输入框的大小 */
    height: 44px;
    width: 538px;
    padding: 0 15px;
    /* 并排放置两个带边框的框*/
    box-sizing: border-box;
    /* 设置边框宽度 */
    border-bottom: 2px solid #acb1c0;
    border-left: 2px solid #acb1c0;
    border-top: 2px solid #acb1c0;
    border-right: 0px solid #acb1c0;
    /* 设置边框的拐角弧度 */
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.div2 input{
    /* 设置按钮的大小 */
    width: 110px;
    height: 44px;
    /* 设置框内字体颜色及大小 */
    color: #fff;
    font-size: 17px;
    /* 框的填充颜色 */
    background-color: #4E6EF2;
    /* 定义两个容器的排列方式 flex默认为水平布局 */
    display: flex;
    justify-content: center;
    /* 按钮内的字居中 */
    align-items: center;
    /* 设置边框宽度 */
    border: 0;
    /* 设置边框的拐角弧度 */
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}




.hot_search{
    width: 638px;
    margin: auto;
    /* 设置行间距 */
    line-height: 30px;
}

.hot_search div a{
    text-decoration: none;
    color: dimgray;
}

.hot_search_list1{
    width:50%;
    /* 设置该盒子处于左侧 */
    float: left;
    /* 设置行间距 */
    line-height: 30px;
    color: dimgray;
}
.hot_search_list2{
    width:50%;
    /* 设置该盒子处于右侧 */
    float: right;
    /* 设置行间距 */
    line-height: 30px;
    color: dimgray;
}
ul li a:hover{
    color: blue;
}

/* 热搜词条后边的小标志 */
li a span{
    color: white;
    background-color: orange;
    border-radius: 5px;
}

/* 删掉无序列表自带的小黑点 */
ul li{
    list-style-type: none;
}


.bottom div{
    margin: auto;
    text-decoration: none;
}


/* 鼠标悬停时的状态 */
.bottom_:hover{
    font-size: small;
    text-decoration: none;
    color:black;
    padding-right: 15px;
}


.bottom div a{
    font-size: small;
    color: rgb(168, 166, 166);
    padding-right: 15px;
}



.bottom{
    text-align: center;
    /* 将尾部置于页面底部 */
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 30px;
}

养只小王叭
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
百度首页设计（HTML）
NSSWTT的博客
02-18 7988
一. 百度首页总结。 知识点1：完整的网页的布局顺序。 1.先对网页整体的区域进行划分，划分为多个div区域。 百度首页由头部的一个文字导航，中间的一个按钮和一个输入框以及下边的文字简介和导航组成（可以先大致设置3个div，即上 ，中 ，下三部分）。 文字导航部分（上） ...
使用HTML实现百度首页界面
gxjis_Z的博客
06-30 1万+
本次实验是使用HTML写出百度首页界面。本次实验只需要插入不同的网页跳转，插入文本，图片，最后在调整位置，就可以实现。：插入图片 ：点击实现网页的跳转：插入标签完整代码如下：
html制作百度页面
m0_51660215的博客
07-03 7743
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin-top: 0; margin-left: 0; } /*搜索框样式 */ #divput{ margin-left: 420px; margi.
html/css 百度网页首页
qq_45811913的博客
11-08 1393
百度网页的首页 这是css代码 <style> .topleft li {float: left;margin-right: 25px;} .topright li {float: left;margin-right: 25px;} a {color:black;text-decoration: underline;text-shadow: blue;} ul {overflow: hidden;
制作百度页面（HTML+CSS基础知识）
最新发布
m0_74766888的博客
02-01 2079
只用CSS和HTML的基础知识创建一个百度页面
百度新闻页面布局html+css
02-28
本教程将深入探讨“百度新闻页面布局”的HTML和CSS实现，旨在帮助初学者掌握页面布局的基本技巧，理解如何通过标签的使用来构建清晰、有效的新闻列表。 首先，HTML（HyperText Markup Language）是网页内容的结构化...
100款html+css网页模板
12-24
在IT行业中，HTML和CSS是构建网页的基础技术。"100款html+css网页模板"的资源集合为初学者和专业人士提供了一个丰富的学习库，能够深入理解和掌握网页设计的精髓。 HTML（HyperText Markup Language）是网页内容的...
DIV+CSS百度图片搜索页面模板
06-24
这里的“DIV+CSS百度图片搜索页面模板”是一个模仿百度图片搜索页面的网页设计模板，适用于那些希望创建类似百度图片搜索体验的网站。这个模板可能包含了HTML文件、CSS样式表以及可能的JavaScript代码，为用户提供一...
基于HTML5+css+JS的精美登陆注册界面
01-18
在这个基于HTML5+CSS+JS的精美登录注册界面项目中，我们将深入探讨这些技术如何协同工作，为用户提供直观且吸引人的界面。 首先，HTML5（HyperText Markup Language 5）是网页内容的结构化标记语言，它引入了许多新...
实现网上蔬果商城html+css+js.rar
12-18
CSS3新增了许多功能，如媒体查询（Media Queries）用于实现响应式设计，让商城界面在不同设备上都能有良好的显示效果；过渡和动画（Transitions & Animations）则可以提升用户交互体验，使按钮点击、商品滑动等操作...
百度搜素页的HTML实现
07-01
使用html简单实现了百度页面，能够查看代码，图片，能够打开实现。
百度首页html代码
11-06
利用纯html语言编写的百度首页，是本上实现了百度界面模块
初学者用HTML和CSS写的百度页面
06-04
主要用于练习HTML和css写的百度页面，初学者也可以自己试着来写一下，还是有点用的
仿新版百度首页html模板
08-22
高仿新版百度首页html模板 DIV+CSS的 详细不多说，自己下来看就知道
HTML-CSS 百度页面的搭建
weixin_45722135的博客
03-01 893
今天所讲的的百度的页面搭建。可分为三部分来分析: 【1】首先介绍头部的搭建：头部分为左边与右边， 头左边主要有照片和文字搭建而成，也使用左浮，文字就简单使用margin-left来完成。 头右边的样式都差不多，但右边的菜单框中【更多产品】样式繁多 更多产品就采用块级标签转成行内...
html实行百度页面布局
qq_54589102的博客
06-21 761
制作百度封面页的样式百度首页总结。 知识点1：完整的网页的布局顺序。 先对网页整体的区域进行划分，划分为多个div区域。由头部导航，搜索框，下边文字介绍分为三个部分##引入代码代码如下（示例）： 实图如下 代码如下（示例）： 实图如下代码如下 实图如下 代码如下 最后实图...
html第一次尝试（百度页面）
Lxingmo的博客
04-13 1499
最近学了html和css，于是就找了个百度页面案例来练练手 百度一下，你就知道 .top{     width:100%;     height:64px;     margin-top:17px; } .top>.title{     height:64px;     float:right; } .top>.title>a{     font-siz
【转】百度首页html练习
琳小白的博客
09-12 1万+
开卷有益，感谢原作： http://www.myexception.cn/HTML-CSS/2025067.html<html> <head> <meta charset="utf-8"/> <title>百度一下，你就知道</title> <style type="text/css"> .top{ width: 100%;
前端——HTML百度首页制作
热门推荐
Searchin_R的博客
09-22 2万+
前些天为了学习页面布局，做了一个简易的百度首页。做百度首页的原因是因为它的布局比较简单，需要顾及的地方比较少，但是需要相关的知识点又基本上都能用上，对自己理解页面布局以及一些标签（如float和margin）的用法有很大的帮助。 仿做一个网页之前需要分析该网页的布局，下图是百度首页。 从上图可以看出，百度首页大概分为三个块：头部，中部，和底部。中部又可以分为LOGO和搜索框，地步可以分为百...
html+css模拟百度搜索网页
08-03
要模拟百度搜索网页，我们可以使用HTML和CSS来创建一个简单的搜索界面。首先，我们需要创建一个HTML文件，然后使用CSS样式来美化网页。 在HTML中，我们可以使用<form>元素来创建搜索表单。通过指定form的action属性为百度搜索的URL，可以将用户输入的搜索词发送到百度服务器进行搜索。我们还可以在<form>中添加一个<input>元素，用户可以在这里输入搜索词。 接下来，我们可以使用CSS样式来美化搜索页面。我们可以设置背景颜色、字体样式和布局等。例如，通过设置背景图片、调整颜色和字体大小，可以使页面看起来更加吸引人。 在搜索页面上，我们还可以添加一些其他的元素，如搜索按钮、搜索建议和搜索历史记录。这可以通过添加适当的HTML元素和使用CSS样式来实现。 此外，我们还可以使用CSS来响应用户的输入。通过设置:hover和:focus伪类，我们可以在用户悬停或选中表单元素时改变其样式。这样，用户体验就会更加友好。 总之，通过使用HTML和CSS，我们可以简单地模拟百度搜索网页。HTML用于创建表单和输入框，而CSS用于美化页面的样式。不过，为了实现更复杂的搜索功能，我们还需要使用其他技术，如JavaScript和服务器端脚本。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值