博客

CSS练习：百度搜索页面

  • Post author:
  • Post category:其他


由于本人水平不够，所以样式有些可能没有写好



最终结果

在这里插入图片描述



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>Document</title>
    <link rel="stylesheet" href="./css/aa.css">
</head>
<body>
    <div class="header">
        <div class="left">
            <div>新闻</div>
            <div style="padding: 2px 0;">hao123</div>
            <div>地图</div>
            <div>贴吧</div>
            <div>视频</div>
            <div>图片</div>
            <div>网盘</div>
            <div>更多</div>
        </div>
        <div class="right">
            <div class="shezhi">设置</div>
            <div class="right-login">登录</div>
        </div>
    </div>

    <div class="middle">
        <div class="baiduimg">
            <img src="../image/baidu.png" width="300" height="135" alt="">
        </div>
        <div class="sousuo">
            <div class="first">    
                <input type="text">
                <img src="../image/相机.png" width="20" height="20" alt="">            
            </div>            
            <!-- 这里出现了一个问题是border冲突的问题 -->
            <div class="sousuo-click">百度一下</div>
        </div>
        <div class="sousuo-font">
            <div class="sousuo-font-baidu">百度热搜></div>
            <div class="sousuo-font-content">
                <div class="first-sousuo">
                    <p><label>1</label>&nbsp&nbsp&nbsp中国农名丰收节</p>
                    <p><label>2</label>&nbsp&nbsp&nbsp韩总统私下吐槽美国会议员为崽子</p>
                    <p><label>3</label>&nbsp&nbsp&nbsp现场：俄多地民众响应动员应征入伍</p>
                </div>
                <div class="first-sousuo">
                    <p><label>4</label>&nbsp&nbsp&nbsp逐梦苍穹&nbsp未来可期</p>
                    <p><label class="label5">5</label>&nbsp&nbsp&nbsp江苏政法委原书记王立科被判死缓</p>
                    <p><label class="label5">6</label>&nbsp&nbsp&nbsp普京：俄罗斯不会再犯这类错误</p>
                </div>
            </div>
        </div>


    </div>
    <div class="footer">
        <p>关于百度</p>
        <p>About baidu</p>
        <p>使用百度前必读</p>
        <p>帮助中心</p>
        <p>企业推广</p>
        <p>京公网安备11000002000001号</p>
        <p>京ICP证030173号</p>
        <p>信息网络传播视听节目许可证0110516</p>
        <p>互联网宗教信息服务可证编号：京 (2022) 0000043</p>
        <p style="box-sizing: border-box;font-size: 13px;">></p>
    </div>
</body>
</html>



sass代码：

