效果预览
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="https://www.baidu/favicon.ico" type="image/x-icon" />
<title>百度搜索页</title>
<style>
#container {
height: 40px;
width: 100%;
/*background-color: gray;*/
position: relative;
}
#container .index-logo-src {
width: 95px;
height: 33px;
float: left;
}
#container-in {
width: 620px;
height: 37px;
border: 1px solid black;
position: relative;
margin-left: 102px;
margin-right: 0;
/*background-color: red;*/
}
#container-in input {
width: 500px;
height: 35px;
position: absolute;
margin: 0 0 0 1px;
border-style: none;
outline:none;/*去除input选中时显示的蓝色边框*/
}
#container-in img {
top: 0;
left: 503px;
position: absolute;
width: 37px;
height: 37px;
}
#container-in div {
position: absolute;
right: 0;
top: 0;
width: 80px;
height: 37px;
text-align: center;
line-height: 37px;
background-color: #3385ff;
color: white;
cursor:pointer;
}
#container-right{
width: 180px;
height: 25px;
position: absolute;
top: 10px;
right: 0;
/*background: green;*/
}
#container-right a {
text-align: center;
}
#container-b {
width: 100%;
height: 38px;
background-color: #f8f8f8;
}
.cb {
width: 520px;
height: 38px;
margin-left: 102px;
line-height: 38px;
}
.cb a {
text-decoration: none;
/*background-color: #8fffe6;*/
}
.cb .a1:active {
padding-bottom:5px;
border-bottom:1px solid #000;
font-weight: 700;
}
.cb .a2:active {
padding-bottom:5px;
border-bottom:1px solid #000;
font-weight:700;
}
.cb .a3:active {
padding-bottom:5px;
border-bottom:1px solid #000;
font-weight:700;
}
.cb .a4:active {
padding-bottom:5px;
border-bottom:1px solid #000;
font-weight:700;
}
.cb .a5:active {
padding-bottom:5px;
border-bottom:1px solid #000;
font-weight:700;
}
.cb .a6:active {
padding-bottom:5px;
border-bottom:1px solid #000;
font-weight:700;
}
.cb .a7:active {
padding-bottom:5px;
border-bottom:1px solid #000;
font-weight:700;
}
.cb .a8:active {
padding-bottom:5px;
border-bottom:1px solid #000;
font-weight:700;
}
.cb .a9:active {
padding-bottom:5px;
border-bottom:1px solid #000;
font-weight:700;
}
.cb .a10:active {
padding-bottom:5px;
border-bottom:1px solid #000;
font-weight:700;
}
#by-left {
width: 60%;
float: left;
position: relative;
}
#by-left .top-a-left {
height: 30px;
font-size: 12px;
margin-left: 103px;
line-height: 30px;
float: left;
}
#by-left .top-a-right {
height: 30px;
width: 60px;
/*background-color: gray;*/
font-size: 12px;
position: absolute;
left: 664px;
line-height: 30px;
}
.tle {
margin-left: 103px;
width: 620px;
/*background-color: pink;*/
}
#by-right {
width: 36%;
height: 420px;
margin-top: 60px;
margin-left: 740px;
border-left: 1px solid black;
}
/*加框绝对重点*/
#by-right .ac{
/*position: absolute;*/
width: 100%;
}
.by-right-a {
margin-top: 0;
margin-left: 20px;
}
.as{
position: relative;
top: 60px;
}
.as .asi{
position: absolute;
left: 0;
}
.as .as1{
position: absolute;
left: 100px;
}
.as .as2{
position: absolute;
left: 200px;
}
.as .as3{
position: absolute;
left: 300px;
}
</style>
</head>
<body>
<div id="container">
<div style="width: 750px;float: left;">
<img class="index-logo-src" src="http://www.baidu/img/baidu_jgylogo3.gif" alt="到百度首页" title="到百度首页">
<div id="container-in">
<input type="text">
<img src="images/a3.png" alt="">
<div>百度一下</div>
</div>
</div>
<div id="container-right">
<a href="">百度首页</a>
<a href="">设置</a>
<a href="">登录</a>
</div>
</div>
<div id="container-b">
<div class="cb">
<a class="a1" href="">网页</a>
<a class="a2" href="">资讯</a>
<a class="a3" href="">视频</a>
<a class="a4" href="">图片</a>
<a class="a5" href="">知道</a>
<a class="a6" href="">文库</a>
<a class="a7" href="">贴吧</a>
<a class="a8" href="">采购</a>
<a class="a9" href="">地图</a>
<a class="a10" href="">更多</a>
</div>
</div>
<div id="by-left">
<div style="width: 100%;height: 30px; position: relative;">
<div class="top-a-left">
百度为您找到相关结果约100,000,000个
</div>
<div class="top-a-right">
搜索工具
</div>
</div>
<div class="tle">
<h4 >
<a href="" style="float: left;">百度一下</a><span>,</span><a href="">你就知道</a>
<span style="background-color: aquamarine;font-size: 12px;">官网</span>
</h4>
<div style="margin-top: -10px;">
<a class="c-img6" style="height:75px;float: left;padding-right: 15px;" href="http://www.baidu/link?url=y6tzi3gv0hv80aOGeVmInYgIvi2yvqk_nUXimXHKQCS" target="_self"><img src="https://ss0.baidu/6ONWsjip0QIZ8tyhnq/it/u=2920084749,2018893236&fm=58&s=39C718720E8EBE011B398BAC0300F024&bpow=121&bpoh=75" style="height:75px;"></a>
<p style="width: 617px;font-size: 15px;height: 30px;font-weight: 100;">全球最大的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p>
<a style="font-size: 15px;float: left">https://www.baidu/</a>
<a style="font-size: 15px;" href="">百度快照 </a><span>-</span><a style="font-size: 15px;" href=""> 7616条评价 </a>
</div>
</div>
<div class="tle">
<h4 >
<a href="" style="float: left;">百度一下</a><span>,</span><a href="">你就知道</a>
</h4>
<div style="margin-top: -10px;">
<a class="c-img6" style="height:75px;float: left;padding-right: 15px;" href="http://www.baidu/link?url=y6tzi3gv0hv80aOGeVmInYgIvi2yvqk_nUXimXHKQCS" target="_self"><img src="https://ss0.baidu/6ONWsjip0QIZ8tyhnq/it/u=2920084749,2018893236&fm=58&s=39C718720E8EBE011B398BAC0300F024&bpow=121&bpoh=75" style="height:75px;"></a>
<p style="width: 617px;font-size: 15px;height: 30px;font-weight: 100;">全球最大的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p>
<a style="font-size: 15px;float: left">https://www.baidu/</a>
<a style="font-size: 15px;" href="">百度快照 </a><span>-</span><a style="font-size: 15px;" href=""> 7616条评价 </a>
</div>
</div>
<div class="tle">
<h4 >
<a href="" style="float: left;">百度一下</a><span>,</span><a href="">你就知道</a>
</h4>
<div style="margin-top: -10px;">
<a class="c-img6" style="height:75px;float: left;padding-right: 15px;" href="http://www.baidu/link?url=y6tzi3gv0hv80aOGeVmInYgIvi2yvqk_nUXimXHKQCS" target="_self"><img src="https://ss0.baidu/6ONWsjip0QIZ8tyhnq/it/u=2920084749,2018893236&fm=58&s=39C718720E8EBE011B398BAC0300F024&bpow=121&bpoh=75" style="height:75px;"></a>
<p style="width: 617px;font-size: 15px;height: 30px;font-weight: 100;">全球最大的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p>
<a style="font-size: 15px;float: left">https://www.baidu/</a>
<a style="font-size: 15px;" href="">百度快照 </a><span>-</span><a style="font-size: 15px;" href=""> 7616条评价 </a>
</div>
</div>
<div class="tle">
<h4 >
<a href="" style="float: left;">百度一下</a><span>,</span><a href="">你就知道</a>
</h4>
<div style="margin-top: -10px;">
<a class="c-img6" style="height:75px;float: left;padding-right: 15px;" href="http://www.baidu/link?url=y6tzi3gv0hv80aOGeVmInYgIvi2yvqk_nUXimXHKQCS" target="_self"><img src="https://ss0.baidu/6ONWsjip0QIZ8tyhnq/it/u=2920084749,2018893236&fm=58&s=39C718720E8EBE011B398BAC0300F024&bpow=121&bpoh=75" style="height:75px;"></a>
<p style="width: 617px;font-size: 15px;height: 30px;font-weight: 100;">全球最大的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p>
<a style="font-size: 15px;float: left">https://www.baidu/</a>
<a style="font-size: 15px;" href="">百度快照 </a><span>-</span><a style="font-size: 15px;" href=""> 7616条评价 </a>
</div>
</div>
<div class="tle">
<h4 >
<a href="" style="float: left;">百度一下</a><span>,</span><a href="">你就知道</a>
</h4>
<div style="margin-top: -10px;">
<a class="c-img6" style="height:75px;float: left;padding-right: 15px;" href="http://www.baidu/link?url=y6tzi3gv0hv80aOGeVmInYgIvi2yvqk_nUXimXHKQCS" target="_self"><img src="https://ss0.baidu/6ONWsjip0QIZ8tyhnq/it/u=2920084749,2018893236&fm=58&s=39C718720E8EBE011B398BAC0300F024&bpow=121&bpoh=75" style="height:75px;"></a>
<p style="width: 617px;font-size: 15px;height: 30px;font-weight: 100;">全球最大的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p>
<a style="font-size: 15px;float: left">https://www.baidu/</a>
<a style="font-size: 15px;" href="">百度快照 </a><span>-</span><a style="font-size: 15px;" href=""> 7616条评价 </a>
</div>
</div>
</div>
<div id="by-right">
<div class="ac">
<div class="by-right-a">
<h4 style="float: left;">相关软件</h4><a style="float: right;margin-top: 20px;margin-right: 64px;">展开</a>
</div>
<div class="as" style="width: 400px;height: 120px;margin-top: 60px;margin-left: 5px;">
<div class="asi" style="width: 25%;height: 100%;">
<a target="_blank" href="/s?rsv_idx=1&tn=06074089_9_pg&wd=%E7%99%BE%E5%BA%A6%E7%BD%91%E7%9B%98&usm=4&ie=utf-8&rsv_cq=baidu&rsv_dl=0_right_recommends_merge_20826&euri=fa500cd786714543881f023a75c6152b">
<img style="margin: 0 10px;" src="https://ss0.baidu/6ONWsjip0QIZ8tyhnq/it/u=1270961457,1694178893&fm=58" class="c-img c-img4 opr-recommends-merge-img">
</a>
<div style="width: 100px;border: 0;text-align: center">
<a style="font-size: 13px;">百度网盘</a>
<p style="font-size: 8px;margin-top: 2px;">超大网络存储空间</p>
</div>
</div>
<div class="as1" style="width: 25%;height: 100%;">
<!-- <a target="_blank" href="/s?rsv_idx=1&tn=06074089_9_pg&wd=%E7%99%BE%E5%BA%A6%E7%BD%91%E7%9B%98&usm=4&ie=utf-8&rsv_cq=baidu&rsv_dl=0_right_recommends_merge_20826&euri=fa500cd786714543881f023a75c6152b">-->
<!-- <img style="margin: 0 10px;" src="https://ss0.baidu/6ONWsjip0QIZ8tyhnq/it/u=1270961457,1694178893&fm=58" class="c-img c-img4 opr-recommends-merge-img">-->
<!-- </a>-->
<a target="_blank" href="/s?rsv_idx=1&tn=06074089_9_pg&wd=qq%E9%9F%B3%E4%B9%90&usm=4&ie=utf-8&rsv_cq=baidu&rsv_dl=0_right_recommends_merge_20826&euri=92ffa6db6cb349faa24cb7ca12d607bf">
<img style="margin: 0 10px;" data-src="https://ss2.baidu/6ONYsjip0QIZ8tyhnq/it/u=1381461425,821639077&fm=58" data-b64-id="1381461425_821639077_58" class="c-img c-img4 opr-recommends-merge-img" src="https://img-blog.csdnimg/2022010612303392673.jpeg">
</a>
<div style="width: 100px;border: 0;text-align: center">
<a style="font-size: 13px;">QQ音乐</a>
<p style="font-size: 8px;margin-top: 2px;">网络音乐平台</p>
</div>
</div>
<div class="as2" style="width: 25%;height: 100%;">
<!-- <a target="_blank" href="/s?rsv_idx=1&tn=06074089_9_pg&wd=%E7%99%BE%E5%BA%A6%E7%BD%91%E7%9B%98&usm=4&ie=utf-8&rsv_cq=baidu&rsv_dl=0_right_recommends_merge_20826&euri=fa500cd786714543881f023a75c6152b">-->
<!-- <img style="margin: 0 10px;" src="https://ss0.baidu/6ONWsjip0QIZ8tyhnq/it/u=1270961457,1694178893&fm=58" class="c-img c-img4 opr-recommends-merge-img">-->
<!-- </a>-->
<a target="_blank" href="/s?rsv_idx=1&tn=06074089_9_pg&wd=%E7%99%BE%E5%BA%A6%E9%9F%B3%E4%B9%90&usm=4&ie=utf-8&rsv_cq=baidu&rsv_dl=0_right_recommends_merge_20826&euri=58be2d19d3d04c109c54a7827a1430dc">
<img style="margin: 0 10px;" src="https://ss1.baidu/6ONXsjip0QIZ8tyhnq/it/u=2013764581,1641162361&fm=58" class="c-img c-img4 opr-recommends-merge-img">
</a>
<div style="width: 100px;border: 0;text-align: center">
<a style="font-size: 13px;">百度音乐</a>
<p style="font-size: 8px;margin-top: 2px;">中国第一音乐门户</p>
</div>
</div>
<div class="as3" style="width: 25%;height: 100%;">
<!-- <a target="_blank" href="/s?rsv_idx=1&tn=06074089_9_pg&wd=%E7%99%BE%E5%BA%A6%E7%BD%91%E7%9B%98&usm=4&ie=utf-8&rsv_cq=baidu&rsv_dl=0_right_recommends_merge_20826&euri=fa500cd786714543881f023a75c6152b">-->
<!-- <img style="margin: 0 10px;" src="https://ss0.baidu/6ONWsjip0QIZ8tyhnq/it/u=1270961457,1694178893&fm=58" class="c-img c-img4 opr-recommends-merge-img">-->
<!-- </a>-->
<a target="_blank" href="/s?rsv_idx=1&tn=06074089_9_pg&wd=%E7%99%BE%E5%BA%A6APP&usm=4&ie=utf-8&rsv_cq=baidu&rsv_dl=0_right_recommends_merge_20826&euri=f268c7a9c79441c4a5b1a6630fbffd48">
<img style="margin: 0 10px;" data-src="https://ss1.baidu/6ONXsjip0QIZ8tyhnq/it/u=3494175460,3481243686&fm=58" data-b64-id="3494175460_3481243686_58" class="c-img c-img4 opr-recommends-merge-img" src="https://img-blog.csdnimg/2022010612303389350.jpeg">
</a>
<div style="width: 100px;border: 0;text-align: center">
<a style="font-size: 13px;">百度APP</a>
<p style="font-size: 8px;margin-top: 2px;">有事搜一搜没事看一看</p>
</div>
</div>
</div>
</div>
<div class="ac">
<div class="by-right-a">
<h4 style="float: left;">相关软件</h4><a style="float: right;margin-top: 20px;margin-right: 64px;">展开</a>
</div>
<div class="as" style="width: 400px;height: 120px;margin-top: 60px;margin-left: 5px;">
<div class="asi" style="width: 25%;height: 100%;">
<!-- <a target="_blank" href="/s?rsv_idx=1&tn=06074089_9_pg&wd=%E7%99%BE%E5%BA%A6%E7%BD%91%E7%9B%98&usm=4&ie=utf-8&rsv_cq=baidu&rsv_dl=0_right_recommends_merge_20826&euri=fa500cd786714543881f023a75c6152b">-->
<!-- <img style="margin: 0 10px;" src="https://ss0.baidu/6ONWsjip0QIZ8tyhnq/it/u=1270961457,1694178893&fm=58" class="c-img c-img4 opr-recommends-merge-img">-->
<!-- </a>-->
<a target="_blank" href="/s?rsv_idx=1&tn=06074089_9_pg&wd=%E7%88%B1%E5%A5%87%E8%89%BA&usm=4&ie=utf-8&rsv_cq=baidu&rsv_dl=0_right_recommends_merge_20826&euri=6ac22efbacfb410e84da008ce7491f1c">
<img style="margin: 0 10px;" data-src="https://ss1.baidu/6ONXsjip0QIZ8tyhnq/it/u=1095631477,3050645310&fm=58" data-b64-id="1095631477_3050645310_58" class="c-img c-img4 opr-recommends-merge-img" src="https://img-blog.csdnimg/2022010612303317709.jpeg">
</a>
<div style="width: 100px;border: 0;text-align: center">
<a style="font-size: 13px;">爱奇艺</a>
<p style="font-size: 8px;margin-top: 2px;">中国第一影视门户</p>
</div>
</div>
<div class="as1" style="width: 25%;height: 100%;">
<!-- <a target="_blank" href="/s?rsv_idx=1&tn=06074089_9_pg&wd=%E7%99%BE%E5%BA%A6%E7%BD%91%E7%9B%98&usm=4&ie=utf-8&rsv_cq=baidu&rsv_dl=0_right_recommends_merge_20826&euri=fa500cd786714543881f023a75c6152b">-->
<!-- <img style="margin: 0 10px;" src="https://ss0.baidu/6ONWsjip0QIZ8tyhnq/it/u=1270961457,1694178893&fm=58" class="c-img c-img4 opr-recommends-merge-img">-->
<!-- </a>-->
<a target="_blank" href="/s?rsv_idx=1&tn=06074089_9_pg&wd=hao123&usm=4&ie=utf-8&rsv_cq=baidu&rsv_dl=0_right_recommends_merge_20826&euri=7abc0773012e4902b72a9be41884f75d">
<img style="margin: 0 10px;" data-src="https://ss2.baidu/6ONYsjip0QIZ8tyhnq/it/u=1081556207,555112970&fm=58" data-b64-id="1081556207_555112970_58" class="c-img c-img4 opr-recommends-merge-img" src="https://img-blog.csdnimg/2022010612303442122.jpeg">
</a>
<div style="width: 100px;border: 0;text-align: center">
<a style="font-size: 13px;">hao123</a>
<p style="font-size: 8px;margin-top: 2px;">百度旗下核心产品</p>
</div>
</div>
<div class="as2" style="width: 25%;height: 100%;">
<!-- <a target="_blank" href="/s?rsv_idx=1&tn=06074089_9_pg&wd=%E7%99%BE%E5%BA%A6%E7%BD%91%E7%9B%98&usm=4&ie=utf-8&rsv_cq=baidu&rsv_dl=0_right_recommends_merge_20826&euri=fa500cd786714543881f023a75c6152b">-->
<!-- <img style="margin: 0 10px;" src="https://ss0.baidu/6ONWsjip0QIZ8tyhnq/it/u=1270961457,1694178893&fm=58" class="c-img c-img4 opr-recommends-merge-img">-->
<!-- </a>-->
<a target="_blank" href="/s?rsv_idx=1&tn=06074089_9_pg&wd=%E4%BC%98%E9%85%B7&usm=4&ie=utf-8&rsv_cq=baidu&rsv_dl=0_right_recommends_merge_20826&euri=32a177f3b0714ca8aea76978dc90863f">
<img style="margin: 0 10px;" src="https://ss0.baidu/6ONWsjip0QIZ8tyhnq/it/u=919053000,4116036204&fm=58" class="c-img c-img4 opr-recommends-merge-img">
</a>
<div style="width: 100px;border: 0;text-align: center">
<a style="font-size: 13px;">优酷</a>
<p style="font-size: 8px;margin-top: 2px;">互联网拍客聚集的阵营</p>
</div>
</div>
<div class="as3" style="width: 25%;height: 100%;">
<!-- <a target="_blank" href="/s?rsv_idx=1&tn=06074089_9_pg&wd=%E7%99%BE%E5%BA%A6%E7%BD%91%E7%9B%98&usm=4&ie=utf-8&rsv_cq=baidu&rsv_dl=0_right_recommends_merge_20826&euri=fa500cd786714543881f023a75c6152b">-->
<!-- <img style="margin: 0 10px;" src="https://ss0.baidu/6ONWsjip0QIZ8tyhnq/it/u=1270961457,1694178893&fm=58" class="c-img c-img4 opr-recommends-merge-img">-->
<!-- </a>-->
<a target="_blank" href="/s?rsv_idx=1&tn=06074089_9_pg&wd=17173&usm=4&ie=utf-8&rsv_cq=baidu&rsv_dl=0_right_recommends_merge_20826&euri=cc5166e947b64d29be8216ccd9bffcf4">
<img style="margin: 0 10px;" data-src="https://ss2.baidu/6ONYsjip0QIZ8tyhnq/it/u=121411748,3879340175&fm=58" data-b64-id="121411748_3879340175_58" class="c-img c-img4 opr-recommends-merge-img" src="https://img-blog.csdnimg/2022010612303488877.jpeg">
</a>
<div style="width: 100px;border: 0;text-align: center">
<a style="font-size: 13px;">17173</a>
<p style="font-size: 8px;margin-top: 2px;">网络游戏第一门户站</p>
</div>
</div>
</div>
</div>
</div>
</body>
更多推荐
百度搜索页
发布评论