模仿努比亚网站三（内容区域）

原创于 2020-12-06 20:31:10 发布 · 299 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css3

CSS3 专栏收录该内容

77 篇文章

订阅专栏

本文详细解析了模仿努比亚网站的设计布局，重点介绍了内容区域的结构实现方式，包括标题、图片排版及悬停效果等，并分享了一些CSS技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

模仿努比亚网站三（内容区域）

/*内容区域*/
.content {
    height: 1883px;
    width: 100%;
}

.content > dl {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
}

/*设置标题*/
.content > dl > dt {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 30px;
}

/*设置文字大小*/
.content > dl > dt > h3 {
    font-size: 35px;
    color: #333333;
}

.content > dl > dt > p {
    margin-top: 20px;
    color: #e8340e;

}

/*设置手机图片的排版*/
.content .content_phone {
    width: 1200px;
    height: 1200px;
}

/*设置phone里的li*/
.content .content_phone > li {
    float: left;
    background-color: white;
    position: relative;
    overflow: hidden;
}

/*设置每张图片*/
.content .content_phone > li > img {
    width: 100%;
    /*所有动画统一设置过度动画*/
    transition: all 1s;

}

.content .content_phone > li:nth-child(1) img {
    margin-top: 60px;
}

.content .content_phone > li:nth-child(1) {
    width: 1200px;
    height: 395px;
    margin-bottom: 10px;
}

/*默认偏移一点*/
.content .content_phone > li:nth-child(1) img {
    margin-left: -100px;
}

.content .content_phone > li:nth-child(3) img {
    margin-left: 100px;
}

/*悬停恢复*/
.content .content_phone > li:nth-child(1):hover img {
    margin-left: 0;
}

.content .content_phone > li:nth-child(3):hover img {
    margin-left: 0;
}
/*单独给其他三个设置放大动画*/
.content .content_phone>li:hover .img_scale {
transform: scale(1.2);
}
.content .content_phone > li:nth-child(2) {
    width: 395px;
    height: 795px;
    margin-right: 10px;
}

.content .content_phone > li:nth-child(3) {
    width: 795px;
    height: 390px;
    margin-bottom: 10px;
}

.content .content_phone > li:nth-child(4) {
    width: 390px;
    height: 395px;
    margin-right: 10px;
}

.content .content_phone > li:nth-child(5) {
    width: 395px;
    height: 395px;
}

/*设置图片下的描述*/
.content .content_phone .phone_des {
    width: 200px;
    position: absolute;
    left: 50%;
    margin-left: -100px;
    bottom: 10px;
    text-align: center;
}

.content .content_phone .phone_des > h4 {
    font-size: 20px;
    color: #000000;
}

.content .content_phone .phone_des > p {
    font-size: 15px;
    margin-bottom: 10px;
    color: #999999;
}

/*设置边框*/
.content .content_phone .phone_des > span {
    display: inline-block;
    width: 108px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    border: 1px solid #cccccc;
    border-radius: 10px;
    color: #000000;
}

/*单独设置第一张图片*/
.content .content_phone > li:nth-child(1) .phone_des {
    left: 0;
    margin-left: 800px;
    bottom: 150px;
}

/*设置配件的排版*/
.content .content_pj {
    width: 1200px;
    height: 300px;
    display: flex;
    justify-content: space-between;
}

.content .content_pj > li {
    float: left;
    width: 295px;
    height: 300px;
    background-color: white;
    overflow: hidden;
    /*margin-right: 5px;*/
}
/*设置图片*/
.content .content_pj > li >img {
    width: 100%;
    transition: all 1s;
}
.content .content_pj > li >p {
    text-align: center;
    margin-top: 25px;
}
/*设置悬停动画*/
.content .content_pj > li:hover img {
    transform: scale(1.2);
}

<!--内容区域-->
<div class="content">
    <!--采用dl结构-->
    <dl>
        <!--头部文字介绍-->
        <dt>
            <h3>最新产品</h3>
            <p>查看全部手机 &gt;</p>
        </dt>
        <dd>
            <!--添加图片-->
            <ul class="content_phone">
                <li>
                    <img src="images/con-phone1.jpg" alt="">
                    <div class="phone_des">
                        <h4>Z11极光蓝</h4>
                        <p>极光蓝</p>
                        <span>一探究竟</span>
                    </div>
                </li>
                <li>
                    <img src="images/con-phone2.jpg"  class="img_scale" alt="">
                    <div class="phone_des">
                        <h4>Z11极光蓝</h4>
                        <p>极光蓝</p>
                        <span>一探究竟</span>
                    </div>
                </li>
                <li>
                    <img src="images/con-phone3.jpg" alt="">
                    <div class="phone_des">
                        <h4>Z11极光蓝</h4>
                        <p>极光蓝</p>
                        <span>一探究竟</span>
                    </div>
                </li>
                <li>
                    <img src="images/con-phone4.jpg"   class="img_scale" alt="">
                    <div class="phone_des">
                        <h4>Z11极光蓝</h4>
                        <p>极光蓝</p>
                    </div>
                </li>
                <li>
                    <img src="images/con-phone5.jpg"  class="img_scale" alt="">
                    <div class="phone_des">
                        <h4>Z11极光蓝</h4>
                        <p>极光蓝</p>
                    </div>
                </li>
            </ul>
        </dd>
        <dt>
            <h3>精选配件</h3>
            <p>查看全部配件 &gt;</p>
        </dt>
        <dd>
            <ul class="content_pj">
                <li>
                    <img src="images/accessories1.jpg" alt="">
                    <p>努比亚快充移动电源</p>
                </li>
                <li>
                    <img src="images/accessories2.jpg" alt="">
                    <p>努比亚圈铁耳机</p>
                </li>
                <li>
                    <img src="images/accessories3.jpg" alt="">
                    <p>努比亚快炫美自拍杆</p>
                </li>
                <li>
                    <img src="images/accessories4.jpg" alt="">
                    <p>nubia摄影三脚架</p>
                </li>
            </ul>
        </dd>
    </dl>
</div>

注意点

1.内容区域主要是标题加图片内容，可以使用dl里的dt和dd实现，类似表格的标题和内容。

2.给子元素设置margin属性，父元素会被顶下来，可以给父元素设置边框，或给父元素设置overflow：hidden;

3.内容区域的图片可以利用浮动的贴靠现象来实现。浮动会紧贴但是改行不够宽度会另起一行，采用ul里的li来浮动。