《HTML5與CSS3基礎教程》學習筆記--ThreeDay_html/css_WEB-ITnose

來源：懂視網責編：小采時間：2020-11-27 16:24:04

《HTML5與CSS3基礎教程》學習筆記--ThreeDay_html/css_WEB-ITnose

《HTML5與CSS3基礎教程》學習筆記--ThreeDay_html/css_WEB-ITnose:第十一章 1、 box-sizing：border-box（讓寬度和高度包含內邊距和邊框） 2、 clear讓后面的元素顯示在浮動元素的后面 3、 z-index只對只對絕對、固定、相對定位的元素有效 4、 vertical-aligh只用于行內元素 baseline/middle/sub/sup

推薦度：

點擊下載本文 文檔為doc格式

導讀《HTML5與CSS3基礎教程》學習筆記--ThreeDay_html/css_WEB-ITnose:第十一章 1、 box-sizing：border-box（讓寬度和高度包含內邊距和邊框） 2、 clear讓后面的元素顯示在浮動元素的后面 3、 z-index只對只對絕對、固定、相對定位的元素有效 4、 vertical-aligh只用于行內元素 baseline/middle/sub/sup

第十一章

1、 box-sizing：border-box（讓寬度和高度包含內邊距和邊框）

2、 clear讓后面的元素顯示在浮動元素的后面

3、 z-index只對只對絕對、固定、相對定位的元素有效

4、 vertical-aligh只用于行內元素

baseline/middle/sub/super/text-top/text-bottom/top/bottom/百分比/值

第十二章

1、

and (min-width/max-width/resolution:value)” href=”” />

2、

第十三章

1、

 body{font-family:’ pt_sansregular’;}@font-face{ font-family: 'pt_sansregular';src: url('PTS55F-webfont.eot');src: url('PTS55F-webfont.eot?#iefix') format('embedded-opentype'),url('PTS55F-webfont.woff') format('woff'),url('PTS55F-webfont.ttf') format('truetype');font-weight: normal;font-style: normal;}

第十四章

1、漸變背景

1) 默認情況下，線性漸變是從上往下漸變的，因此在屬性值中不需要指定 to bottom

background: aqua;//要放在前面background: linear-gradient(to top right,blue,green);background: linear-gradient(90deg,blue,green);(起點：中上線)

2) 徑向漸變

/* 默認 */background: red;background: radial-gradient(yellow, red); background: radial-gradient(at top,yellow, red); background: radial-gradient(closest-side at 70px 60px, yellow, lime, red);background: radial-gradient(30px 30px at 65% 70%, yellow, lime, red)

2、元素設置不透明度

opacity:value

3、生成內容的效果

:before和：after.more:after {content: " »";}

4、使用sprite 拼合圖像

sprite 就是通過content:" "; 生成的空格的背景圖像。將其設置為display: block;，從而可以設置與圖標大小匹配的高度和寬度

.icon:before {background-image: url(sprite.png);content: " ";//-------------------------------------------------display: block;//height: 16px; /* 圖標高度 */position: absolute;width: 16px; /* 圖標寬度 */}a[href$=".xls"]:before {background-position: -17px 0;}a[href$=".docx"]:before {background-position: -34px 0;}

第十五章

1、自定義標記

ul{ list-style: none; margin-left: 0;padding-left: 0;}li{ background: url(../img/done_square.png) no-repeat 0 .1em; padding-left: 15px; line-height: 24px;}

2、選擇列表的起始編號

1) 整個列表編碼初始值ol里面增加start=”n”

2) 修改有序列表某個列表編碼，影響接下來的列表，在li里面增加value=”n”

3、控制標記的位置

list-style-position=”inside/outside(默認)”

4、下拉式導航

HTML:

 Home
 Products 
Phones
 Accessories
  Support 
Community Forum
 Contact Us
 How-to Guides
  About Us

CSS:

/* 子菜單的默認狀態 */.nav .subnav {left: -999em;/* 將子菜單移出屏幕 */position: absolute;z-index: 1000;}a,a:hover {text-decoration: none;}ul {list-style: none;margin-left: 0;padding-left: 0;}.nav {background: #fff;}.nav>li {float: left;padding-right: 10px;}.nav ul {background: #fff;z-index: 1000;border-bottom: 1px solid #fff;}.nav ul li {border-bottom: 1px solid gray;line-height: 24px;padding: 2px 5px;}/* 當鼠標停留在父元素li上時子菜單的狀態 */.nav li:hover .subnav {left: auto;/* 讓子菜單回到自然狀態 */}

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com