.header{
    box-sizing: border-box;
    margin-top: 1%;
    width: 100%;
    // height: 40%;
    // border: 1px solid red;
    display: flex;
    justify-content: space-between;
    .left{
        width: 500px;
        box-sizing: border-box;
        // border: 1px solid blue;
        display: flex;
        justify-content: space-around;
        font-family: Arial;
        font-size: 13px;
    }
    .right{
        width: 100px;
        display: flex;
        justify-content: space-between;
        // border: 1px solid black;
        margin-right: 2%;
        font-size: 13px;
        font-family: Arial, Helvetica, sans-serif;
        .right-login{
            font-family: Arial, Helvetica, sans-serif;
            width: 45px;
            border-radius: 5px;
            text-align: center;
            color: #fff;
            background-color: #4e6ef2;
            font-size: 13px;
            padding: 2px 0;
        }
        .shezhi{
            // border: 1px solid red;
            padding: 2px 0;
        }
    }
}
.middle{
    width: 50%;  
    height: 450px;
    // border: 1px solid red;
    margin: 20px auto;
    .baiduimg{
        // height: 50px;
        // border: 1px solid blue;
        text-align: center;
    }
    .sousuo{
        box-sizing: border-box;
        border: 2px solid blue;
        display: flex;
        width: 653px;
        height: 43px;
        margin: 0 auto;
        border-radius: 15px;
        // justify-content: center;
        // align-items: center;
        .first{
            // border: 1px solid red;
            display: flex;
            align-items: center;
            
            input{
                list-style: none;
                border: none;
                width: 520px;
                height: 20px;

            }
            img{
                // border: 1px solid rebeccapurple;
            }

        }
        .sousuo-click{
            
            width: 100px;
            // border: 1px solid red;
            text-align: center;
            background-color: #4e6ef2;
            color:#FFF;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 0 15px 15px 0;
            margin-left: 10px;

        }
    }
    .sousuo-font{
        width: 650px;
        height: 200px;
        // border: 1px solid red;
        margin: 30px auto;
        .sousuo-font-baidu{
            // border: 1px solid red;
            font-family: Arial, Helvetica, sans-serif;
            font-weight: 800;
        }
        .sousuo-font-content{
            box-sizing: border-box;
            // border: 1px solid rgb(11, 255, 19);
            display: flex;
            justify-content: space-between;
            label{
                // border: 1px solid red;
                font-family: Arial, Helvetica, sans-serif;
                font-size: 20px;
                margin-left: 20px;
                color: #faa90e;
                
            }
            .label5{
                color: #9195a3;
            }
            .first-sousuo{
                width: 50%;
                height: 120px;
                // margin-top: 20px;
                font-weight: 400;
                font-family: Arial, Helvetica, sans-serif;
                // display: flex;
                // flex-direction: column;
                // // align-items: center;
                // justify-content: space-around;
                // border: 1px solid rgb(255, 255, 10);
                p{
                    // border: 1px solid red;
                }
            }
        }
        
    }  
    
}
.footer{
    box-sizing: border-box;
    width: 1300px;
    // border: 1px solid red;
    margin: 0 auto;
    position: absolute;
    bottom: 0;
    left: 10%;

    p{
        color: #bbb;
        // border: 1px solid black;
        display: inline-block;
        margin-left: 4px;
        font-size: 13px;
    }
}



CSS代码：

.header {
  box-sizing: border-box;
  margin-top: 1%;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.header .left {
  width: 500px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  font-family: Arial;
  font-size: 13px;
}

.header .right {
  width: 100px;
  display: flex;
  justify-content: space-between;
  margin-right: 2%;
  font-size: 13px;
  font-family: Arial, Helvetica, sans-serif;
}

.header .right .right-login {
  font-family: Arial, Helvetica, sans-serif;
  width: 45px;
  border-radius: 5px;
  text-align: center;
  color: #fff;
  background-color: #4e6ef2;
  font-size: 13px;
  padding: 2px 0;
}

.header .right .shezhi {
  padding: 2px 0;
}

.middle {
  width: 50%;
  height: 450px;
  margin: 20px auto;
}

.middle .baiduimg {
  text-align: center;
}

.middle .sousuo {
  box-sizing: border-box;
  border: 2px solid blue;
  display: flex;
  width: 653px;
  height: 43px;
  margin: 0 auto;
  border-radius: 15px;
}

.middle .sousuo .first {
  display: flex;
  align-items: center;
}

.middle .sousuo .first input {
  list-style: none;
  border: none;
  width: 520px;
  height: 20px;
}

.middle .sousuo .sousuo-click {
  width: 100px;
  text-align: center;
  background-color: #4e6ef2;
  color: #FFF;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0 15px 15px 0;
  margin-left: 10px;
}

.middle .sousuo-font {
  width: 650px;
  height: 200px;
  margin: 30px auto;
}

.middle .sousuo-font .sousuo-font-baidu {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
}

.middle .sousuo-font .sousuo-font-content {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}

.middle .sousuo-font .sousuo-font-content label {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  margin-left: 20px;
  color: #faa90e;
}

.middle .sousuo-font .sousuo-font-content .label5 {
  color: #9195a3;
}

.middle .sousuo-font .sousuo-font-content .first-sousuo {
  width: 50%;
  height: 120px;
  font-weight: 400;
  font-family: Arial, Helvetica, sans-serif;
}

.footer {
  box-sizing: border-box;
  width: 1300px;
  margin: 0 auto;
  position: absolute;
  bottom: 0;
  left: 10%;
}

.footer p {
  color: #bbb;
  display: inline-block;
  margin-left: 4px;
  font-size: 13px;
}


版权声明：本文为ACBYCL原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。