HTML-CSS 百度页面的搭建

最新推荐文章于 2024-02-01 15:08:06 发布

junlingshiwo

最新推荐文章于 2024-02-01 15:08:06 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML

本文链接：https://blog.youkuaiyun.com/weixin_45722135/article/details/104507854

HTML 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了如何使用HTML和CSS搭建百度页面，主要包括三个部分：头部搭建，搜索框处理以及内容布局。在头部搭建中，重点讲解了照片、文字、菜单的样式设计；搜索框部分，通过浮动和样式调整实现“百度一下”的位置和外观美化；内容布局则涉及图片、文字的排版和列表标签的运用，确保整体风格统一和视觉效果协调。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天所讲的的百度的页面搭建。可分为三部分来分析:

【1】首先介绍头部的搭建：头部分为左边与右边，

头左边主要有照片和文字搭建而成，也使用左浮，文字就简单使用margin-left来完成。

头右边的样式都差不多，但右边的菜单框中【更多产品】样式繁多

更多产品就采用块级标签转成行内元素，和前面的学术地理不一样，它还使用了顶部对齐<vertical-align>和去除出下划

线<text-decoration>才让它跟突出。

【2】接下来讲的就是搜索框的部分，这里我们主要讲的就是搜索框后的百度一下。

（百度一下）本来是在搜索框的左下角，无法上去，然后我采用左浮来进行了改变。

将左浮的百度一下去除了外边框，改变它的背景颜色，让这个看起来更加的美观

【3】这也有头部和中间部分，比如头的左边就采取图片和文字混合，文字很文字之间的空白处我们也需去除，

对头部左边的文字去除下划线，，用左浮来调节位置，内边距是右边来了10px,最后也对图片和span标签的文字做了中间对齐。

接下来就是中间部分，也分为左右两边，左边直接将第二行图片做处理，放好位置，第三行就直接达到效果。看，

这是对图二进行的搭建过程，图片的边距圆角来了1px,因为第三行的图片本来在右边，我就将其来了左浮，让行三图片回到位置上，这里也使用了font-size来改变文字。

中间内容的右边内容 :主要用列表标签

这个红线上的换一换在左下方，我们用右浮来让它归位。

图中的文字还需列表标签：对它做的一些样式改变，搭建起来就更完整。

这就是百度网页的搭建，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度一下，你就不知道</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/index.css" >
</head>
<body>
<!--头部-->
<header id="header">
    <!--左边-->
    <div class="header-left">
        <span>
            <img src="weather.png" alt="" align="center">
        </span>

        <span class="msg-span">
            <span>|</span>
            <a href="#">换肤</a>
            <a href="#">消息</a>
        </span>
    </div>

    <!--右边-->
    <div class="header-right">
        <a href="">新闻</a>
        <a href="">hao123</a>
        <a href="">地理</a>
        <a href="">学术</a>
        <a href=""class="more-product">更多产品</a>
    </div>
    </header>
    <!--搜索-->
<section id="content">
    <!--logo-->
    <div class="logo" >
        <img src="bd_logo.png" alt="百度logo">
    </div>
    <div class="search">
        <form action="http://www.itlike.com">
            <input name="content"  type="text" class="search-input">
            <input name="btn" type="submit"
                    class="search-submit" value="百度一下">
        </form>
    </div>

</section>
<!--列表-->
<section id="list">
    <!--头部-->
    <div class="list-head">
        <!--左边-->
        <div class="list-head-left">
            <a href="">
                <img src="person_icon.png" alt="">
                <span>我的关注</span>
            </a>
            <a href="">
                <span>推荐</span>
            </a>
            <a href="">
                <span>导航</span>
            </a>
        </div>


        <!--右边-->
        <div class="list-head-right">
            <a href="">
                <img src="setting_icon.png" alt="">
            </a>
        </div>
    </div>

    <!--内容-->
    <div class="list-content">
        <!--内容左边-->
        <div class="list-content-left">
            <!--1-->
            <div class="list-content-cell1">
                <h3>大满贯14冠！德约3-0完胜罗布特 美网三度封王</h3>
                <img src="cell_img1.png" alt="">
                <img src="cell_img2.png" alt="">
                <img src="cell_img3.png" alt="">
                <p>网易新闻 09-20 13;19</p>

            </div>
            <!--2-->
            <div class="list-content-cell2">
                <div class="cell-img">
                    <img src="cell_img1.png" alt="">
                </div>
                <div class="cell-title">
                    <h3>大满贯14冠！德约3-0完胜罗布特 美网三度封王</h3>
                    <p>网易新闻 09-20 13;19</p>
                </div>
            </div>
            <!--3-->
            <div class="list-content-cell2">
                <div class="cell-img">
                    <img src="cell_img1.png" alt="">
                </div>
                <div class="cell-title">
                    <h3>大满贯14冠！德约3-0完胜罗布特 美网三度封王</h3>
                    <p>网易新闻 09-20 13;19</p>
                </div>
            </div>

        </div>
        <!--内容右边-->
        <div class="list-content-right">
            <div class="right-top">
                <h4>实时热点</h4>
                <div>
                    <img src="circle_icon.png" alt="">
                    <span>换一换</span>
                </div>
            </div>
            <div class="right-body">
                <ul>
                    <li>高晓松 丁香医生</li>
                    <li>中国参加俄军演</li>
                    <li>高晓松 丁香医生</li>
                    <li>中国参加俄军演</li>
                    <li>高晓松 丁香医生</li>
                    <li>中国参加俄军演</li>
                    <li>高晓松 丁香医生</li>
                    <li>中国参加俄军演</li>
                    <li>高晓松 丁香医生</li>
                    <li>中国参加俄军演</li>

                </ul>
            </div>


        </div>
    </div>
    

