制作百度页面（HTML+CSS基础知识）

已于 2024-02-01 15:11:26 修改
阅读量1.7k 收藏 21
点赞数 16
文章标签： html css 前端
于 2024-02-01 15:08:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74766888/article/details/135973683
版权

一、 前言

        本文是笔者自学HTML和CSS后，动手尝试完成一个百度页面的制作，只用到了HTML和CSS的基础知识，没有用到JavaScipt的知识，即是一个静态页面。

        如有建议欢迎在评论区指出！

二、页面预览

三、html代码

为了方便起见，CSS代码放在style标签内，没有单独成立文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>百度一下，你就知道</title>
    <style type="text/css">
        /*清除元素默认性质*/
        body { 
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
            font-size: 1;
            font-family: "宋体";
            background-color: white;
        }

        /*全部a元素的基础属性*/
        a {     
            color: #00c;
            text-decoration: none;
        }
        a:hover{
            color:red;
            text-decoration: underline;
        }

        /*顶部的行*/
        #topline {  
            text-align: right;
            font-size:20px;
            margin:10px 10px;
        }

        /*百度图标*/
        #logo {  
            margin-top: 10px;
            text-align: center;
        }

        /*百度应用*/
        #apps {  
            margin-top: 20px;
            text-align: center;
            font-size: 30px;
            font-weight: bold;
        }

        /*搜索*/
        #search {
            margin-top: 20px;
            text-align: center;
        }
        #search #enter{  /*搜索内容*/
            width:600px;
            height:30px;
            font-size: 20px;
            font-weight: 400;
            vertical-align: middle;
            border: 1px solid black;
            border-radius: 10px 10px 10px 10px;
        }
        #search #submit{  /*搜索按钮*/
            width:100px;
            height:37px;
            font-size: 20px;
            font-weight: 500; 
            vertical-align: middle;
            cursor: pointer;
            color: white;
            background-color:#3836E0;
            border: 1px solid black;
            border-radius: 10px 10px 10px 10px;
        }

        /*热搜*/
        #hotnews #title {margin-top: 50px;}
        #hotnews #title a{
            font-size: 20px;
            font-family: Arial Bold;
            font-weight: 900;
            color:black;
            margin-left: 485px;
        }
        #hotnews #hotlist{
            display: flex;
            justify-content: center;
        }
        #hotnews #hotlist ul {
            padding-top: 5px;
            width: 280px;
            display: inline-block;
        }
        #hotnews #hotlist li{
            height: 36px;
            line-height: 36px;
            font-size: 20px;
            text-align: left;
        }
        #hotnews #hotlist a{
            height: 36px;
            line-height: 36px;
            font-size: 20px;
            padding-left: 20px;
        }
        #hotnews ul{list-style-type:none;}
        #hotnews #top3{font-weight: bold;}
        #hotnews #top3 #one,#hotnews #top3 #one a{color: #cc061d;}
        #hotnews #top3 #two,#hotnews #top3 #two a{color: rgb(240, 105, 15);}
        #hotnews #top3 #three,#hotnews #top3 #three a{color: #f0a923;}
        #hotnews #else ul li,#hotnews #else ul li a{color:#72747d}

        /*底部的行*/
        #bottomline{
            margin-top: 240px;
            position: absolute;
            left: 50%;    
            transform: translateX(-50%); 
        }
    </style>
