百度一下首页（纯HTML5，css3）

改名字要2个币

已于 2023-05-14 16:41:03 修改

阅读量509

点赞数 2

文章标签： css 前端 html5 css3

于 2023-04-27 19:31:43 首次发布

本文链接：https://blog.csdn.net/m0_58545472/article/details/130413546

版权

效果图

html5

<!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 href="bd.css" rel="stylesheet" type="text/css">
</head>
<body>
    
    <!-- 头发 -->
    <nav class="nav">
        <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>
            <li><a href="#">更多</a></li>
        </ul>
        <div class="r">
            <ul>
                <li><a href="#" class="dy">登陆</a></li>
                <li><a href="#" >设置</a></li>
            </ul>
        </div>
    </nav>

    <!-- 头 -->
    <header class="header">
        <div id="logo">
            <h1>
                <a href="https://www.baidu.com/" title="百度logo" target="_black">百度</a>
            </h1>
        </div>
        <div class="search"><!--百度一下前面的空格 padding-left;-->
            <input type="search" id="" name="" placeholder="百度一下，你就知道">
            <button>百度一下</button>
        </div>
    </header>

    <!-- 身体 -->
    <body class="body">
        <!-- <div class="bodyheader"></div> -->
        <table class="bodytable">
            <tr>
                <th class="bodytable_left"  ><a href="#">百度热搜 ></a></th>
                <th class="bodytable_right"><a href="#">换一换 </a></th>
            </tr>
            <tr>
                <td><a href="#"><b>1</b>   官方：核酸检测单人单检不高于 </a></td>
                <td><a href="#"><b>4</b>   33项措施稳经济！最新部署来了<span>&nbsp;热</span> </a></td>
            </tr> <!--&nbsp;和空格过多，文字会被挤出方块 -->
            <tr> 
                <td><a href="#"><b>2</b>   匈牙利宣布进入战时紧急状态 <span>&nbsp;热</span></a></td>
                <td><a href="#">5   131省区市昨日新增本土102+418 <p>&nbsp;新</p> </a></td> 
            </tr>
            <tr>
                
                <td><a href="#"><b>3</b>   拜登：得州小学枪击是场“大屠杀” </a></td>
                <td><a href="#">6   中超重庆队解散内情：投入超30亿 <p>&nbsp;新</p></a></td>
            </tr>
        </table>
    </body>

    <!-- 脚 -->
    <footer class="footer">
        <div class="link">
            <a href="#"> 关于百度 </a><a href="#"> About Baid u</a> <a href="#"> 使用百度前必读</a><a href="#">帮助中心</a>
            <a href="#">京公网安备11000002000001</a><a href="#"> 号京ICP证030173号 </a> 
            ©2022 Baidu 互联网药品信息服务资格证书 (京)-经营性-2017-0020 <a hre="#"> 信息网络传播视听节目许可证 </a>
             <a href="#"><img src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/footer/aria-3006e33cce.png"></a>
        </div>
    </footer>

</body>
</html>

css3

*{
    margin:0;
    padding:0;
}
/* 标签选择器 */
a{
    list-style: none;
    color: #000;
    text-decoration: none;
}
/* 并集选择器 */
input,button{
    border: 0;
    outline: none;
}
/* 后代选择器 */
ul li{
    list-style: none;
}
/* 类选择器 */
.header{
   
    position: relative;
    width: 100%;
    height: 200px;
}
/* id选择器 */
#logo{
     /* 这里不用绝对定位？ */
    width: 240px;
    height: 40px;
    margin:66px auto;
}

#logo a{
    display: block;
    width: 240px;
    height: 90px;
    background: url(https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png) no-repeat;
    background-size: contain;
   /* 让<h1>里的文字隐藏 */
    font-size: 0;
}
.search{
    /* 搜索框要加定位 */   
    width: 612px;
    height: 44px; 
    border: 2px solid #4b4a4d;
    border-radius: 8px;
    margin: 66px auto;
}
.search input{
    float: left;
    width: 504px;
    height: 44px;
    padding-left: 10px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
.search button{
    float: left;
    width: 108px;
    height: 44px;
    background-color: #4e6ef2;
    font-size: 17px;
    color: #efff;
}
.nav{
    position: relative;
    width: 100%;
    height: 70px;
}
.nav ul li {
   float: left;  
}
.nav ul li a{
   display: block;
   margin: 30px 10px;
   text-decoration: none;
   color: rgb(44, 42, 42);
   font-size: 16px; 
}
.nav .r ul li{
    float: right;
}
/* 把a通过display转为块元素，这样才能设置top值 */
.nav .r ul li a{
    display: block;
    margin: 30px 10px;
    text-decoration: none;
    color: rgb(44, 42, 42);
    font-size: 16px;
}
.nav ul li a:hover{
    color: blue;
}
.dy{
    display: block;
    width: 48px;
    height: 24px;
    color: #fff!important;
    background-color: #4e6ef2;
    text-align: center;
    line-height: 24px;
    border-radius: 8px;
}
.bodyheader{
    width: 620px;
    height: 50px;
    margin: 10px auto;
}
.bodytable{
    margin: auto;
    width: 636px;
    height: 150px;
}
/* 选中出现下滑线，可以设置成行内块，块元素，再overflow:hidden把多余的去掉 */
.bodytable tr span{
    display: inline-block;
    overflow:hidden;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    font-size: 14px;
    color: #fff;
    background-color: #f60;
}
.bodytable tr p{
    display: inline-block;
    overflow:hidden;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    font-size: 14px;
    color: #fff;
    background-color: #ff455b;
}
.bodytable tr b{
    color: #f60;
}
.bodytable tr td:hover{
   text-decoration: underline;
}
.bodytable tr a:hover{
    color: blue;
 }
.bodytable .bodytable_left{
    color: #000;
    /* th文字靠左 */
    text-align: left;
    font-size: 16px;
    font-family: Arial,sans-serif;   
}
.bodytable .bodytable_right{
     /* th文字靠右 */
    text-align: right;
    color: #626675;
    font-size: 15px;
}
.bodytable tr td{
    margin: 10px auto;   
}
.bodytable tr td:nth-child(2n){
    padding-left: 10px;
}
.footer{
    /* 定位相对于窗口，水平居中用text-align:center; */
    position: fixed;
    width: 100%; 
    bottom: 0;
    margin:0 auto;
    height: 39px;
    line-height: 39px;
    background: #fff;
    text-align: center;
}
.link{   
    font-size: 12px;
    color: #4b4a4d;
    font-family: Arial,sans-serif;
}
.link a{
    margin:0 3px;
}
.link img{
   width: 56px; 
}