静态百度网页，小白练习第一天（带源码）
这是官网的：
我做的是这样的：
感觉不太舒服的，越调越怪。
如果各位大佬有什么建议就跟我说说奥，可别藏着掖着。
源码在这
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="./css/style.css">
</head>
<body>
<div>
<!-- 页眉 -->
<header>
<div class="header-style">
<!-- 上方左侧小连接 -->
<ul class="header-left">
<a href="http://news.baidu.com/"><li>新闻</li></a>
<a href="https://www.hao123.com/?src=from_pc" style="margin-top: 16px;"><li>hao123</li></a>
<a href="https://map.baidu.com/"><li>地图</li></a>
<a href="https://tieba.baidu.com/index.html"><li>贴吧</li></a>
<a href="https://haokan.baidu.com/?sfrom=baidu-top"><li>视频</li></a>
<a href="https://image.baidu.com/"><li>图片</li></a>
<a href="https://pan.baidu.com/?from=1026962h"><li>网盘</li></a>
<a href="https://www.baidu.com/more/"><li>更多</li></a>
</ul>
<!-- 上方右侧注册与登录按钮 -->
<div class="header-right">
<div class="set">
<a href=""><p>设置</p></a>
</div>
<div class="use">
<a href="">登录</a>
</div>
</div>
</div>
</header>
<!-- 中间内容-->
<div>
<!-- logo（百度一下） -->
<div class="img-style">
<a href="https://www.baidu.com/"><img src="./img/logo.png" alt="网络不佳" title="点击一下，了解更多"></a>
</div>
<!-- 搜索栏与按钮 -->
<div class="input-style">
<div class="input-text">
<input type="text" class="input-1" id="bd">
</div>
<div class="input-buthz">
<a href="https://www.baidu.com/"><input type="submit" class="input-btn" value="百度一下" id="bd"></a>
</div>
</div>
<!-- 百度热搜 -->
<div class="rb-style">
<a href="./index.html"><p class="rb-rs">百度热搜 </p></a>
<p class="rb-zhuanyi">></p>
<a href="./index.html"><p class="rb-hyh">换一换</p></a>
<!-- 左侧 -->
<div class="rb-left">
<a href="https://www.baidu.com/s?wd=%E3%80%8A%E6%96%B0%E9%97%BB%E8%81%94%E6%92%AD%E3%80%8B%E6%8A%AB%E9%9C%B2%E9%98%B2%E7%96%AB%E9%87%8D%E7%A3%85%E4%BF%A1%E5%8F%B7&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1"><p>《新闻联播》披露防疫重磅信号</p></a>
<a href="https://www.baidu.com/s?wd=%E7%8E%8B%E6%9E%97%E6%B8%85%E4%B8%80%E5%AE%A1%E8%8E%B7%E5%88%9114%E5%B9%B4%EF%BC%9A%E6%9B%BE%E7%AA%83%E5%8F%96%E5%8D%B7%E5%AE%97&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1"><p>王林清一审获刑14年：曾窃取卷宗</p></a>
<a href="https://www.baidu.com/s?wd=%E4%B8%8A%E6%B5%B7%E9%AB%98%E8%80%83%E5%BB%B6%E6%9C%9F%E4%B8%80%E4%B8%AA%E6%9C%88&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1"><p>上海高考延期一个月</p></a>
</div>
<!-- 右侧 -->
<div class="rb-right">
<a href="https://www.baidu.com/s?wd=%E7%BC%85%E6%80%80%E5%9C%A8%E5%8C%97%E7%BA%A6%E8%BD%B0%E7%82%B8%E4%B8%AD%E7%89%BA%E7%89%B2%E7%9A%843%E5%90%8D%E7%83%88%E5%A3%AB&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1"><p>缅怀在北约轰炸中牺牲的3名烈士</p></a>
<a href="https://www.baidu.com/s?wd=%E5%8C%97%E5%A4%A7%E9%99%A2%E9%95%BF%E8%B0%88%E9%9F%A6%E7%A5%9E%E9%99%8D%E7%BB%B4%E6%89%93%E5%87%BB%EF%BC%9A%E5%BE%88%E5%B9%B3%E5%B8%B8&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1"><p>北大院长谈韦神降维打击：很平常</p></a>
<a href="https://www.baidu.com/s?wd=%E7%94%B7%E5%AD%90%E5%9D%A0%E6%B1%9F%E7%88%AC%E4%B8%8A%E6%A1%A5%E5%A2%A9%E5%95%83%E6%B0%B4%E8%8D%89%E6%92%91%E5%9B%9B%E4%BA%94%E5%A4%A9&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1"><p>男子坠江爬上桥墩啃水草撑四五天</p></a>
</div>
</div>
<!-- 页脚 -->
<footer>
<ul>
<a href="#">
<li>关于百度</li>
</a><a href="#">
<li>About Baidu</li>
</a><a href="#">
<li>使用百度前必读</li>
</a><a href="#">
<li>帮助中心</li>
</a><a href="#">
<li>京公网安备11000002000001号</li>
</a><a href="#">
<li>京ICP证030173号</li>
</a><a href="#">
<li>©2022 Baidu </li>
</a><a href="#">
<li>互联网药品信息服务资格证书 (京)-经营性-2017-0020</li>
</a><a href="#">
<li>信息网络传播视听节目许可证 0110516</li>
</a>
<img src="./img/footer.png" alt="网络出错" title="无障碍服务">
</ul>
</footer>
</div>
</div>
</body>
</html>
CSS样式的：
/* 头部样式 */
header{
width: 99%;
height: 60px;
margin: 0;
padding: 0;
}
.header-style{
margin:0;
padding: 0 0 0 16px;
width: 100%;
height: 60px;
}
/* 头部中左方新闻连接的样式 */
.header-left{
float: left;
padding: 0;
margin: 0;
}
.header-left a{
float: left;
list-style: none;
margin:14px 24px 0 0;
padding: 0;
color: #222;
text-decoration: none;
}
.header-left li:hover{color: blue;}
/* 头部右方的登录注册样式 */
.header-right{
float: right;
margin: 0;
padding: 0 10px 0 200px;
text-align: center;
}
.header-right div{float: left;}
.header-right div a{text-decoration: none;}
.set{margin: 13.5px 18.5px 0 13px;}
.header-right div p{
margin: 0;
padding: 0;
}
.use{
width: 48px;
height: 24px;
line-height: 24px;
background-color: #4e6ef2;
font-weight: 400;
border-radius: 6px;
text-align: center;
margin: 10px 6.5px 0 13px;
}
.use a{color: #fff;}
.set p:hover{color: blue;}
.use:hover{background-color: blue;}
/* logo样式 */
.img-style{
height: 60%;
min-height: 185px;
max-height: 310px;
position: relative;
z-index: 0;
text-align: center;
}
.img-style img{
width: 270px;
height: 129px;
}
/* 输入框样式 */
.input-style{
text-align: center;
width: 100%;
height: 80px;
line-height: 80px;
}
.input-text{
float: left;
margin-left: 32.5%;
}
.input-buthz{
float: right;
z-index: 4;
margin-right: 27.7%;
padding: 4px 13px 0 0;
}
.input-1{
width: 443px;
padding-right: 87px;
height: 16px;
padding: 12px 16px;
font-size: 10px;
border-radius: 10px 0 0 10px;
border: 2px solid #c4c7ce;
border-right: 0px;
background-color: #fff;
color: #222;
}
.input-btn{
width: 108px;
height: 44px;
line-height: 45px;
padding: 0;
background: 0 0;
background-color: #4e6ef2;
border-radius: 0 10px 10px 0;
font-size: 18px;
color: #fff;
font-weight: 400;
}
.input-1:hover{border: 2xp solid red;}
.input-btn:hover{background-color:blue;}
/* 百度热搜样式 */
.rb-style{
width: 100%;
height: 250px;
text-align: center;
text-decoration: none;
}
.rb-rs{
float: left;
margin-left: 32.4%;
color: #222222;
font-size: 14px;
font-style: normal;
font-weight: bold;
}
.rb-zhuanyi{
font-size: 19px;
color: rgb(128, 128, 128);
float: left;
margin: 0;
padding: 0.8% 0 0 0;
}
.rb-hyh{
float: right;
text-decoration: none;
margin-left: 23%;
}
.rb-left{
margin: 0 0 0 32%;
float: left;
text-align: left;
font-size: 16px;
line-height: 28px;
}
.rb-right{
margin: 0% 23% 0% 0%;
float: right;
font-size: 16px;
line-height: 28px;
}
.rb-left a,.rb-right a{
color: #222;
}
.rb-left a{text-decoration: none;}
.rb-right a{text-decoration: none;}
.rb-rs:hover{color: blue;}
.rb-hyh:hover{color: blue;}
.rb-style a:hover{color: blue;text-decoration: underline;}
/* 页脚样式 */
footer{
position: fixed;
bottom:0px; left:0px;
text-align: center;
width: 100%;
height: 39px;
background-color: #fff;
}
footer ul{
margin: 0;
height: 49px;
line-height: 39px;
text-align: center;
padding: 0 0 0 7%;
}
footer ul li{
line-height: 39px;
text-align: center;
float: left;
list-style: none;
font-size: 12px;
color: #bbb;
font-family: Arial,sans-serif;
margin-right: 20px;
}
footer img{
width: 49px;
height: 20px;
float: left;
margin-top: 8.7px;
}
footer ul li:hover{
color: black;
}
####文件夹我是这样放的：
1491
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
