html和css制作百度界面

最新推荐文章于 2024-03-16 09:51:29 发布
最新推荐文章于 2024-03-16 09:51:29 发布
阅读量349 收藏
点赞数
原文链接：http://www.cnblogs.com/yeyuyuni/p/11242749.html
版权
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>百度</title>
<link rel="stylesheet" href="baidu.css">
</head>

<body>
<header>
<div class="header">
&nbsp;&nbsp;成都： 28℃&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;良&nbsp;&nbsp;53&nbsp;&nbsp;|&nbsp;&nbsp;<u>换肤</u>&nbsp;&nbsp;&nbsp;&nbsp;<u>消息</u>&nbsp;&nbsp;&nbsp;&nbsp;<u>显示频道</u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<u><b>新闻</b></u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<u><b>hao123</b></u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<u><b>地图</b></u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<u><b>视频</b></u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<u><b>贴吧</b></u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<u><b>学术</b></u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<u>设置</u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</div>
<div class="gd"><b>&nbsp;更多产品</b></div>
</header>
<section>
<div class="tp">
<img class="tutu" src="baidu.png">
</div>
<div class="section">
<div class="srk">
<div class="baidu">百度一下</div>
<div class="png">
<img src="camera.png">
</div>
</div>
</div>
</section>
<footer>
<div class="footer">
<div class="sy"><u>设为首页</u>&nbsp;&nbsp;©2019&nbsp;Baidu&nbsp;<u>使用百度前必读</u>&nbsp;<u>意见反馈</u>&nbsp;京ICP证030173号
<br>京公网安备11000002000001号</div>
</div>
</footer>
</body>

</html>
 
.header{
background-color: #ffffff;
color: #435862;
font-size: 10px;
border-bottom: 1px solid #ebebeb;
border-left: 1px solid #ebebeb;
border-right: 1px solid #ebebeb;
line-height: 20px;
}

.tutu{
margin: auto;
display: block;
padding-top: 151px;
width: 170px;
height: 55px;
}
.tp{
width: 100%;
}
.section{
width: 100%;
}
.srk{
margin: auto;
display: block;
margin-top: 30px;
border: 1px solid #b7b7b7;
line-height: 35px;
width: 530px;
height: 29px;
}
.baidu{
color: white;
background-color: #3389ff;
width: 100px;
height: 31px;
text-align: center;
float: right;
margin-top: -1px;
margin-right: -1px;
margin-bottom: 2px;
}
.png{
float: right;
padding-right: 10px;
padding-top: 1px;
}
.footer{
width: 100%;
}
.sy{
margin: auto;
display: block;
margin-top: 300px;
position: absolute;
left: 620px;
font-size: 10px;
color: #b7b7b7;
text-align: center;
line-height: 20px;
}
.gd{
line-height: 20px;
font-size: 11px;
color: white;
background-color: #3389ff;
width: 60px;
height: 24px;
position: absolute;
right: 5px;
top: 0;
padding-top: 5px;
padding-left: 5px;
}

转载于:https://www.cnblogs.com/yeyuyuni/p/11242749.html

