html+css 简单百度页面

最新推荐文章于 2023-06-14 20:24:28 发布
最新推荐文章于 2023-06-14 20:24:28 发布
阅读量280 收藏
点赞数 1
文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67301721/article/details/124861118
版权 
<!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>Document</title>
</head>
<style>
    .nav a{
        display: inline-table;
        font: 13px/23px Arial,sans-serif;
        text-decoration: none;
        color: #222;
        padding: 0 0 0 24px;
    }
    .nav a:hover{
        color: blue;
    }
    .pic{
        text-align: center;
    }
    .m{
       width:300px;
       height:50px;
       margin-left: 520px;
       margin-top: 20px;
    }
    .foot a{
        font:12px Arial,sans-serif;
        color:#BBBB;
        text-decoration: none;   }
    .foot{
            text-align: center;
            margin-top: 450px;
        }
    .foot a:hover
    {
        color:black;
    }
    .nav button
    {
        background-color: #4e6ef2;
        color: #fff;
        border-radius:7px 7px 7px 7px;
        margin-left:10px;
    }
    .mmm{
        float: right;
        font-size: 14px;
    }
    .main table{
    margin:200px 610px;
    width: 670px;
    height: 180px;
    font-size:15px;
    margin:0 auto;
    margin-top: 100px;
}
.main table a
{
    text-decoration: none;
    color: #222;
}
.main a:hover{
        color: blue;
    }
.main #c{
    padding-left:254px;
    color:#a6a9b4;
}
.k{
    
    background-color: #ff455b;
    width: 14px;
    height: 19px;
    color:#fff;
    padding:0 2px;
    border-radius: 5px;
}
.kk{
    background-color: #ff9812;
    width: 14px;
    height: 19px;
    color:#fff;
    padding:0 2px;
    border-radius: 5px;
}
.search{
    position:absolute;
    left:500px;
    top:185px;
    font-size:16px;
    width: 576px;
    height: 40px;
    vertical-align: top;
    border:2px solid #c4c7ce;
    border-radius:10px 0 0 10px;
    background-color: #fff;
    color:#222;
    overflow: hidden;
}
.buddon-s {
    position: absolute;
    top:185px;
    left:1080px;
    cursor: pointer;
    width: 100px;
    height:44px;
    line-height: 45px;
    background-color: #4e6ef2;
    border-radius:0 10px 10px 0;
    font-size:14px;
    color:#fff;
    text-align: center;
}
.main .buddon-s:hover{
    background-color: #4662d9;
}
.main input:hover{
    border-color: #a7aab5;
}
.camera {

    display: inline-block;
    position: absolute;
    top: 200px;
    left: 1045px;
    width: 20px;
    height: 20px;
    background-image: url("https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/searchbox/nicon-10750f3f7d.png");
    background-position: 22px 45px;
}
.huan
{
    display: inline-block;
    position: absolute;
    width: 32px;
    height: 32px;
    background-image: url("zhuanhuan.jpg.png");
    left:1040px;
    top:274px;
}
.zhiding{
    display: inline-block;
    position: absolute;
    width: 22px;
    height: 23px;
    background-image: url("zhiding.jpg.png");
    left:506px;
    top:320px;
}
</style>
<body>
    <div class="nav">
        <a href="http://news.baidu.com/" class="new" target="_blank">新闻</a>
        <a href="https://www.hao123.com/?src=from_pc/" class="hao123" target="_blank">hao123</a>
        <a href="https://map.baidu.com/" class="map" target="_blank">地图</a>
        <a href="https://tieba.baidu.com/index.html" class="tieba" target="_blank">贴吧</a>
        <a href="https://haokan.baidu.com/?sfrom=baidu-top" class="radio" target="_blank">视频</a>
        <a href="https://image.baidu.com/" class="image" target="_blank">图片</a>
        <a href="https://pan.baidu.com/?from=1026962h/" class="wangpan" target="_blank">网盘</a>
        <a href="https://www.baidu.com/more/" class="more" target="_blank" class="shezhi">更多</a>
         <div class="mmm">
             <span class="shezhi">设置</span>
        <button class="settings">登录</button>
    </div>
    </div>
    <div class="pic">
        <img src="baidu.png" class="img_baidu" width="270" height="129">
    </div>
