超文本标记语言HTML(day05)_超文本标记语言 html 举例-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_73764080/article/details/139867410

华为网页案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华为官网</title>
    <!-- 首页面的css样式 -->
    <link rel="stylesheet" href="css/index.css">
    <!-- 引入字体图标css文件 -->
    <link rel="stylesheet" href="fonts/iconfont.css">
</head>

<body>
    <!-- 头部 通栏宽度100%-->
    <div class="header">
        <!-- 头部的版心 -> 宽度 居中 -->
        <div class="header_con">
            <!-- logo使用a标签包裹 -->
            <a href="" class="logo">
                <img src="img/logo.svg" alt="">
            </a>
            <div class="addons">
                <span class="iconfont icon-search"></span>
                <span class="iconfont icon-denglu"></span>
                <span class="iconfont icon-tuozhuai-3"></span>
            </div>
        </div>
    </div>
    <!-- banner栏 -->
    <div class="banner">
        <div class="banner_text1">华为方舟壹号空间智能开放实验室</div>
        <div class="banner_text2">全国首个大型空间智能开放实验室，助力空间智能化</div>
    </div>
    <!-- 华为全屋智能内容 -->
    <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="">
                <!-- 放置在img下面 定位的圆圈 -->
                <div class="circle">下</div>
            </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>
    <!-- 亮点功能 -->
    <div class="function">
        <!-- 上面 -->
        <div class="fun_title">
            <div class="fun_title1">
                <b>亮点功能</b>
            </div>
            <div class="fun_title2">生活起居的智能化改造，告别繁琐操作</div>
        </div>
        <!-- 下面 -->
        <div class="fun_main">
            <div class="fun_main_top">
                <div class="fun_top_left">
                    <img src="img/3-1.jpg" alt="">
                </div>
                <div class="fun_top_center">
                    <img src="img/3-2.jpg" alt="">
                    <div class="series-banner-text">人来灯亮，智慧节能</div>
                </div>
                <div class="fun_top_right">
                    <img src="img/3-3-v2.jpg" alt="">
                    <img src="img/3-4.jpg" alt="">
                </div>
            </div>
            <div class="fun_main_bottom">
                <a href="" class="ga-pdp-link">智慧照明</a>
                <a href="" class="card-btn">预约体验</a>
            </div>
        </div>
    </div>
</body>

</html>

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

a {
    text-decoration: none;
}

ul {
    list-style-type: none;
}

.clearfix::after {
    content: '.';
    display: block;
    height: 0;
    clear: both;
    /* 隐藏 */
    /* 虽然隐藏但是仍然占位 */
    visibility: hidden;
}

/* 页面内容 */
/* ----头部内容部分开始------ */
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;

}

.addons {
    float: right;
    margin-top: 15px;
}

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

/* ----头部内容部分结束------ */
/* ----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内容部分结束------ */
/* ----全屋智能内容部分开始------ */
.smarthome {
    width: 950px;
    /* 版心重要的内容 */
    margin: 0 auto;
    height: 460px;
    padding: 40px 0;
    /* background-color: pink; */

}

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

/* 下面部分-4部分内容 */
.smarthome_con {
    /* background-color: blue; */
    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;
}

.circle {
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    position: absolute;
    bottom: 20px;
    right: 20px;
    text-align: center;
    line-height: 40px;
    color: #fff;
}

/* ----全屋智能内容部分结束------ */
.function {
    width: 1130px;
    height: 600px;
    margin: 0 auto;
    /* background-color: pink; */
}

.fun_title {
    text-align: center;
    margin-bottom: 20px;
}

.fun_title1 {
    font-size: 36px;
    margin-bottom: 5px;
}

.fun_title2 {
    font-size: 18px;
}

/* 亮点功能下面  */
.fun_main {
    height: 440px;
    padding: 16px;
    background-color: #fff;
    border-radius: 16px;
}

/* 下面部分内容的上部 */
.fun_main_top {
    height: 348px;
    overflow: hidden;
    /* background-color: rgb(253, 214, 147); */
}

.fun_main_top>div {
    float: left;
}

.fun_main_top img {
    border-radius: 6px;
}

/* 第一张 */
.fun_main_top .fun_top_left img {
    height: 348px;
    width: 468px;
}

/* 第二张 */
.fun_top_center {
    margin: 0 5px;
    position: relative;
}

.series-banner-text {
    position: absolute;
    left: 10px;
    top: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 5px;
    border-radius: 5px;
}

.fun_main_bottom {
    margin: 15px 0;
}

.fun_main_top .fun_top_center img {
    width: 315px;
    height: 348px;
}

.fun_top_right {
    width: 300px;
    height: 348px;
    /* background-color: blue; */
}

.fun_top_right img {
    width: 300px;
    height: 172px;
}

.fun_main_bottom {
    height: 73px;
    line-height: 73px;

}

.fun_main_bottom .ga-pdp-link {
    float: left;
    font-size: 36px;
    font-weight: 700;
    color: #000;
}

.fun_main_bottom .card-btn {
    float: right;
    background-color: #000;
    color: #fff;
    border: 1px solid #000;
    border-radius: 6px;
    padding: 13px 30px;
    line-height: 20px;
    font-size: 13px;
    margin-top: 10px;
}

案例制作过程中要注意margin和padding的使用

margin:0 auto;多用于版心的居中，可以又快又好的调整版心的位置

margin，padding多用于盒子和盒子之间以及文本和文本之间的调整也可以微调使文本图片进行位置的调整。

要注意的是margin的使用可能会引起外边距的塌陷，解决方法就是给父元素添加上边距，上内边距，或者overflow:hidden;都能解决这个问题。