css 盒子模型应用
盒子模型应用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>盒子模型应用</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} .top {
width: 100%;
height: 50px;
background-color: black;
} .top_content {
width: 75%;
height: 50px;
margin: 0px auto;
background-color: blue;
} .body {
margin: 20px auto;
width: 75%;
height: 1500px;
background-color: blanchedalmond;
} .body_img {
width: 100%;
height: 400px;
background-color: darkorange;
} .body_content {
width: 100%;
height: 111px;
background-color: blueviolet;
} .body_no {
width: 100%;
height: 50px;
background-color: aqua;
} .footing {
width: 75%;
height: 400px;
background-color: indigo;
margin: 0px auto;
} .footing_content {
width: 100%;
height: 330px;
background-color: darkseagreen;
} .footing_subnav {
width: 100%;
height: 70px;
background-color: black;
}
</style>
</head>
<body>
<div class="top">
<div class="top_content">
</div>
</div>
<div class="body">
<div class="body_img"></div>
<div class="body_content">
<div class="body_no"></div>
</div>
</div>
<div class="footing">
<div class="footing_content"> </div>
<div class="footing_subnav"> </div>
</div>
</body>
</html>
css 盒子模型应用的更多相关文章
- 深入理解CSS盒子模型
在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...
- CSS盒子模型的理解
标准的CSS盒子模型包括:内容(content).填充(padding).边框(border).边界(margin) 这些属性,可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子 ...
- 每天学点前端——基础篇1:css盒子模型,绝对定位和相对定位
什么是css盒子模型(Box Model)? W3C中解释为:规定了元素框处理元素内容.内边距.边框和外边距的方式: MDN:文档中的每个元素被描绘为矩形盒子.渲染引擎的目的就是判定大小,属性--比如 ...
- CSS 盒子模型概述
一.简介 CSS 盒子模型(元素框)由元素内容(content).内边距(padding).边框(border).外边距(margin)组成. 盒子模型,最里面的部分是实际内容:直接包围内 ...
- 标准的CSS盒子模型?与低版本IE的盒子模型有什么不同的?
CSS盒子模型:由四个属性组成的外边距(margin).内边距(padding).边界(border).内容区(width和height); 标准的CSS盒子模型和低端IE CSS盒子模型不同:宽高不 ...
- 理解CSS盒子模型
概述 网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin),CSS盒子模型都具备这些属性,也主要是这些属性. 这些属性我们可以把它转移到我 ...
- 几个容易出错的css盒子模型细节
css是前端必须掌握的技能之一.其中的box模型,如图所示: 大体就是border.margin.padding和content,概念挺好理解.但当盒子模型与其他属性一块使用时产生的现象,或许您还难以 ...
- <转>HTML+CSS总结/深入理解CSS盒子模型
原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...
- 聊聊css盒子模型
css盒子模型原理: 在网页设计中常听的属性名:内容(content).填充/内边距(padding).边框(border).外边距(margin), CSS盒子模式都具备这些属性. 这些属性我们可以 ...
- css 盒子模型理解
盒子模型是html+css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.下面是自己积累和总结的关于css盒子模型的知识^_^,希望对初学者有用. 一.css盒子模型概念 CSS ...
随机推荐
- ASP.NET Core搭建多层网站架构【10-使用JWT进行授权验证】
2020/01/31, ASP.NET Core 3.1, VS2019, Microsoft.AspNetCore.Authentication.JwtBearer 3.1.1 摘要:基于ASP.N ...
- Centos7 将应用添加快捷方式到applications 中以pycham为例[ubuntu]适用
安装版本pycharm-2019.1.3 安装路径:/opt/pycharm-2019.1.3/ vim /usr/share/applications/pycharm.desktop #!/usr/ ...
- Flask, Django - 区别,个人体会
1. 目录结构 一般情况下,Django很系统.统一.Flask项目目录风格不同一,即使用上了蓝图. 2. 数据库迁移 Flask要用第三方extensions,而Django自带,这个很方便. 3. ...
- Web Storage API:localStorage 和 SessionStorage
Web Storage API 提供了存储机制,通过该机制,浏览器可以安全地存储键值对,比使用 cookie 更加直观. 参考:https://developer.mozilla.org/zh-CN/ ...
- 《开课》---创业学习--训练营直播第一课--HHR
1,分享三点:敬畏心,学习过程,带着目标学习. 2,融资是个非常专业的技术活. 3,一定不要盲目自信,在资本市场,融资永远是个小概率事件. 4,学习过程:每周解锁学习资料,固定的时间来进行作业答疑. ...
- 手把手教你使用Hexo+GitHub搭建自己的个人博客网站
安装nodejs环境 这个直接搜索安装即可,安装完成之后,通过如下命令检测环境变量是否安装成功: λ node -v # 输出版本号 v12.13.1 正确输入版本号即可. 安装cnpm cnpm是淘 ...
- PyQt5中Web操作与多线程定时器
1.装载外部网页页面'''用web浏览器控件QWebEngineView控件显示网页PyQt5和Web的交互技术 同时使用python和Web开发程序,混合开发 Python+JavaScript+H ...
- 在tomcat启动时解析xml文件,获取特定标签的属性值,并将属性值设置到静态变量里
这里以解析hibernate.cfg.xml数据库配置信息为例,运用dom4j的解析方式来解析xml文件. 1.在javaWeb工程里新建一个java类,命名为GetXmlValue.java,为xm ...
- MariaDB-Galera部署
Galera Cluster:集成了Galera插件的MySQL集群,是一种新型的,数据不共享的,高度冗余的高可用方案,目前Galera Cluster有两个版本,分别是Percona Xtradb ...
- floyd的魔改应用——洛谷P2419 [USACO08JAN]牛大赛Cow Contest 题解
想找原题请点击这里:传送门 原题: 题目背景 [Usaco2008 Jan] 题目描述 N ( ≤ N ≤ ) cows, conveniently numbered ..N, are partici ...