初学者的第二个实践，超简单的方式仿作百度页面

最新推荐文章于 2022-09-27 09:12:26 发布
最新推荐文章于 2022-09-27 09:12:26 发布
阅读量432 收藏
点赞数
文章标签： webview android java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/EX_small_white/article/details/124902568
版权

这期时仿作百度页面，但是因为时静态的，所以难度可以说是下降了很多，我也不知道这样做是不是对的，我写的很简单，但我看见别人做的代码很复杂，我暂时还没有去深究区别和好坏，总之还是慢慢来吧，反正我也做出了差不都的效果

 这个就是效果图，其中百度logo和百度一下都是图片，因为时静态的嘛，我也不知这样对不对

<!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>

    <style>

        .red {

            color:red

        }

        .yellow {

            color:chocolate

        }

        .brown{

            color:dimgrey

        }

    </style>

</head>

<p>新闻 &nbsp; &nbsp; hao123 &nbsp; &nbsp; 地图&nbsp; &nbsp; 贴吧&nbsp; &nbsp; 视频&nbsp; &nbsp; 图片&nbsp; &nbsp;网盘&nbsp; &nbsp; 更多 </p>

       

          <table  align="center" >

              <tr>

                <td>

                  <img src="UQ$2J$K`HL)9H]R7E{]JVW9.png" width="600"/>

                </td>

              </tr>

              <tr>

                <td>

                    <img src="B5DPWCCV%$46~UW@{()2CWH.png" width="600"/>

                </td>

              </tr>

              <tr>

                <td>

                    <img src="ES%DMM((4D48M}`Q9BF)DMU.png" width="600"/>

                </td>

              </tr>

                 

             

          </table>

          <table  align="center" width="600" >

              <tr>

                  <td align="left" width="300">

                      <span class="red">1.</span><span>&nbsp;致敬劳动者</span><span><img src="WHR2X~X1VLKVNOOP7Q%ZSLP.png" width="15"></span>

                  </td>

                  <td align="left" width="300">

                      <span class="yellow">3.</span><span>&nbsp;方舱里的感动</span><span><img src="WHR2X~X1VLKVNOOP7Q%ZSLP.png" width="15"></span>

                  </td>

              </tr>

              <tr>

                <td align="left" width="300">

                    <span class="yellow">2.</span><span>&nbsp;长沙楼房倒塌导致23人被困39人失联</span><span><img src="M0)E7U3A1(ZH@4@K$MURAV7.png" width="15"></span>

                </td>

                <td align="left" width="300">

                    <span class="brown">5.</span><span>&nbsp;多地方小龙虾价格跳水逼近个位数</span>

                </td>

            </tr>

            <tr>

                <td align="left" width="300">

                    <span class="brwon">3.</span><span>&nbsp;北京67例感染者详情：含学生外卖</span>

                </td>

                <td align="left" width="300">

                    <span class="brwon">6.</span><span>&nbsp;吴京ip地址显示泰国</span>

                </td>

            </tr>             

                        

          </table>

           

       

    </table>

</body>

</html>

这个就是代码了，我还是用的表格的形势，加了一丁点二的css

加了表格后长这样

 用到的图片有这些

第一个

第二个

 

第三个

第四个

 第五个

 

 

 