dinabi3790
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML-CSS 百度页面的搭建
weixin_45722135的博客
03-01 873
今天所讲的的百度的页面搭建。可分为三部分来分析: 【1】首先介绍头部的搭建：头部分为左边与右边， 头左边主要有照片和文字搭建而成，也使用左浮，文字就简单使用margin-left来完成。 头右边的样式都差不多，但右边的菜单框中【更多产品】样式繁多 更多产品就采用块级标签转成行内...
使用HTML+CSS+JS制作简单的网页菜单界面
12-30
写ABROAD项目用到了标签这个东东，其实标签在WEB上到处可见，图中就依次显示了DCC文章发布器、ABROAD后台添加数据、百度图片搜索、sf发布博客文章时贴标签的样式——标签就像浏览器里原生的checkbox一样，不过...
用HTML+CSS实现百度静态页面
qq_44723773的博客
09-21 1万+
在课程学习的时候，课下的作业是做一个仿百度首页的页面。于是，有了下面的成果！ 接下来看看真实的百度 是不是特别的像呢？话不多说，接下来直接上代码！！！硬核来袭~ <!-- * @Author: OriginalCoder * @Date: 2020-09-17 21:57:21 * @version: * @LastEditTime: 2020-09-19 11:19:10 * @LastEditors: OriginalCoder * @Description: 仿百度首页的HTM
实战CSS：静态百度首页实现
KaiSarH
12-16 771
目标 : 将百度首界面静态实现,实现以下效果. 效果: 代码: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度一下, 你就知道</title> <link rel="shortcut i...
前端：HTML百度页面制作（快速简单）
最新发布
m0_59401963的博客
03-16 1097
本文开发出来的网页只是静态版本的，可以在搜索框里查询你想了解的东西，搜索出来的数据均是百度处理，并且只制作html，不涉及到css等，学会之后就可以制作任何一个搜索页面
HTML+CSS百度网页制作3.0
weixin_65717727的博客
05-22 3334
<!DOCTYPEhtml> <html lang="ch_CN"> <head> <meta charset="UTF-8"> <title>百度首页</title> <style type="text/css"> a { color: black; } a:link { tex...
模拟百度页面
m0_63004006的博客
05-22 984
具体代码如下： <!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
基于HTML5+css+JS的精美登陆注册界面
01-18
基于HTML5+css+JS的精美登陆注册界面 基于HTML5+css+JS的精美登陆注册界面 基于HTML5+css+JS的精美登陆注册界面 基于HTML5+css+JS的精美登陆注册界面
基于html+css+js实现的共享视频静态网站（含报告）
06-30
使用百度图片搜索功能，搜索美观大方的登录页面和注册页面，模仿其界面布局，使用所学的HTML、CSS和JavaScript知识，制作自己的表单页面，并使用虚拟帐号实现登录和重定向功能。 2).以表格或div布局方式，设计较人性...
JQuery&CSS;&CSS;+DIV实例大全.rar
08-13
5.JS+CSS网页版模拟QQ登录框界面特效示例 6.JS+flash立柱广告代码仿百度MP3搜索右侧可伸缩的立柱广告效果 7.JS版本黑色超动感二级菜单导航模块代码 穿越火线游戏网 8.JS经典3款风格QQ客服在线浮动右侧与左侧...
疯狂HTML 5+CSS 3+JavaScript讲义（第2版）+源代码
11-19
9.4　用户界面和滤镜属性 258 9.5　本章小结 263 第10章　盒模型与布局相关属性 264 10.1　盒模型和display属性 265 10.2　对盒添加阴影 275 10.3　布局相关属性 278 10.4　CSS 3新增的多栏布局 285 10.5　使用弹性...
html+css+js百度首页制作+附源代码+实现简单【百度一下】功能
01-08
文章目录写在前面页面效果百度网盘提取码 写在前面 本博客只为有需要的朋友提供借鉴。 课堂作业要求完成的，实现了基本功能，光标移上去变成小手，js实现了百度一下功能。页面布局没问题，页面样式没问题。 导航栏其他的部分链接没把网址改过来，导航栏位置天气未获取，有需要的可以多花点时间。就说到这，专业前端勿喷。 页面效果 实现百度一下功能 百度网盘提取码 链接：https://pan.baidu.com/s/1oKeHPPcsmDCr9GZHEhU9-g 提取码：ab0y 解压导入dw或者其他编译器即可
百度首页制作
06-07
使用HTML制作百度，并实现其各项功能
用html+css制作百度首页
azsx582的博客
12-21 6406
刚入门，做个百度首页来巩固一下刚学的html和css知识。 这是原网页： 这是我做的效果图： 实力有限，只能做成这样，有兴趣的可以参考一下，代码如下： 百度一下，你就知道 新闻 hao123 地图 视频 贴吧 学术 更多
模仿百度首页页面（附带源码）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制作一个简易百度页面
陈小哥cw
03-04 1万+
图片请自行寻找 html页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>百度一下，你就知道</title> <link rel="shortcut icon" href="https://www.baidu.com/...
html+css 百度首页制作
vvvjack7的博客
04-30 2553
分为三部分去做,先把一些元素添上，在用style设置格式。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度首页</title> <style> body{ ...
百度首页制作 （仿百度首页）
qq_45830796的博客
03-21 1447
百度首页制作 （仿百度首页） 介绍： 用html+css制作的百度首页 带搜索功能，点击会进行跳转到搜索页面 效果图： 鼠标移入悬浮效果： 代码 <!DOCTYPE html> <html lang="zn"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
前端第二次作业
m0_61999957的博客
05-22 116
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"> <link
html和css静态网页制作淘宝界面
05-25
制作一个类似淘宝的静态网页需要使用 HTML 和 CSS。以下是一个简单示例： 首先，我们需要创建一个 HTML 文件，可以将其命名为“taobao.html”。在 HTML 文件中，我们需要编写 HTML 代码来定义页面结构和内容。 ```html <!DOCTYPE html> <html> <head> <title>淘宝</title> <link rel="stylesheet" type="text/css" href="taobao.css"> </head> <body> <header> <h1>淘宝</h1> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">女装</a></li> <li><a href="#">男装</a></li> <li><a href="#">美妆</a></li> <li><a href="#">数码</a></li> </ul> </nav> </header> <main> <section class="banner"> <img src="banner.jpg" alt="淘宝"> </section> <section class="products"> <h2>热销商品</h2> <ul> <li> <a href="#"> <img src="product1.jpg" alt="商品1"> <h3>商品1</h3> <p>价格：100元</p> </a> </li> <li> <a href="#"> <img src="product2.jpg" alt="商品2"> <h3>商品2</h3> <p>价格：200元</p> </a> </li> <li> <a href="#"> <img src="product3.jpg" alt="商品3"> <h3>商品3</h3> <p>价格：300元</p> </a> </li> <li> <a href="#"> <img src="product4.jpg" alt="商品4"> <h3>商品4</h3> <p>价格：400元</p> </a> </li> </ul> </section> </main> <footer> <p>© 2021 淘宝</p> </footer> </body> </html> ``` 在 HTML 中，我们使用标签来定义页面的结构和内容。在上面的示例中，我们定义了一个页面标题、一个链接到 CSS 文件的标签、一个页眉（header）和页脚（footer），以及一个主要内容区域（main）。在主要内容区域中，我们定义了一个横幅区域（banner）和一个产品列表区域（products）。 接下来，我们需要创建一个 CSS 文件，可以将其命名为“taobao.css”。在 CSS 文件中，我们需要编写 CSS 代码来定义页面的样式。 ```css body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #FF4500; color: #FFFFFF; display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 20px; } nav ul { list-style: none; display: flex; flex-direction: row; justify-content: space-between; margin: 0; padding: 0; } nav ul li { margin: 0 10px; } nav ul li a { color: #FFFFFF; text-decoration: none; } main { padding: 20px; } .banner img { width: 100%; } .products h2 { font-size: 24px; margin-bottom: 20px; } .products ul { list-style: none; display: flex; flex-wrap: wrap; margin: 0; padding: 0; } .products li { width: 25%; margin: 0 10px 20px; } .products li a { display: block; text-align: center; color: #333333; text-decoration: none; } .products li img { width: 100%; } .products li h3 { font-size: 18px; margin: 10px 0; } .products li p { font-size: 14px; color: #FF4500; margin: 5px 0; } footer { background-color: #FFFFFF; padding: 20px; text-align: center; } ``` 在 CSS 中，我们使用选择器来选择 HTML 元素，并为其定义样式。在上面的示例中，我们定义了页面背景色、字体、页眉、导航栏、横幅、热销商品列表和页脚的样式。 最后，将 HTML 文件和 CSS 文件保存在同一个文件夹中，并在浏览器中打开 HTML 文件，即可看到一个简单的类似淘宝的静态网页。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值