如何制作 华为全屋智能官网（一）

今天学习了制作这个华为全屋智能官网的页面的一部分，图片展示如下：

 一、导航部分

  <!-- 首页面的css样式 -->

    <link rel="stylesheet" href="css/index.css">

创建一个index.css，先进行初始化

/* 初始化 */
* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

ul {
    list-style-type: none;
}

 1.设置左上角华为图标

  <!-- 头部 通栏宽度100%-->
    <div class="header">
        <!-- 头部的版心 -> 宽度 居中 -->
        <div class="header_con">
            <!-- logo使用a标签包裹 -->
            <a href="" class="logo">
                     /* 华为图片*/
                <img src="img/logo.svg" alt="">
            </a>
        </div>
    </div>

index.css里面进行调整

/* ----头部内容部分开始------ */
body {
    background-color: #f1f3f5;
}

.header {
    width: 100%;
    height: 56px;
    background-color: #f1f3f5;
}

/* 版心 */
.header_con {
    width: 1200px;
    margin: 0 auto;
    height: 56px;
    /* background-color: pink; */
}

.logo {
    float: left;
    margin-top: 15px;

}

.logo img {
    width: 100px;

}

2.设置右上角的字体图标

 <!-- 引入字体图标css文件 -->

    <link rel="stylesheet" href="fonts/iconfont.css">

   <div class="addons">
                <span class="iconfont icon-search"></span>
                <span class="iconfont icon-denglu"></span>
                <span class="iconfont icon-tuozhuai-3"></span>
            </div>

 设置字体图标的步骤如下：阿里巴巴矢量图，下载代码

 

 index.css里面进行调整

.addons {
    float: right;
    margin-top: 15px;
}
.addons span {
    font-size: 26px;
    margin-right: 10px;
}

/* ----头部内容部分结束------ */

二、图片部分

 <div class="banner">
        <div class="banner_text1">华为方舟壹号空间智能开放实验室</div>
        <div class="banner_text2">全国首个大型空间智能开放实验室，助力空间智能化</div>
    </div>

 index.css里面进行调整字体大小等结构

/* ----banner内容部分开始------ */
.banner {
    width: 1200px;
    height: 500px;
    margin: 0 auto;
    background-color: pink;
    border-radius: 20px;
    background: url(../img/pc-2.jpg) no-repeat;
    background-size: cover;
    text-align: center;
    color: #fff;
    /* 解决外边距塌陷 */
    overflow: hidden;
}

.banner_text1 {
    font-size: 42px;
    font-weight: 700;
    margin: 300px 0 10px 0;
}

/* ----banner内容部分结束------ */

三、华为全屋智能，住进未来家部分

  <div class="smarthome">
        <!-- 上面 -->
        <div class="sec_title">华为全屋智能，住进未来家</div>
        <!-- 下面部分4部分内容 -->
        <div class="smarthome_con">
            <div class="item">
                <div class="item_title">
                    <div class="item_title1">亮点功能</div>
                    <div class="item_title2">生活起居的智能化</div>
                </div>
                <img src="img/1.jpg" alt="">
            </div>
            <div class="item">
                <div class="item_title">
                    <div class="item_title1">亮点功能</div>
                    <div class="item_title2">华为全屋智能 1 + 2 + N 解决方案</div>
                </div>
                <img src="img/2.jpg" alt="">
            </div>
            <div class="item">
                <div class="item_title">
                    <div class="item_title1">亮点功能</div>
                    <div class="item_title2">智能中控屏、智能门锁等</div>
                </div>
                <img src="img/3.jpg" alt="">
            </div>
            <div class="item last">
                <div class="item_title">
                    <div class="item_title1">亮点功能</div>
                    <div class="item_title2">
                        多设备联动打造丰富智慧场景体验
                    </div>
                </div>
                <img src="img/4.jpg" alt="">
            </div>
        </div>
    </div>

  index.css里面进行调整

/* ----全屋智能内容部分开始------ */
.smarthome {
    width: 950px;
    /* 版心重要的内容 */
    margin: 0 auto;
    height: 460px;
    padding: 40px 0;
}

/* 上面的题目 */
.sec_title {
    text-align: center;
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 20px;
}

/* 下面部分4部分内容 */
.smarthome_con {
    height: 348px;
}

.item {
    float: left;
    width: 216px;
    height: 340px;
    padding: 4px;
    background-color: #fff;
    margin-right: 16px;
    border-radius: 20px;
    /* 子绝父相 */
    position: relative;

}

.item_title {
    height: 120px;
    text-align: center;
}

.item_title1 {
    font-size: 14px;
    font-weight: 700;
    padding-top: 25px;
}

.item_title2 {
    font-size: 12px;
    opacity: 0.6;
    padding-top: 10px;
}

.item img {
    width: 100%;
    border-radius: 0 0 18px 18px;
}

/* 最后一个不需要设置margin-right */
.last {
    margin-right: 0;
}

/* ----全屋智能内容部分结束------ */

 四、定位盒子居中（知识点）

盒子水平居中

<!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>
    <style>
        .father {
            width: 300px;
            height: 250px;
            border: 1px solid red;
            margin: 100px auto;
            /* 子绝父相 */
            position: relative;
        }
        
        .son {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            /* son左上角处于中间位置 */
            left: 50%;
            top: 50%;
         
            /* 文字水平垂直居中 */
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">son</div>
    </div>
</body>

</html>

结果为：son的左上位置处于中心位置，不是想要的结果，

 

 解决方法：往上，往左 移动自身的一半，即可居中 */

             margin-top: -50px;

            margin-left: -50px;

结果为：

 

五、叠放层次（知识点） 

 /* z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。 */

 /*注意点:z-index在position定位设置时才可以使用,不然无效position: absolute relative fiexed; */

  /* z-index:9999 设置在最上层 */ 

 <style>
        .father {
            width: 400px;
            height: 500px;
            border: 1px solid red;
            margin: 100px auto;
            /* 子绝父相： 三个盒子重叠在一起 */
            position: relative;
        }
        
        .father div {
            width: 200px;
            height: 200px;
            position: absolute;
        }
 
        .son1 {
            background-color: blue;
            /* son1在最内层 */
            left: 0;
            top: 0;
        }
        
        .son2 {
            background-color: pink;
            left: 30px;
            top: 30px;
        }
        
        .son3 {
            background-color: yellow;
            left: 60px;
            top: 60px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son1">son1</div>
        <div class="son2">son2</div>
        <div class="son3">son3</div>
    </div>
</body>

 结果为： 黄色部分在最上层

 

 

 添加z-index属性设置排放顺序

 .son1 {
            background-color: blue;
            /* son1在最内层 */
            left: 0;
            top: 0;
            /* 设置z-index ，son1则在最上层 */
            z-index: 3;
            /* z-index:9999 设置在最上层 */
        }
        
        .son2 {
            background-color: pink;
            left: 30px;
            top: 30px;
            z-index: 2;
        }
        
        .son3 {
            background-color: yellow;
            left: 60px;
            top: 60px;
        }

结果为：黄色部分在最里面