让我们从“头”开始~~_企业底部模块好看-CSDN博客

本文链接：https://blog.csdn.net/chnnds/article/details/120828965

文章目录

前言
一、看效果
二、结构层次图
二、步骤讲解
总结

前言

今日小编为你们带来了一个前端头部导航这一块的一个制作讲解。所谓做任何事学习任何东西我们都讲究从头开始，今天我们也从“头”开始！

一、看效果

话不多说！首先我们先来看看效果，我们再一一讲解！
在这里插入图片描述

二、结构层次图

这是小编我简单画的一个结构图所以比较简陋！希望各位多多包涵！
在这里插入图片描述

二、步骤讲解

1.顶部模块

结构图：
在这里插入图片描述
效果图：

顶部模块我们的结构就是首先定义一个div作为父盒子，然后在父盒子里面定义两个div子盒子，这样我们最基础的结构就搭建好了，但是div是块元素所以我们无法让他们在同一行进行显示，所以在必要的时候我们就要给他加上float属性让他进行浮动，你可以为这两个子盒子都设置左浮动，设置左浮动的话，他们二个子盒子就像是两口子分不开了，你想让两个盒子分开就要给第二个盒子添加一个第三者属性margin-left，把他们强行分开。在这里要注意是我们要单独给“免费注册”和“我的订单”设置样式，具体的小编为你们准备好了代码：

HTML布局：

<div class="header clearfix">
        <div class="header-sum">
            <div class="header-left">
                <span>品优购欢迎您！请登录&nbsp;<a href="login.html">免费注册</a></span>
            </div>
            <div class="header-right">
                <ul>
                    <li><a href="" class="one">我的订单</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>
        </div>
    </div>

CSS样式：

.header {
    background-color: rgba(241, 241, 241);
    height: 30px;
}

.header .header-sum {
    width: 1200px;
    height: 30px;
    margin: 0 auto;
}

.header-sum .header-left {
    height: 30px;
    float: left;
    line-height: 30px;
    font-size: 12px;
    color: rgba(102, 102, 102);
}

.header-sum .header-left a {
    color: red;
}

.header-sum .header-right {
    height: 30px;
    float: right;
}

.header-sum .header-right ul {
    height: 20px;
    margin-top: 5px;
}

.header-sum .header-right ul li {
    height: 20px;
    font-family: 'icomoon';
    font-size: 12px;
    line-height: 20px;
    color: rgba(102, 102, 102);
    float: left;
    padding: 0 20px;
    border-left: 1px solid rgba(102, 102, 102);
}

.header-sum .header-right ul li a {
    color: rgba(102, 102, 102);
}

.header-sum .header-right ul li:first-child {
    border-left: none;
}

2.中间模块

结构图：
在这里插入图片描述
效果图：

现在是中间部分，中间部分我们的父盒子里面就需要三个子盒子，同时需要设置margin-left：属性让他们兄弟和兄弟之间还是保持一点距离。毕竟人家不是男女朋友，男女朋友也没有三个一起耍的吧！但是在中间的子盒子，他可能和不知道的谁结婚了，当爸爸了，所以他还有两个子盒子。第二个盒子中我们要使用到input表单中的text表单，还有button按钮标签。在第三个子盒子中我使用的是双伪类，其中最上方还有一个小图标大家看到了吗？但是这不是图标哦！这是一个盒子，这个盒子在第三个子盒子里面哦！在这里我们就要用到原来小编讲过的绝对定位position：absolute了。但是别忘了给父盒子设置相对定位position：relative哦！

HTML布局：

    <header class="header-one clearfix">
        <img src="素材/images/logo.png" alt="">
        <div class="search">
            <div class="search-one">
                <input type="text" placeholder="语言开发">
                <button>搜索</button>
            </div>
            <div class="search-nav">
                <ul>
                    <li><a href="" class="search-nav-one">优惠购首发</a></li>
                    <li><a href="">亿元优惠</a></li>
                    <li><a href="">9.9元团购</a></li>
                    <li><a href="">每满99减30</a></li>
                    <li><a href="">办公用品</a></li>
                    <li><a href="">电脑</a></li>
                    <li><a href="">通信</a></li>
                </ul>
            </div>
        </div>
        <div class="header-right-two">
            <div class="wenzi">
                <span>我的购物车&nbsp;</span>
            </div>
            <div class="eight">8</div>
        </div>
    </header>

