html、css 百度静态页面

最新推荐文章于 2022-08-08 10:20:44 发布

一蓑烟雨..

最新推荐文章于 2022-08-08 10:20:44 发布

阅读量2.3k

点赞数 4

分类专栏：前端 html\css 文章标签： css 百度 html

本文链接：https://blog.csdn.net/weixin_44713688/article/details/107465173

版权

html\css 同时被 2 个专栏收录

17 篇文章 1 订阅

订阅专栏

前端

11 篇文章 0 订阅

订阅专栏

百度页面

扒了一个百度的静态页面：

效果图：
在这里插入图片描述

其中搜素框的小图标使用的是精灵图

1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>baidu</title>
  <link rel="stylesheet" href="baidu.css">

</head>
<body>
    <div>
        <header class="header">
            <div class="header_left top-left font-normal">
                <ul>
                    <li><a href="#">新闻</a></li>
                    <li><a href="#">hao123</a></li>
                    <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 class="header_right top-right font-normal">
                <ul>
                    <li class="fighting" ><a href="#">高考加油</a></li>
                    <li class="setting header_rigth">设置</li>
                    <li><button class="sign-in rigth"><a href="#">登陆</a></button></li>                   
               </ul>
            </div>   
        </header>  
     </div>
<!-- 中间 -->
    <div class="middle">    
        <div class="logo">
            <img src="baidu.png" >
         </div>
            <div class="fond">
                <input type="text" class="search">
                <button type="submit" class="baidu-button">百度一下</button>
                <span class="microphone"></span>
                <span class="camera"></span>
            </div>
        </div>
    </div>
    <footer class="footer">
        <div class="footer-left">
            <ul>
                <ul>
                <li class="footer-left-li"><a href="#">设为首页</a></li>
                <li class="footer-left-li"><a href="#">关于百度</a></li>
                <li class="footer-left-li"><a href="#">About Baidu</a></li>
                <li class="footer-left-li"><a href="#">百度营销</a></li>
                <li class="footer-left-li"><a href="#">使用百度前必读</a></li>
                <li class="footer-left-li"><a href="#">意见反馈</a></li>
                <li class="footer-left-li"><a href="#">帮助中心</a></li>
               </ul>
            </ul>
        </div>
        <div class="footer-right">
            <ul>
                <li class="footer-right-li"><a href="#">京ICP证030173号</a></li>
                <li class="footer-right-li"><a href="#">京公网安备11000002000001号</a></li>
                <li class="footer-right-li"><a href="#"> (京)-经营性-2017-0020</a></li>
                <li class="footer-right-li"><a href="#">©2020 Baidu</a></li>
            </ul>
        </div>
    </footer> 
</body>
</html>

2.css

*{
	padding: 1px;
	margin: 0;
	border: 0px;
}
a{
    text-decoration: none;
    font: 13px/23px 'PingFang SC',Arial,'Microsoft YaHei',sans-serif;
}

/* 头部 */
.header{   
    height: 60px;
    width: 100%;
    min-width: 1250px;
}
/* 头部左边 */
.header_left{
    float: left;
}
/* 头部右边 */
.header_right{
    float: right;
}
/* 字体 */
	.font-normal li{
	    font: 13px/23px 'PingFang SC',Arial,'Microsoft YaHei',sans-serif;
	    list-style: none;
	    float: left;
	    color: #222;
	    margin-right: 31px;
	}
	a:link {
	    color: black;
	}
	a:visited {
	    color: black;
	}
	a:hover {
	    color: blue;
	}
	a:active {
	    color: red;
	}

/* 左边 */
.top-left{
    margin-right: 31px;
    margin-top: 10px;
    display: inline-block;
    position: relative;
}

/* 右边 */
.top-right{
    margin-top: 3px;
    display: inline-block;
    position: relative;
    /* margin-top: 19px; */
    float: right;
}

/* 高考加油 字体*/
.fighting a{
    color: red;
    font: 13px/23px 'PingFang SC',Arial,'Microsoft YaHei',sans-serif;
    list-style: none;
}

/* 登陆 */
.sign-in{
    height: 24px;
    width: 48px;
    border-radius: 6px;
    margin: 0 34px 0 24px;
    font-size: 13px;
    background-color: #4e71f2;
    border: 1px solid transparent;
}

/* 登陆字体 */
.sign-in a {
    color: #fff;
}

/* 设置 */
.setting {
    font: 13px/23px 'PingFang SC',Arial,'Microsoft YaHei',sans-serif;
    color: #222;
    vertical-align: bottom;
}
.setting li {
    padding-bottom: 8px;
    text-align: center;
}
.setting li a:hover{
    color: #315efb;
}


/* 中间部分 */
.middle{
    width: 100%;
    height: 650px;
    min-width: 1250px;
}

/* logo */
.logo{
    text-align: center;
    margin-top: 39px;
}

/* 百度图标 */
img{
    height:129px;
    width:270px;
    position: relative;
}

/* 搜索框 */
.fond{
    position: relative;
    width: 656px;
    position: absolute;
    left: 50%;
    top: -50px;
    transform: translate(-50%);
    padding-top: 100px;
    font-size: 0px;
    position: relative;
}
/* 搜索栏 */
.search {
    float: left;
    width: 512px;
    height: 16px;
    padding: 12px 16px;
    font-size: 16px;
    border-radius: 10px 0 0 10px;
    border: 2px solid #c4c7ce;
    background: #fff;
    color: #222;
}
/* 百度一下 */
.baidu-button {
    float: left;
    width: 108px;
    height: 44px;
    margin: -1px;
    line-height: 44px;
    background-color: #4e6ef2;
    border-radius: 0 10px 10px 0;
    font-size: 17px;
    color: #fff;
    box-shadow: none;
    font-weight: 400;
    border: none;
}
/*  小图标 */
.microphone {
    display: inline-block;
    position: absolute;
    right: 160px;
    top: 110px;
    width: 19px;
    height: 22px;
    background: url("https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/searchbox/nicon-10750f3f7d.png");
}
.camera {
    display: inline-block;
    position: absolute;
    right: 126px;
    top: 110px;
    width: 22px;
    height: 22px;
    background: url("https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/searchbox/nicon-10750f3f7d.png");
    background-position: 0 48px;
}

.footer {
    position: fixed;
    position: relative;
    bottom: 0;
    height: 58px;
    width: 100%;
    line-height: 60px;
    background-color: #fafafa;
    min-width: 1200px;
    
}

/* footer左边 */
.footer-left-li {
    float: left;
    font-size: 12px;
    margin-left: 20px;
    list-style: none;
}
/* 颜色 */
.footer-left-li a {
    color: #9195a3;
}

/* footer右边 */
.footer-right-li {
    float: right;
    font-size: 12px;
    margin-left: 10px;
    list-style: none;
}
/* 颜色 */
.footer-right-li a {
    color: #9195a3;
}

一蓑烟雨..

关注

4
点赞
踩
29

收藏

觉得还不错? 一键收藏
0
评论
html、css 百度静态页面

百度页面扒了一个百度的静态页面：1.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>baidu</title> <link rel="stylesheet" href="baidu.css"></head><body> <div>
复制链接

扫一扫