</section>



</body>
</html>

样式的搭建：

*{
    margin: 0;
    padding: 0;
    /*边框往里走*/
    box-sizing: border-box;
}
body{
    /*margin-bottom: 200px;*/
}
/**********************头部-start*************************/
#header{
    height: 33px;
    border-bottom: 1px solid #ebebeb;

}
#header a{
    color:#000000;
    font-size: 13px;

}
#header .header-left{
    width: 270px;
    height: 33px;
    /*background-color: red;*/
    float: left;
    line-height: 33px;

}
#header .header-left a{
    margin-left: 8px;
}

#header .header-right{
    width: 600px;
    height: 33px;
    float:right;
    text-align: right;
    line-height:33px;
}
#header .header-right a{
    font-weight: bolder;
    margin-left: 15px;
}

#header .header-right a.more-product{
    background-color:#398bfb;
    /*行内-->  行内-块级*/
    display:inline-block;
    width: 86px;
    height: 33px;
    line-height:33px;
    color: white;
    text-align: center;
    text-decoration: none;
    vertical-align: top;
    font-size: 13px;


}
    /***********************头部-end***************************/

/**********************搜索-start*************************/
#content{
    width: 641px;
    height: 189px;
    margin:20px auto;


}
#content .logo{

    text-align: center;
    width: 641px;
    height: 112px;


}
#content .logo img{
    width: 270px;
    height: 112px;
}

#content .search{
    width: 100%;
    height: 77px;

    padding-top: 10px;
}
#content .search form{
    width: 100%;
    height: 44px;

}
#content .search form .search-input{
    width: 536px;
    height: 44px;
    padding-left: 8px;
    /*去除外边框*/
    outline: none;
    border: 1px solid #e0e0e0;

    float: left;
}
#content .search form .search-input:focus{
    border-color: #398bfb;

}
#content .search-submit{
    width: 105px;
    height: 44px;
    background-color: #398bfb;
    border: none;
    float: left;
    color: #fff;
    font-size: 16px;
    /*去除外边框*/
    outline: none;
}


/************** *********搜索-end***************************/

/**********************列表-start*************************/
#list{
    width: 893px;
    height: 600px;
    border: 1px solid #ebebeb;
    margin: 0 auto;

}
#list .list-head{
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #ebebeb;
}
#list .list-head .list-head-left{
    float: left;
    /*解决空白留白的问题*/
    font-size: 0;
}

#list .list-head .list-head-left a{
    display: inline-block;
    height: 40px;
     line-height: 40px;
     font-size: 14px;
    text-decoration: none;
    padding: 0 10px;
    color: #555555;
    vertical-align: top;
}
#list .list-head .list-head-left a img,
#list .list-head .list-head-left a span {
    vertical-align: middle;
}

#list .list-head .list-head-left a:hover{
    background-color: #cccccc;
}

#list .list-head .list-head-right{
         float: right;
    margin-right: 10px;
}

#list .list-head .list-head-right img{
    vertical-align: middle;
}
/*列表的内容*/
#list .list-content{

}
#list .list-content .list-content-left{
    width: 575px;
    height: 600px;
    float: left;
    /*background-color: red;*/
    padding: 10px 5px 5px 10px;

}
#list .list-content .list-content-left .list-content-cell1{
    border-bottom: 1px solid #ebebeb;
    padding-bottom: 5px;

}
#list .list-content .list-content-left .list-content-cell2 h3{
    margin-bottom: 10px;
}
#list .list-content .list-content-left .list-content-cell2 p{
    margin: 3px 0;
    color:#555555;
    font-size:12px;
}
#list .list-content .list-content-left .list-content-cell2{
     padding: 20px 0;
    height: 160px;
    border-bottom: 1px solid #e0e0e0;
}

#list .list-content .list-content-left .list-content-cell2 .cell-img{
    float: left;
}
#list .list-content .list-content-left .list-content-cell2 .cell-title{
    
    padding: 20px ;
    width: 360px;
    float: left;

}
#list .list-content .list-content-left .list-content-cell1 h3{
    margin-bottom: 10px;
}
#list .list-content .list-content-left .list-content-cell1 p{
    margin: 3px 0;
    color:#555555;
    font-size:12px;
}
#list .list-content .list-content-right{
    width: 315px;
    height: 600px;
    /*background-color: red;*/
    float: left;
}
#list .list-content .list-content-right .right-top{
    height: 60px;
    width: 315px;
    /*background-color: green;*/
    padding: 20px;
}
#list .list-content .list-content-right .right-top h4{
    float: left;
}
#list .list-content .list-content-right .right-top div{
    float: right;
}
#list .list-content .list-content-right .right-top div img,
#list .list-content .list-content-right .right-top div span{
    vertical-align: middle;

}
#list .list-content .list-content-right .right-body{
    /*background-color: #398bfb;*/
    padding: 0 20px;
}
#list .list-content .list-content-right .right-body li{
    list-style: none;
    width: 130px;
    height: 40px;
    line-height: 40px;
    float:left;

    color:#666666;
    font-size: 14px;
}








/***********************，列表-end***************************/