<div>
    <div class="main">
    <div>
    <input class="search">
    <div class="buddon-s" href="" >百度一下</div>
    <span class="camera"></span>
    </div>
    <table>
            <tr >
                <td >百度热榜></td>
                <span class="huan"></span>
                <td ><a id="c">换一换</a></td>
            </tr>
            <tr >
                <span class="zhiding"></span>
                <td ><a href="">&nbsp&nbsp&nbsp&nbsp&nbsp把光荣镌刻在历史行进的史册里&nbsp&nbsp<span class="k">新</span></a></td>
                <td><a href=""><span style="color:#faa90e">3</span>&nbsp&nbsp齐心协力防控疫情</a></td>
            </tr>
            <tr >
                <td><a href=""><span style="color:#fe2d46">1</span>&nbsp&nbsp苍山13人失联 已搜救到7人</a></td>
                <td><a href=""><span style="color:#9b9fac;">4</span>&nbsp&nbsp原定中国明年举办的亚洲杯将易地</a></td>
            </tr>
            <tr>
                <td><a href=""><span style="color:#ff6600;">2</span>&nbsp&nbsp清华大学:今起校门不进不出&nbsp&nbsp<span class="kk">热</span></a></td>
                <td><a href=""><span style="color:#9b9fac;">5</span>&nbsp&nbsp印度政府宣布立即禁止小麦出口</td>
            </tr>
    </table>
         </div>
</div>

    </div>
          <div>
        <div class="foot" >
			<a href="http://home.baidu.com/" target="_blank">关于百度</a>
			<a href="http://ir.baidu.com/phoenix.zhtml?c=188488&p=irol-irhome" target="_blank">About&nbsp&nbspBaidu</a>
			<a href="https://www.baidu.com/duty/" target="_blank">使用百度前必读</a>
			<a href="https://help.baidu.com/" target="_blank">帮助中心</a>
			<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001" target="_blank">京公网安备11000002000001号</a>
            <a herf="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">京ICP证030173号</a>
            <a herf="#">©2022 Baidu</a>
            <a herf="#">互联网药品信息服务资格证书 (京)-经营性-2017-0020</a>
	        <a herf="https://www.baidu.com/licence/" target="_blank">信息网络传播视听节目许可证0110516</a>
		</div> 
</body>
</html>

 

