2021-05-19

最新推荐文章于 2025-05-29 10:00:29 发布

小菜菜菜菜菜菜c鸟

最新推荐文章于 2025-05-29 10:00:29 发布

阅读量86

点赞数 1

分类专栏： HTML CSS 文章标签： html css

本文链接：https://blog.youkuaiyun.com/qq_57838690/article/details/117046319

版权

HTML 同时被 2 个专栏收录

1 篇文章

订阅专栏

CSS

1 篇文章

订阅专栏

用HTML和CSS仿的百度搜索页面，哈哈哈，第一次发文章，请多多关照！

另外，不嫌弃的小伙伴可以拿去瞧瞧哈。

这是HTML代码：

<!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 rel="shortcut icon" href="/图片/2021051710101530_easyicon_net_64.ico">
    <link rel="stylesheet" href="baidu.css">
</head>
<body>
    <header>
        <ul class="left-ul">
            <li class="left-li"><a class="left-a" href="">hao123</a></li>
            <li class="left-li"><a class="left-a" href="">地图</a></li>
            <li class="left-li"><a class="left-a" href="">直播</a></li>
            <li class="left-li"><a class="left-a" href="">视频</a></li>
            <li class="left-li"><a class="left-a" href="">贴吧</a></li>
            <li class="left-li"><a class="left-a" href="">学术</a></li>
            <li class="left-li"><a class="left-a" href="">更多</a></li>
        </ul>
        <div class="right-div">
            <p class="button"><a class="right-a" href="">设置</p>
            <div class="right-box">
                <a class="right-a" href="">搜索设置</a>
                <a class="right-a" href="">高级设置</a>
                <a class="right-a" href="">关闭预测</a>
                <a class="right-a" href="">隐私设置</a>
                <a class="right-a" href="">关闭热榜</a>
            </div>
        </div>
        <button class="denlu" href="">登录</button>
        <figure>
            <img src="/图片/pc_9bea003175fa9b942261f73533d83400.gif" alt="美丽中国" title="美丽中国，点击了解">
        </figure>
        <div class="textbox">
            <form action="">
                <input class="text" type="text">
                <button class="butt">百度一下</button>
            </form>
        </div>
        <main>
            <div class="mainbox">
                <div class="main-left">
                    <a class="main-a" href>百度热榜</a><br>
                    <a class="main-a" href=""><span class="span-1">1</span>省区市无新增本土病例</a><br>
                    <a class="main-a" href=""><span class="span-2">2</span>美舰穿航台湾海峡 东部战区回应</a><br>
                    <a class="main-a" href=""><span class="span-3">3</span>湖南女法官遇害案：被告人被判死刑</a>
                </div>
                <div class="main-right">
                    <a class="main-a" href=""><span class="span-suzi">4</span>安徽六安新增1例无症状感染者</a><br>
                    <a class="main-a" href=""><span class="span-suzi">5</span>中国空间站计划两年内建完</a><br>
                    <a class="main-a" href=""><span class="span-suzi">6</span>副市长被查前然老婆搬空别墅</a>
                </div>
            </div>
        </main>
        <footer>
            <a class="footer-a" href="">设为首页</a>
            <a class="footer-a" href="">关于百度</a>
            <a class="footer-a" href="">About Baidu</a>
            <a class="footer-a" href="">百度营销</a>
            <a class="footer-a" href="">使用百度前必读</a>
            <a class="footer-a" href="">意见反馈</a>
            <a class="footer-a" href="">帮助中心</a>
            <a class="footer-a" href="">京公网安备11000002000001号</a>
            <a class="footer-a" href="">京ICP证030173号</a>
            &copy;2021 Baidi&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(京)-经营性-2017-0020
        </footer>
    </header>
</body>
</html>

这是CSS代码：

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    position: fixed;
    width:1366px;
    height:auto;
}

/* 左上样式 */
.left-ul{
   float: left;
}

.left-li{
    display: inline-block;
    margin: 20px 20px;
}

.left-a{
    text-decoration: none;
    color: black;
    font-size: small;
}

.left-a:hover{
    color: mediumblue;
}

/* 右上样式 */
.right-div{
    float: right;
    position: relative;
    top: 20px;
}

.right-box{
    display: none;
    position: absolute;
    width: 4em;
    box-shadow: 2px 5px 5px 2px gray;
    z-index: 1;
    border-radius: 6px;
}

.right-a{
    text-decoration: none;
    color: black;
    font-size: small;
    text-align: center;
}

.right-a:hover{
    color: mediumblue;
}

.right-div:hover .right-box{
    display: block;
}

.denlu{
    position: absolute;
    left:1389px ;
    top: 20px;
    border-radius: 5px;
    opacity: 0.6;
    padding: 3px 7px;
    background-color: blue;
    border: none;
    color: white;
}


/* 输入框样式 */
.textbox{
    position: absolute;
    left: 483px;
    top: 230px;
    width: 650px;
    height: 50px;
    border: 1px solid gray;
    border-radius: 10px;
}

.text{
    width: 85%;
    height: 50px;
    outline: none;
    float: left;
    border-radius: 10px 0px 0px 10px;
    border:0.5px solid gray;
    opacity: 0.1;
}

.butt{
  width: 15%;
  height: 50px;
  outline: none;
  float: left;
  border-radius: 0 10px 10px 0;
  border:0.5px solid blue;
  background-color: blue;
  opacity: 0.6;
  color: white;
  font-size: larger;
}

.text:hover{
    opacity: 1;
}

.butt:hover{
    opacity: 1;
}

/* 主内容 */

.mainbox{
    position: relative;
    left: 31%;
    top: 50px;
    width: 700px;
    height: 500px;
    border: 1px solid white;
}

.main-left{
    float: left;
    position: absolute;
    left: 60px;
    top: 10px;
    line-height: 2em;
}

.main-right{
    float: right;
    position: absolute;
    right: 20px;
    top: 44px;
    line-height: 2em;
}

.main-a{
    text-decoration: none;
    text-align: center;
    color: black;
    font-size: small;
}

.main-a:hover{
    color: mediumblue;
}

span{
    margin-right:15px ;
}

.span-1{
    color: red;
}

.span-2{
    color: orange;
}

.span-3{
    color:yellow;
}

.span-suzi{
    color: gray;
}

/* 底部样式 */
footer{
    position: absolute;
    bottom: 15px;
    left: 270px;
    font-size: small;
    opacity: 0.8;
}

.footer-a{
   text-decoration: none;
   color: gray;
   opacity: 0.8;
   margin-right: 10px;
   font-size: 10px;
}

.footer-a:hover{
    color: black;
    opacity: 1;
}

这是页面截图：