前端初体验-day7

最新推荐文章于 2024-07-24 23:00:08 发布

桀桀O.o

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量553

点赞数 5

文章标签：前端

本文链接：https://blog.csdn.net/dai2905304084/article/details/139831715

版权

###盒子居中(定位)
1.使用margintop和marginleft来设置距离顶部和左侧的距离
2.使用transform:translate(-50%,-50%);来设置盒子的位置
3.使用flexbox来设置盒子的居中

###元素重叠z-index
z-index默认值是0 取值范围是负无穷到正无穷越大越在上面
注意点:z-index在 position:relative的情况下，才能使用。

###中期实践案例(华为官网部分)
####思路讲解
1.ul图结构

2. 根据ul图结构分析主要分为三个部分，也就是分为3个盒子。
（1）上半部分
上半部分总体分为两个部分：标题部分只需将标题放入标题盒子中再设置其样式。搜素框部分这部分分为3个部分两个表单和一个定位按钮。分别设置其表单样式和其文本内容的位置。其中左右表单分别各有一个iconfont图标分别将其放入一个盒子中嵌套在表单盒子中，再用定位确定其位置，设置对应的样式要注意：在搜索框部分中其有下边框，这个地方容易忽略。
（2）中间部分
中间部分总体分为两个部分：左侧图片和右侧图片。分别设置将图片放入一盒子中，定位其盒子的位置来摆放图片。把图片上的标题和文本设置为三个盒子也放在图片盒子中，根据图片定位其相应位置，再设置其样式。
（3）下半部分
下半部分比较简单只有一个有序列表，在li标签中输入文本再设置其文本样式即可。
####html代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="dpx.css">
    <link rel="stylesheet" href="fonts/iconfont.css">
</head>

<body>
    <!-- 上半部分 -->
    <div class="dpx_container">
        <!-- 大标题 -->
        <div class="dpx_text">查找华为线下全屋门店</div>
        <!-- 整个搜索框 -->
        <div class="dpx_input">
            <!-- 版心 -->
            <div class="dpx_hearder">
                <!-- 两个表单 -->
                <div class="dpx_form">
                    <!-- 左侧表单 -->
                    <div class="dpx_form_left">
                        <span class="dpx_form_text">选择行政区域</span>
                        <div class="form_input_icon">
                            <span class="iconfont icon-xiangxiajiantou
                                "></span>
                        </div>
                    </div>
                    <!-- 右侧表单 -->
                    <div class="dpx_form_right">
                        <div class="form_input_icon">
                            <span class="iconfont icon-sousuo1"></span>
                        </div>
                        <span class="dpx_form_text">输入搜索信息</span>
                    </div>
                    <!-- 定位按钮 -->
                    <div class="dpx_button">定位</div>
                </div>
            </div>
        </div>
    </div>
    <!-- 中间部分 -->
    <div class="dpx_picture">
        <!-- 左侧图片 -->
        <div class="dpx_pic_left">
            <img src="img/huawei-whole-house-smart-commercial-products.jpg" alt="">
            <div class="dpx_pic_title">华为全屋智能商用产品</div>
            <div class="dpx_pic_text">华为全屋智能商用产品，面向地产、酒店、办公等行业场景</div>
            <a href="" class="dpx_pic_text_a">
                <div>了解更多 ></div>
            </a>
        </div>
        <!-- 右侧图片 -->
        <div class="dpx_pic_right">
            <img src="img/pc.jpg" alt="">
            <div class="dpx_pic_title">华为全屋智能商用产品</div>
            <div class="dpx_pic_text">华为全屋智能商用产品，面向地产、酒店、办公等行业场景</div>
            <a href="" class="dpx_pic_text_a">
                <div>了解更多 ></div>
            </a>
        </div>


    </div>
    <!-- 下半部分 -->
    <ol>
        <li>空间穿越屏可墙可桌可手持、可识别并掌控不同空间的中控屏设计的定义，是指智能中控屏S2 及其配套产品。</li>
        <li>数据来源于华为实验室，实际使用中可能因产品个体差异、使用习惯和环境因素不同而有所不同，请以实际使用情况为准。</li>
    </ol>
</body>

</html>

####总结分析
这是我第一次我们组独立做完的案例，也是我们学习了这么多天的学习成果的检验，虽然在做的过程中不是非常顺利，但是经过组内的相互帮助，也是圆满完成了这个案例。通过这个案例让我学习了许多知识，比如定位的应用和margin和padding的灵活运用，相信这些知识会让我在以后的学习或者工作中能过更顺利。当然最重要的还是学会了组内的互帮互助，集体荣誉感的增强，让我更加明白我们是一个不可分割的整体，不管是在生活还是在工作中，集体都是非常重要的。不过，通过和官网的对比，我的问题也非常明显：1.太依赖对定位的使用，一些内容使用margin和padding会使内容更加合理和优美。另外就是还有一些知识我们还没有学习，我用了一些学过的知识代替，部分功能无法使用，相信在以后的学习中，我们会将这些功能在我们的知识体系中完善。总之，通过这个案例让我们对前端的工作内容更加具体，也让我们更加期待未来学习和工作。愿我们的未来生活和事业会更加美满。

桀桀O.o

关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
前端初体验-day7

这是我第一次我们组独立做完的案例，也是我们学习了这么多天的学习成果的检验，虽然在做的过程中不是非常顺利，但是经过组内的相互帮助，也是圆满完成了这个案例。当然最重要的还是学会了组内的互帮互助，集体荣誉感的增强，让我更加明白我们是一个不可分割的整体，不管是在生活还是在工作中，集体都是非常重要的。另外就是还有一些知识我们还没有学习，我用了一些学过的知识代替，部分功能无法使用，相信在以后的学习中，我们会将这些功能在我们的知识体系中完善。上半部分总体分为两个部分：标题部分只需将标题放入标题盒子中再设置其样式。
复制链接

扫一扫