PC端网页布局——世纪佳缘（二）页面初搭建

最新推荐文章于 2024-03-03 10:43:27 发布

tingyu_

最新推荐文章于 2024-03-03 10:43:27 发布

阅读量886

点赞数

分类专栏： PC端网页布局—世纪佳缘（官网页面） web前端

本文链接：https://blog.csdn.net/tingyu_/article/details/107568539

版权

web前端同时被 2 个专栏收录

15 篇文章 3 订阅

订阅专栏

PC端网页布局—世纪佳缘（官网页面）

4 篇文章 1 订阅

订阅专栏

咱们首先来搭建一下整体的大结构：

效果如下：

每一块呢，都是使用div块做的，并不难理解

除了头部之外，每一块都是外面一个大的div,里面再包一个小的div，也就是所谓的通栏和版心（由于个人问题，版心设置了两个宽度的，大家可以根据个人需求来设计）

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="./sjjy_css.css">
</head>
<body>
    <!-- 头 -->
    <div class="new_header center">头部</div>
     <!-- 注册 -->
     <div class="new_user_reg">
        <div class="user_reg center2"></div>
    </div>
    <!-- 会员数量图片 -->
    <div class="new_publicist">
        <div class="publicist center2">2.2亿注册会员</div>
    </div>
    <!-- 优质会员列表 -->
    <div class="new_userbest">
        <div class="userbest center2">优质会员</div>
    </div>
    <!-- 红娘   蓝色服务 -->
    <div class="blueservice">
        <div class="center">蓝色服务</div>
    </div>
    <!-- 底部1 -->
    <div class="jy_commen_foot">
        <div class="foot1 center">底部1</div>
    </div>
     <!-- 底部2 -->
    <div class="foot_company_info">
        <div class="foot2 center">底部2</div>
    </div>
    <!-- 底部3 -->
    <div class="other_icon ">
        <div class="center">底部3</div>
    </div>
</body>
</html>

CSS代码如下：

*{
    margin: 0;
    padding: 0;
}
.center{
    width: 1016px;
    margin: 0 auto;
}
.center2{
    width: 1000px;
    margin: 0 auto;
}
body{
    background-color: #666;
}
/* 头 */
.new_header{
    height: 70px;
    background-color: pink;
    position: relative;
}
/* 注册 */
.new_user_reg{
    height: 450px;
    /* background-color: pink; */
    background: url(./images/big_bg4.jpg) no-repeat center top;
    position: relative;
}
/* 会员数量图片 */
.new_publicist{
    position: relative;
    height: 78px;
    background-color: cornflowerblue;
}
.new_publicist .publicist{
    height: 100%;
    background-color: coral;
}
/* 优质会员列表 */
.new_userbest{
    position: relative;
    height: 733px;
    padding: 20px 0;
    background-color: cyan;
}
.new_userbest .userbest{
    height: 100%;
    background-color: rgb(136, 127, 194);
}
/* 红娘   蓝色服务*/
.blueservice{
    height: 115px;
    background-color: #52c9eb;
}
/* 底部1 */
.jy_commen_foot{
    height: 92px;
    background-color: darksalmon;
    /* padding-top: 20px; */
}
.jy_commen_foot .foot1{
    padding-top: 20px;
    height: 100%;
    background-color: khaki;
}
/* 底部2 */
.foot_company_info{
    height: 27px;
    background-color: rgb(212, 110, 173);
}
.foot_company_info .foot2{
    height: 100%;
    background-color: mediumaquamarine;
}
/* 底部3 */
.other_icon{
    height: 50px;
    background-color: rgb(78, 132, 202);
}

主要就是添加一些背景颜色，相信大家都是可以看得懂的

在这里呢，设置固定的高度是为了能够添加上颜色，布局结构更加清晰一些，后期会视情况去掉高度，使用内容撑开。

tingyu_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
PC端网页布局——世纪佳缘（二）页面初搭建

咱们首先来搭建一下整体的大结构：效果如下：每一块呢，都是使用div块做的，并不难理解除了头部之外，每一块都是外面一个大的div,里面再包一个小的div，也就是所谓的通栏和版心（由于个人问题，版心设置了两个宽度的，大家可以根据个人需求来设计）HTML代码如下所示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="vi
复制链接

扫一扫

专栏目录