1------------------------------------------------------------------------------------
前兩節(jié)課學習的內容
/行內元素/塊級元素/
/行內元素：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>區(qū)域固定在頁面底端 */bottom:0px; width:100%;height:-webkit-calc(100% - 50px);height:-moz-calc(100% - 50px);height:calc(100% - 50px);z-index:-1;overflow:hidden; /* 溢出部分隱藏，防止出現(xiàn)第二個滾動條 */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="#">學習區(qū)</a><ul class="dropDowm-content"><li><a href="https://www.runoob.com/try/try.php?filename=tryhtml_iframe_height">海軍區(qū)</a></li><li><a href="https://www.runoob.com/try/try.php?filename=tryhtml_iframe_height">空軍區(qū)</a></li><li><a href="https://www.runoob.com/try/try.php?filename=tryhtml_iframe_height">陸軍區(qū)</a></li><li><a href="https://www.runoob.com/try/try.php?filename=tryhtml_iframe_height">特種部隊區(qū)</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 屬性規(guī)定元素應該生成的框的類型
1、none 此元素不會被顯示。
2、block 此元素將顯示為塊級元素，此元素前后會帶有換行符
3、inline 默認。此元素會被顯示為內聯(lián)元素，元素前后沒有換行符。
4、inline-block 行內塊元素。

寫了二級菜單 我看教程的話詳細網(wǎng)址是看了這篇大神的文章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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。