整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
多刚进入前端行业的小伙伴在写页面的时候，很容易出现错误，这时候很多小伙伴就会一行行查看自己的代码哪里有问题，或者仔细的对比网上代码，这样查看错误很浪费时间，而且陷入了自己的思维里面看不出错误在哪里。
下面呢，教大家如何快速的查找错误及解决问题。其实，咱们的浏览器就有控制台及一些辅助工具等帮助我们查找错误，在这里我使用的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小时内与您取得联系。
