2019.9.6HTML5学习心得02

1------------------------------------------------------------------------------------
前两节课学习的内容
/行内元素/塊級元素/
/行内元素：input/a/
/像a/span等行内元素不能设置宽高/
/块级元素：div/ul/li/ol/p/form/table/
/display：none/block/inline/inline-block/
这是写css的样式

body{margin: 0;padding: 0;}#topMemu{z-index:1;width:100%;height:50px;background-color: #eeeeee;}#topMemu ul{margin: 0; /* 去除外边距，使其能够紧贴<div>边缘 */padding: 0; /* 去除内边距，使其能够紧贴<div>边缘 */list-style-type: none;  /* 去除无序列表的标识符 */}#main{position:absolute;  /* 这个定位是为了让这个<div>区域固定在页面底端 */bottom:0px; width:100%;height:-webkit-calc(100% - 50px);height:-moz-calc(100% - 50px);height:calc(100% - 50px);z-index:-1;overflow:hidden;    /* 溢出部分隐藏，防止出现第二个滚动条 */background-color:#565656;}li{float: left;background-color:#000000 ;text-align: center;width:150px;border-right:2px solid #FFFFFF;}a{display: block;text-decoration: none;line-height: 50px;color:#FFFFFF;}.dropDowm-content{display: none;}.dropDowm:hover>ul{display: list-item;}/* 修改<div class="header">中，鼠标放在<li>标签上时的样式 */div#topMemu li:hover{background-color:rosybrown ;}li:hover>a{color:#000000;}.dropDowm-content li{border-right:transparent;    /* 去除在一级菜单中设置的用于分隔标签的边框 */width:200px;        /* 设置指定宽度，保证所有选项宽度一致 */text-align:left;    /* 下拉列表的文字对齐方式为左对齐，不使用横向列表的居中属性 */padding-left:20px;  /* 设置左侧内边距偏移，不让它紧贴边缘 */}/*这是想设置颜色，但是办不到*/div#topMemu li#zhonghua:hover{background-color: red;}iframe{width:100%;height:100%;border:none;}

这是我写的html样式

     <div id="topMemu"><ul><li class="dropDowm"><a href="#" id="zhonghua">壮哉我大中华</a><ul class="dropDowm-content"><li><a href="https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fr=aladdin">轰20词条</a></li><li><a href="https://baike.baidu.com/item/%E8%BD%B0-20">歼20词条</a></li><li><a href="https://baike.baidu.com/item/99A%E4%B8%BB%E6%88%98%E5%9D%A6%E5%85%8B">99A坦克</a></li><li><a href="https://baike.baidu.com/item/%E8%BE%BD%E5%AE%81%E5%8F%B7%E8%88%AA%E7%A9%BA%E6%AF%8D%E8%88%B0">辽宁号航母</a></li></ul></li><li class="dropDowm"><a href="#">哔哩哔哩</a><ul class="dropDowm-content"><li><a href="https://www.bilibili.com/video/av17443414">我的视频</a></li><li><a href="https://www.bilibili.com/video/av58108763?spm_id_from=333.334.b_62696c695f6d75736963.4">动画</a></li><li><a href="https://www.bilibili.com/anime/?spm_id_from=333.334.b_62696c695f62616e67756d69.2">番剧</a></li><li><a href="https://www.bilibili.com/video/av66594338/?spm_id_from=333.334.b_686f6d655f706f70756c6172697a65.3">鬼畜</a></li></ul></li><li class="dropDowm"><a href="#">学习区</a><ul class="dropDowm-content"><li><a href="https://www.runoob.com/try/try.php?filename=tryhtml_iframe_height">海军区</a></li><li><a href="https://www.runoob.com/try/try.php?filename=tryhtml_iframe_height">空军区</a></li><li><a href="https://www.runoob.com/try/try.php?filename=tryhtml_iframe_height">陆军区</a></li><li><a href="https://www.runoob.com/try/try.php?filename=tryhtml_iframe_height">特种部队区</a></li></ul></li><li class="dropDowm"><a href="#">可爱动物</a><ul class="dropDowm-content"><li><a href="https://baike.so.com/doc/5340053-5575496.html">狗狗</a></li><li><a href="https://baike.so.com/doc/1975803-2090971.html">小猫</a></li><li><a href="https://baike.so.com/doc/5352844-5588302.html">臭猪</a></li><li><a href="https://baike.so.com/doc/4824589-5041269.html">羊驼</a></li></ul></li></ul></div><div id="main"><iframe name="isFrame"></iframe></div>

