CSS的知识点很碎,每一步都需要重新观看视频学习,先把大框架实现,再从head的style里设置样式
源码
<!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>
.turnleft{
left: 100px;
}
*{
padding:0;margin:0;
color: #222;
}
a{
text-decoration: none;
padding-left: 12px;
}
a:hover{
color:#4e71f2;
}
li{
list-style: none;
}
.header{
height: 60px;
line-height:60px;
text-align: center;
}
.header .left{
float:left;
}
.header .right{
position:absolute;
right:0px;
top:0px;
padding-right:24px;
float:right;
}
.header .li_1{
font:13px/23px Arial,sans-serif;
color:#222;
position:relative;
margin-right:31px;margin-top:19px;display:inline-block;
}
.right #more_li{
color:#222;
position:relative;
margin-right:35px;
display:inline-block;
font-size:14px;
}
.header .right .r1{
display:inline-block;
vertical-align:top;cursor:pointer;
}
.right #more_menu{
display:none;
position:absolute;
top:28px;
left:-14px;
width:85px;
height:165px;
line-height: 22px;
text-align: left;
box-shadow:0 2px 10px 0 rgba(0,0,0,.15);
border-radius: 6px;
margin-top:15px;
}
.right #more_menu li{
margin-top:9px;
}
#more_li:hover #more_menu{
display:block;
}
.header .right .r2{
display:inline-block;
margin-top:19px;
background-color: #4e71f2;
padding-left:2px;
font-size:14px;
height:24px;
width:48px;
color:#fff;
line-height: 24px;
border-radius:12px;
}
#more_wrap{
position:relative;
display:block;
}
.more_li{
float:left;
line-height:24px;
margin-left:12px;
margin-right:12px;
margin-top:16px;
}
.main{
clear:both;
width: 1500px;
}
#pic{
position:absolute;
left: 50%;;
top:45px;
margin-left:-135px;
width: 280px;
height: 129px;
}
.search1 {
position:absolute;
left:450px;
top:185px;
font-size:16px;
width: 546px;
height: 40px;
vertical-align: top;
border:2px solid #c4c7ce;
background-color: #fff;
color:#222;
overflow: hidden;
border-radius:10px 0 0 10px;
}
.search2 {
position: absolute;
top:185px;
left:1000px;
cursor: pointer;
width: 100px;
height:44px;
line-height: 45px;
background-color: #4e6ef2;
border-radius:0 10px 10px 0;
font-size:14px;
color:#fff;
text-align: center;
}
.main .search_r:hover{
background-color: #4662d9;
}
.main input:hover{
border-color: #a7aab5;
}
.main table{
margin:200px 380px;
width: 800px;
height: 180px;
font-size:15px;
left:10px;
}
.main #hhh{
padding-left:254px;
color:#a6a9b4;
}
.new{
display: inline-block;
background-color: #ff455b;
width: 14px;
height: 19px;
color:#fff;
padding:0 2px;
border-radius: 5px;
}
.hot{
display: inline-block;
background-color: #ff9812;
width: 14px;
height: 19px;
color:#fff;
padding:0 2px;
border-radius: 5px;
}
.end{
width: 100%;
height: 40px;
position:fixed;
bottom:0;
background-color: #fbfbfb;
line-height: 40px;
font-size:12px;
}
.end1 li a{
float:left;
padding-left:14px;
color:#9195a3;
}
.end1 li a:hover{
color:#222;
}
.end2 li a{
float:right;
font-size:16px;
padding-right:15px;
}
</style>
</head>
<body>
<div class="header">
<ul class="left">
<li class="li_1"><a href=""> 新闻</a></li>
<li class="li_1"><a href="">hao123</a></li>
<li class="li_1"><a href="">地图</a></li>
<li class="li_1"><a href="">视频</a></li>
<li class="li_1"><a href="">贴吧</a></li>
<li class="li_1"><a href="">学术</a></li>
<li class="li_1" id="more_list">
<div id="more_wrap"> <a href="">更多</a>
</div>
</li>
</ul>
<div class="right" >
<div id="more_li">
<span class="r1" ><a href="">设置</a></span>
<div id="more_menu">
<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>
</div>
</div>
<a class="r2" href="">登录</a>
</div>
</div>
<div class="main">
<div>
<img id="pic" src="baidu.jpg" alt="">
</div>
<input class="search1">
<div class="search2" href="" >百度一下</div>
<table>
<tr>
<td style="padding-left:2px;padding-top:3px;left: 100px;"><a href="">百度热榜</a></td>
<td style="width: 300px;"><a id="hhh">换一换</a></td>
</tr>
<tr>
<td style="left: 100px;"><a href=""><span style="color:#fe2d46;">1</span> 大上海的烟火气正在回来 <span class="new">新</span></a></td>
<td><a href=""><span style="color:#9b9fac;left: 60px;">4</span> 一亩地也不撂荒热</a></td>
</tr>
<tr>
<td><a href=""><span style="color:#ff6600;left: 300px">2</span> 俄伊斯坎德尔导弹系统运往芬兰边境</a></td>
<td><a href=""><span style="color:#9b9fac;left: 60px;">5</span> 俄将采取军事措施回应瑞典加入北约</a></td>
</tr>
<tr>
<td><a href=""><span style="color:#faa90e;left: 300px">3</span> 中国公民在巴遇袭身亡 策划者被捕 <span class="hot">热</span></a></td>
<td><a href=""><span style="color:#9b9fac;left: 60px;">6</span> 上市公司公告惊现“临死股东大会”</a></td>
</tr>
</table>
</div>
</div>
<div class="end">
<div class="end1">
<ul>
<li><a href="">关于百度</a></li>
<li><a href="">About Baidu</a></li>
<li><a href="">使用百度前必读</a></li>
<li><a href="">帮助中心</a></li>
<li><a href="">京公网安xxxxxxxxxxxxxx</a></li>
<li><a href="">京xxxxxxxxxx</a></li>
<li><a href="">©2022 Baiduba</a></li>
<li><a href="">互联网药品xxxxxxxxxxxxxxx</a></li>
<li><a href="">信息网络xxxxxxxxxx</a></li>
</ul>
</div>
</div>
</body>
</html>
效果图