项目实战1：豆瓣首页-页头

最新推荐文章于 2024-06-04 14:56:07 发布

guai_guai_guai

最新推荐文章于 2024-06-04 14:56:07 发布

阅读量40

点赞数

分类专栏： # 前端知识总结文章标签： css html 前端 html5

本文链接：https://blog.csdn.net/guai_guai_guai/article/details/134428442

版权

前端知识总结专栏收录该内容

24 篇文章 0 订阅

订阅专栏

经过对前端html和css的基础和进阶的学习，我对前端也有了更深的理解，在这里我就利用所学知识来进行一次豆瓣首页的项目实战吧！

以下就是豆瓣首页的内容：

我们先做好准备工作，首先css文件通常在创建项目时通常会创建三个，一个重置样式（reset.css），一个作者样式(XXX.css)，一个通用样式(common.css)

首先是页头

如下：

页头整体用header元素包含，页头里又包含logo，search，以及menu三个部分，每个都用有类名的div 表示，由于之后要整体给这三个元素设置居中，故要将这三个元素关联起来，即在这三个元素外面再包含一个类名为container的div，后续设置container即可

<body>
    <header class="header">
        <div class="container">
            <div class="logo">

            </div>
            <div class="search">
                
            </div>
            <div class="menu">
                
            </div>
        </div>
    </header>
</body>

接着就设置header高度，一般情况下header高度不变，所以在这里要给header设置高度

.header{
    height: 90px;
}

之后给container设置宽度，以及该区域居中，不难发现该区域与首页下方很多区域宽度相同，如果不加任何处理，就会写很多重复代码，故在此要给container设置公共样式，以后凡是遇到宽度相同并居中时，给该元素加个类名container即可

/* 首页通用样式 */
.container{
    width: 950px;
    margin: 0 auto;
}
/* 首页通用样式结束 */
/* 页头开始 */

.header{
    height: 90px;
}
/* 此举会使代码更加繁琐 */
/* .header .container{
    width: 950px;
    margin: 0 auto;
} */

/* 页头结束 */

<body>
    <header class="header">
        <div class="container">
            <div class="logo">

            </div>
            <div class="search">
                
            </div>
            <div class="menu">

            </div>
        </div>
    </header>
    <!-- 宽度与container相同的元素 -->
    <div class="container"></div>

注意：container不能设置高度，高度要自适应！

如果要单独设置header里的container的话，在下方写更详细的选择器微调样式


/* 首页通用样式 */
.container{
    width: 950px;
    margin: 0 auto;
}
/* 首页通用样式结束 */
/* 页头开始 */

.header{
    height: 90px;
}
/* 这里写有差异性的代码 */
.header .container{
    margin-top: 30px;
} 
/* 页头结束 */

排列三个div时，可将前两个设置为左浮动，最后一个设置为右浮动，由于页面中可能也会有很多元素左浮动，为了避免代码繁琐，可将左浮动设置为通用样式：

/* 首页通用样式 */
.container{
    width: 950px;
    margin: 0 auto;
}
.float-left{
    float: left;
}
/* 首页通用样式结束 */

如果以后有元素要设置成左浮动，给该元素加上float-left类名即可，右浮动同理。

出现浮动之后，要注意高度坍塌问题：

.clearfix::after{
    content: "";
    display: block;
    clear: both;
}

注意将其设置在通用样式里

接着设置三个元素整体高度（或边框），增强可视化效果

.header .logo, .header .search, .header .menu{
    height: 30px;
    border: 2px solid;
}

接下来就是设置具体样式了，首先是logo，这部分通过设置背景图完成，背景图通过在网页检查源代码中获得，在logo里添加的内容里有超链接，在这里我们可以用h1包含a元素，通过在a里设置背景图，同时设置宽高（即背景图的宽高）即可

给行盒设置宽高的方法

在这里要注意，a元素是行盒，不能被改变高度，因此要将a元素改为块盒

下面是未改之前的效果：

.header .logo a{
    width: 154px;
    height: 30px;
}

.header .logo a{
    width: 154px;
    height: 30px;
    display: block;
}

接着就为a元素设置背景图

