教育资源为主的文档平台

当前位置: 查字典文档网> 所有文档分类> 高等教育> 文学> HTML笔记

HTML笔记

上传者:孙承启
|
上传时间:2015-04-15
|
次下载

HTML笔记

学习笔记

? 块元素和行内元素

行内元素:(inline element),特点是只占内容的宽度,默认不会换行。行内元素一般放文本或者其他的行内元素。

块元素:(block element),特点不管内容多少,他要换行,同时占满整行,可以放文本,行内元素,块元素。

<span class="s1">span1 hello,world</span>

<span class="s1">span1 hello,world</span>

<span class="s1">span1 hello,world</span>

<div class="s2">div1</div>

<div class="s2">div2</div>

一些css属性对行内元素不生效,比如margin,left,right,width,height。建议尽可能使用块元素定位。(与浏览器版本和类型有关)

? 块元素和行内元素的转换

如果我们希望一个元素按照块元素方式显示:

则:style="display: block;"

如果我们希望一个元素按照行内元素方式显示:

则:style="display: inline;"

? CSS的标准流和非标准流

标准流,在网页布局中,写在前面的元素,出现在前面,后面的元素,出现在后面,这是默认的布局方式,也称为标准流。

非标准流:在实际网页布局中,我们可能需要使用非标准流的方式来布局,(让某个元素,脱离它本身的位置)

? 盒子模型

细节说明:

1. html元素都可以看成一个盒子。

2. 盒子模型的参照物不一样,则使用的css属性不一样,比如从div1的角度看,是

margin-right,从div2看,则是margin-left。

3. 如果不希望破坏外观,则尽量使用margin来布局,因为padding可能会改变盒子的

大小。(相当于这个盒子有弹性),margin如果过大,盒子内容会挤出去。

详细图:

内容需要下载文档才能查看

学习笔记

练习题:

盒子模型的综合案例(可以当做一个模板使用)

.Html

<body>

<div class="div1">

<ul class="faceul">

<li><img class="img" alt="" src="opera.jpg"/><a href="#">car</a></li>

内容需要下载文档才能查看 内容需要下载文档才能查看 内容需要下载文档才能查看

学习笔记

<li><img class="img" alt="" src="opera.jpg"/></li> <li><img class="img" alt="" src="opera.jpg"/></li> <li><img class="img" alt="" src="opera.jpg"/></li> <li><img class="img" alt="" src="opera.jpg"/></li> <li><img class="img" alt="" src="opera.jpg"/></li> <li><img class="img" alt="" src="opera.jpg"/></li> <li><img class="img" alt="" src="opera.jpg"/></li> </ul>

</div>

</body>

.Css

.div1{

}

body{

} 用于控制显示图片区域的宽度和高度*/

.faceul{

}

/*这个用于控制单个图片区域的大小*/

.faceul li{

}

.img{

width:45px; width:60px; height: 72px; border: 1px solid blue; float:left; margin-top: 5px; margin-left: 5px; width: 230px; height: 470px; border: 1px solid red; list-style-type: none; padding: 0; margin-left: 100px; margin:0; padding: 0; width: 500px; height: 500px; border:1px solid #b4b4b4; margin-left: 100px; margin-top: 20px;

学习笔记

} height: 45px; margin-left: 7px; margin-top: 4px;

.faceul a{

font-size: 12pt; margin-left: 7px; margin-bottom: 4px;

}

? 浮动

<div class=”div3”>

<div id=”div2” class=”div1”>div1</div>

<div class=”div1”>div2</div>

<div class=”div1”>div3</div>

</div>

.div1{

Width:150px;

Height:100px;

Border:1px solid blue;

Backgroung-color:pink;

}

#div2{

Float:right; /*右浮动:是指让该元素,尽量向右边移动,直到碰到他的父元素的右边界*/ }

Float:left;左浮动:是指让该元素,尽量向左边移动,直到碰到前一个元素的边框。 .div3{

Width:600px;

Height:600px;

Border:1px solid green;

}

内容需要下载文档才能查看

学习笔记

? CSS-核心内容 定位

相对定位:

内容需要下载文档才能查看 内容需要下载文档才能查看 内容需要下载文档才能查看

版权声明:此文档由查字典文档网用户提供,如用于商业用途请与作者联系,查字典文档网保持最终解释权!

下载文档

热门试卷