CSS样式：

header {
    width: 1200px;
    height: 100px;
    margin: 0 auto;
}

.header-one img {
    float: left;
    margin-top: 20px;
    margin-left: 20px;
}

.header-one .search {
    width: 536px;
    height: 72px;
    float: left;
    margin-top: 20px;
    margin-left: 200px;
}

.header-one .search .search-one {
    width: 536px;
    height: 38px;
}

.search-one input {
    height: 33px;
    float: left;
    width: 440px;
    border: 2px solid rgba(177, 25, 26);
}

.search-one input::placeholder {
    padding: 10px;
}

.search-one button {
    height: 36px;
    float: left;
    width: 92px;
    background-color: rgba(177, 25, 26);
    color: #fff;
    font-size: 15px;
}

.search .search-nav {
    width: 536px;
    height: 36px;
}

.search .search-nav ul {
    height: 36px;
}

.search .search-nav ul li {
    height: 36px;
    float: left;
    line-height: 36px;
    font-size: 12px;
    padding: 0 10px;
}

.search .search-nav ul li a {
    color: rgba(102, 102, 102);
}

.search .search-nav ul li .search-nav-one {
    color: red;
}

.header-one .header-right-two {
    width: 140px;
    height: 35px;
    text-align: center;
    position: relative;
    background-color: rgba(247, 247, 247);
    border: 1px solid rgba(102, 102, 102);
    float: right;
    margin-top: 30px;
    margin-right: 70px;
}

.header-one .header-right-two .wenzi {
    font-size: 12px;
    height: 35px;
    line-height: 35px;
    float: left;
    color: rgba(102, 102, 102);
    font-family: 'icomoon';
}

.header-one .header-right-two .wenzi::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 20px;
    margin-left: 20px;
    vertical-align: middle;
    background: url(素材/images/icons_r2_c2.png) no-repeat;
}

.header-one .header-right-two .eight {
    height: 20px;
    width: 20px;
    font-size: 12px;
    position: absolute;
    top: -10px;
    right: 10px;
    text-align: center;
    line-height: 20px;
    background-color: red;
    color: #fff;
    float: left;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

3.底部模块

结构图：
在这里插入图片描述
效果图：

最后一个模块就比较简单了，没有太多的结构，就是直接在父盒子里面添加一个无序列表就可以了，但是注意的是在这里我们需要用到结构伪类选择器，因为我们要把单独的第一个小li设置样式，所以我们这里用到了li：first-child属性，选择众多小li中的第一个，正是应了那句话：万千美女我只要第一个！接下来我们就看看代码：

HTML布局：

<nav class="nav clearfix">
        <div class="nav-hang">
            <ul>
                <li><span>全部商品分类</span></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>
                <li><a href="">有趣</a></li>
                <li><a href="">拍卖</a></li>
            </ul>
        </div>
    </nav>

CSS样式：

.nav {
    height: 50px;
    border-bottom: 2px solid rgba(174, 23, 24);
}

.nav .nav-hang {
    width: 1200px;
    height: 50px;
    margin: 0 auto;
}

.nav .nav-hang ul {
    height: 50px;
}

.nav .nav-hang ul li {
    height: 50px;
    line-height: 50px;
    text-align: center;
    float: left;
    font-size: 16px;
    padding: 0 25px;
}

.nav .nav-hang ul li:first-child {
    background-color: rgba(177, 25, 26);
}

.nav .nav-hang ul li span {
    display: inline-block;
    height: 50px;
    width: 150px;
    color: #fff;
}

.nav .nav-hang ul li a {
    color: rgba(102, 102, 102);
}

.nav .nav-hang ul li a:nth-of-type(1):hover {
    color: red;
}