创建一个水平盒子java_盒子模型理解
HTML CSS + DIV实现整体布局
1、技术目标:
开发符合W3C标准的Web页面
理解盒子模型
实现DIV+CSS整体布局
2、什么是W3C标准?
W3C:World Wide Web Consortium,万维网联盟
W3C的职能:负责制定和维护Web行业标准
W3C标准包括一系列的标准:
HTML内容方面:XHTML
样式美化方面:CSS
结构文档访问方面:DOM
页面交互方面:ECMAScript
……等等
3、W3C倡导的Web结构要符合以下要求:
XHTML负责内容组织
CSS负责页面样式
4、符合W3C规范页面的结构:
Html代码
/p>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
charset=gb2312"/>
无标题文档
......页面内容部分
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
charset=gb2312" />
无标题文档
......页面内容部分
5、XHTML基本规范
标签名和属性名称必须小写
HTML标签必须关闭
属性值必须用引号括起来
标签必须正确嵌套
文档必须拥有一个根元素,所有的XHTML元素必须嵌套于根元素中
属性不能简写,如:
6、页面开发需要注意的地方:
不要使用淘汰的标签:、、等,可参考官方文档(http://www.w3c.org)
< img />标签的alt属性:为图片增加alt属性
样式和内容分离:将样式和结构分离,不使用行类样式
表单的name和id:表单及表单元素要求设置name和id属性
使用CSS + DIV布局
页面的浏览器兼容性
7、为什么需要盒子模型?
网页可以看成由一个个"盒子"组成,如图:
由上图可以看出,页面分为上(网站导航)、中、下(版权声明)三个部分,
中间部分又分为左(商品分类)、中(主要部分)、右,这些版块就像一个个
的盒子,这些"盒子"中放置着各种内容,页面就是由这些"盒子"拼凑起来
8、盒子模型的相关属性
margin(外边距/边界)
border(边框)
padding(内边距/填充 )
我们看图理解一下各属性作用:
以上属性又分为上、右、下、左四个方向
问题:页面元素的宽度width、高度height如何计算?
答案:元素的实际占位尺寸 = 元素尺寸 + padding + 边框宽度
比如:元素实际占位高度 = height属性 + 上下padding + 上下边框宽度
9、盒模型的层次关系
我们通过一个经典的盒模型3D立体结构图来理解,如图:
从上往下看,层次关系如下:
第1层:盒子的边框(border),
第2层:元素的内容(content)、内边距(padding)
第3层:背景图(background-image)
第4层:背景色(background-color)
第5层:盒子的外边距(margin)
从这个层次关系中可以看出,当同时设置背景图和背景色时,背景
图将在背景色的上方显示
10、margin外边距
可统一设置或四边分开设置,如图:
具体的设置可查看CSS帮助文档(页面下方提供下载)
11、水平居中和垂直居中
水平居中包含两种情况:
块级元素的水平居中:margin:0px auto;
文字内容的水平居中:text-align: center;
垂直居中:
常见的单行文字的垂直居中可设置文字所在行的height与
行高样式属性一致,比如:
div{
width: 400px;
height: 400px;
line-height: 400px;/*行高与div高度一致*/
}
12、案例的首页布局分析
只保留DIV的布局分析:
13、首页布局CSS + DIV代码分析
HTML结构代码:
CSS样式代码:
/*主面板样式*/
#container {
width:980px;
margin:0px auto;/*主面板DIV居中*/
}
/*顶部面板样式*/
#header {
width:100%;
height:150px;
border:1px #F00 solid;
}
/*中间部分面板样式*/
#main {
width:100%;
height:400px;
border:1px #F00 solid;
}
/*底部面板样式*/
#footer {
width:100%;
height:100px;
border:1px #F00 solid;
}
14、为什么需要float浮动属性?
我们来看看下图:
问题:如何让商品分类DIV、内容DIV和右侧DIV并排放置?
答案:使用float(浮动)样式
15、浮动属性
理解浮动属性首先要搞清楚,什么是文档流?
文档流:浏览器根据元素在html文档中出现的顺序,
从左向右,从上到下依次排列
浮动属性是CSS中的定位属性,用法如下:
float: 浮动方向(left、right、none);
left为左浮动、right为右浮动、none是默认值表示不浮动
,设置元素的浮动,该元素将脱离文档流,向左或向右移动
直到它的外边距碰到父元素的边框或另一个浮动元素的边
框为止
浮动示例,没有使用浮动的3个DIV:
HTML结构代码:
CSS样式代码:
#first, #second, #third{
width:100px;
height:50px;
border:1px #333 solid;
margin:5px;
}
执行效果如图:
样式中加入 float:left;
执行效果如图:
你再修改为 float: right试试右浮动是什么效果
16、让商品分类DIV、内容DIV和右侧DIV并排放置
HTML结构代码:
Java代码
CSS样式代码(在第13节CSS代码基础上加入):
.cat, .sidebar {
float:left;
width:20%;
height:100%;
}
.content {
float:left;
width:60%;
height:100%;
}
17、clear清除
clear只对块级元素有效,表示如果前一个元素存在左浮动或右浮动,则换行
clear属性的取值:rigth、left、both、none
18、总结
盒子模型有哪些属性?各属性又分别包含哪些属性?
float属性的应用场合?有哪些取值?
clear属性的应用场合?有哪些取值?
创建一个水平盒子java_盒子模型理解相关推荐
- 【小白学习PyTorch教程】十五、BERT:通过PyTorch来创建一个文本分类的Bert模型
@Author:Runsen 2018 年,谷歌发表了一篇题为<Pre-training of deep bidirectional Transformers for Language Unde ...
- 创建一个水平盒子java_你了解如何比较两个对象吗
文章目录 一,关于对象值相等的比较 1, == VS equals p == q 表示的是 p 和 q 两个引用指向同一个对象 p.equals(q) 表示 p 指向的对象 和 q 指向的对象是否是值 ...
- CMU创建一个开源的AI代码生成模型,C语言表现优于Codex
来源:机器之心 本文约2400字,建议阅读5分钟 CMU 对现有开源和未开源的 AI 代码生成模型进行了全面深入的系统性评估,并分析了它们在 C.C++.Python 等 12 中不同编程语言中的代码 ...
- 创建一个动物类 java_使用java面向对象创建动物类并输出动物信息
题目: 使用java面向对象创建动物类并输出动物信息 gitup下载地址: https://github.com/benxiaohai8888/Javase/blob/master/Animal.ja ...
- 练习:使用经验贝叶斯克里金插值(EBK)来插入地震震动强度的地图,在日本创建一个震动强度的面
练习:使用经验贝叶斯克里金插值(EBK)来插入地震震动强度的地图,在日本创建一个震动强度的面. 作为ArcGIS地统计分析扩展的一部分,EBK是一种地统计插值方法,它使用概率技术来量化与插值相关的不确 ...
- 如何创建一个数据科学项目?
摘要: 在一个新的数据科学项目,你应该如何组织你的项目流程?数据和代码要放在那里?应该使用什么工具?在对数据处理之前,需要考虑哪些方面?读完本文,会让你拥有一个更加科学的工作流程. 假如你想要开始一个 ...
- 如何创建一个数据科学项目? 1
假如你想要开始一个新的数据科学项目,比如对数据集进行简单的分析,或者是一个复杂的项目.你应该如何组织你的项目流程?数据和代码要放在那里?应该使用什么工具?在对数据处理之前,需要考虑哪些方面? 数据科学 ...
- 抱抱脸(hugging face)教程-中文翻译-创建一个自定义架构
创建一个自定义架构 AutoClass 自动推导模型架构,并下载预先训练的配置和权重.通常,我们建议使用 AutoClass 生成与检查点无关的代码.但是,想要更多地控制特定模型参数的用户可以从几个基 ...
- [原创] OneThink模型管理详解-10分钟创建一个团队管理后台
本文为原创,根据自己在使用onethink创建web应用时的真实经历撰写而成.请支持本人版权,转载时注明出处.仅为经验分享,不代表权威,不完善不准确之处欢迎纠正,有任何问题可对本文留言. 1.1.1 ...
最新文章
- Python数据结构与算法(第三天)
- vue中组件在不同页面中渲染出错
- Spring管理的Hibernate事件监听器
- 从0到1写RT-Thread内核——支持多优先级
- 使用numpy实现神经网络模块
- 18 计量单位xx未对语言xx定义/在语言xx中没有维护短文本
- oracle 日期改字符格式,如何在oracle10g中将字符串日期转换为日期格式
- linux lsattr命令: 显示文件属性
- C#图解教程(第4版)
- 强大的 function adapters
- TypeError: unorderable types: str() = int()
- php redis高并发秒杀超卖解决测试
- 城域容灾体系的突破性进展
- SAP 常用系统函数
- mysql创建索引视图_mysql中创建视图、索引
- 华为云学院-人人学loT学习笔记及扩展- 第一章 初识物联网
- 终极指南 | 干了这篇收心文,从入门到精通手把手教你写出最牛白皮书!
- Flutter 中的应用内购买
- 找出数组中的最大数和最小数
- webshell提权宝典