2016年四川省内江市中考化学试卷
广西钦州市高新区2017届高三11月月考政治试卷
浙江省湖州市2016-2017学年高一上学期期中考试政治试卷
浙江省湖州市2016-2017学年高二上学期期中考试政治试卷
辽宁省铁岭市协作体2017届高三上学期第三次联考政治试卷
广西钦州市钦州港区2016-2017学年高二11月月考政治试卷
广西钦州市钦州港区2017届高三11月月考政治试卷
广西钦州市钦州港区2016-2017学年高一11月月考政治试卷
广西钦州市高新区2016-2017学年高二11月月考政治试卷
广西钦州市高新区2016-2017学年高一11月月考政治试卷
山东省滨州市三校2017届第一学期阶段测试初三英语试题
四川省成都七中2017届高三一诊模拟考试文科综合试卷
2017届普通高等学校招生全国统一考试模拟试题(附答案)
重庆市永川中学高2017级上期12月月考语文试题
江西宜春三中2017届高三第一学期第二次月考文科综合试题
内蒙古赤峰二中2017届高三上学期第三次月考英语试题
2017年六年级(上)数学期末考试卷
2017人教版小学英语三年级上期末笔试题
江苏省常州西藏民族中学2016-2017学年九年级思想品德第一学期第二次阶段测试试卷
重庆市九龙坡区七校2016-2017学年上期八年级素质测查(二)语文学科试题卷
江苏省无锡市钱桥中学2016年12月八年级语文阶段性测试卷
江苏省无锡市钱桥中学2016-2017学年七年级英语12月阶段检测试卷
山东省邹城市第八中学2016-2017学年八年级12月物理第4章试题(无答案)
【人教版】河北省2015-2016学年度九年级上期末语文试题卷(附答案)
四川省简阳市阳安中学2016年12月高二月考英语试卷
四川省成都龙泉中学高三上学期2016年12月月考试题文科综合能力测试
安徽省滁州中学2016—2017学年度第一学期12月月考​高三英语试卷
山东省武城县第二中学2016.12高一年级上学期第二次月考历史试题(必修一第四、五单元)
福建省四地六校联考2016-2017学年上学期第三次月考高三化学试卷
甘肃省武威第二十三中学2016—2017学年度八年级第一学期12月月考生物试卷

网友关注

2009中国网络游戏市场研究报告
对知识产权案件在审判中有关证据问题的调研[权威资料]
石河子大学校内外餐饮市场现状分析及预测调研报告
生物制药是具有高成长性行业
强化统计基层基础建设调研报告-免费文秘网-免费公文网
分析我国制药机械企业的七大完美蜕变
基层法院服务新农村建设情况调研报告
国家能源局关于公布创建新能源示范城市(产业园区)名单(第一批)的通知
[整理版]中国石油化工股份无限公司江西石油分公司
黄山区人民法院基层基础工作综合调研报告
新能源汽车驱动电机控制系统研发与产业化建议书(可编辑)
司法局践行科学发展观加强基层调解工作调研报告-免费文秘网-免费公文网
高校科系和专业设置与录取分数线的分析
电子信息产业缓慢回升
市场开发与营销2班学生手机需求情况调查问卷
警察职业变 革与警察教育——英国现代警察教育的形成与演变
制药机械行业市场研究报告(二)
基层法院党组织调研报告
小学科技教育(生物与环保)
办公室科学发展观调研报告-免费文秘网-免费公文网
农村基层消费维权状况调研分析-免费文秘网-免费公文网
建设复合型内审干部队伍调研对策-免费文秘网-免费公文网
关于广电总局:每集电视剧不得以任何形式插播广告的调查报告
独立学院校园文化误区研究
2011年中国平板电脑用户需求和应用调查报告
高校图书馆与校园文化之构建
中国旅游休闲类网站动态监测与发展前景预测报告(2011-2015年)
制药企业价值诉求与国家药物政策研究
区非公有制企业劳资矛盾基本情况分析_调研报告
Pspice Schematics

网友关注视频

人教版历史八年级下册第一课《中华人民共和国成立》
七年级英语下册 上海牛津版 Unit3
冀教版小学英语四年级下册Lesson2授课视频
3月2日小学二年级数学下册(数一数)
外研版英语三起5年级下册(14版)Module3 Unit1
外研版八年级英语下学期 Module3
沪教版牛津小学英语(深圳用) 四年级下册 Unit 8
苏科版八年级数学下册7.2《统计图的选用》
《空中课堂》二年级下册 数学第一单元第1课时
外研版英语七年级下册module3 unit2第二课时
二年级下册数学第三课 搭一搭⚖⚖
沪教版八年级下册数学练习册21.4(1)无理方程P18
【部编】人教版语文七年级下册《泊秦淮》优质课教学视频+PPT课件+教案,天津市
第五单元 民族艺术的瑰宝_15. 多姿多彩的民族服饰_第二课时(市一等奖)(岭南版六年级上册)_T129830
化学九年级下册全册同步 人教版 第22集 酸和碱的中和反应(一)
【部编】人教版语文七年级下册《逢入京使》优质课教学视频+PPT课件+教案,安徽省
【部编】人教版语文七年级下册《逢入京使》优质课教学视频+PPT课件+教案,辽宁省
【部编】人教版语文七年级下册《泊秦淮》优质课教学视频+PPT课件+教案,辽宁省
8.练习八_第一课时(特等奖)(苏教版三年级上册)_T142692
冀教版小学数学二年级下册第二单元《有余数除法的整理与复习》
外研版英语三起6年级下册(14版)Module3 Unit1
化学九年级下册全册同步 人教版 第25集 生活中常见的盐(二)
第五单元 民族艺术的瑰宝_16. 形形色色的民族乐器_第一课时(岭南版六年级上册)_T3751175
沪教版八年级下册数学练习册21.3(2)分式方程P15
冀教版小学数学二年级下册第二单元《有余数除法的简单应用》
【部编】人教版语文七年级下册《过松源晨炊漆公店(其五)》优质课教学视频+PPT课件+教案,辽宁省
【部编】人教版语文七年级下册《老山界》优质课教学视频+PPT课件+教案,安徽省
冀教版英语三年级下册第二课
【部编】人教版语文七年级下册《老山界》优质课教学视频+PPT课件+教案,安徽省
河南省名校课堂七年级下册英语第一课(2020年2月10日)