DIV+CSS布局实践-搭骨架

最新推荐文章于 2024-05-31 22:20:16 发布

努力的胡十一

最新推荐文章于 2024-05-31 22:20:16 发布

阅读量124

点赞数

分类专栏：前端 html5 前端基础文章标签： html5 前端 vscode html

本文链接：https://blog.csdn.net/qq_45383769/article/details/124466205

版权

前端基础同时被 3 个专栏收录

24 篇文章 1 订阅

订阅专栏

前端

19 篇文章 0 订阅

订阅专栏

html5

18 篇文章 1 订阅

订阅专栏

DIV+CSS布局实践-搭骨架

像这样一个官网的样式，我们需要怎么样去搭建呢。
在这里插入图片描述

首先要标注好每一块的尺寸，并不是说所有的尺寸都要标注，可以先分成几个大块来标注，大块的骨架搭建好了再优化细节：
在这里插入图片描述

分了大块儿之后再挨个儿搭建细节，分的块儿有：
1.整个主页
（1）头部
（2）导航菜单
（3）轮播图
（4）新闻动态-通知公告
1.新闻动态
2.通知公告
（5）广告图
（6）本科教学-党建信息
1.本科教学
2.党建信息
（7）友情链接
（8）底部
在这里插入图片描述

然后咱们对照着标注的尺寸颜色等等来添加样式（代码片在最下面）：
在这里插入图片描述

<!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>首页布局实战-搭建骨架</title>
    <style>
        .zhuYe{
            width: 1500px;/*设置宽度为1500px*/
            border: 1px solid red;/*粗细为1px的红色边框*/
            margin: auto;/*自适应居中*/
        }
        .head{
            width: 100%;/*取上级宽度*/
            margin-top: 43px;/*上外边距43px*/
            height: 91px;/*高度为91px*/
            background-color: aqua;/*背景色为指定颜色*/
        }
        .daoHang{
            margin-top: 31px;/*上外边距为31px*/
            width: 100%;/*取上级宽度*/
            height: 63px;/*高度为63px*/
            background-color: aquamarine;/*背景色取指定颜色*/
        }
        .lunBo{
            width: 100%;/*取上级宽度*/
            height: 375px;/*高度为375px*/
            background-color: aqua;/*背景色取指定颜色*/
        }
        .xinWen-gongGao{
            margin-top: 18px;/*上外边距为18px*/
            width: 100%;/*取上级宽度*/
            height: 360px;/*高度为360px*/
            background-color: aquamarine;/*背景色取指定颜色*/
            display: flex;/*定义为弹性盒子布局（弹性盒子默认为水平排序而非垂直排序）*/
        }
        .xinWen{
            width: 976px;/*指定宽度为976px*/
            height: 100%;/*取上级高度*/
            background-color: antiquewhite;/*背景色取指定颜色*/
        }
        .gongGao{
            margin-left: 25px;/*左外边距为25px*/
            width: 500px;/*指定宽度为500px*/
            height: 100%;/*取上级高度*/
            background-color: antiquewhite;/*背景色取指定颜色*/
        }
        .guangGao{
            margin-top: 20px;/*上外边距为20px*/
            width: 100%;/*取上级宽度*/
            height: 119px;/*指定高度为119px*/
            background-color: aqua;/*背景色取指定颜色*/
        }
        .benKe-dangJian{
            margin-top: 19px;/*上外边距为20px*/
            width: 100%;/*取上级宽度*/
            height: 340px;/*指定高度为340px*/
            background-color: aquamarine;/*指定背景色*/
            display: flex;/*采用弹性盒子布局（弹性盒子默认为水平排序）*/
        }
        .benKe{
            height: 100%;/*取上级高度*/
            flex: 1;/*指定占弹性盒子比例为1*/
            background-color: antiquewhite;/*指定一个背景色*/
        }
        .dangJian{
            margin-left: 25px;/*左外边距为25px*/
            height: 100%;/*取上级高度*/
            flex:1;/*指定占弹性盒子比例为1（两个占比都相同就表示各占一半）*/
            background-color: antiquewhite;/*指定一个背景色*/
        }
        .lianJie{
            margin-top: 35px;/*上外边距为35px*/
            width: 100%;/*取上级宽度*/
            height: 133px;/*指定高度为133px*/
            background-color: aqua;/*指定背景色*/
        }
        .foot{
            width: 100%;/*取上级宽度*/
            height: 55px;/*指定高度为55px*/
            font-size: 15px;/*指定字体大小为15px*/
            color: #ffffff;/*指定字体颜色为白色*/
            background-color: #3778bc;/*指定背景色为蓝色*/
            text-align: center;/*水平居中*/
            line-height: 55px;/*指定行高为55px（用于使其垂直居中）*/
        }
    </style>
</head>
<body>
    <div class="zhuYe">
        <div class="head">头部</div>
        <div class="daoHang">导航栏</div>
        <div class="lunBo">轮播图</div>
        <div class="xinWen-gongGao">
            <div class="xinWen">新闻动态</div>
            <div class="gongGao">通知公告</div>
        </div>
        <div class="guangGao">广告图片</div>
        <div class="benKe-dangJian">
            <div class="benKe">本科教学</div>
            <div class="dangJian">党建信息</div>
        </div>
        <div class="lianJie">友情链接</div>
        <div class="foot">广西大学 计算机与电子信息学院 版权所有</div>
    </div>
</body>
</html>

至此，骨架就基本上完成啦~撒花~

努力的胡十一

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DIV+CSS布局实践-搭骨架

DIV+CSS布局实践-搭骨架像这样一个官网的样式，我们需要怎么样去搭建呢。首先要标注好每一块的尺寸，并不是说所有的尺寸都要标注，可以先分成几个大块来标注，大块的骨架搭建好了再优化细节：分了大块儿之后再挨个儿搭建细节，分的块儿有：1.整个主页（1）头部（2）导航菜单（3）轮播图（4）新闻动态-通知公告1.新闻动态2.通知公告（5）广告图（6）本科教学-党建信息1.本科教学2.党建信息（7）友情链接（8）底部然后咱们对照着标注的尺寸颜色等等来添加样式（代码片在最下面）：
复制链接

扫一扫