.-..。.
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html+css编写百度首页例子
11-30
百度首页很经典,使用HTML+ccss,适合新手参考！
html加css仿作百度界面
qq_66195472的博客
05-17 241
效果图 源码 <!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/c
模拟百度页面
m0_63004006的博客
05-22 1294
具体代码如下： <!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
仿新版百度首页html模板
08-22
高仿新版百度首页html模板 DIV+CSS的 详细不多说，自己下来看就知道
利用html和css完成百度首页的制作（百度一下）
hhahahhahahhha的博客
06-14 3473
通过分析可以知道该部分由俩个部分组成，这样就可以采取二分布局的方式进行布局，而其中的左右两个部分也各自分成二个部分但是由于是上下分布所以不需要采取二分布局，不需要使用悬浮的方式。（1）分析可得百度首页的顶部是有俩部分得来的，所以可以采取二分法的办法来实现，用一个大盒子里放二个小盒子，才去左边的左悬浮和右边的右悬浮。分析可得可以采取在一个盒子里放置一个文本框和一个按钮，但是要做到和百度首页一样的程度要使用border-radius进行边框的优化，使其变的圆润。以及使用hover标记进行鼠标的触控反馈。
html+css+js模仿百度注册页面
07-27
html+css+js模仿百度注册页面，带表单验证
百度新闻页面布局html+css
02-28
本教程将深入探讨“百度新闻页面布局”的HTML和CSS实现，旨在帮助初学者掌握页面布局的基本技巧，理解如何通过标签的使用来构建清晰、有效的新闻列表。 首先，HTML（HyperText Markup Language）是网页内容的结构化...
网页设计期末大作业+html+css
05-25
9个网页布局，学校让做的网站作业，虽然是比较基础的网页静态页面，不过我也希望你能做的规范一些，我们专业制作学生网页作业，div css js 等通过dreamwear的工具实现规范化，比如文件夹的规范，代码写作的规范，...
HTML+JS+CSS做的一些页面小游戏源码合集.zip
05-09
HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码合集 HTML+JS+CSS做的一些页面小游戏源码...
html+css+js 高仿百度首页搜索项目
11-23
在本项目中，“html+css+js 高仿百度首页搜索项目”是一个旨在教授和实践Web前端技术的实例。这个项目通过使用HTML、CSS和JavaScript这三种基础的Web开发语言，模仿了百度搜索引擎的首页，提供了类似的功能，比如...
自己动手做百度首页
AI_dkx的博客
07-08 1万+
自己动手做一个百度搜索页面，并且可以进行正常搜索，快来随心订制自己的百度搜索页面吧
前端——HTML百度首页制作
热门推荐
Searchin_R的博客
09-22 2万+
前些天为了学习页面布局，做了一个简易的百度首页。做百度首页的原因是因为它的布局比较简单，需要顾及的地方比较少，但是需要相关的知识点又基本上都能用上，对自己理解页面布局以及一些标签（如float和margin）的用法有很大的帮助。 仿做一个网页之前需要分析该网页的布局，下图是百度首页。 从上图可以看出，百度首页大概分为三个块：头部，中部，和底部。中部又可以分为LOGO和搜索框，地步可以分为百...
html+css实现百度首页（简单版）
returnadsss的博客
12-25 1万+
从头开始学前端，先从小事做起，多写代码。 第一版：使用基本的html和css元素，在学完《html+css快速上手》后，可以将基本的元素配齐，和基本样式基本布局，但缺少对于块元素的排版，圆角边框等等。 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi
阅读Skeleton.css源码，改善睡眠质量（尽管它只有419行代码）
weixin_39415598的博客
06-30 2998
本文介绍 点赞就等于学会了！ 如果本文对您有帮助，建议点赞收藏（点赞就等于学会了） Skeleton 源码一共只有 419 行（加上注释和换行），非常适合用来学习。 本文是根据我的学习过程来编写的，几乎每个章节都包含 使用方法 和 源码分析。 虽然现在大部分业务都不需要重复造轮子了，但对于小白来说，学习完 Skeleton 源码 是能走出新手村的。 本文不是推荐大家使用 Skeleton.css ，因为现代工程其实已经用不上这个库了。本文的重点在 响应式布局源码的解读。 本文适合人群： 有
修改默认Bootstrap框架下导航颜色
Web前端学习博客_Web_Jason365
07-18 1816
近日开始在学习Bootstrap框架，十分强大的框架，导航默认的背景颜色和链接文本样式是白色背景和黑色的链接文本样式，调用navbar-inverse反色样式后，背景变成黑色文本链接样式变成白色了，看上去不是那么美观，借助谷歌检查工具获取导航栏的控制背景为navbar-inverse下的background-color控制，直接修改.navbar-inverse下的background-color颜色，修改成你喜欢的颜色就可以了。 .navbar-inverse { background-col
HTML制作百度首页
eggplant_的博客
09-26 1万+
制作百度首页时候，除了要用到div进行分块，还需要对快的位置进行控制，一般有 对div进行规范大小width，height分别对应宽度高度 margin：有对div进行定位有margin-top,margin-left,margin-right,margin-buttom float-left:吧div元素进行从左到右排列 了解这些简单的操作之后，就可以自己动手做出一个简单百度页面了，例如...
html制作百度页面
m0_51660215的博客
07-03 7754
<!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_43601976的博客
08-05 4598
百度首页-html+css 页面布局 css页面布局需要掌握七种基本的选择器：id选择器、标签选择器、属性选择器 下面介绍七种选择器使用方法 标签选择器： 标签名{样式名：样式值；。。。} 作用：会给当前网页的所有该标签添加相同的样式 id选择器： #标签的id{样式名：样式值；。。。} 作用：给指定的标签添加样式 类选择器： .类选择器名{样式名：样式值；。。。} 作用：给不同标签添加样式 全选...
百度页面html代码
weixin_33802505的博客
03-26 8514
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; border: 0px; } #...
html+css模拟百度搜索网页
最新发布
08-03
要模拟百度搜索网页，我们可以使用HTML和CSS来创建一个简单的搜索界面。首先，我们需要创建一个HTML文件，然后使用CSS样式来美化网页。 在HTML中，我们可以使用元素来创建搜索表单。通过指定form的action属性为百度...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值