一个没什么特色的DIV+CSS布局，求指正

最新推荐文章于 2024-08-15 15:20:23 发布

白夜通行

最新推荐文章于 2024-08-15 15:20:23 发布

阅读量241

点赞数

分类专栏：学习中文章标签： HTML css 布局

本文链接：https://blog.csdn.net/lin_zhaozhi/article/details/47660177

版权

学习中专栏收录该内容

1 篇文章 0 订阅

订阅专栏

早上在看JS高级程序设计，看的头蒙蒙的（捂脸），然后就跑回宿舍，不想看书所以偷懒之余写了这么一个没什么特色的布局，求各位看官多多指正，求嘲笑求打脸求侮辱啊（(～￣▽￣)～然而我还是臭不要脸的把它发出来了）。。。。。下面是源码和效果（第一次上传代码好激动~~）：

HTML：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>页面布局-纵向</title>
    <link rel="stylesheet" type="text/css" href="pagebuju1style.css" />
</head>
<body>
<div id="box">
    <div id="top"></div>
    <div id="left"></div>
    <div id="right"></div>
    <div id="zhong">
        <div id="zhong1" class="zhong1"></div>
        <div id="zhong2" class="zhong3"></div>
        <div id="zhong3" class="zhong1"></div>
        <div id="zhong4" class="zhong3"></div>
    </div>
    <div id="bottom"></div>
</div>

</body>
</html>

CSS代码：

div{
    border: 10px solid black;
    margin: 10px;
}

body,html{
    margin:auto;
    padding: auto;
}
#box{
    width: 800px;
    height: 750px;
    margin: auto;
    background-color: #2561b4;
}

#top{
    width: 760px;
    height: 80px;
    background-color:#c4c4c4;
}

#left{
    width: 360px;
    height: 100px;
    float: left;
    background-color:#c4c4c4;
}

#right{
    width: 360px;
    height: 100px;
    float: right;
    background-color:#c4c4c4;
}

#zhong{
    width: 760px;
    height: 320px;
    clear: both;
    background-color:#c4c4c4;
}

.zhong1{
    width: 320px;
    height: 110px;
    float: left;
    margin: 12px 20px;
    background-color: #2ea2cd;
}

.zhong3{
    width: 320px;
    height: 110px;
    float: right;
    margin: 12px 20px;
    background-color: #2ea2cd;
}

#bottom{
    width: 760px;
    height: 110px;
    background-color:#c4c4c4;
}

出来效果是这样的：

。。。。好像真没什么特色，但是还是希望各位大神多多指教啊，让我知道有什么不足的地方或者可以改进的地方（或者你觉得我写的简直是一坨翔也只说，我不会介意的╮(╯▽╰)╭）

白夜通行

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个没什么特色的DIV+CSS布局，求指正

早上在看JS高级程序设计，看的头蒙蒙的（捂脸），然后就跑回宿舍，不想看书所以偷懒之余写了这么一个没什么特色的布局，求各位看官多多指正，求嘲笑求打脸求侮辱啊（(～￣▽￣)～）。。。。。下面是源码和效果（第一次上传代码好激动~~）：HTML：页面布局-纵向
复制链接

扫一扫