整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
多剛進入前端行業的小伙伴在寫頁面的時候，很容易出現錯誤，這時候很多小伙伴就會一行行查看自己的代碼哪里有問題，或者仔細的對比網上代碼，這樣查看錯誤很浪費時間，而且陷入了自己的思維里面看不出錯誤在哪里。
下面呢，教大家如何快速的查找錯誤及解決問題。其實，咱們的瀏覽器就有控制臺及一些輔助工具等幫助我們查找錯誤，在這里我使用的Chrome（谷歌瀏覽器）的控制臺來進行錯誤的查找。打開控制臺方式有兩種，一種在瀏覽器中點擊鼠標右鍵，選擇檢查，如下圖
另一種，直接通過快捷鍵F12（如果F12不行，可以試一下Fn+F12），調出來控制臺。
好了，了解完這些以后，我們來看一下都有哪些錯誤，以及如何通過控制臺查看錯誤進行更改。
先寫一個比較簡單的效果，寫一個div標簽，給這個div寫一個寬200px，高100px，背景顏色為粉色
HTML結構
<!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;}上面是想象中的樣子，完美。但實現效果上可能是這樣的：
出現問題的時候，穩住別慌，通過控制臺查看一下，首先看一下css樣式有沒有引入成功，上面說到過控制臺左邊為html標簽，右邊是css屬性，我們先選中div看一下右邊有沒有寫的css屬性
1、在這里看到右邊css那里沒有我們寫的寬高背景顏色，一種可能是我們css沒有引入成功，如果使用的是外部樣式表，可以去查一下自己寫的路徑對不對；如果路徑不對，一般在控制臺會顯示一個紅色的×，如下圖：
2、另一種可能我們寫的這個標簽的css修飾前多寫了標點符號。如下圖:
3、那如果我們在這里使用了class選擇器、id選擇器或者其他的選擇器，要注意選擇器的使用及名字的設置。不然也會出現顯示不了咱們的css修飾。
4、好了，再往下看，如果css還是沒有出來，就看一下單詞是否拼對、屬性和屬性值是否匹配。單詞不對，或屬性和屬性值不匹配那么控制臺的css屬性前面會出現一個黃色的感嘆號，并且會把錯誤的屬性劃掉，如下圖，這個時候就需要你查一下單詞和屬性了。
5、還有我們在網頁導航的時候會給導航項加邊框，代碼如下：
HTML結構：
<ul class="nav">
<li class="noborder">首頁</li>
<li>首頁</li>
<li>首頁</li>
<li>首頁</li>
<li>首頁</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;}我們要取消第一個或者最后一個的邊框，我們給第一個或最后一個li加class名取消邊框，發現取消不了，而且屬性和屬性值檢查了一遍是對的，在控制臺中也顯示了，只不過被劃掉了（注意只是劃掉，但沒有黃色感嘆號），這個時候可能是選擇器權重不夠
那么我們可以通過包含選擇題增加權重，找到父元素的class名，添加到前面就可以
css代碼修改
.nav .noborder{border-left:0}這樣就解決了。
最后總結一下：
再有前端的小伙伴遇到了上述幾種錯誤，可以嘗試通過上面的方式去解決一下，這些問題一般都是常見的，遇到幾次解決之后注意避免就可以啦~
前面的章節中，我們修改好了wordpress主題trans的首頁頭部和左側的代碼，實現了我們想要的效果。今天，我們再來給trans主題首頁的右側邊欄進行修改，把靜態的代碼修改成動態的。一般情況下，右側邊欄才是網站的主要側邊欄，而左側一般是頁面的主體部分。所以，右側邊欄大多是放置最新文章、熱門文章排行等等這類信息。
我們打開trans主題的index.html靜態模板，我們可以看到，它的右側邊欄主要有3個板塊：最新文章、熱門文章、熱門標簽。目前，它們的數據都是寫死的，我們要實現的是：從wordpress數據庫中調用數據，讓這些數據活起來。
第一步：從wordpress數據庫中調用10篇最新文章。
trans主題右側邊欄最新文章列表的靜態代碼如下：
< 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>標簽內的所有內容（所有a標簽）都刪除掉，變成如下代碼：
< ul class="c_right_article"> </ul>
然后，在這個ul標簽內部添加wordpress最新文章的調用代碼：
< ?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程序的一個查詢函數——query_posts()，它的作用是：從wordpress數據庫的wp-posts數據表中按條件查詢文章。上面的代碼中，給了3個條件：
posts_per_page=10=> 查詢10篇文章；caller_get_posts=1=> 排除置頂文章；orderby=new=> 排序按最新的
接著又用到了while循環語句。這里再強調一下，循環語句一定要結束它（endwhile) 或者用大括號把循環體包括起來。另外，使用了query_posts()查詢語句，就一定要使用 wp_reset_query()來結束它，否則，后面的代碼數據就可能會出錯。
第二步：從wordpress數據庫中調出10篇文章，按評論多少排序。
原靜態模板右側邊欄中的熱門文章代碼如下：
< 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="/">百度站長工具抓取診斷失敗的原因有哪些</a>< /li>< li>< span class="dashicons-before dashicons-calendar-alt">5月21日</span>< span class="dashicons-before dashicons-visibility">274</span>< /li>< /div>< /ul>
這是一篇熱門文章的代碼，我們要在右側邊欄顯示10篇，所以，我們依然是要使用循環語句，修改后的代碼如下：
< ?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()) { //如果有特色圖片，就調用特色圖片the_post_thumbnail( //直接顯示特色圖片'thumbnail' , //以縮略圖的形式顯示array( 'alt'=> trim(strip_tags( $post->post_title )), //img標簽的alt屬性'title'=> trim(strip_tags( $post->post_title )),//img標簽的title屬性'class'=> 'home-thumb' )); }else { //否則調用文章第一張圖片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()參數，我們用到了 orderby=comment_count ，這表示按評論多少來排序文章。代碼中其它的wordpress函數，我們在前面的章節中都已經介紹過，這里就不多說了。
第三步：從wordpress數據庫中調用40個熱門標簽。
tag標簽是wordpress的一個非常獨特的內容，它可以像分類列表頁一樣地展示所有包含某個標簽的文章列表，而那些所謂的搜索引擎，卻非常地喜歡這個tag標簽，收錄量超大。閑話少說。我們先來看一下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標簽里的所有a標簽刪除，如下：
< ul class="c_right_tag"> < /ul>
然后，在這個ul標簽中添加tag熱門標簽的調用代碼，如下：
<?phpwp_tag_cloud('number=40&orderby=count&order=DESC&smallest=13&largest=13&unit=px'); ?>
熱門標簽效果
?上面的代碼中，我們使用了wordpress提供的一個標簽云函數wp_tag_cloud()，如要不添加任何參數，它會顯示當前wordpress網站中的所有的tag標簽。我們這里給它添加了6個參數：
number=40=> 顯示多少個標簽orderby=count=> 按文章數量排序order=DESC=> 倒序smallest=13=> 字體最小13largest=13=> 字體最大13 ，要以根據自己的需求來設置大小unit=px=> 字體的單位，px表示像素
通過上面的幾步，我們就為wordpress主題trans的首頁右側邊欄修改好，我們從wordpress數據庫的中調用了最新發表的文章和熱門文章、熱門標簽，讓整個右側邊欄也動了起來，達到了我們想要的效果。當然，我們還可以給右側邊欄添加更多的功能模板，如：文章歸檔、日歷、近期評論、廣告等等，這些，我們需要根據自己或客戶的需求而定。發子，本章就介紹到這里，如有疑問，歡迎點評和關注我。
嘍大家好，我是作者“未來”，本期分享的內容是Web前端系列課程，本系列總共29個階段，堅持學習3個月蛻變為Web前端高手哦！
志同道合的小伙伴跟我一起學習交流哦！
因為在的編輯中“<”和“>”中的內容都會被識別為代碼，顯示不出來內容，所以，在文本中會省略“<”和“>”，圖片中的“<”和“>”不會省略。
1 表格table（會使用）
在HTML網頁中，要想創建表格，就需要使用表格相關的標簽。創建表格的基本語法格式如下：
2 表格的注意事項
1 tr和 /tr中只能嵌套td和/td標簽
2 td和/td標簽，他就像一個容器，可以容納所有的元素
3 表格屬性
使用方法：
4 表頭標簽
只需用表頭標記th和/th替代相應的單元格標記td和/td即可。
顯示效果為加粗和居中。
5 表格結構（了解）
在使用表格進行布局時，可以將表格劃分為頭部、主體和頁腳（頁腳因為有兼容性問題，我們不在贅述），具體如下所示：
1 thead和/ thead：用于定義表格的頭部。
2 必須位于table和/ table標簽中，一般包含網頁的logo和導航等頭部信息
3 tbody和/ tbody：用于定義表格的主體。
4 位于
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
