开发“抽屉新热榜”
2018.11.27，終于完成了這個(gè)項(xiàng)目，可以說(shuō)到現(xiàn)在，也就是今天，我把這篇博客補(bǔ)充完了，我把這個(gè)項(xiàng)目寫(xiě)完了，真的對(duì)自己來(lái)說(shuō)是一個(gè)值得慶祝的日子，記錄以此！
如果需要查看最終代碼，請(qǐng)移步小編的GitHub
一? 項(xiàng)目題目：開(kāi)發(fā)“抽屜新熱榜”
網(wǎng)址如下：https://dig.chouti.com/
二? 2018.2 第一次接觸做的結(jié)果
（此處的寫(xiě)法，都是自己剛開(kāi)始編程說(shuō)的，轉(zhuǎn)眼間6個(gè)月過(guò)去了，再回頭看看，感慨良多，自己打算再寫(xiě)一遍，實(shí)現(xiàn)更多的功能）
這里上傳一個(gè)自己做的抽屜新熱榜的小項(xiàng)目，這個(gè)主要是前端知識(shí)的應(yīng)用，做的和原樣還有點(diǎn)差距，但是一定會(huì)更新的，希望自己從這個(gè)項(xiàng)目中學(xué)到知識(shí)，并對(duì)css和html的相關(guān)應(yīng)用更加熟練。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link type="text/css" rel="stylesheet" href="chouti.css"><div class="head-box"><div class="head-content"><a href="#" class="logo"></a><div class="action-menu"><a href="#" class="tb active">全部</a><a href="#" class="tb">42區(qū)</a><a href="#" class="tb">段子</a><a href="#" class="tb">圖片</a><a href="#" class="tb">挨踢1024</a><a href="#" class="tb">你問(wèn)我答</a></div><div class="key-search"><form action="/" method="post"><input type="text" class="search-text" autocomplete="off"><a href="#" class="i"><span class="ico"></span></a></form></div><div class="action-nav"><a href="#" class="register-btn">注冊(cè)</a><a href="#" class="login-btn">登錄</a></div><div class="footer-band"></div></div></div><div class="main-content-box"><div class="main-content"><div class="content-L"><div class="top-area"><div class="child-nav"><a href="#" class="hotbtn active icons" >最新</a><a href="#" class="newbtn" >最新</a><a href="#" class="personbtn" >人類發(fā)布</a></div><div class="sort-nav"><a href="#" class="sortbtn active">即時(shí)排序</a><a href="#" class="newbtn">24小時(shí)</a><a href="#" class="newbtn">3天</a></div><a href="#" class="publish-btn"><span class="n2">發(fā)布</span></a></div><div class="content-list"><div class="item"><div class="new-pic"><img src="news.jpg" alt="抽屜新熱榜"></div><div class="new-content"><div class="part1"><a href="#" class="show-content" target="_blank">普京31日接見(jiàn)俄冰球運(yùn)動(dòng)員【環(huán)球時(shí)報(bào)-環(huán)球網(wǎng)報(bào)道記者趙覺(jué)珵】"原諒我們沒(méi)能保護(hù)你們免受(興奮劑丑聞的)傷害",俄羅斯總統(tǒng)普京31日對(duì)即將前往平昌參加冬奧會(huì)的俄羅斯運(yùn)動(dòng)員說(shuō)出了這樣一句令人動(dòng)容的話。國(guó)際奧委會(huì)此前以“系統(tǒng)性操縱反興奮劑工</a><span class="content-source">-ww4.sinaimg.com</span><a href="#" class="n2"><span class="content-kend">42區(qū)</span></a></div><div class="part2"><a href="#" class="recommend" title="推薦"><span class="hand-icon icon-recommend"></span><b>4</b></a><a href="javascript:" class="discuss"><span class="hand-icon icon-discuss"></span><b>5</b></a><a href="javascript:" class="collect" title="加入私藏"><span class="hand-icon icon-collect"></span><b>私藏</b></a><a href="#" class="user-a "><span><img src="13.png"></span><b>亂太郎</b><span class="left time-into"><a class="time-a" href="#" target="_blank"><b>4分鐘前</b></a><i>入熱榜</i></span><span class="share-site-to"><i>分享到</i><span class="share-icon"><a class="icon-sina" title="分享到新浪微博" href="#"></a><a class="icon-douban" title="分享到豆瓣" href="#"></a><a class="icon-qqzone" title="分享到QQ空間" href="#"></a><a class="icon-tenxun" title="分享到騰訊" href="#"></a><a class="icon-renren" title="分享到人人網(wǎng)" href="#"></a><!--<a class="share-none"></a>--></span></span></a></div></div></div><div class="item"><div class="new-pic"><img src="news.jpg" alt="抽屜新熱榜"></div><div class="new-content"><div class="part1"><a href="#" class="show-content" target="_blank">普京31日接見(jiàn)俄冰球運(yùn)動(dòng)員【環(huán)球時(shí)報(bào)-環(huán)球網(wǎng)報(bào)道記者趙覺(jué)珵】"原諒我們沒(méi)能保護(hù)你們免受(興奮劑丑聞的)傷害",俄羅斯總統(tǒng)普京31日對(duì)即將前往平昌參加冬奧會(huì)的俄羅斯運(yùn)動(dòng)員說(shuō)出了這樣一句令人動(dòng)容的話。國(guó)際奧委會(huì)此前以“系統(tǒng)性操縱反興奮劑工</a><span class="content-source">-ww4.sinaimg.com</span><a href="#" class="n2"><span class="content-kend">42區(qū)</span></a></div><div class="part2"><a href="#" class="recommend" title="推薦"><span class="hand-icon icon-recommend"></span><b>4</b></a><a href="javascript:" class="discuss"><span class="hand-icon icon-discuss"></span><b>5</b></a><a href="javascript:" class="collect" title="加入私藏"><span class="hand-icon icon-collect"></span><b>私藏</b></a><a href="#" class="user-a "><span><img src="13.png"></span><b>亂太郎</b><span class="left time-into"><a class="time-a" href="#" target="_blank"><b>4分鐘前</b></a><i>入熱榜</i></span><span class="share-site-to"><i>分享到</i><span class="share-icon"><a class="icon-sina" title="分享到新浪微博" href="#"></a><a class="icon-douban" title="分享到豆瓣" href="#"></a><a class="icon-qqzone" title="分享到QQ空間" href="#"></a><a class="icon-tenxun" title="分享到騰訊" href="#"></a><a class="icon-renren" title="分享到人人網(wǎng)" href="#"></a><!--<a class="share-none"></a>--></span></span></a></div></div></div><div class="item"><div class="new-pic"><img src="news.jpg" alt="抽屜新熱榜"></div><div class="new-content"><div class="part1"><a href="#" class="show-content" target="_blank">普京31日接見(jiàn)俄冰球運(yùn)動(dòng)員【環(huán)球時(shí)報(bào)-環(huán)球網(wǎng)報(bào)道記者趙覺(jué)珵】"原諒我們沒(méi)能保護(hù)你們免受(興奮劑丑聞的)傷害",俄羅斯總統(tǒng)普京31日對(duì)即將前往平昌參加冬奧會(huì)的俄羅斯運(yùn)動(dòng)員說(shuō)出了這樣一句令人動(dòng)容的話。國(guó)際奧委會(huì)此前以“系統(tǒng)性操縱反興奮劑工</a><span class="content-source">-ww4.sinaimg.com</span><a href="#" class="n2"><span class="content-kend">42區(qū)</span></a></div><div class="part2"><a href="#" class="recommend" title="推薦"><span class="hand-icon icon-recommend"></span><b>4</b></a><a href="javascript:" class="discuss"><span class="hand-icon icon-discuss"></span><b>5</b></a><a href="javascript:" class="collect" title="加入私藏"><span class="hand-icon icon-collect"></span><b>私藏</b></a><a href="#" class="user-a "><span><img src="13.png"></span><b>亂太郎</b><span class="left time-into"><a class="time-a" href="#" target="_blank"><b>4分鐘前</b></a><i>入熱榜</i></span><span class="share-site-to"><i>分享到</i><span class="share-icon"><a class="icon-sina" title="分享到新浪微博" href="#"></a><a class="icon-douban" title="分享到豆瓣" href="#"></a><a class="icon-qqzone" title="分享到QQ空間" href="#"></a><a class="icon-tenxun" title="分享到騰訊" href="#"></a><a class="icon-renren" title="分享到人人網(wǎng)" href="#"></a><!--<a class="share-none"></a>--></span></span></a></div></div></div><div class="item"><div class="new-pic"><img src="news.jpg" alt="抽屜新熱榜"></div><div class="new-content"><div class="part1"><a href="#" class="show-content" target="_blank">普京31日接見(jiàn)俄冰球運(yùn)動(dòng)員【環(huán)球時(shí)報(bào)-環(huán)球網(wǎng)報(bào)道記者趙覺(jué)珵】"原諒我們沒(méi)能保護(hù)你們免受(興奮劑丑聞的)傷害",俄羅斯總統(tǒng)普京31日對(duì)即將前往平昌參加冬奧會(huì)的俄羅斯運(yùn)動(dòng)員說(shuō)出了這樣一句令人動(dòng)容的話。國(guó)際奧委會(huì)此前以“系統(tǒng)性操縱反興奮劑工</a><span class="content-source">-ww4.sinaimg.com</span><a href="#" class="n2"><span class="content-kend">42區(qū)</span></a></div><div class="part2"><a href="#" class="recommend" title="推薦"><span class="hand-icon icon-recommend"></span><b>4</b></a><a href="javascript:" class="discuss"><span class="hand-icon icon-discuss"></span><b>5</b></a><a href="javascript:" class="collect" title="加入私藏"><span class="hand-icon icon-collect"></span><b>私藏</b></a><a href="#" class="user-a "><span><img src="13.png"></span><b>亂太郎</b><span class="left time-into"><a class="time-a" href="#" target="_blank"><b>4分鐘前</b></a><i>入熱榜</i></span><span class="share-site-to"><i>分享到</i><span class="share-icon"><a class="icon-sina" title="分享到新浪微博" href="#"></a><a class="icon-douban" title="分享到豆瓣" href="#"></a><a class="icon-qqzone" title="分享到QQ空間" href="#"></a><a class="icon-tenxun" title="分享到騰訊" href="#"></a><a class="icon-renren" title="分享到人人網(wǎng)" href="#"></a><!--<a class="share-none"></a>--></span></span></a></div></div></div><div class="item"><div class="new-pic"><img src="news.jpg" alt="抽屜新熱榜"></div><div class="new-content"><div class="part1"><a href="#" class="show-content" target="_blank">普京31日接見(jiàn)俄冰球運(yùn)動(dòng)員【環(huán)球時(shí)報(bào)-環(huán)球網(wǎng)報(bào)道記者趙覺(jué)珵】"原諒我們沒(méi)能保護(hù)你們免受(興奮劑丑聞的)傷害",俄羅斯總統(tǒng)普京31日對(duì)即將前往平昌參加冬奧會(huì)的俄羅斯運(yùn)動(dòng)員說(shuō)出了這樣一句令人動(dòng)容的話。國(guó)際奧委會(huì)此前以“系統(tǒng)性操縱反興奮劑工</a><span class="content-source">-ww4.sinaimg.com</span><a href="#" class="n2"><span class="content-kend">42區(qū)</span></a></div><div class="part2"><a href="#" class="recommend" title="推薦"><span class="hand-icon icon-recommend"></span><b>4</b></a><a href="javascript:" class="discuss"><span class="hand-icon icon-discuss"></span><b>5</b></a><a href="javascript:" class="collect" title="加入私藏"><span class="hand-icon icon-collect"></span><b>私藏</b></a><a href="#" class="user-a "><span><img src="13.png"></span><b>亂太郎</b><span class="left time-into"><a class="time-a" href="#" target="_blank"><b>4分鐘前</b></a><i>入熱榜</i></span><span class="share-site-to"><i>分享到</i><span class="share-icon"><a class="icon-sina" title="分享到新浪微博" href="#"></a><a class="icon-douban" title="分享到豆瓣" href="#"></a><a class="icon-qqzone" title="分享到QQ空間" href="#"></a><a class="icon-tenxun" title="分享到騰訊" href="#"></a><a class="icon-renren" title="分享到人人網(wǎng)" href="#"></a><!--<a class="share-none"></a>--></span></span></a></div></div></div><div class="item"><div class="new-pic"><img src="news.jpg" alt="抽屜新熱榜"></div><div class="new-content"><div class="part1"><a href="#" class="show-content" target="_blank">普京31日接見(jiàn)俄冰球運(yùn)動(dòng)員【環(huán)球時(shí)報(bào)-環(huán)球網(wǎng)報(bào)道記者趙覺(jué)珵】"原諒我們沒(méi)能保護(hù)你們免受(興奮劑丑聞的)傷害",俄羅斯總統(tǒng)普京31日對(duì)即將前往平昌參加冬奧會(huì)的俄羅斯運(yùn)動(dòng)員說(shuō)出了這樣一句令人動(dòng)容的話。國(guó)際奧委會(huì)此前以“系統(tǒng)性操縱反興奮劑工</a><span class="content-source">-ww4.sinaimg.com</span><a href="#" class="n2"><span class="content-kend">42區(qū)</span></a></div><div class="part2"><a href="#" class="recommend" title="推薦"><span class="hand-icon icon-recommend"></span><b>4</b></a><a href="javascript:" class="discuss"><span class="hand-icon icon-discuss"></span><b>5</b></a><a href="javascript:" class="collect" title="加入私藏"><span class="hand-icon icon-collect"></span><b>私藏</b></a><a href="#" class="user-a "><span><img src="13.png"></span><b>亂太郎</b><span class="left time-into"><a class="time-a" href="#" target="_blank"><b>4分鐘前</b></a><i>入熱榜</i></span><span class="share-site-to"><i>分享到</i><span class="share-icon"><a class="icon-sina" title="分享到新浪微博" href="#"></a><a class="icon-douban" title="分享到豆瓣" href="#"></a><a class="icon-qqzone" title="分享到QQ空間" href="#"></a><a class="icon-tenxun" title="分享到騰訊" href="#"></a><a class="icon-renren" title="分享到人人網(wǎng)" href="#"></a><!--<a class="share-none"></a>--></span></span></a></div></div></div></div><div id="page-area" class="page-area"><div id="dig_lcpage"><ul><li><span class="ct_pagepw">1</span></li><li><a href="#" class="ct_pagepa">2</a></li><li><a href="#" class="ct_pagepa">3</a></li><li><a href="#" class="ct_pagepa">4</a></li><li><a href="#" class="ct_pagepa">5</a></li><li><a href="#" class="ct_pagepa">6</a></li><li><a href="#" class="ct_pagepa">7</a></li><li><a href="#" class="ct_pagepa">8</a></li><li><a href="#" class="ct_pagepa">9</a></li><li><a href="#" class="ct_pagepa">10</a></li><li><a href="#" class="ct_page_edge">下一頁(yè)</a></li></ul></div></div></div><div class="footer-box"><div class="foot-nav"><a href="#" target="_blank">關(guān)于我們</a><span>|</span><a href="#" target="_blank">聯(lián)系我們</a><span>|</span><a href="#" target="_blank">服務(wù)條款</a><span>|</span><a href="#" target="_blank">隱私政策</a><span>|</span><a href="#" target="_blank">抽屜新熱榜工具</a><span>|</span><a href="#" target="_blank">下載客戶端</a><span>|</span><a href="#" target="_blank">意見(jiàn)與反饋</a><span>|</span><a href="#" target="_blank">友情鏈接</a><span>|</span><a href="#" target="_blank">公告</a><span>|</span></div><div class="foot-nav2"><a target="_blank" href="#"><img class="foot_e" src="footer1.gif" width="36" height="14"></a><span class="foot_d">旗下站點(diǎn)</span><span class="food_a">@2018chouti.com</span><a target="_blank" href="#" class="foot_b">京ICP備09053974號(hào)-3 京公安網(wǎng)備 110102145</a><div style="margin-top: 6px;">版權(quán)所有：北京科技有限公司</div></div></div></div></div></div></head> <body></body> </html> *{margin: 0;padding: 0; }body,button,input,select,td,textarea{font: 12px Tahoma,Verdana,Arial,Helvetica,"\5b8b\4f53,sans-serif";color: #333; }a{text-decoration: none; }body{font-size: 12px; }.head-box{background-color: #2459a2;height: 44px;width: 100%;position: fixed;top: 0px;left: 0px; } .head-content{margin: 0 auto;width :1016px;height: 44px;background-color: #2459a2;line-height: 44px;position: relative; } .logo{background: url("logo.png") no-repeat 0 0;height: 23px;width: 121px;float: left;margin-top: 11px;/*display: inline-block;*/ }.action-menu{float: left;margin-left: 20px; } .action-menu a.tb{color: #c0cddf;margin-left: -8px;padding: 0 13px 0 13px;display: inline-block;}.action-menu a.tb:hover{color: #fff;background-color: #c0cddf; }.action-menu a.active,.action-menu a.active:hover{color: #fff;background-color:#204982;} .key-search{float: right;margin-top: 5px; } .key-search .search-txt,.key-search a.i{float: left; }.key-search .search-txt{width: 91px;height: 25px;padding: 2px 2px 2px 5px; }.key-search .ico{background: url("icon.png") no-repeat 0 -197px;height: 12px;width: 15px;display: inline-block;margin-top: 6px;margin-left: 10px;}.key-search a.i{height: 32px;width: 30px;background-color: #f4f4f4;display: inline-block;border-left: none;}.action-nav{position: absolute;right:191px ;}.action-nav a{color: #fff;padding: 0 20px;display: inline-block; }.action-nav a:hover{background-color: #c0cddf; } /*------------------------------head end-------------*/.main-content-box{background-color: #ededed;width: 100%;padding-top: 44px;}.main-content{margin: 0 auto;background-color: #fff;overflow: hidden;width: 960px;height: auto!important;min-height: 700px;padding: 6px 28px 60px 28px ; } .content-L{float: left;width: 630px; } .child-nav,.sort-nav,.publish-btn{float:left; } .child-nav,.sort-nav{float: left;padding: 10px; }.publish-btn{float: right;padding: 10px;}.top-area{overflow: hidden;border-bottom: 1px solid red; }.child-nav .active{background: url("tip.png") no-repeat 0 -299px;display: inline-block;width: 60px;height: 26px;text-align: center;color: black;}.child-nav .a{display: inline-block;width: 60px;height: 26px;line-height: 26px;text-align: center;color: #369;font-weight: 700;margin-top: 30px;}.sort-nav{margin-left: 144px;margin-top: 10px; }.sort-nav .active{color: #b4b4b4; }.sort-nav a{margin-left: 10px;color: darkgreen; }.publish-btn{display: inline-block;width:80px ;height: 18px;color: #fff;background-color: #84a42b;line-height: 18px;text-align: center; }/*-------------------end top_area------- --------*/.content-list .item{border-bottom: 1px solid red;margin-top:10px }.item .new-pic{float: right;margin-top: 5px;margin-left: 15px; }.part2{padding-top:6px ;color: #ccc;margin-bottom: 12px; }.hand-icon{background:url("icon_18_118.png") no-repeat 0 0 ;width: 18px;height: 18px;display: inline-block;vertical-align: -4px;}.icon-recommend{/*background: url("icon_18_118.png");*/background-position: 0 -40px; }.icon-discuss{/*background: url("icon_18_118.png");*/background-position: 0 -100px; }.icon-collect{/*background: url("icon_18_118.png");*/background-position: 0 -140px; }.part2 .user-a span{vertical-align: -4px; }.part1 .content-kend,.part1 .content-source{color: #d4d4d4; }.part1 .content-kend{text-decoration: underline; } .part1 .show-content{color: #369;font-size: 14px;font-weight: 700; }.part b,.time-into i{color: #d4d4d4; }.share-icon a{background: url("share_icon.png");height: 14px;width: 17px;display: inline-block;vertical-align: center; }.share-site-to .share-icon a.icon-sina{background-position: 0 -90px; }.share-site-to .share-icon a.icon-douban{background-position: 0 -105px; }.share-site-to .share-icon a.icon-qqzone{background-position: 0 -120px;width: 16px;height: 14px; }.share-site-to .share-icon a.icon-tenxun{background-position: 0 -136px; }.share-site-to .share-icon a.icon-renren{background-position: 0 -151px; }.share-site-to{float: right; }.share-icon a:hover{opacity: 1; }.page-area ul li,.ct_page_edge{display: inline-block;float: left;color: #369;height: 34px;line-height: 34px;text-align: center;width: 37px;border: 1px solid #e1e1e1;border-radius:20%;margin-left: 3px; }.dig_lcpage{margin-left: 10px; }.ct_page_edge{width: 70px;}.page-area ul li:hover,.ct_page_edge:hover{color: #fff!important;background-color: #204982; }.footer-box .foot-nav{paddi }下面這兩個(gè)圖，使我自己做出來(lái)的效果圖，于2018.1.26做成，先記錄于此，很多不完善的地方，但是我學(xué)到了許多東西，因?yàn)閖s還沒(méi)有學(xué)，所以，這個(gè)項(xiàng)目我肯定會(huì)修改，繼續(xù)完善。
?
這個(gè)兩個(gè)圖才是源地，也就是抽屜新熱榜的界面，我自己第一次做的與這個(gè)還有一些差距，我知道，上傳到這里的目的，其一，讓看到的盆友繼續(xù)完善，其二，也鞭策一下自己，下次完善的時(shí)候，也有個(gè)對(duì)比。
?
?
?
做完這個(gè)項(xiàng)目的總結(jié)：1，一定要一步步的認(rèn)真思考，認(rèn)真研究網(wǎng)頁(yè)的構(gòu)架
2，對(duì)于內(nèi)容，一步步的填充，不能著急，心急吃不了熱豆腐
3，命名一定要規(guī)范，代碼不止是自己看，還要其他人
4，路徑一定不要寫(xiě)死，要不然修改的空間都沒(méi)有
?
?三? 重新開(kāi)始，新的項(xiàng)目需求
3.1 項(xiàng)目需求
1.實(shí)現(xiàn)與抽屜新熱榜一樣的布局2.允許點(diǎn)贊、評(píng)論3.開(kāi)發(fā)登錄、注冊(cè)頁(yè)面4.開(kāi)發(fā)發(fā)貼功能
3.2 項(xiàng)目簡(jiǎn)介
bootstrap框架，完成抽屜新熱榜官網(wǎng)頁(yè)面。導(dǎo)航欄，固定在頂部。注冊(cè)登錄，彈出的模態(tài)窗口。發(fā)布，彈出的模態(tài)窗口。點(diǎn)贊，私藏，評(píng)論的追加列表。回到頂部。?
四，2018.11完成的結(jié)果
（此處的結(jié)果，都是自己學(xué)習(xí)一段時(shí)間編程后，實(shí)現(xiàn)更多的功能的結(jié)果）
下面這兩個(gè)圖，使我自己做出來(lái)的效果圖，于2018.11.25做成，記錄于此，這是靜態(tài)頁(yè)面圖
? （下面的js完成的效果圖）
?
?
?
?
五，學(xué)習(xí)中遇到的問(wèn)題及其解決方法
5.1 link標(biāo)簽rel屬性為search是怎么使用的？
通過(guò)rel="search"，把你的搜索功能放到瀏覽器的快捷搜索工具上
用firefox打開(kāi)taobao時(shí)，看一下地址欄邊上的快捷搜索時(shí)，可以填加一個(gè)“淘寶搜索”，完成后，以后就可以直接在那里搜索東西了！
實(shí)現(xiàn)方法：
在首頁(yè)的head標(biāo)簽里加上
<link rel="search" type="application/opensearchdescription+xml" href=provider.xml" title="關(guān)鍵詞搜索" />?5.2<meta property="qc:admins" content="70003766576320416375" />是什么意思？具體功能是什么？
這個(gè)是讓網(wǎng)站加入QQ登錄接口，這段代碼可放在<head></head>之間。
申請(qǐng)騰訊接口后，會(huì)得到這樣的代碼，加入接口之后，你的網(wǎng)站上面的注冊(cè)登錄功能，別人可以直接用QQ登錄，省去注冊(cè)的麻煩。
5.3 <input value="1" type="hidden" class="isBan">
隱藏域 ?input 元素的一個(gè)屬性值type =“text” 文本框button ?按鈕radio ? ?單選框hidden ?隱藏域。
<input type="hidden" name="參數(shù)名" value="這里填你的參數(shù)值">
其實(shí)hidden只是將輸入框隱藏了，里面的值可以默認(rèn)賦值或通過(guò)js賦值。
提交form的時(shí)候跟其他的都是一樣的。
5.4? CSS中提升優(yōu)先級(jí)屬性！important的用法總結(jié)
語(yǔ)法：選擇器{樣式：值！important；}
說(shuō)明：提升指定樣式規(guī)則的應(yīng)用優(yōu)先權(quán)，即!important為開(kāi)發(fā)者提供了一個(gè)增加樣式權(quán)重的方法，讓瀏覽器首選執(zhí)行這個(gè)語(yǔ)句。
例如下面語(yǔ)法：
?
div{margin-left:20px!important;margin-left:40px; }?
? 如果是在除了IE6的瀏覽器中，這些瀏覽器支持!important屬性，也就是說(shuō)他們會(huì)默認(rèn)讓margin-left:20px!important; 這條語(yǔ)句生效，下面的不帶!important聲明的樣式將不會(huì)覆蓋它，換句話說(shuō)就是他的級(jí)別最高，下面的人都不能取代我！
在IE6及以下瀏覽器有個(gè)比較顯式的支持問(wèn)題存在，!important在同一條規(guī)則集里不生效。請(qǐng)看下述代碼： div {margin-left:20px!important; } div {margin-left:40px; }在上述代碼中，IE6及以下瀏覽器中div的margin-left與其它瀏覽器一致，都為20px;
注意： 1、IE6及更早瀏覽器下，!important在同一條規(guī)則集內(nèi)不生效。2、如果!important被用于一個(gè)簡(jiǎn)寫(xiě)的樣式屬性，那么這條簡(jiǎn)寫(xiě)的樣式屬性所代表的子屬性都會(huì)被作用上!important。
3、關(guān)鍵字!important必須放在一行樣式的末尾并且要放在該行分號(hào)前，否則就沒(méi)有效果。
?5.4? <link rel="icon" href="./images/chouti.ico"> 是什么意思？
這個(gè)是為了用于瀏覽器地址欄里顯示的圖片。
這樣寫(xiě)了后，在瀏覽器的地址欄里，圖片會(huì)顯示成現(xiàn)在給的路徑的這個(gè)圖片，不過(guò)這個(gè)路徑好像不能改，只能是網(wǎng)址根目錄下的chouti.ico文件，不過(guò)現(xiàn)在好像不用寫(xiě)這個(gè)，只要根目錄下有這個(gè)文件，瀏覽器會(huì)自動(dòng)服務(wù)出來(lái)并顯示。
5.5 CSS z-index 屬性
z-index屬性設(shè)置元素的堆疊順序，擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面
注釋：元素可擁有負(fù)的z-index屬性值
注釋：z-index僅能在定位元素上奏效（例如：position:absolute;）
簡(jiǎn)單說(shuō)，當(dāng)你定義的CSS中有position屬性值為absolute，relative或者fixed，用z-index然后取值方可生效。
才屬性參數(shù)值越大，被層疊在最上面。
5.6 HTML中a標(biāo)簽屬性的target=“_blank"是什么意思
<a> 標(biāo)簽的 target 屬性規(guī)定在何處打開(kāi)鏈接文檔。
_blank -- 在新窗口中打開(kāi)鏈接 _parent -- 在父窗體中打開(kāi)鏈接 _self -- 在當(dāng)前窗體打開(kāi)鏈接,此為默認(rèn)值 _top -- 在當(dāng)前窗體打開(kāi)鏈接，并替換當(dāng)前的整個(gè)窗體(框架頁(yè)) 一個(gè)對(duì)應(yīng)的框架頁(yè)的名稱 -- 在對(duì)應(yīng)框架頁(yè)中打開(kāi)
5.7 CSS中font-weight屬性
設(shè)置文本的粗細(xì)。
該屬性用于設(shè)置顯示元素的文本中所用的字體加粗。數(shù)字值 400 相當(dāng)于 關(guān)鍵字 normal，700 等價(jià)于 bold。每個(gè)數(shù)字值對(duì)應(yīng)的字體加粗必須至少與下一個(gè)最小數(shù)字一樣細(xì)，而且至少與下一個(gè)最大數(shù)字一樣粗。
| normal | 默認(rèn)值。定義標(biāo)準(zhǔn)的字符。 |
| bold | 定義粗體字符。 |
| bolder | 定義更粗的字符。 |
| lighter | 定義更細(xì)的字符。 |
| 定義由粗到細(xì)的字符。400 等同于 normal，而 700 等同于 bold。 |
| inherit | 規(guī)定應(yīng)該從父元素繼承字體的粗細(xì)。 |
5.8? href = "javascript:login()"是什么意思？
表示調(diào)用js的函數(shù)login，但是首先頁(yè)面內(nèi)有定義好的一個(gè)login()函數(shù)。
5.9 在js開(kāi)發(fā)中遇到如下問(wèn)題Uncaught ReferenceError: $ is not defined
百度出現(xiàn)了下面四個(gè)原因：
1.出現(xiàn)這個(gè)錯(cuò)誤，最可能的是引用的各個(gè)js的調(diào)用順序有誤，重新調(diào)整其引 用順序看看能否解決？2.還有一個(gè)原因就是在你引用js時(shí)，路徑出錯(cuò)，不是你項(xiàng)目中正確的文件路徑。3.還有一個(gè)原因是你的js中有某些值是不存在的。4.除了以上這個(gè)具體的錯(cuò)誤，還可能遇到類似的Uncaught ReferenceError: XXXX is not defined錯(cuò)誤，這類錯(cuò)誤就要多檢查傳值錯(cuò)誤，或者某些值不存在。而我就犯了第二個(gè)錯(cuò)，沒(méi)有導(dǎo)入路徑，當(dāng)導(dǎo)入js的路徑就好了。
<script src="./js/index.js"></script>
5.10，preventDefault()方法
定義：
取消事件的默認(rèn)動(dòng)作，因?yàn)闉g覽器的一些行為，是代碼不能控制的。
語(yǔ)法：
event.preventDefault()說(shuō)明：
? 該方法將通知Web瀏覽器不要執(zhí)行與事件關(guān)聯(lián)的默認(rèn)動(dòng)作（如果存在這樣的動(dòng)作）。例如，如果type的屬性是“submit”，在事件傳播的任意階段可以調(diào)用任意的事件句柄，通過(guò)調(diào)用該方法，可以阻止提交表單。注意，如果Event對(duì)象的cancelable 屬性是 fasle，那么就沒(méi)有默認(rèn)動(dòng)作，或者不能阻止默認(rèn)動(dòng)作。無(wú)論哪種情況，調(diào)用該方法都沒(méi)有作用。
5.11，$(this).addClass('active').siblings('li').removeClass('active')
意思是該元素增加一個(gè)類active，同時(shí)讓他的兄弟li去掉active類。
5.12? style="display: block"
display屬性設(shè)置元素如何顯示
| none | 此元素不會(huì)被顯示。 |
| block | 此元素將顯示為塊級(jí)元素，此元素前后會(huì)帶有換行符。 |
| inline | 默認(rèn)。此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒(méi)有換行符。 |
| list-item | 此元素會(huì)作為列表顯示。 |
| run-in | 此元素會(huì)根據(jù)上下文作為塊級(jí)元素或內(nèi)聯(lián)元素顯示。 |
| compact | 此元素會(huì)根據(jù)上下文作為塊級(jí)元素或內(nèi)聯(lián)元素顯示。 |
| marker | ? |
| table | 此元素會(huì)作為塊級(jí)表格來(lái)顯示（類似 <table>），表格前后帶有換行符。 |
| inline-table | 此元素會(huì)作為內(nèi)聯(lián)表格來(lái)顯示（類似 <table>），表格前后沒(méi)有換行符。 |
| table-row-group | 此元素會(huì)作為一個(gè)或多個(gè)行的分組來(lái)顯示（類似 <tbody>）。 |
| table-header-group | 此元素會(huì)作為一個(gè)或多個(gè)行的分組來(lái)顯示（類似 <thead>）。 |
| table-footer-group | 此元素會(huì)作為一個(gè)或多個(gè)行的分組來(lái)顯示（類似 <tfoot>）。 |
| table-row | 此元素會(huì)作為一個(gè)表格行顯示（類似 <tr>）。 |
| table-column-group | 此元素會(huì)作為一個(gè)或多個(gè)列的分組來(lái)顯示（類似 <colgroup>）。 |
| table-column | 此元素會(huì)作為一個(gè)單元格列顯示（類似 <col>） |
| table-cell | 此元素會(huì)作為一個(gè)表格單元格顯示（類似 <td> 和 <th>） |
| table-caption | 此元素會(huì)作為一個(gè)表格標(biāo)題顯示（類似 <caption>） |
轉(zhuǎn)載于:https://www.cnblogs.com/wj-1314/p/8384638.html
總結(jié)
- 上一篇： 【短视频运营】短视频剪辑 ④ ( 将文字
- 下一篇： Pupil dynamics for i