仿写静态百度页面

最新推荐文章于 2023-03-07 11:22:03 发布
最新推荐文章于 2023-03-07 11:22:03 发布
阅读量347 收藏 10
点赞数 1
文章标签： html css html5 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46716059/article/details/123774852
版权

静态页面，纯html和css

 

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="./index.css">
</head>

<body>
    <!-- 头部导航和登录 -->
    <div class="head">
        <div class="topLeft">
            <a href="" class="top">新闻</a>
            <a href="" class="top">hao123</a>
            <a href="" class="top">地图</a>
            <a href="" class="top">贴吧</a>
            <a href="" class="top">视频</a>
            <a href="" class="top">图片</a>
            <a href="" class="top">网盘</a>
            <div class="more">
                <a href="" class="top">更多</a>
            </div>
        </div>
        <div class="topRight">
            <span>设置</span>
            <a href="#" class="login">登录</a>
        </div>
    </div>

    <!-- 主体 -->
    <div class="center">
        <!-- 百度图标 -->
        <div>
            <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.
最低0.47元/天 解锁文章
weixin_46716059
关注
  • 1
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端新手仿写百度首页静态网页
Elon33的博客
04-01 1621
百度首页初步仿写 HTML 在这里插入代码片 ```<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>百度一下，你就知道</title> <link rel="stylesheet" type="text/css" href="c...
百度界面静态仿写，大佬勿喷
07-04
百度界面静态仿写，大佬勿喷
酷狗音乐官网静态主页
01-25
使用 HBuilder模仿酷狗音乐官网主页写的静态页面，适合初学前端的学者参考，使用DIV+CSS以及绝对定位，相对定位等搭建页面，里面附带自己写的轮播插件！
仿百度静态页面
ThinkPet
02-28 5443
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;仿百度静态页面&lt;/title&gt; &lt;link href="Baidu.css" rel="stylesheet" type=&q
使用html简单仿写一个静态的绝地求生官网首页
yunanxxx的博客
02-23 862
引入动图的标签就不能用img了，要使用,并且设置了：自动播放，静音播放，循环播放，即：autoplay， muted ，loop。5.首先我们先编辑官网的导航栏部分 ，写在header标签里的nav自命名标签中。将你下载好的图片，拖入上面建好的image文件夹中。这是我以前写的一个静态网页，算一个html入门的简单的教程。1.首先在vscode新建一个文件夹，点击如图所示，点击蓝笔圈起的图标（左边的是新建文件）也是将动态图保存到image里，红圈部分就是我们要用的动图，后缀是.mp4。
淘宝静态网站首页仿写html+css，个人作业，
01-20
个人制作的部分淘宝网页，包括两个自创的子页面登陆和注册，不喜勿喷，谢谢！
HTML: 仿写一个财经类静态的网页
dienangpiao2051的博客
08-29 415
要求：仿写一个静态的网页，主要采用HTML+CSS+DIV的布局方式， 新建两个文件:demo.html、demo.css 图片素材：image.zip demo.html代码如下： <!doctype html> <html lang="zh-CN"> <head> <meta charset="u...
基于HTML和css的静态网页仿写
柠檬人的博客
03-07 3922
具体效果为: 采用的技术主要有： position定位 浮动布局 弹性盒子布局 a链接 伪类 表格表单等等 首先全局设置为： *{ margin: 0%; padding: 0%; } ul,ol{ list-style: none; } a{ text-decoration: none; } html,body{ width: 100%; height: 100%; } #footer{ width: 100%; he
HTML仿百度首页登录后的静态界面代码
10-24
有关于仿百度首页登录后的静态界面代码，有些功能还没有完善，所以希望能借这次机会跟几位大佬互相讨论下，帮忙完善下其他功能！不过做完的一些功能可以互相参考借鉴！
淘宝网页简单的仿写，html+css
07-24
里面有几个页面的练习，都是使用的，动态的，还有购物网站html+css
meizu静态pc端主页面仿写.zip
03-29
本项目"meizu静态pc端主页面仿写.zip"提供了一个实战案例，旨在帮助学习者掌握HTML和CSS技术，特别是针对PC端网页的设计方法。通过仿写魅族（Meizu）官方网站的主页面，你可以深入理解网页布局、样式控制以及响应式...
baidu主页页面仿写
04-02
百度点击搜索的页面html,刚能学习的，亲测有效果
小米商城仿写css+html纯静态
08-06
【小米商城仿写css+html纯静态】是一个项目实践，旨在通过模仿小米商城的网页设计，学习和掌握HTML和CSS的基础知识以及实际应用。在这个过程中，你可以了解到如何构建一个静态的网页布局，包括头部、导航栏、商品...
html仿写简易淘宝购物页面
07-14
在本项目中，“html仿写简易淘宝购物页面”是一个基于HTML、CSS和Bootstrap技术的实践教程，旨在帮助初学者或开发者了解如何构建一个类似于淘宝网的简单购物平台的前端界面。我们将深入探讨这三个核心技术，以及它们...
HTML5+CSS+JavaScript仿百度登录之后的静态首页
qq_32154641的博客
10-24 6559
这是仿百度登录后的静态页面，其中有些功能还不完善，但是我会尽量去完善他们，在这个页面里面有很多相对我来说比较难的地方，比如其中的“更多产品”，“设置”，“换肤功能”，“我的关注，推荐，导航”选项卡之间的切换等等功能，其他还有一些难点，我就不一一介绍了，下面我直接贴代码： 这是HTML+JavaScript+部分CSS代码：<!DOCTYPE html> <html> <head>
html＋css模仿百度首页静态网页
weixin_65450526的博客
03-26 1456
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } ul li{ list-style-type: none; } a{ text-d...
Roof Houses 静态网页仿写代码
泛华
03-17 282
CLASS *{ margin: 0; padding: 0; outline: none; border: none; list-style: none; text-decoration: none; } body::-webkit-scrollbar{ width: 5px; height: 0; background-color: #30c39e; } body::-webkit-scrollbar-button{ w.
html+css仿写NIKE官网静态页面
lucky_kundy的博客
03-27 2179
第一次较完整的网页，没有动画，纯静态，没有调式各种窗口大小，谷歌浏览器缩放90%为正常比例 部分效果图 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="view...
仿写网站html静态页面
最新发布
11-11
以下是一个简单的HTML静态页面的示例，包含了基本的HTML标签和CSS样式设置： ```html <!DOCTYPE html> <html> <head> <title>静态页面示例</title> <style> body { background-color: #f2f2f2; font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #333; color: #fff; padding: 20px; text-align: center; } nav { background-color: #666; color: #fff; padding: 10px; text-align: center; } nav a { color: #fff; text-decoration: none; padding: 10px; } nav a:hover { background-color: #999; } section { display: flex; flex-wrap: wrap; justify-content: center; padding: 20px; } article { background-color: #fff; border: 1px solid #ccc; box-shadow: 2px 2px 5px #ccc; margin: 10px; padding: 10px; width: 300px; } article h2 { font-size: 24px; margin: 0; padding: 0; } article p { font-size: 16px; margin: 10px 0; padding: 0; } footer { background-color: #333; color: #fff; padding: 20px; text-align: center; } </style> </head> <body> <header> <h1>静态页面示例</h1> </header> <nav> <a href="#">首页</a> <a href="#">产品</a> <a href="#">服务</a> <a href="#">关于我们</a> <a href="#">联系我们</a> </nav> <section> <article> <h2>产品1</h2> <p>这是产品1的介绍。</p> </article> <article> <h2>产品2</h2> <p>这是产品2的介绍。</p> </article> <article> <h2>产品3</h2> <p>这是产品3的介绍。</p> </article> <article> <h2>产品4</h2> <p>这是产品4的介绍。</p> </article> </section> <footer> <p>版权所有 © 2021 静态页面示例</p> </footer> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值