整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
多剛進(jìn)入前端行業(yè)的小伙伴在寫頁(yè)面的時(shí)候，很容易出現(xiàn)錯(cuò)誤，這時(shí)候很多小伙伴就會(huì)一行行查看自己的代碼哪里有問題，或者仔細(xì)的對(duì)比網(wǎng)上代碼，這樣查看錯(cuò)誤很浪費(fèi)時(shí)間，而且陷入了自己的思維里面看不出錯(cuò)誤在哪里。
下面呢，教大家如何快速的查找錯(cuò)誤及解決問題。其實(shí)，咱們的瀏覽器就有控制臺(tái)及一些輔助工具等幫助我們查找錯(cuò)誤，在這里我使用的Chrome（谷歌瀏覽器）的控制臺(tái)來進(jìn)行錯(cuò)誤的查找。打開控制臺(tái)方式有兩種，一種在瀏覽器中點(diǎn)擊鼠標(biāo)右鍵，選擇檢查，如下圖
另一種，直接通過快捷鍵F12（如果F12不行，可以試一下Fn+F12），調(diào)出來控制臺(tái)。
好了，了解完這些以后，我們來看一下都有哪些錯(cuò)誤，以及如何通過控制臺(tái)查看錯(cuò)誤進(jìn)行更改。
先寫一個(gè)比較簡(jiǎn)單的效果，寫一個(gè)div標(biāo)簽，給這個(gè)div寫一個(gè)寬200px，高100px，背景顏色為粉色
HTML結(jié)構(gòu)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="./css/style.css"/>
<title></title>
</head>
<body>
<div></div>
</body>
</html>CSS樣式
div{width: 200px; height: 100px; background-color: pink;}上面是想象中的樣子，完美。但實(shí)現(xiàn)效果上可能是這樣的：
出現(xiàn)問題的時(shí)候，穩(wěn)住別慌，通過控制臺(tái)查看一下，首先看一下css樣式有沒有引入成功，上面說到過控制臺(tái)左邊為html標(biāo)簽，右邊是css屬性，我們先選中div看一下右邊有沒有寫的css屬性
1、在這里看到右邊css那里沒有我們寫的寬高背景顏色，一種可能是我們css沒有引入成功，如果使用的是外部樣式表，可以去查一下自己寫的路徑對(duì)不對(duì)；如果路徑不對(duì)，一般在控制臺(tái)會(huì)顯示一個(gè)紅色的×，如下圖：
2、另一種可能我們寫的這個(gè)標(biāo)簽的css修飾前多寫了標(biāo)點(diǎn)符號(hào)。如下圖:
3、那如果我們?cè)谶@里使用了class選擇器、id選擇器或者其他的選擇器，要注意選擇器的使用及名字的設(shè)置。不然也會(huì)出現(xiàn)顯示不了咱們的css修飾。
4、好了，再往下看，如果css還是沒有出來，就看一下單詞是否拼對(duì)、屬性和屬性值是否匹配。單詞不對(duì)，或?qū)傩院蛯傩灾挡黄ヅ淠敲纯刂婆_(tái)的css屬性前面會(huì)出現(xiàn)一個(gè)黃色的感嘆號(hào)，并且會(huì)把錯(cuò)誤的屬性劃掉，如下圖，這個(gè)時(shí)候就需要你查一下單詞和屬性了。
5、還有我們?cè)诰W(wǎng)頁(yè)導(dǎo)航的時(shí)候會(huì)給導(dǎo)航項(xiàng)加邊框，代碼如下：
HTML結(jié)構(gòu)：
<ul class="nav">
<li class="noborder">首頁(yè)</li>
<li>首頁(yè)</li>
<li>首頁(yè)</li>
<li>首頁(yè)</li>
<li>首頁(yè)</li>
</ul>CSS樣式：
*{margin: 0; padding: 0;}
ul,li{list-style: none;}
.nav{width: 505px; margin: 50px auto;}
.nav li{
float: left;
text-align: center;
line-height: 30px;
width: 100px;
height: 30px;
background-color: #ccc;
border-left: solid 1px #333;
}
.noborder{border-left: 0;}我們要取消第一個(gè)或者最后一個(gè)的邊框，我們給第一個(gè)或最后一個(gè)li加class名取消邊框，發(fā)現(xiàn)取消不了，而且屬性和屬性值檢查了一遍是對(duì)的，在控制臺(tái)中也顯示了，只不過被劃掉了（注意只是劃掉，但沒有黃色感嘆號(hào)），這個(gè)時(shí)候可能是選擇器權(quán)重不夠
那么我們可以通過包含選擇題增加權(quán)重，找到父元素的class名，添加到前面就可以
css代碼修改
.nav .noborder{border-left:0}這樣就解決了。
最后總結(jié)一下：
再有前端的小伙伴遇到了上述幾種錯(cuò)誤，可以嘗試通過上面的方式去解決一下，這些問題一般都是常見的，遇到幾次解決之后注意避免就可以啦~
前面的章節(jié)中，我們修改好了wordpress主題trans的首頁(yè)頭部和左側(cè)的代碼，實(shí)現(xiàn)了我們想要的效果。今天，我們?cè)賮斫otrans主題首頁(yè)的右側(cè)邊欄進(jìn)行修改，把靜態(tài)的代碼修改成動(dòng)態(tài)的。一般情況下，右側(cè)邊欄才是網(wǎng)站的主要側(cè)邊欄，而左側(cè)一般是頁(yè)面的主體部分。所以，右側(cè)邊欄大多是放置最新文章、熱門文章排行等等這類信息。
我們打開trans主題的index.html靜態(tài)模板，我們可以看到，它的右側(cè)邊欄主要有3個(gè)板塊：最新文章、熱門文章、熱門標(biāo)簽。目前，它們的數(shù)據(jù)都是寫死的，我們要實(shí)現(xiàn)的是：從wordpress數(shù)據(jù)庫(kù)中調(diào)用數(shù)據(jù)，讓這些數(shù)據(jù)活起來。
第一步：從wordpress數(shù)據(jù)庫(kù)中調(diào)用10篇最新文章。
trans主題右側(cè)邊欄最新文章列表的靜態(tài)代碼如下：
< ul class="c_right_article">< a href="">aaaadadafdadfadfadfadf1</a>< a href="">aaaadadfadfadfads2</a>< a href="">aaaad3</a>< a href="">aaadadfadfadfadfsadfadfada4afdadfadfasd</a>< a href="">aaaadfadfadf5</a>< a href="">aaaaadfadfadfdf6</a> < /ul>
我們先把<ul>標(biāo)簽內(nèi)的所有內(nèi)容（所有a標(biāo)簽）都刪除掉，變成如下代碼：
< ul class="c_right_article"> </ul>
然后，在這個(gè)ul標(biāo)簽內(nèi)部添加wordpress最新文章的調(diào)用代碼：
< ?phpquery_posts('posts_per_page=10&caller_get_posts=1&orderby=new'); while (have_posts()) : the_post(); echo '< a href="'.get_the_permalink().'" title="'.get_the_title().'">';echo get_the_title(); echo '</a>';endwhile; wp_reset_query(); ?>
最新文章效果
代碼中，我們用到了wordpress程序的一個(gè)查詢函數(shù)——query_posts()，它的作用是：從wordpress數(shù)據(jù)庫(kù)的wp-posts數(shù)據(jù)表中按條件查詢文章。上面的代碼中，給了3個(gè)條件：
posts_per_page=10=> 查詢10篇文章；caller_get_posts=1=> 排除置頂文章；orderby=new=> 排序按最新的
接著又用到了while循環(huán)語(yǔ)句。這里再?gòu)?qiáng)調(diào)一下，循環(huán)語(yǔ)句一定要結(jié)束它（endwhile) 或者用大括號(hào)把循環(huán)體包括起來。另外，使用了query_posts()查詢語(yǔ)句，就一定要使用 wp_reset_query()來結(jié)束它，否則，后面的代碼數(shù)據(jù)就可能會(huì)出錯(cuò)。
第二步：從wordpress數(shù)據(jù)庫(kù)中調(diào)出10篇文章，按評(píng)論多少排序。
原靜態(tài)模板右側(cè)邊欄中的熱門文章代碼如下：
< ul class="c_right_con">< div class="hot_left">< a href="/">< img src="./images/index_17.jpg" alt=""></a>< /div>< div class="hot_right">< li>< a href="/">百度站長(zhǎng)工具抓取診斷失敗的原因有哪些</a>< /li>< li>< span class="dashicons-before dashicons-calendar-alt">5月21日</span>< span class="dashicons-before dashicons-visibility">274</span>< /li>< /div>< /ul>
這是一篇熱門文章的代碼，我們要在右側(cè)邊欄顯示10篇，所以，我們依然是要使用循環(huán)語(yǔ)句，修改后的代碼如下：
< ?php query_posts('posts_per_page=8&caller_get_posts=1&orderby=comment_count'); while (have_posts()) : the_post(); ?>< ul class="c_right_con">< div class="hot_left">< a href="<?php the_permalink(); ?>">< ?php if(has_post_thumbnail()) { //如果有特色圖片，就調(diào)用特色圖片the_post_thumbnail( //直接顯示特色圖片'thumbnail' , //以縮略圖的形式顯示array( 'alt'=> trim(strip_tags( $post->post_title )), //img標(biāo)簽的alt屬性'title'=> trim(strip_tags( $post->post_title )),//img標(biāo)簽的title屬性'class'=> 'home-thumb' )); }else { //否則調(diào)用文章第一張圖片echo '< img src="'.catch_first_image().'" alt="'.$post->post_title.'" width="150" height="150" />';}?>< /a>< /div>< div class="hot_right">< li>< a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> < /li>< li>< span class="dashicons-before dashicons-calendar-alt"><?php the_time("Y年m月d日"); ?> < /span>< span class="dashicons-before dashicons-visibility">< ?php get_post_meta($post->ID,"views",true); ?> < /span>< /li>< /div>< /ul><?php endwhile; wp_reset_query(); ?>
熱門文章效果
上面代碼中的query_posts()參數(shù)，我們用到了 orderby=comment_count ，這表示按評(píng)論多少來排序文章。代碼中其它的wordpress函數(shù)，我們?cè)谇懊娴恼鹿?jié)中都已經(jīng)介紹過，這里就不多說了。
第三步：從wordpress數(shù)據(jù)庫(kù)中調(diào)用40個(gè)熱門標(biāo)簽。
tag標(biāo)簽是wordpress的一個(gè)非常獨(dú)特的內(nèi)容，它可以像分類列表頁(yè)一樣地展示所有包含某個(gè)標(biāo)簽的文章列表，而那些所謂的搜索引擎，卻非常地喜歡這個(gè)tag標(biāo)簽，收錄量超大。閑話少說。我們先來看一下tras
< ul class="c_right_tag">< a href="">aaaadad1</a>< a href="">aaaad2</a>< a href="">aaaad3</a>< a href="">aaadsa4</a>< a href="">aaa5</a>< a href="">aaaadf6</a> < /ul>
我們也是先把ul標(biāo)簽里的所有a標(biāo)簽刪除，如下：
< ul class="c_right_tag"> < /ul>
然后，在這個(gè)ul標(biāo)簽中添加tag熱門標(biāo)簽的調(diào)用代碼，如下：
<?phpwp_tag_cloud('number=40&orderby=count&order=DESC&smallest=13&largest=13&unit=px'); ?>
熱門標(biāo)簽效果
?上面的代碼中，我們使用了wordpress提供的一個(gè)標(biāo)簽云函數(shù)wp_tag_cloud()，如要不添加任何參數(shù)，它會(huì)顯示當(dāng)前wordpress網(wǎng)站中的所有的tag標(biāo)簽。我們這里給它添加了6個(gè)參數(shù)：
number=40=> 顯示多少個(gè)標(biāo)簽orderby=count=> 按文章數(shù)量排序order=DESC=> 倒序smallest=13=> 字體最小13largest=13=> 字體最大13 ，要以根據(jù)自己的需求來設(shè)置大小unit=px=> 字體的單位，px表示像素
通過上面的幾步，我們就為wordpress主題trans的首頁(yè)右側(cè)邊欄修改好，我們從wordpress數(shù)據(jù)庫(kù)的中調(diào)用了最新發(fā)表的文章和熱門文章、熱門標(biāo)簽，讓整個(gè)右側(cè)邊欄也動(dòng)了起來，達(dá)到了我們想要的效果。當(dāng)然，我們還可以給右側(cè)邊欄添加更多的功能模板，如：文章歸檔、日歷、近期評(píng)論、廣告等等，這些，我們需要根據(jù)自己或客戶的需求而定。發(fā)子，本章就介紹到這里，如有疑問，歡迎點(diǎn)評(píng)和關(guān)注我。
嘍大家好，我是作者“未來”，本期分享的內(nèi)容是Web前端系列課程，本系列總共29個(gè)階段，堅(jiān)持學(xué)習(xí)3個(gè)月蛻變?yōu)閃eb前端高手哦！
志同道合的小伙伴跟我一起學(xué)習(xí)交流哦！
因?yàn)樵诘木庉嬛小?”和“>”中的內(nèi)容都會(huì)被識(shí)別為代碼，顯示不出來內(nèi)容，所以，在文本中會(huì)省略“<”和“>”，圖片中的“<”和“>”不會(huì)省略。
1 表格table（會(huì)使用）
在HTML網(wǎng)頁(yè)中，要想創(chuàng)建表格，就需要使用表格相關(guān)的標(biāo)簽。創(chuàng)建表格的基本語(yǔ)法格式如下：
2 表格的注意事項(xiàng)
1 tr和 /tr中只能嵌套td和/td標(biāo)簽
2 td和/td標(biāo)簽，他就像一個(gè)容器，可以容納所有的元素
3 表格屬性
使用方法：
4 表頭標(biāo)簽
只需用表頭標(biāo)記th和/th替代相應(yīng)的單元格標(biāo)記td和/td即可。
顯示效果為加粗和居中。
5 表格結(jié)構(gòu)（了解）
在使用表格進(jìn)行布局時(shí)，可以將表格劃分為頭部、主體和頁(yè)腳（頁(yè)腳因?yàn)橛屑嫒菪詥栴}，我們不在贅述），具體如下所示：
1 thead和/ thead：用于定義表格的頭部。
2 必須位于table和/ table標(biāo)簽中，一般包含網(wǎng)頁(yè)的logo和導(dǎo)航等頭部信息
3 tbody和/ tbody：用于定義表格的主體。
4 位于
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
