6.13一天知识总结
生活随笔
收集整理的這篇文章主要介紹了
6.13一天知识总结
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.過渡
<!DOCTYPE html> <html> <head><title>知識總結</title><meta charset="utf-8"><style type="text/css">div{width:100px;height:100px;background:red;transition-property:width;transition-duration:1s;transition-timing-function:linear;transition-delay:1s;}div:hover{width:200px;} </style> </head> <body> <div></div> </body> </html>2動畫 <!DOCTYPE html> <html> <head><title>知識總結</title><meta charset="utf-8"><style type="text/css">div{width:100px;height:100px;background:red;position:relative;animation-name:myfirst;animation-duration:5s;animation-timing-function:linear;animation-delay:1s;animation-iteration-count:infinite;animation-direction:alternate;animation-play-state:running;}@keyframes myfirst {0% {background:red; left:0px; top:0px;}25% {background:yellow; left:200px; top:0px;}50% {background:blue; left:200px; top:200px;}75% {background:green; left:0px; top:200px;}100% {background:red; left:0px; top:0px;} }</style> </head> <body> <div></div> </body> </html>3多列 <!DOCTYPE html> <html> <head><title>知識總結</title><meta charset="utf-8"><style type="text/css">div{column-count: 6;column-fill: balance;column-gap: 40px;column-rule:2px outset blue;}</style> </head> <body> <div>1.老公老公mua，左邊一個mua，右邊一個mua，嘴巴一個mua，老公老公抱抱，我要公主抱抱，飛起來的抱抱，轉圈圈的抱抱! 2.像一棵海草海草 海草海草 隨波飄搖 海草海草海草海草 浪花里舞蹈;海草海草 海草海草 管它駭浪驚濤。 3.你問我為什么沒對象？有才華的長得丑，長得帥的掙錢少，掙錢多的不顧家，太顧家的沒出息，有出息的不浪漫，會浪漫的靠不住，實在是沒法找！ 4.云云：師父我堅持不住啦 小涵：我心里一直有個夢 想去嵩山少林學武功 就像電影里帥氣的超人 行俠仗義 飛檐走壁。 小扣： 師父你為何可以行如流水槍扎一線棍掃一片(你卻)揮揮衣袖對我說(趕緊練功去) 小淑：練功必須頂大太陽(哼)晚上還要借月亮光(哈)一日不練十日空(哼哈) 小樂：習武先習德(哼)學藝先學禮(哈)我也心中牢記(哼哈哼) 倪虹潔：英雄臺下十年功為臺上一分鐘 5.小哥哥，小哥哥，我給你一樣東西好不好呀 這是長得好看的。 小哥哥，小哥哥，我給你個大嘴巴子好不好呀 這是長的不好看的 6.I see some people with ak47,they biu biu biu and they boom boom boom.people say a a a and die.You should call a car which vivo vivo vivo。 1.老公老公mua，左邊一個mua，右邊一個mua，嘴巴一個mua，老公老公抱抱，我要公主抱抱，飛起來的抱抱，轉圈圈的抱抱! 2.像一棵海草海草 海草海草 隨波飄搖 海草海草海草海草 浪花里舞蹈;海草海草 海草海草 管它駭浪驚濤。 3.你問我為什么沒對象？有才華的長得丑，長得帥的掙錢少，掙錢多的不顧家，太顧家的沒出息，有出息的不浪漫，會浪漫的靠不住，實在是沒法找！ 4.云云：師父我堅持不住啦 小涵：我心里一直有個夢 想去嵩山少林學武功 就像電影里帥氣的超人 行俠仗義 飛檐走壁。 小扣： 師父你為何可以行如流水槍扎一線棍掃一片(你卻)揮揮衣袖對我說(趕緊練功去) 小淑：練功必須頂大太陽(哼)晚上還要借月亮光(哈)一日不練十日空(哼哈) 小樂：習武先習德(哼)學藝先學禮(哈)我也心中牢記(哼哈哼) 倪虹潔：英雄臺下十年功為臺上一分鐘 5.小哥哥，小哥哥，我給你一樣東西好不好呀 這是長得好看的。 小哥哥，小哥哥，我給你個大嘴巴子好不好呀 這是長的不好看的 6.I see some people with ak47,they biu biu biu and they boom boom boom.people say a a a and die.You should call a car which vivo vivo vivo。 1.老公老公mua，左邊一個mua，右邊一個mua，嘴巴一個mua，老公老公抱抱，我要公主抱抱，飛起來的抱抱，轉圈圈的抱抱! 2.像一棵海草海草 海草海草 隨波飄搖 海草海草海草海草 浪花里舞蹈;海草海草 海草海草 管它駭浪驚濤。 3.你問我為什么沒對象？有才華的長得丑，長得帥的掙錢少，掙錢多的不顧家，太顧家的沒出息，有出息的不浪漫，會浪漫的靠不住，實在是沒法找！ 4.云云：師父我堅持不住啦 小涵：我心里一直有個夢 想去嵩山少林學武功 就像電影里帥氣的超人 行俠仗義 飛檐走壁。 小扣： 師父你為何可以行如流水槍扎一線棍掃一片(你卻)揮揮衣袖對我說(趕緊練功去) 小淑：練功必須頂大太陽(哼)晚上還要借月亮光(哈)一日不練十日空(哼哈) 小樂：習武先習德(哼)學藝先學禮(哈)我也心中牢記(哼哈哼) 倪虹潔：英雄臺下十年功為臺上一分鐘 5.小哥哥，小哥哥，我給你一樣東西好不好呀 這是長得好看的。 小哥哥，小哥哥，我給你個大嘴巴子好不好呀 這是長的不好看的 6.I see some people with ak47,they biu biu biu and they boom boom boom.people say a a a and die.You should call a car which vivo vivo vivo。 </div> </body> </html>屏幕<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {width: 80px;height: 80px;background: red;/* 1.resize:both 2.overflow: auto */resize: both;overflow: auto;?outline: 2px solid black;outline-offset: 15px;}</style> </head> <body><div></div> </body> </html>圖片邊角 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>img {/* 左上角的x 左上角的Y值*/ border-radius: 20px 100px 20px 100px / 20px 100px 20px 100px;}</style> </head> <body><img src="./images/1.jpg" alt=""> </body> </html>圖片自適應 濾鏡 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>img {max-width: 100%;height: auto;filter: blur(10px) grayscale(50%)}</style> </head> <body><img src="./images/4.jpg" alt=""><button>發紅包</button> </body> </html>按鈕 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>button {height: 50px;background-color: #4CAF50;border: none;border-radius: 4px;color: white;cursor: pointer;/* 0px 0px 0px x y */}button:hover {transition: 0.3s;box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6); }</style> </head> <body><button>鼠標懸停后顯示陰影</button> </body> </html>選擇器 <div class="div" id="div"><div><span class="logo"></span></div><span></span><!-- text、button、password、submit、radio、checkbox、file、image --><input type="text"><input type="password"></div>
標簽選擇div{}
類選擇.div
id選擇器#div
子代選擇器.div>span{}
后代選擇器.div span{}
并集 ?交集，，屬性 ? ?偽類 ? 偽元素
?標簽內style：1000 id選擇器：100 類選擇器：10 標簽選擇器：1
盒子內容居中
1.position left right top bottom margin2. display: table-cellvertical-align: middletext-align: center彈性盒子 flex <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>彈性盒子模型</title><style>.box {width: 500px;height: 400px;border: 2px solid blue;/* 就是將元素變成彈性盒子元素 */display: flex;flex-direction: row;/* 在主軸方向對齊方式 */justify-content: space-evenly;/* 側軸方向的對齊方式 */align-items: flex-start;}.item {height: 60px;background: red;}.item1 {flex: 1;background: blue;}.item2 {flex: 2;background: yellow;}.item4 {flex: 3;background: green;}.item3 {flex: 4;align-self: center;}</style> </head> <body><div class="box"><div class="item item1"></div><div class="item item2"></div><div class="item item3"></div><div class="item item4"></div></div> </body> </html>多媒體查詢 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>/* >= 750px div 300 <= 750px div 200<= 300px div 100*//* <=300 */@media screen and (max-width: 300px) {div {width: 100px;height: 200px;background: red;}}/* 300< screen <=750 */@media screen and (min-width: 300px) {div {width: 200px;height: 200px;background: blue;}}/* >750 */@media screen and (min-width: 750px) {div {width: 300px;height: 200px;background: green;}}</style> </head> <body><div></div> </body> </html>總結
以上是生活随笔為你收集整理的6.13一天知识总结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 基于MATLAB的静电场模拟系统
- 下一篇： 离散作业用c语言编写覆盖,c语言论文30