尚硅谷前端视频总结(一)
生活随笔
收集整理的這篇文章主要介紹了
尚硅谷前端视频总结(一)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
尚硅谷前端視頻總結(一)
1、reset.css清空瀏覽器默認樣式
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126License: none (public domain) */html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block; } body {line-height: 1; } ol, ul {list-style: none; } blockquote, q {quotes: none; } blockquote:before, blockquote:after, q:before, q:after {content: '';content: none; } table {border-collapse: collapse;border-spacing: 0; }2、水平布局
左外邊距+左邊框+左內邊距+內容+右內邊距+右邊框+右外邊距=父元素寬度
屬性設置為auto，則將自動調整此屬性寬度，否則優先調整右外邊距
3、.clearfix
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./css/clearDeafult.css"><style>.box1{width: 200px;background-color: #bfc;}.box2{margin-top: 100px;width: 100px;height: 100px;background-color: red;float: left;}/* 同時解決高度塌陷和外邊距重疊 */.clearfix::before,.clearfix::after{content: '';display: table;clear: both;}</style> </head> <body><div class="box1 clearfix"><div class="box2"></div></div> </body> </html>4、定位position
absolute絕對定位脫離文檔流并參照上一個position屬性不是static的元素，否則參照根元素body
relative相對定位不脫離文檔流參照自己本身的位置進行偏移
fixed固定定位脫離文檔流并參照瀏覽器視口進行定位
sticky粘滯定位實現吸頂效果 兼容性不好
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1{width: 200px;height: 200px;background-color: red;}.box2{width: 200px;height: 200px;background-color: green;position: fixed;right: 50px;top: 50px;}.box3{width: 200px;height: 200px;background-color: blue;}.inner{width: 150px;height: 150px;background-color: orange;position: absolute;top: 10px;right: 10px;}.inner2{width: 100px;height: 100px;background-color: rgb(0, 26, 255);position: absolute;right:0;}</style> </head> <body><div class="box1"></div><div class="box2"><div class="inner"><div class="inner2"></div></div></div><div class="box3"></div> </body> </html>5、背景圖片
background-size
/* 關鍵字 */ background-size: cover background-size: contain/* 一個值: 這個值指定圖片的寬度，圖片的高度隱式的為auto */ background-size: 50% background-size: 3em background-size: 12px background-size: auto/* 兩個值 */ /* 第一個值指定圖片的寬度，第二個值指定圖片的高度 */ background-size: 50% auto background-size: 3em 25% background-size: auto 6px background-size: auto auto/* 逗號分隔的多個值：設置多重背景 */ background-size: auto, auto /* 不同于background-size: auto auto */ background-size: 50%, 25%, 25% background-size: 6px, auto, contain/* 全局屬性 */ background-size: inherit; background-size: initial; background-size: unset;background-clip
/* Keyword values */ background-clip: border-box; background-clip: padding-box; background-clip: content-box; background-clip: text;/* Global values */ background-clip: inherit; background-clip: initial; background-clip: unset;border-box 背景延伸至邊框外沿（但是在邊框下層）。 padding-box 背景延伸至內邊距（padding）外沿。不會繪制到邊框處。 content-box 背景被裁剪至內容區（content box）外沿。 text 背景被裁剪成文字的前景色6、輪播圖
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="/demo1/css/clearDeafult.css"><style>img{width:300px;height: 300px;position: absolute;}.lunbo-box{position: relative;width: 300px;height: 300px;margin: 0 auto;}.item::before{content: '';border-radius:10px;width: 10px;height: 10px;background-color: gray;display: table;border: 2px solid gray;}.dont{position:absolute;list-style: none;z-index:999;bottom: 10px;left: 20px;}.item-active::before{background-color: white;background-clip: content-box;}.dont li{display: inline-block;}</style> </head> <body><div class="lunbo-box"><img src="./img/1.jpg" alt="" srcset=""><img src="./img/2.jpg" alt="" srcset=""><img src="./img/3.jpg" alt="" srcset=""><img src="./img/1.jpg" alt="" srcset=""><img src="./img/2.jpg" alt="" srcset=""><img src="./img/3.jpg" alt="" srcset=""><ul class="dont"><li><a href="javascript:void(0)"><div class="item" onclick="change(0)"></div></a></li><li><a href="javascript:void(0)"><div class="item" onclick="change(1)"></div></a></li><li><a href="javascript:void(0)"><div class="item" onclick="change(2)"></div></a></li><li><a href="javascript:void(0)"><div class="item" onclick="change(3)"></div></a></li><li><a href="javascript:void(0)"><div class="item" onclick="change(4)"></div></a></li><li><a href="javascript:void(0)"><div class="item" onclick="change(5)"></div></a></li><li><a href="javascript:void(0)"><div class="item" onclick="change(6)"></div></a></li></ul></div><script>let imgarray=document.querySelectorAll('img');let liarray=document.querySelectorAll('.item');var count=0;function change(id){count=id;if(count==6){count=0;}for(let [index,img] of imgarray.entries()){if(count!=index){img.style.zIndex=0;liarray[index].classList.remove('item-active');}}imgarray[count].style.zIndex=1;liarray[count].classList.add('item-active');count++;}setInterval(() => {change(count);}, 2000);</script> </body> </html>7、綜合運用——電影卡片
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./css/clearDeafult.css"><style>.outer{border-radius: 5px;margin: 2px auto;width: 240px;background-color: #232331;}.innerimg img{vertical-align: middle;width: 240px;height: 130px;}h1{color: white;margin-bottom: 6px;}.sum{color: rgba(230,233,240,.45);overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2;font-size: 12px;line-height: 20px;margin-bottom: 12px;}.innertext{padding: 8px 12px 12px 12px;}.item li{display: inline-block;}.item li div{text-align: center;line-height: 20px;font-size: 12px;width: 40px;height: 20px;padding: 2px;border-radius:20px;background-color:#343441 ;color:#7B746C ;margin-bottom: 12px;}.btn{height: 33px;width: 80px;background-image: url('./img/icon.png');background-size: 133px auto;background-position: 0 0;text-align: center;line-height: 28px;font-size: 12px;float: left;}a{text-decoration: none;color: white;}.btn:hover{background-position:0 -38px;border-color:#ffb821}.clearfix::before,.clearfix::after{content: '';display: table;clear: both;}.icon{float: right;}.i1{display: inline-block;width: 16px;height: 16px;background-image: url(./img/icon.png);background-position: 0 -76px;background-size: 133px auto;}.i1:hover{background-position: -21px -76px;}.icon span{margin-left: 15px;}.i2{display: inline-block;width: 16px;height: 16px;background-image: url(./img/icon.png);background-position: -63px -76px;background-size: 133px auto;}.i2:hover{background-position:-84px -76px;}.bottom{position: relative;overflow: hidden;}.icon{position: absolute;right: 0;bottom: 5px;}h1 a:hover{color: #ff7221;}</style> </head> <body><div class="outer"><div class="innerimg"> <img src="./img/0.webp" alt=""> </div><div class="innertext clearfix"><h1><a href="#"> 雪中悍刀行</a></h1><ul class="item"><li><div> 2021</div></li><li><div> 古裝</div></li><li><div> 張若昀</div></li><li><div> 武俠</div></li></ul><div class="sum"><span>簡介：</span><span>為逃避做隋珠公主的駙馬，“天下第一紈绔”的北椋世子徐鳳年在父親徐驍的安排下褪去錦衣華服，初進江湖，和馬夫老黃苦中作樂，結識了眾多江湖人士。三年游歷歸來，韜光養晦的徐鳳年洗去浮塵，始終不想按照老爹鋪好的人生軌道走，更不愿接手北椋，因為成為北椋王，就意味著要成為一個沒有感情的孤家寡人。但當徐鳳年雪中冠禮，得知一個個至親離他而去，為他犧牲，經歷人生的至暗時刻后，終于下定決心，要當一個和父親完全不一樣的北椋王，再難也不能妥協，遂苦學武藝，憑借赤子之心和勤學苦練，成為武者，而后率丫鬟姜泥、劍仙李淳罡等護衛，二進江湖，用悍刀鬧得武林勢力雞飛狗跳，看似按老爹的套路下棋，實則踏雪獨闖，力抗命運安排，漸漸培植了愿為自己效忠的武當、江南文壇、西楚、徽山軒轅等武林新勢力，也通過種種線索發現母親吳素之死的真相。漫天飛雪，徐鳳年一人一刀一腔仇，用自己的身軀扛起北椋戰旗，最終長成為北椋王合格的接班人。</span></div><div class="bottom"><div class="btn"><a href="#">立即觀看</a></div><div class="icon"><a href="#"><span class="i1"></span></a><a href="#"><span class="i2"></span></a></div></div></div></div></body> </html>最近會分享一些我學前端的心得總結在我的網站點擊這里
總結
以上是生活随笔為你收集整理的尚硅谷前端视频总结(一)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C/C++项目源码——数字雨Digita
- 下一篇： 浏览器趋势2016年9月：浏览器大战结束