display 属性规定元素应该生成的框的类型
1、none 此元素不会被显示。
2、block 此元素将显示为块级元素，此元素前后会带有换行符
3、inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
4、inline-block 行内块元素。

写了二级菜单我看教程的话详细网址是看了这篇大神的文章https://www.cnblogs.com/cwsb/p/10190538.html
2------------------------------------------------------------------------------------------
其次上课开始讲盒子模型了

/盒模型：width、height、border、margin、padding/

width设置宽度
:100px / 100% / calc(100% - 50)等三种写法

height设置高:
100px / 100% / calc(100% - 50)等三种写法

border设置边框样式：
dashed dotted solid

margin是盒子与盒子之间的距离：
20px;

padding是盒子与边框的距离：
5px;四个方向一样
20px 10px 上下
10px 20px 30px 上左右下
10px 20px 30px 40px 上右下左

3-----------------------------------------------------------------------------------------------------------
Float浮动
float:right;右浮动
float:left;左浮动

1、包裹性
2、向上性
3、不重叠

4---------------------------------------------------------------------------------------------------------
定位（position）

position:fixed; 固定定位
position:relative;相对定位：相对于该元素因该在的位置定位
position:absolute;绝对定位：相对于该元素有定位属性的父元素去定位，如果父元素都没定位属性，相对于body定位。
position:static;不定位
css的演示
.goTop{ width: 30px; height:30px; border:1px solid #ccc; background-color: #fff; color: blue; position: fixed; right:0; top:300px; font-size:20px; text-align: center; line-height: 30px; }

html5的代码块`

     <div class="goTop">^</div>

效果如图

5------------------------------------------------------------------------------------------------------------
其他的介绍
background-color: rgba(0,0,255,0.5);
opacity:0.5; 不透明度
transition:1s; 过渡

2019.9.6HTML5学习心得02相关推荐

Linux同步自己的配置,Linux学习心得之——Rsync同步配置
Linux学习心得之--Rsync同步配置 1 使用软件类unix系统下的数据镜像备份工具:rsync. 2 安装说明 2.1 获取rsync 下载最新版本的rsync-3.0.8.tar.gz 2 ...
Java异常学习心得
2019独角兽企业重金招聘Python工程师标准>>> Java异常学习心得本文重在Java中异常机制的一些概念.写本文的目的在于方便我很长时间后若是忘了这 ...
我的MYSQL学习心得（4）：数据类型
我的MYSQL学习心得(1) :简单语法我的MYSQL学习心得(2) :数据类型宽度我的MYSQL学习心得(3) : 查看字段长度 MYSQL里的BLOB数据类型 BLOB是一个二进制大对象,用来 ...
统计学习方法第一章学习心得
统计学习方法第一章学习心得以下可能有不当之处,请各位朋友停步指正,先谢过各位. 上一帖子说道,统计学习方法的三要素: 模型.策略.算法. 模型:模型的假设空间策略:模型的选择准则,即:定义最优 ...
计算机桌面设计总结及体会,计算机基础学习心得
计算机基础学习心得相关内容: 计算机硬件是指计算机系统中由电子,机械和光电元件等组成的各种物理装置的总称.下面是第一范文网带来的计算机硬件实习心得体会,欢迎欣赏.计算机硬件实习心得体会一:一.实习目 ...
Internet路由结构学习心得二：通告汇聚和具体路由影响AS入流量
如图所示.你是R1.R2.R3所在的AS 123的网管,R3所在的子公司需要大量对AS 5中的R5所在ISP进行访问,因此在它们之间连接了一条网段为36.0.0.0/24的网段.要求:除了R3与R5之 ...
写学习心得，赢华为P30、漫步者音响！
为了更好的增强IT行业交流氛围,促进学员与小码哥教育之间的沟通:庆祝<恋上数据结构与算法>的"大麦",同时为提前庆祝小码哥4周年,小码哥教育正式对外开展有奖征文比赛活动 ...
一次公司培训后的学习心得
一次公司培训后的学习心得这篇培训心得写于2019年9月.当时公司组织一批人参加了一个三天两夜的封闭培训,培训机构是一家叫做大脑银行的公司,当时一起受训的人员超过千人. 培训,大家都懂得,一群人听一个 ...
《麦肯锡笔记思考法》初步学习心得
<麦肯锡笔记思考法>初步学习心得) 01 今天在得到app中听到了一个知识新闻,讲解的是<麦肯锡的笔记思考法>.得到用了两分钟的时间提炼了作者的关于笔记思考的心得,我日常听的是 ...

2019.9.6HTML5学习心得02

2019.9.6HTML5学习心得02相关推荐

最新文章

热门文章