前端第二次作业
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>
* {
padding: 0;
margin: 0;
}
body {
font-size: 12px;
color: #222;
}
/* 顶部 */
.top>div {
font-size: 0; /*解决间隙问题*/
}
.top {
width: 100%;
height: 60px;
}
.top-left {
float: left;
height: 60px;
padding-left: 24px;
}
.top-right {
float: right;
height: 60px;
padding: 0 24px 0 200px;
}
.top-right div {
float: right;
}
a {
font: 13px/23px Arial,sans-serif;
color: #222;
text-decoration: none;
display: inline-block;
}
.top-left a {
margin-top: 19px;
margin-right: 24px;
}
.top-left a:hover,
.top-right a:hover,
.ersou a:hover,
.ersou span:hover,
.huan a:hover {
color: #315efb;
}
div .top-right a {
margin-top: 19px;
margin-left: 24px;
}
.deng {
border-radius: 6px;
text-align: center;
width: 48px;
height: 24px;
color: #fff;
background-color: #4e6ef2;
}
.top-right div a:hover {
color: #fff;
background-color: #4662d9;
}
/* 大图标 */
.center {
margin: 0 auto;
width: 654px;
}
.batu {
margin: 0 192px;
}
/* 搜索框 */
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
margin-top: 12px;
}
.sousuo {
float: left;
}
.sousuo2 {
position: relative;
}
.kuang {
width: 436px;
height: 16px;
padding: 12px 87px 12px 16px;
border: 2px solid #c4c7ce;
border-radius: 10px 0 0 10px;
border-right: none;
}
.kuang:hover {
border-color: #a7aab5;
}
.xiangji {
background: url(图片/camera_01.png) no-repeat ;
position: absolute;
right: 10px;
top: 15px;
width: 24px; /*图片无法显示的原因*/
height: 20px;
}
.anniu {
width: 108px;
height: 44px;
font-size: 17px;
color: #fff;
background-color: #4e6ef2;
border-radius: 0 10px 10px 0;
border: none;
}
.anniu:hover {
background-color: #4662d9;
}
.xiangji:hover {
background: url(图片/camera_02.png) no-repeat;
}
/* 热搜和换一换 */
.ersou {
float: left;
}
.ersou>a {
font-family: cIconfont;
font-weight: 700;
}
.huan {
float: right;
}
.huan a {
color: #626675;
}
.huan img {
margin-bottom: -3px;
height: 16px;
background: url(图片/huan.png) no-repeat;
}
.center3 {
padding-top: 43px;
height: 24px;
}
.center3 a {
font-size: 14px;
}
.center div a span {
color: #9195A3;
}
/* 热搜 */
.lie1,
.lie2 {
width: 327px;
height: 36px;
line-height: 36px;
}
.lie1 {
float: left;
}
.lie2 {
float: right;
}
.lie1 a,
.lie2 a{
font-size: 16px;
}
.diyi {
padding-left: 0;
margin-left: -70px;
}
.diyi1 {
color: #f63253;
}
.dier {
color: #fe3d55;
}
.disan {
color: #ff6600;
}
.disi {
color: #faa90e;
}
.diwu {
color: #9b9fab;
}
.center .shuzi {
font-size:18px;
}
.lie1 a:hover,
.lie2 a:hover {
color: #5177fc;
text-decoration: underline;
}
/* 底部 */
.dibu {
position: absolute;
bottom: 0;
left: 0;
height: 39px;
background-color: #fff;
}
.dibu div {
float: left;
height: 23px;
margin-right: 22px;
}
.dibu div a,span {
font-size: 12px;
color: #bbb;
line-height: 39px;
}
.dibu div img {
width: 49px;
height: 20px;
margin-right: -35px;
margin-top: 9px;
}
.dibu div a:hover {
color: #222;
}
/* 侧边 */
.cebian {
position: absolute;
right: 25px;
bottom: 50px;
}
.cebian img {
width: 40px;
}
style>
head>
<body>
<div class="top">
<div class="top-left">
<a href="#">新闻a>
<a href="#">hao123a>
<a href="#">地图a>
<a href="#">贴吧a>
<a href="#">视频a>
<a href="#">图片a>
<a href="#">网盘a>
<a href="#">更多a>
div>
<div class="top-right">
<a href="#">设置a>
<div><a href="#" class="deng">登录a>div>
div>
div>
<div class="center">
<img src="http://www.kaotop.com/file/tupian/20220526/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" class="batu" width="270" height="129">
div>
<div class="center clearfix" >
<div class="sousuo sousuo2">
<input type="text" class="kuang">
<span class="xiangji">span>
div>
<div class="sousuo">
<input type="submit" class="anniu" value="百度一下">
div>
div>
<div class="center center3">
<div class="ersou">
<a href="#">百度热搜 <span>>span>a>
div>
<div class="huan">
<img src="图片/huan.png" class="huan1">
<a href="#">换一换a>
div>
div>
<div class="center clearfix">
<div class="lie1 diyi"><a class="diyi1 shuzi">1 a><a href="#">中国经济无惧风浪激流勇进a>div>
<div class="lie2"><a class="disi shuzi">4 a><a href="#">中国博物馆的国宝图鉴a>div>
<div class="lie1"><a class="dier shuzi">2 a><a href="#">近千人投降，亚速钢铁厂内还有...a>div>
<div class="lie2"><a class="shuzi diwu">5 a><a href="#">马斯克：中国经济体量已两三倍...a>div>
<div class="lie1"><a class="disan shuzi">3 a><a href="#">重庆载20人客车侧翻 已致1死1...a>div>
<div class="lie2"><a class="shuzi diwu">6 a><a href="#">故宫研究员说甄嬛穿错衣服了a>div>
div>
<div class="dibu">
<div><a href="#" class="dibu2">AboutBaidua>div>
<div><a href="#" class="dibu2">使用百度前必读a>div>
<div><a href="#" class="dibu2">帮助中心a>div>
<div><a href="#" class="dibu2">关于百度a>div>
<div><a href="#" class="dibu2">京公网安备11000002000001号a>div>
<div><a href="#" class="dibu2">京ICP证030173号a>div>
<div><span href="#">©2022 Baiduspan>div>
<div><span href="#">互联网药品信息服务资格证书(京)-经营性-2017-0020span>div>
<div><a href="#" class="dibu2">信息网络传播视听节目许可证 0110516a>div>
<div><img src="http://www.kaotop.com/file/tupian/20220526/aria-3006e33cce.png">div>
div>
<div class="cebian">
<img src="图片/cebian.png">
div>
body>