由于本人水平不够,所以样式有些可能没有写好
最终结果
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>Document</title>
<link rel="stylesheet" href="./css/aa.css">
</head>
<body>
<div class="header">
<div class="left">
<div>新闻</div>
<div style="padding: 2px 0;">hao123</div>
<div>地图</div>
<div>贴吧</div>
<div>视频</div>
<div>图片</div>
<div>网盘</div>
<div>更多</div>
</div>
<div class="right">
<div class="shezhi">设置</div>
<div class="right-login">登录</div>
</div>
</div>
<div class="middle">
<div class="baiduimg">
<img src="../image/baidu.png" width="300" height="135" alt="">
</div>
<div class="sousuo">
<div class="first">
<input type="text">
<img src="../image/相机.png" width="20" height="20" alt="">
</div>
<!-- 这里出现了一个问题是border冲突的问题 -->
<div class="sousuo-click">百度一下</div>
</div>
<div class="sousuo-font">
<div class="sousuo-font-baidu">百度热搜></div>
<div class="sousuo-font-content">
<div class="first-sousuo">
<p><label>1</label>   中国农名丰收节</p>
<p><label>2</label>   韩总统私下吐槽美国会议员为崽子</p>
<p><label>3</label>   现场:俄多地民众响应动员应征入伍</p>
</div>
<div class="first-sousuo">
<p><label>4</label>   逐梦苍穹 未来可期</p>
<p><label class="label5">5</label>   江苏政法委原书记王立科被判死缓</p>
<p><label class="label5">6</label>   普京:俄罗斯不会再犯这类错误</p>
</div>
</div>
</div>
</div>
<div class="footer">
<p>关于百度</p>
<p>About baidu</p>
<p>使用百度前必读</p>
<p>帮助中心</p>
<p>企业推广</p>
<p>京公网安备11000002000001号</p>
<p>京ICP证030173号</p>
<p>信息网络传播视听节目许可证0110516</p>
<p>互联网宗教信息服务可证编号:京 (2022) 0000043</p>
<p style="box-sizing: border-box;font-size: 13px;">></p>
</div>
</body>
</html>
sass代码:
.header{
box-sizing: border-box;
margin-top: 1%;
width: 100%;
// height: 40%;
// border: 1px solid red;
display: flex;
justify-content: space-between;
.left{
width: 500px;
box-sizing: border-box;
// border: 1px solid blue;
display: flex;
justify-content: space-around;
font-family: Arial;
font-size: 13px;
}
.right{
width: 100px;
display: flex;
justify-content: space-between;
// border: 1px solid black;
margin-right: 2%;
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
.right-login{
font-family: Arial, Helvetica, sans-serif;
width: 45px;
border-radius: 5px;
text-align: center;
color: #fff;
background-color: #4e6ef2;
font-size: 13px;
padding: 2px 0;
}
.shezhi{
// border: 1px solid red;
padding: 2px 0;
}
}
}
.middle{
width: 50%;
height: 450px;
// border: 1px solid red;
margin: 20px auto;
.baiduimg{
// height: 50px;
// border: 1px solid blue;
text-align: center;
}
.sousuo{
box-sizing: border-box;
border: 2px solid blue;
display: flex;
width: 653px;
height: 43px;
margin: 0 auto;
border-radius: 15px;
// justify-content: center;
// align-items: center;
.first{
// border: 1px solid red;
display: flex;
align-items: center;
input{
list-style: none;
border: none;
width: 520px;
height: 20px;
}
img{
// border: 1px solid rebeccapurple;
}
}
.sousuo-click{
width: 100px;
// border: 1px solid red;
text-align: center;
background-color: #4e6ef2;
color:#FFF;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
border-radius: 0 15px 15px 0;
margin-left: 10px;
}
}
.sousuo-font{
width: 650px;
height: 200px;
// border: 1px solid red;
margin: 30px auto;
.sousuo-font-baidu{
// border: 1px solid red;
font-family: Arial, Helvetica, sans-serif;
font-weight: 800;
}
.sousuo-font-content{
box-sizing: border-box;
// border: 1px solid rgb(11, 255, 19);
display: flex;
justify-content: space-between;
label{
// border: 1px solid red;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
margin-left: 20px;
color: #faa90e;
}
.label5{
color: #9195a3;
}
.first-sousuo{
width: 50%;
height: 120px;
// margin-top: 20px;
font-weight: 400;
font-family: Arial, Helvetica, sans-serif;
// display: flex;
// flex-direction: column;
// // align-items: center;
// justify-content: space-around;
// border: 1px solid rgb(255, 255, 10);
p{
// border: 1px solid red;
}
}
}
}
}
.footer{
box-sizing: border-box;
width: 1300px;
// border: 1px solid red;
margin: 0 auto;
position: absolute;
bottom: 0;
left: 10%;
p{
color: #bbb;
// border: 1px solid black;
display: inline-block;
margin-left: 4px;
font-size: 13px;
}
}
CSS代码:
.header {
box-sizing: border-box;
margin-top: 1%;
width: 100%;
display: flex;
justify-content: space-between;
}
.header .left {
width: 500px;
box-sizing: border-box;
display: flex;
justify-content: space-around;
font-family: Arial;
font-size: 13px;
}
.header .right {
width: 100px;
display: flex;
justify-content: space-between;
margin-right: 2%;
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
}
.header .right .right-login {
font-family: Arial, Helvetica, sans-serif;
width: 45px;
border-radius: 5px;
text-align: center;
color: #fff;
background-color: #4e6ef2;
font-size: 13px;
padding: 2px 0;
}
.header .right .shezhi {
padding: 2px 0;
}
.middle {
width: 50%;
height: 450px;
margin: 20px auto;
}
.middle .baiduimg {
text-align: center;
}
.middle .sousuo {
box-sizing: border-box;
border: 2px solid blue;
display: flex;
width: 653px;
height: 43px;
margin: 0 auto;
border-radius: 15px;
}
.middle .sousuo .first {
display: flex;
align-items: center;
}
.middle .sousuo .first input {
list-style: none;
border: none;
width: 520px;
height: 20px;
}
.middle .sousuo .sousuo-click {
width: 100px;
text-align: center;
background-color: #4e6ef2;
color: #FFF;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
border-radius: 0 15px 15px 0;
margin-left: 10px;
}
.middle .sousuo-font {
width: 650px;
height: 200px;
margin: 30px auto;
}
.middle .sousuo-font .sousuo-font-baidu {
font-family: Arial, Helvetica, sans-serif;
font-weight: 800;
}
.middle .sousuo-font .sousuo-font-content {
box-sizing: border-box;
display: flex;
justify-content: space-between;
}
.middle .sousuo-font .sousuo-font-content label {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
margin-left: 20px;
color: #faa90e;
}
.middle .sousuo-font .sousuo-font-content .label5 {
color: #9195a3;
}
.middle .sousuo-font .sousuo-font-content .first-sousuo {
width: 50%;
height: 120px;
font-weight: 400;
font-family: Arial, Helvetica, sans-serif;
}
.footer {
box-sizing: border-box;
width: 1300px;
margin: 0 auto;
position: absolute;
bottom: 0;
left: 10%;
}
.footer p {
color: #bbb;
display: inline-block;
margin-left: 4px;
font-size: 13px;
}