.header .logo a{
    width: 154px;
    height: 30px;
    display: block;
    background: url(../imgs/logo_豆瓣.png) no-repeat;
}

效果如图：

此时我们就可以去掉边框，隐藏文字使背景图更好的展现出来

隐藏文字

1. 用span元素把文字包裹起来，设置span为display：none即可

.header .logo a span{
    display: none;
}

2. 在这里，还有另一种巧妙的方法：不用设置span元素，设置a元素高度为0，接着设置其padding-top为30px，此时文字会被挤下去，这是只要设置overflow为hidden即可。

图标与上方有一定距离，如果设置container margin-top，此时会产生外边距合并的问题

外边距合并

1. 设置BFC盒子

2. 设置header内边距

.header{
    height: 90px;
    padding-top: 30px;
    box-sizing: border-box;
}

header内容本身就有一个高度，注意这里要加上box-sizing：border-box

接下来是搜索框

搜索框一般都有以下效果，输入文字后按回车页面会加载到另一个另一个页面

做法有两种

通过JS代码实现
在input元素外面套一个form（表单元素），form里再加一个子元素button，button里又有i元素（图标）

这里的input元素记得按照要求定宽高

/* text为input的类名 */
.header .search .text{
    width: 240px;
    height: 20px;
    padding: 5px;
    font-size: 13px;
}

<form
    <input type="text">
    <button>
          <i class="iconfont icon-sousuoxiao"></i>
     </button>
 </form>

按回车键时，就相当于触发了按钮，提交数据

接下来是设置文本框样式，placeholder：“文字”

设置placeholder文字颜色

/* 伪元素选择器,选中该属性里的内容 */
.header .search .text::placeholder{
    color: #ccc;
}

接下来为文本框设置边框，注意这里的边框不只是文本框的边框，边框里包含了input和button，所以我们就为search设置宽高以及边框。同时该区域和左边的图标也有一定距离，设置search的margin-left即可

重置input，button样式：

input,button{
    border:none;
    outline:none;
    outline-offset:0;
}
button{
    background:initial;
}

接下来设置按钮的位置，这里按钮的位置就可用定位来解决

button设置绝对定位，其父元素（类名为search）设置相对定位，设置其相对位置，top为0，right为0，可以给button设置宽高（与input高度相同）和文字颜色

.header .search button{
    position: absolute;
    width: 30px;
    height: 30px;
    top: 5px;
    right: 0px;
    background: url(../imgs/搜索小.png) no-repeat left top/25px 25px;
}

给背景图设置宽高的方法：

background: url(../imgs/搜索小.png) no-repeat left top/25px（宽） 25px（高）;

接下来就是最右边的菜单超链接，先设置整体框架为八个a元素，后面的文字都可以用背景图填充

每个a元素共用一个背景图，只是背景图的位置不一样，每个a元素宽高相同，这里就需要给a元素顶宽，但a元素是行盒，无法定宽，所以要将a元素变为行盒

.header .container .menu a{
    display: block;
    width: 40px;
    height: 20px;
    background: url(../imgs/读书~~.png) no-repeat;
}

此时我们会得到以下效果

此时的a元素垂直排列，将a元素横向排列的方法：1.浮动 2. 将a元素变为行块盒

在这里我们用浮动解决这个问题吧，如果将a元素浮动起来，就可以不用写将a元素变为块盒的代码了，因为浮动元素会自动将其设置为块盒，记得清除浮动（高度坍塌）

每个a元素之间都有距离，在这里我就设置margin-left吧

此时发现menu整体靠上，为了和左边search对齐，就要设置menu的margin-top。

接下来就是调整每个a元素背景图的位置了，在这里使用属性background-position，要给每个a元素去一个类名分别设置背景图的位置

<div class="menu float-right">
                <a href="" class="menu-read"></a>
                <a href="" class="menu-movie"></a>
                <a href="" class="menu-music"></a>
                <a href="" class="menu-group"></a>
                <a href="" class="menu-city"></a>
                <a href="" class="menu-fm"></a>
                <a href="" class="menu-time"></a>
                <a href="" class="menu-doupin"></a>
            </div>