欢迎浏览本篇文章
大家好！ 这是小编是个刚入门的小白，若有不足请广大网友提出批评指教。最近刚好做了一个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>
最后，小编真心的希望每一个读者路过时能够评论一句或者点个赞，让我知道你来过，小编会很开心的！