菜鸟教程-css3学习笔记
生活随笔
收集整理的這篇文章主要介紹了
菜鸟教程-css3学习笔记
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
學習鏈接是:
https://www.runoob.com/css3/css3-tutorial.html
####################################################################
css3教程
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> div {width:100px;height:75px;background-color:red;border:1px solid black; } div#div2 {transform:rotate(50deg);-ms-transform:rotate(50deg); /* IE 9 */-webkit-transform:rotate(50deg); /* Safari and Chrome */ } </style> </head> <body><div>你好。這是一個 DIV 元素。</div><div id="div2">你好。這是一個 DIV 元素。</div></body> </html>效果如下:
#############################################################################################
CSS3邊框-CSS3 盒陰影
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> div {width:300px;height:100px;background-color:green;box-shadow: 10px 20px 5px #888888; } </style> </head> <body><div></div></body> </html>#############################################################################################
CSS3圓角
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> #rcorners1 {border-radius: 25px;background: #8AC007;padding: 20px; width: 200px;height: 150px; }#rcorners2 {border-radius: 25px;border: 2px solid #8AC007;padding: 20px; width: 200px;height: 150px; }#rcorners3 {border-radius: 25px;background: url(/images/paper.gif);background-position: left top;background-repeat: repeat;padding: 20px; width: 200px;height: 150px; } </style> </head> <body><p> border-radius 屬性允許向元素添加圓角。</p> <p>指定背景顏色元素的圓角:</p> <p id="rcorners1">圓角</p> <p>指定邊框元素的圓角:</p> <p id="rcorners2">圓角</p> <p>指定背景圖片元素的圓角:</p> <p id="rcorners3">圓角</p></body> </html>#############################################################################################
CSS3?背景
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> #example1 {background-image: url(img_flwr.gif), url(paper.gif);background-position: right bottom, left top;background-repeat: no-repeat, repeat;padding: 15px; } </style> </head> <body><div id="example1"> <h1>Lorem Ipsum Dolor</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </div></body> </html>效果：
#############################################################################################
CSS3?漸變（Gradients）
線性漸變 - 對角
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> #grad1 {height: 200px;background-color: red; /* 不支持線性的時候顯示 */background-image: linear-gradient(to bottom right, red , yellow); } </style> </head> <body><h3>線性漸變 - 對角</h3> <p>從左上角開始（到右下角）的線性漸變。起點是紅色，慢慢過渡到黃色：</p><div id="grad1"></div><p><strong>注意：</strong> Internet Explorer 8 及之前的版本不支持漸變。</p></body> </html>代碼大意是div中的id調用了上面style中調用的css代碼
#############################################################################################
css3 文本效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> h1 {text-shadow: 5px 5px 5px #FF0000; } </style> </head> <body><h1>Text-shadow effect!</h1><p><b>注意:</b> Internet Explorer 9 以及更早版本的瀏覽器不支持 text-shadow屬性.</p></body> </html>#############################################################################################
CSS3?字體
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> @font-face {font-family: myFirstFont;src: url('Serif.ttf'),url('Serif.eot'); /* IE9 */ }div {font-family:myFirstFont; } </style> </head> <body><p><b>注意:</b> Internet Explorer 9 只支持 .eot 格式的字體.</p><div> 使用 CSS3,網站終于可以使用字體以外的預先選擇“合法”字體 </div></body> </html>#############################################################################################
CSS3?2D 轉換
rotate() 方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> div {width:100px;height:75px;background-color:red;border:1px solid black; } div#div2 {transform:rotate(30deg);-ms-transform:rotate(30deg); /* IE 9 */-webkit-transform:rotate(30deg); /* Safari and Chrome */ } </style> </head> <body><div>你好。這是一個 DIV 元素。</div><div id="div2">你好。這是一個 DIV 元素。</div></body> </html>#############################################################################################
CSS3?3D 轉換
給的例子效果不是太好。(跳過)
#############################################################################################
CSS3?過渡
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> div {width:100px;height:100px;background:red;transition-property:width;transition-duration:1s;transition-timing-function:linear;transition-delay:2s;/* Safari */-webkit-transition-property:width;-webkit-transition-duration:1s;-webkit-transition-timing-function:linear;-webkit-transition-delay:2s; } /* transition-duration:1s;的意思是鼠標離開后，保持"延長效果"的 時間*/ /* transition-delay:2s:1s;的意思是鼠標放到上面以后，觸發"延長效果"的所需要的等待時間*/ div:hover {width:200px; } </style> </head> <body><p><b>注意：</b>該實例無法在 Internet Explorer 9 及更早 IE 版本上工作。</p><div></div><p>鼠標移動到 div 元素上，查看過渡效果。</p> <p><b>注意：</b> 過渡效果需要等待兩秒后才開始。</p></body> </html>效果是鼠標移動到紅色方塊上，紅色方塊會延長。
#############################################################################################
css3動畫
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> div {width:100px;height:100px;background:red;animation:myfirst 5s;-webkit-animation:myfirst 5s; /* Safari and Chrome */ }@keyframes myfirst {from {background:red;}to {background:yellow;} }@-webkit-keyframes myfirst /* Safari and Chrome */ {from {background:red;}to {background:yellow;} } </style> </head> <body><p><b>注意:</b> 該實例在 Internet Explorer 9 及更早 IE 版本是無效的。</p><div></div></body> </html>效果是鼠標移動上去，紅色會變成檸檬黃色。
和鼠標操作相關的效果，都稱為"響應式"，一定會在代碼中出現和"@"相關的css代碼。
#############################################################################################
CSS3 多列
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> .newspaper {-moz-column-count:3; /* Firefox */-webkit-column-count:3; /* Safari and Chrome */column-count:3; } </style> </head> <body><p><b>注意:</b> Internet Explorer 9及更早 IE 版本瀏覽器不支持 column-count 屬性。</p><div class="newspaper"> “當我年輕的時候，我夢想改變這個世界；當我成熟以后，我發現我不能夠改變這個世界，我將目光縮短了些，決定只改變我的國家；當我進入暮年以后，我發現我不能夠改變我們的國家，我的最后愿望僅僅是改變一下我的家庭，但是，這也不可能。當我現在躺在床上，行將就木時，我突然意識到：如果一開始我僅僅去改變我自己，然后，我可能改變我的家庭；在家人的幫助和鼓勵下，我可能為國家做一些事情；然后，誰知道呢?我甚至可能改變這個世界。” </div></body> </html>效果就是把一篇文章分三列
######################################################################################
CSS3?用戶界面
外形修飾
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> div {margin:20px;width:150px; padding:10px;height:70px;border:2px solid black;outline:2px solid red;outline-offset:15px; } </style> </head> <body><p><b>注意:</b> Internet Explorer 不兼容 outline-offset屬性.</p><div>這個 div有一個輪廓邊界15 px邊境外的邊緣。</div></body> </html>?
######################################################################################
CSS3圖片
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> img {max-width: 100%;height: auto; } </style> </head> <body><h2>響應式圖片</h2> <p>響應式圖片會自動適配各種尺寸的屏幕。</p> <p>通過重置瀏覽器大小查看效果:</p><img src="//www.runoob.com/wp-content/uploads/2016/04/trolltunga.jpg" alt="Norway" width="1000" height="300"></body> </html>######################################################################################
CSS3 按鈕
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> .button {display: inline-block;padding: 15px 25px;font-size: 24px;cursor: pointer;text-align: center; text-decoration: none;outline: none;color: #fff;background-color: #4CAF50;border: none;border-radius: 15px;box-shadow: 0 9px #999; }.button:hover {background-color: #3e8e41}.button:active {background-color: #3e8e41;box-shadow: 0 5px #666;transform: translateY(4px); } </style> </head> <body><h2>按鈕動畫 - "按壓效果"</h2><button class="button">Click Me</button></body> </html>代碼上方是定義"鼠標不在按鈕上面"，“鼠標在按鈕上面”以及"鼠標點擊按鈕"時的效果。
######################################################################################
CSS分頁實例
他這個意思其實就是你看小說或者看漫畫的時候的第幾頁的標簽選擇
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style>ul.pagination {display: inline-block;padding: 0;margin: 0; }ul.pagination li {display: inline;}/*這個意思是，頁碼是只在一行顯示，還是一行只顯示一個頁碼*//*設置頁碼的字體*/ ul.pagination li a {color: red;float: left;padding: 8px 16px;text-decoration: none; }/*設置標簽被選中后頁碼的顏色*/ ul.pagination li a.active {background-color: #4CAF50;color: white; }/*設置鼠標懸停的時候的標簽背景顏色*/ ul.pagination li a:hover:not(.active) {background-color: #ddd;} </style> </head> <body><h2>點擊及鼠標懸停分頁樣式</h2> <p>移動鼠標的分頁的數字上。</p> <ul class="pagination"><li><a href="#">?</a></li><li><a href="#">1</a></li><li><a class="active" href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">6</a></li><li><a href="#">7</a></li><li><a href="#">?</a></li> </ul></body> </html>######################################################################################
css3 框大小
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> .div1 {width: 300px;height: 100px;border: 1px solid blue; }.div2 {width: 300px;height: 100px; padding: 50px;border: 1px solid red; } </style> </head> <body><div class="div1">這個是個較小的框 (width 為 300px ，height 為 100px)。</div> <br> <div class="div2">這個是個較大的框 (width 為 300px ，height 為 100px)。</div></body> </html>######################################################################################
css3彈性盒子
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> .flex-container {display: -webkit-flex;display: flex;width: 400px;height: 250px;background-color: lightgrey; }.flex-item {background-color: cornflowerblue;width: 100px;height: 100px;margin: 10px; } </style> </head> <body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div> </div></body> </html>######################################################################################
CSS3 多媒體查詢實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> ul {list-style-type: none; } /*這個是用來設置左側的三個黑點是否存在的*/ul li a {color: green;/*這個是在設置聯系人名字的顏色*/text-decoration: none;padding: 3px; display: block; }@media screen and (max-width: 699px) and (min-width: 520px) {ul li a {padding-left: 30px;/*這個是在設置聯系人名字和左側之間的距離*/background: url(email-icon.png) left center no-repeat;/*設置郵箱圖標*/} } </style> </head> <body><h1>重置瀏覽器窗口，查看效果!</h1><ul><li><a data-email="johndoe@example.com" href="mailto:johndoe@example.com">John Doe</a></li><li><a data-email="marymoe@example.com" href="mailto:marymoe@example.com">Mary Moe</a></li><li><a data-email="amandapanda@example.com" href="mailto:amandapanda@example.com">Amanda Panda</a></li> </ul></body> </html>?
?
總結
以上是生活随笔為你收集整理的菜鸟教程-css3学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 菜鸟教程-css学习笔记
- 下一篇： 已拦截跨源请求：同源策略禁止读取位于XX