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; 过渡