CSS之盒子通栏写法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>盒子通栏写法</title><style>*{margin: 0;padding: 0;}.top,.banner,.main,.footer{margin: auto;}.top{height: 80px;background-color: red;}.top-son{width: 900px;height: 80px;background-color: aquamarine;margin: auto;}.banner{width: 900px;height: 150px;background-color: blue;}.banner li{float: left;width: 217px;height: 150px;margin-right: 10px;list-style: none;}.one{background-color: blueviolet;}.three{background-color: cadetblue;}.two{background-color: bisque;}li.four{background-color: brown;margin-right: 0;float: right;}.main{width: 900px;height: 500px;background-color: #eeeeee;}.left{width: 300px;height: 500px;float: left;background-color: coral;}.right{width: 600px;height: 500px;float: left;background-color: cornflowerblue;}.footer{width: 900px;height: 100px;background-color: black;}</style>
</head>
<body>
<div class="top"><div class="top-son" ></div>
</div>
<div class="banner"><ul><li class="one">1</li><li class="two">2</li><li class="three">3</li><li class="four">4</li></ul>
</div>
<div class="main"><div class="left"></div><div class="right"></div>
</div>
<div class="footer">footer</div>
</body>
</html>

转载于:https://www.cnblogs.com/axianz/articles/10660948.html

CSS之盒子通栏写法相关推荐

css 弹性盒子兼容写法,弹性布局flex 兼容写法
兼容浏览器版本 Chrome 21+ Opera 12.1+ Firefox 22+ Safari 6.1+ IE 10+ 浏览器对最新flexbox规范的支持情况: Chrome 29+ Firef ...
CSS基础——盒子模型【学习笔记】
盒子模型(Box Model) 所谓盒子模型: 就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器. 盒子模型有元素的内容.边框(border).内边距(padding).和 ...
【玩转CSS】盒子模型
?? 信仰:一个人走得远了,就会忘记自己为了什么而出发,希望你可以不忘初心,不要随波逐流,一直走下去 ?? 欢迎关注??点赞??收藏??留言?? ?? 本文由原创,CSDN首发! ?? 系列专栏:H ...
CSS (3) | 盒子
目录 1 盒子模型 1.1 看透页面布局本质 1.2 盒子模型(box model)组成 1.3 边框(border) 1.3.1 width 1.3.2 border-style 1.3.3 边框简 ...
CSS弹性盒子布局——flex布局的基本概念
<CSS弹性盒子布局--flex布局的基本概念> Flexible Box 模型,通常被称为 flexbox,是一种一维的布局模型.它给 flexbox 的子元素之间提供了强大的空间分布和 ...
0基础快速入门CSS技术栈（5）—图解详细阐述说透CSS的盒子模型（超级重要）、圆角边框、盒子阴影及相关重要的笔试题——css的核心中的核心（附详细案例源码解析过程）2021.01.07更新
文章目录 1. 盒子模型(CSS重点) 1.1 看透网页布局的本质 1.2 盒子模型(Box Model) 1.3 盒子边框(border) 1.3.1 边框综合设置 1.3.2 example01 ...
css规则的样式构成,Css 基本的规则写法
样式表的写法: css的语法由一些标志构成,就是一个基本的样式表由选择器,属性和属性值构成. Css有标准的写法规则标准的css写法: h1 { Font-family:黑体; } h1:表示选择符 ...
html盒子嵌套居中,css在盒子中垂直居中和固定居中
顶部固定居中我是固定的 .w960{ width: 960px; margin:0 auto; } .fixed{ position: absolute; top:0; left: 0; right ...
html盒子模型页面居中,【静态页面架构】CSS之盒子模型
CSS架构盒子模型: 以内容区(显示文本和图像) 内边距(内容区至边距的距离) 边距(内容区的边界) 外边距(元素的边框之间的距离) 1.边距: border属性: 简写属性用来设置边距的上(top ...

CSS之盒子通栏写法

CSS之盒子通栏写法相关推荐

最新文章

热门文章