VsCode模仿简单百度网页（html）
2024-05-14 00:24:32
欢迎浏览本篇文章
大家好！ 这是小编是个刚入门的小白，若有不足请广大网友提出批评指教。最近刚好做了一个VsCode的简单百度首页，这边简单实现了页面布局效果和链接跳转，本文尚未用到css。
界面效果图
页面设计代码
<!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><style>.leftDiv{height: 50px;width: auto;float: left;margin-left: 10px;}.rightDiv{height: 50px;width: 100px;float: right;margin-right: 30px;}.headDiv{height: 50px;width: auto;text-align: center;margin-top: 15px; }.a1{text-decoration: initial;font-size: 14px;margin-left: 20px;color: black;}.a2{text-decoration: initial;font-size: 14px;color: black;float: left;}.a3{width: 41px;height: 22px;text-decoration: initial;font-size: 13px;color: white;background-color: #1f7aff;text-align: center;line-height: 20px;float: right;border-radius: 5px;}/* 输入框和按钮 */.threeDiv{text-align: center;width: 600px;height: 40px;margin: auto;margin-top: 10px;}/* 输入框 */.inputDiv{width: 482px;float: left;height: 40px;border-color: #668B8B;border-bottom-left-radius: 15px;border-top-left-radius: 15px; }/* 百度一下按钮 */.baiduDiv{background-color: #1f7aff;color: white;font-size: 18px;width: 110px;height: 46px;float: right;text-align: center;line-height: 42px;border-top-right-radius: 15px;border-bottom-right-radius: 15px;}/* 百度图标位置 */.image{width: 100%;height: auto;text-align: center;}/* 百度热榜 */.hotDiv{text-align: center;width: 550px;height: auto;margin-left: 30%;margin-top: 40px;}.hot{float: left;width: 100%;height: 36px;text-align: left;font-weight: bolder;font-size: 15px;}.hotBig{width: 100%;height: 30px;float: left;}.hotLeft{float: left;height: auto;width: 42%;font-size: 13px;text-align: left;}.hotRight{float: right;height: auto;width: 47%;font-size: 13px;text-align: left;}a{color: crimson;}b{color: darkorange;}c{color: khaki;}/* 底部标签 */.bottomDiv{width: 100%;height: 25px;position: absolute;bottom: 0px;margin-left: 50px;}.a4{font-size: 12px;color: #869098;text-decoration: initial;margin-left: 20px;}</style>
</head>
<body style="font-family: sans-serif;"><!-- 头部栏目 --><div class="headDiv"><!-- 头部左侧栏目 --><div class="leftDiv"><a href="http://news.baidu.com/" class="a1">新闻</a><a href="https://www.hao123.com/" class="a1">hao123</a><a href="https://map.baidu.com/@13211798.77,2842902.63,12z" class="a1">地图</a><a href="https://live.baidu.com/" class="a1">直播</a><a href="https://haokan.baidu.com/?sfrom=baidu-top" class="a1">视频</a><a href="https://tieba.baidu.com/index.html" class="a1">贴吧</a><a href="https://xueshu.baidu.com/" class="a1">学术</a><a href="https://www.baidu.com/more/" class="a1">更多</a></div><!-- 头部右侧栏目 --><div class="rightDiv"><div href="" class="a2">设置</div><div href="" class="a3">登录</div></div></div><!-- 百度图标 --><div class="image" ><a href="https://www.baidu.com/"><img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度图标" width="300px" height="auto"></a></div><!-- 输入框总体 --><div class="threeDiv"><!-- 输入框 --><p style="font-size: 20px;"><input type="text" class="inputDiv" placeholder="请输入想要搜索的内容" ></input></p><!-- 百度一下按钮 --><a href="https://www.baidu.com/"><div class="baiduDiv" >百度一下</div></a></div><!-- 百度热榜 --><div class="hotDiv"><!-- 标题 --><div class="hot">百度热榜</div><!-- 第一行 --><div class="hotBig"><!-- 热点1 --><div class="hotLeft"><a>1</a> 31省份新增本土确诊50例 均在福建</div><!-- 热点4 --><div class="hotRight">4 莆田累计报告99例确诊5例无症状</div></div><!-- 第二行 --><div class="hotBig"><!-- 热点2 --><div class="hotLeft"><b>2</b> 中国队有望递补男子4x100米铜牌</div><!-- 热点5 --><div class="hotRight">5 教育部:中秋国庆鼓励师生就地过节</div></div><!-- 第三行 --><div class="hotBig"><!-- 热点3 --><div class="hotLeft"><c>3</c> 中方回应英议会禁止我大使参加活动</div><!-- 热点6 --><div class="hotRight">6 中方回应英议会禁止我大使参加活动</div></div></div><!-- 底部栏目 --><div class="bottomDiv"><a href="" class="a4">关于百度</a><a href="" class="a4">About Baidu</a><a href="" class="a4">使用百度前必读</a><a href="" class="a4">帮忙中心</a><a href="" class="a4">京公网安备11000002000001号</a></div>
</body>
</html>
最后，小编真心的希望每一个读者路过时能够评论一句或者点个赞，让我知道你来过，小编会很开心的！
VsCode模仿简单百度网页（html）相关推荐
- android仿微信图片上传进度,Android开发之模仿微信打开网页的进度条效果(高仿)...
一,为什么说是真正的高仿? 阐述这个问题前,先说下之前网上的,各位可以复制这段字,去百度一下 "仿微信打开网页的进度条效果",你会看到有很多类似的文章,不过他们有个共同点,就是实 ...
- android仿微信 进度条,Android开发之模仿微信打开网页的进度条效果(高仿)
一,为什么说是真正的高仿? 阐述这个问题前,先说下之前网上的,各位可以复制这段字,去百度一下 "仿微信打开网页的进度条效果" ,你会看到有很多类似的文章,不过他们有个共同点,就是 ...
- 学生HTML个人网页作业作品~个人主页博客网页设计制作(6个页面)~大学生个人网站作业模板~HTML简单个人网页制作...
HTML期末大作业~ 学生HTML个人网页作业作品下载-个人主页博客网页设计制作 大学生个人网站作业模板 简单个人网页制作 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTM ...
- 使用隐式Intent打开系统浏览器的百度网页
使用隐式Intent,我们不仅可以启动自己程序内的活动,还可以启动其它程序的活动,这使得Android多个应用程序之间的功能共享成为了可能.比如说你的应用程序中需要展示一个网页,这时你没有必要自己去实 ...
- php简单网页制作代码,用HTML和CSS以及JS制作简单的网页菜单界面的代码
这篇文章主要介绍了使用HTML+CSS+JS制作简单的网页菜单界面,这个ABROAD项目所使用的JavaScript部分代码非常简单,需要的朋友可以参考下 写ABROAD项目用到了标签这个东东,其实标 ...
- 如何用Html+css3写一个简单的网页
!DOCTYPE html> */我这次利用一门前端开发语言Html开发一个简单的网页/* <html> <hea ...
- HTML+CSS静态页面游戏网站设计——腾讯游戏(页)学生HTML个人网页作业作品下载 个人网页设计制作 大学生个人网站作业模板 简单个人网页制作
HTML5期末大作业:游戏网站设计--腾讯游戏(页)学生HTML个人网页作业作品下载 个人网页设计制作 大学生个人网站作业模板 简单个人网页制作 常见网页设计作业题材有 个人. 美食. 公司. 学校. ...
- 学习用Photoshop来设计简单的网页
学习用Photoshop来设计简单的网页 从设计<动力文章系统2003>的两张网页开始: 一张是网站首页,一张是文章内容页 通过对这两张网页的完整设计初步掌握PS设计网页的基本操作. ...
- HTML5期末大作业：网站——响应式网络游戏官网HTML+CSS+JavaScript ~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计 ~大学生个人网站作业模板 ~简单个人网页
HTML5期末大作业:网站--响应式网络游戏官网HTML+CSS+JavaScript ~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计 ~大学生个人网站作业模板 ~简单个人网页 ...
- 学生HTML个人网页作业作品~个人主页博客网页设计制作(6个页面)~大学生个人网站作业模板~HTML简单个人网页制作
HTML期末大作业~ 学生HTML个人网页作业作品下载-个人主页博客网页设计制作 大学生个人网站作业模板 简单个人网页制作 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTM ...
最新文章
- 史上最全面的Neo4j使用指南
- 第四范式成为金融信创生态实验室首个AI合作伙伴
- Redis常用配置参数详解及查看修改命令
- 飞鸽传书2011看到一篇国外的博客
- vue路由1.0_【Vue】路由
- mysql数据库连接限制,mysql-获取数据库连接表有限制
- 实验2.4 使用系统函数pow(x,y)计算xy的值
- Linux网络编程--socket
- C语言求素数的几种方法
- Eclipse中Debug调试
- C#毕业设计——基于C#+asp.net+ACCESS的电子商务网站设计与实现（毕业论文+程序源码）——电子商务网站
- Java定义一个名为Square继承Shape抽象类，覆盖Shape类中的抽象方法getPerimeter()和getArea
- 水果店经营策略技巧汇总，第一次开一家水果店怎么经营
- python序列类型映射_python学习笔记（基础:变量，序列，映射） | 学步园
- 终身教职让美国研究型大学称霸世界，却把中国「青椒」卷怕了！
- 一台微型计算机的好坏 主要取决于,计算机一级MSOffice应用选择题
- 【日常训练】2019-10-24am_xjoi结界[生与死的境界]/codeforces878E_贪心
- 算法-求数组的子数组之和的最大值
- Elasticsearch7.5.0安全(xpack)之身份认证
- 代码注释生成：《Towards Automatically Generating Summary Comments for Java Methods》论文笔记