</head>
<body>
    <div id="topline">
        <a href="https://www.baidu.com/gaoji/advanced.html">设置</a>
        |
        <a href="https://passport.baidu.com/">登录</a>
    </div>
    <div id="logo">
        <a href="https://www.baidu.com/" target="_blank"><img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" title="点此进入百度官网" width="370" height="180"></a>
    </div>
    <div id="apps">
        <a href="http://news.baidu.com/" target="_blank">新闻</a>
        <a href="https://map.baidu.com/" target="_blank">地图</a>
        <a href="http://image.baidu.com/" target="_blank">图片</a>
        <a href="https://haokan.baidu.com/" target="_blank">视频</a>
        <a href="http://tieba.baidu.com/" target="_blank">贴吧</a>
        <a href="https://wenku.baidu.com/" target="_blank">文库</a>
        <a href="https://baike.baidu.com/" target="_blank">百科</a>
        <a href="https://www.baidu.com/more/" target="_blank">更多>></a>
    </div>
    <div id="search">
        <input id="enter" type="text" maxlength="25" value="最多输入20个字"/>
        <input id="submit" type="submit" value="百度一下"/>
    </div>
    <div id="hotnews">
        <div id="title">
            <a href="https://top.baidu.com/" target="_blank">百度热搜></a>
        </div>
        <div id="hotlist">
            <div id="top3">
                <ul>
                    <li id="one">1<a href="https://pranx.com/win10-update/" target="_blank">北京申奥成功</a></li>
                    <li id="two">2<a href="https://pranx.com/win10-update/" target="_blank">吴亦凡被判入狱</a></li>
                    <li id="three">3<a href="https://pranx.com/win10-update/" target="_blank">中大即将迎来100年建校</a></li>
                </ul>
            </div>
            <div id="else">
                <ul> 
                    <li id>4<a href="https://pranx.com/win10-update/" target="_blank">骑士抢七大战胜勇士</a></li>
                    <li id>5<a href="https://pranx.com/win10-update/" target="_blank">姆巴佩世界杯决赛帽子戏法</a></li>
                    <li id>6<a href="https://pranx.com/win10-update/" target="_blank">火影忍者完结</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div id="bottomline">
        <a href="https://home.baidu.com/" target="_blank">关于百度</a>
         | 
        <a href="https://e.baidu.com/" target="_blank">企业推广</a>
         | 
        <a href="https://www.baidu.com/duty/" target="_blank">使用前必读</a>
         | 
        <a href="https://help.baidu.com/" target="_blank">帮助中心</a>
         | 
        <a href="https://beian.mps.gov.cn/#/query/webSearch" target="_blank">京公网安备11000002000001号</a>
    </div>
</body>
</html>

四、不足之处

  • 由于设置“百度热搜”的时候使用的是margin-left: 485px，所以这一行字将与页面的左边缘保持485px的距离，不会随页面放缩而改变，达不到预期效果 
    #hotnews #title a{
            font-size: 20px;
            font-family: Arial Bold;
            font-weight: 900;
            color:black;
            margin-left: 485px;
        }

  • 笔者尚不知道如何得到正确的像素值，目前都是估计数值大小，观察页面效果来判断是否正确，所以出现许多奇奇怪怪的像素值
  • 笔者尚不知道如何将一段文字放到页面底部的中央，所以还是使用了margin-top: 240px，如果还需要在两个块之间添加东西，则需要改变像素值，十分麻烦 
    ​
#bottomline{
            margin-top: 240px;
            position: absolute;
            left: 50%;    
            transform: translateX(-50%); 
        }

​

五、后续学习和改进

         输入文本后，点击百度搜索应该会跳转到相关页面，同时百度热搜这一块应该是时刻更新的，而不是通过文本设定的，都需要用到JavaScript的知识