EX_small_white
关注
仿作百度页面
m0_63920995的博客
05-21 830
仿作百度页面，先用HTML将百度页面的基本框架搭建好，然后在css中展开布局。 首先用盒子展开布局，将页面主要分为三个部分，上部为导航栏，中间为主题部分，包括搜索栏和热点，下部为尾部导航栏。再为每个盒子设置自己的内外边距和内容的居中，再将每个盒子中的字体大小，字体颜色为其分别设置。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-e
仿作一个百度页面
m0_70220004的博客
05-22 234
今天的作业是粗略的仿作一下百度的页面 首先，粗浅的看一下该页面的结构，可以用四个盒子来装，做这四个盒子需要测量出页面中的一些尺寸，这里安利一个for Mac的app———Dimensions,测出这些数据后用css修改盒子的大小便做出了结构，随后修改样式，也是用css，非常简单。mindmap大体是： 效果图如下，作为初学者感觉做的还是bi jiao z代码： <!DOCTYPE html> <html lang="en"> <head> <me
仿百度首页
08-14
百度首页的模仿制作
简单百度页面模仿
人生当苦无妨
08-18 514
代码部分 非常简单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { text-align: center;/*元素居中*/ } body { font-size: 16px; /*调整文字大小*/ } .width { wid
模拟百度页面
m0_63004006的博客
05-22 1440
具体代码如下： <!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
百度首页仿制
06-12
html+css css中那个鼠标移动到a标签上改样式，不需要用到js。真是又学到了
QQmodel:仿作一个QQ的基本页面
07-16
这个项目对于初学者来说是很好的实践平台，因为它涵盖了iOS应用开发中的许多基础概念和关键技术。 首先，Objective-C是Apple为其操作系统（包括iOS）开发的面向对象的编程语言。它的语法基于C语言，并引入了...
仿作小米商城页面
m0_63920995的博客
07-14 857
历时一周半的时间，终于在我的不懈努力下，完成了小米商城页面的静态仿作。于是，我开始一点一点的尝试，而那些被遗忘的记忆也一点一点的被我给唤起，在尝试成功时，那种如释重负的感觉真让人觉得轻松，可是，当我继续往下做下一个模块时，又总是会遇到好多的问题。并且，面对如此庞大的页面，我要去完成的内容有好多好多，总是让我觉得前路漫漫，没有信心和耐心走下去，但是，不积跬步，无以至千里。虽然这是我奋尽全力完成的，但是我知道，我还有好多不足，在页面的仿作上也有好多问题，所以，欢迎各位大佬，大神批评指正，我一定会及时改正。...
html加css仿作百度界面
qq_66195472的博客
05-17 257
效果图 源码 <!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
仿百度页面设计
weixin_50835854的博客
12-14 1676
题目 通过对百度首页的布局进行分析，编写代码实现整个网页的设计过程。掌握网页设计布局的基本流程。 原图 第一步 div分块 初步可以分成五个板块 挨个分析 第一块 几个超链接，在写几个空格，再加一个button按钮即可 整体要居右 附上代码 <div align="right"> <a href="#">糯米</a>&nbsp; <a href="#">新闻</a>&nbsp; <a href="#">hao1
仿百度首页源码
03-07
百度一下，你就知道
仿百度页面
11-30
HTML+CSS仿写的百度页面，只有页面没有功能
仿百度搜索引擎
08-22
仿百度搜索引擎，简单，明了！容易看懂，代码量少
baidu主页页面仿写
04-02
百度点击搜索的页面html,刚能学习的，亲测有效果
模仿百度
weixin_45175829的博客
09-06 187
百度一下 新闻 hao123 地图 视频 贴吧 学术 登入
模仿百度首页
qiuzhenlyf的博客
03-16 625
自己联系前端开发做的一些小网页，第一个是模仿的百度首页<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.3c.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text
第一次网站制作｜｜京东网站仿做｜｜简单易上手
m0_46270734的博客
09-27 1310
前端京东网页仿做
仿百度搜索
菜鸟的博客
11-30 858
1，监听输入框内容变化，获得输入框值 这边使用input的oninput属性，所以HTML代码这么写 <input id="search" placeholder="搜索" oninput="OnInput (event)"> <div id="list" > </div> js代码 function OnInput(event){ if( event.target.value==""){ $("list").hide(); }else{ //提交搜索功
Vue2实现的手机QQ仿作：集成聊天机器人功能
本文档详细介绍了如何使用Vue2框架开发一个仿照手机QQ风格的单页面应用程序，特别强调了其在实际应用中的一个重要特性——接入了聊天机器人，使得用户可以与虚拟角色进行实时对话。开发人员参考了设计师kaokao的UI...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值