达斯_0227
关注
  • 16
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
【前端学习】——使用html+css简略模仿百度首页
qq_70220645的博客
05-14 1215
首先写出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
用HTML+CSS实现PC段百度主页效果(附详细说明和源代码)
记录分享学习路上的一些经验，欢迎关注！
04-16 3593
最近用HTML+CSS练习实现了百度主页网站页面效果，分享一下。
html+css实现百度首页（简单版）
returnadsss的博客
12-25 9992
从头开始学前端，先从小事做起，多写代码。 第一版：使用基本的html和css元素，在学完《html+css快速上手》后，可以将基本的元素配齐，和基本样式基本布局，但缺少对于块元素的排版，圆角边框等等。 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi
百度首页HTML(简单代码)
qq_59519935的博客
07-01 1万+
html百度首页代码
利用html和css完成百度首页的制作（百度一下）
最新发布
hhahahhahahhha的博客
06-14 3362
通过分析可以知道该部分由俩个部分组成，这样就可以采取二分布局的方式进行布局，而其中的左右两个部分也各自分成二个部分但是由于是上下分布所以不需要采取二分布局，不需要使用悬浮的方式。（1）分析可得百度首页的顶部是有俩部分得来的，所以可以采取二分法的办法来实现，用一个大盒子里放二个小盒子，才去左边的左悬浮和右边的右悬浮。分析可得可以采取在一个盒子里放置一个文本框和一个按钮，但是要做到和百度首页一样的程度要使用border-radius进行边框的优化，使其变的圆润。以及使用hover标记进行鼠标的触控反馈。
自己动手做百度首页
AI_dkx的博客
07-08 1万+
自己动手做一个百度搜索页面，并且可以进行正常搜索，快来随心订制自己的百度搜索页面吧
使用HTML实现百度首页界面
gxjis_Z的博客
06-30 1万+
本次实验是使用HTML写出百度首页界面。本次实验只需要插入不同的网页跳转，插入文本，图片，最后在调整位置，就可以实现。：插入图片 ：点击实现网页的跳转：插入标签完整代码如下：
模仿百度首页页面（附带源码）html+css
热门推荐
yingshuangtu的博客
06-21 3万+
文章目录前言一、实现界面二、代码1.百度页面.html2.baidu.css三、图片总结 前言 实现页面:百度首页（点击跳转） 一、实现界面 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、代码 1.百度页面.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度</ti.
用html+css模仿百度登录页
AKK188888881的博客
02-21 1996
用html+css模仿百度登录页
html制作百度页面
m0_51660215的博客
07-03 7712
<!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基础（HTML篇）
Panda_Program的博客
09-01 1799
1、了解HTML、CSS、JavaScript 学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的： HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。 CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容...
HTML+CSS基础（CSS篇下）
Panda_Program的博客
09-03 605
CSS格式化排版 === ##1、字体 我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例子，下面代码实现：为网页中的文字设置字体为宋体。 body{font-family:"宋体";}这里注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。（因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字
html+css编写百度首页例子
11-30
百度首页很经典,使用HTML+ccss,适合新手参考！
基于html+css+js实现的共享视频静态网站（含报告）
06-30
使用百度图片搜索功能，搜索美观大方的登录页面和注册页面，模仿其界面布局，使用所学的HTML、CSS和JavaScript知识，制作自己的表单页面，并使用虚拟帐号实现登录和重定向功能。 2).以表格或div布局方式，设计较人性...
精通CSS+DIV网页样式与布局视频教材
12-25
第1部分　CSS基础知识篇 第1章　CSS的初步体验 1.1　CSS的概念 1.1.1　标记的概念 1.1.2　传统HTML的缺点 1.1.3　CSS的引入 1.1.4　如何编辑CSS 1.1.5　浏览器与CSS 1.2　使用CSS控制页面 1.2.1　...
网页制作掌握的最常用的HTML标记
09-28
HTML是网页制作的基础，它是HyperText Markup Language的缩写，用于构建网页结构并提供内容的语义描述。本文主要探讨了网页制作中最常用的HTML标记，...因此，无论是网络编辑还是开发者，掌握这些基础知识都是必要的。
html制作网站基础
11-05
HTML（HyperText Markup Language）是用于创建网页的标准标记语言，它是构建互联网页面的基础。学习HTML制作网站基础，首先要了解...理解并熟练运用这些基础知识，对于创建美观、功能完善的静态和动态网站至关重要。
精通CSS+DIV网页样式与布局全集
11-09
第1部分　CSS基础知识篇 第1章　CSS的初步体验　1.1　CSS的概念　1.1.1　标记的概念　1.1.2　传统HTML的缺点　1.1.3　CSS的引入　1.1.4　如何编辑CSS　1.1.5　浏览器与CSS　1.2　使用CSS控制页面　1.2.1　行内样式　...
前端：用html写百度首页
gyxx1998的博客
04-02 6175
0 准备工作 初学html，要求用html写一个百度首页 老师推荐了html的学习网站(菜鸟教程里html的教程也很棒)： https://www.w3school.com.cn/html/index.asp 百度首页自己的源码 腾讯的源码做的比百度好，初学者可以先看看腾讯的 1 效果 2 详解 以下为详解： 右上方菜单栏 设置靠右 div：如果想要对整体的导航进行移动位置，可以对整个的a标...
制作风景名胜页面html+css
05-14
好的，以下是一个简单的风景名胜页面的HTML和CSS代码示例： HTML代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>风景名胜页面</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>风景名胜页面</h1> </header> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">景点介绍</a></li> <li><a href="#">旅游攻略</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> <main> <section> <h2>景点介绍</h2> <p>这里是景点介绍的内容。</p> </section> <section> <h2>旅游攻略</h2> <p>这里是旅游攻略的内容。</p> </section> </main> <footer> <p>版权所有 © 2021 风景名胜页面</p> </footer> </body> </html> ``` CSS代码： ```css /* 页面布局 */ body { margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f2f2f2; } header { background-color: #333; color: #fff; text-align: center; padding: 20px; } nav { background-color: #ccc; text-align: center; padding: 10px; } nav ul { list-style: none; margin: 0; padding: 0; } nav li { display: inline-block; margin: 0 10px; } nav a { text-decoration: none; color: #333; padding: 5px 10px; border: 1px solid #999; border-radius: 5px; } nav a:hover { background-color: #999; color: #fff; } main { padding: 20px; } section { margin-bottom: 20px; } h2 { color: #333; } /* 页脚 */ footer { background-color: #333; color: #fff; text-align: center; padding: 10px; } ``` 在这个示例中，我们使用了HTML5中的语义标签来定义页面的结构，包括`header`、`nav`、`main`、`section`和`footer`。同时，我们也引入了CSS样式来控制页面的布局和样式。你可以根据自己的需求修改代码中的内容和样式，以适应你的页面。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值