HTML/CSS入门教程完整指南：从基础到实战的全面教程与技巧
如果你刚接触网页制作，HTML和CSS是你必须掌握的两门基础语言。
HTML负责网页的结构和内容，就像房子的骨架和房间；CSS则负责网页的外观和布局，就像房子的装修和风格。本指南将从最基础的概念讲起，逐步带你走进实战，让你能独立制作出一个像样的网页。
首先，你需要一个简单的文本编辑器，比如Windows自带的记事本，或者更推荐的VS Code、Sublime Text。然后，你还需要一个浏览器，比如Chrome或Edge，用来预览你的网页。
第一步，创建第一个HTML文件。新建一个文本文档，将后缀名改为.html。用编辑器打开，输入以下基础结构：第一行写，告诉浏览器这是HTML5文档。接下来是标签，里面包含和两部分。里放网页的元信息，比如标题
和字符编码。里放所有可见的内容，比如标题、段落、图片等。例如，在里写一个</p>
<h1>欢迎来到我的网页</h1>
<p>，再写一个</p>
<p>这是第一段文字。</p>
<p>，保存后双击文件，浏览器就会显示出来。<br />
HTML的标签是成对出现的，比如</p>
<h1></h1>
<p>，但也有一些自闭合标签，比如<img>和<br />。常用标签包括：标题标签h1到h6，段落标签p，链接标签a（需要href属性指定地址），图片标签img（需要src属性指定图片路径），以及列表标签ul（无序列表）和ol（有序列表）。学会这些，你就能搭建一个简单的网页骨架。<br />
接下来是CSS。CSS可以写在HTML文件的里，用标签包裹，也可以单独写一个.css文件，再通过引入。最基础的方式是在里写选择器和声明。比如，你想让所有段落文字变红，就写p { color: red; }。如果你想只让某个特定段落变蓝，可以给它一个id属性，比如</p>
<p id="special">，然后用#special { color: blue; }。更常用的方式是使用class，比如</p>
<p class="highlight">，然后用.highlight { background-color: yellow; }。<br />
CSS的核心概念包括盒模型、浮动、定位和弹性布局。盒模型指的是每个元素都是一个盒子，包含内容区、内边距padding、边框border和外边距margin。理解盒模型能帮你精确控制元素间距和大小。浮动float曾经是布局的主力，但现在更推荐使用Flexbox。Flexbox能轻松实现水平居中、垂直居中、等分布局等。例如，给父容器设置display: flex; justify-content: center; align-items: center;，子元素就会自动居中。<br />
实战部分，我们来做一个简单的个人名片网页。首先，在body里放一个div容器，给它一个class叫card。在card里放一张头像图片，一个姓名标题，一段简介文字，以及几个社交链接。然后，用CSS美化它：设置card的宽度为300像素，背景为浅灰色，圆角边框为10像素，内边距为20像素，并让它在页面居中。头像图片设置为圆形，宽度100像素，水平居中。姓名标题用大号字体并加粗，简介文字用稍小的灰色字体。链接用蓝色，悬停时变深蓝。最后，使用Flexbox让整个卡片在页面垂直居中。<br />
你可能会遇到一些常见问题。比如图片不显示，检查路径是否正确；文字没对齐，检查CSS选择器是否写对了；布局乱掉，检查是否忘了清除浮动或盒模型计算。建议你从模仿开始，先照着别人的代码写一遍，再修改成自己的内容。多动手，多调试，遇到问题就按F12打开开发者工具，查看元素和样式，这是最有效的学习方法。<br />
当你掌握了基础，可以进一步学习响应式设计，使用媒体查询让网页在不同屏幕尺寸下自动调整布局。还可以学习过渡和动画效果，让网页更生动。更高级的，可以结合JavaScript实现交互功能。但所有进阶都建立在扎实的HTML和CSS基础上。<br />
总之，学习HTML/CSS不需要天赋，只需要耐心和练习。每天花半小时写一个小页面，一个月后你就能做出像样的作品。记住，最好的学习方式就是动手做，而不是只看教程。现在，打开你的编辑器，开始写你的第一个网页吧。</p>
</div>
<div class="post-tags my-3"><i class="iconfont icon-tags mr-2"></i><a href="https://www.52dianshang.com/wangzhanzhizuo" class="vc-l-green btn btn-sm text-height-xs m-1 rounded-pill text-xs" rel="tag" title="查看更多"><i class="iconfont icon-folder mr-1"></i>网站制作</a></div><div class="text-xs text-muted"><div><span>©</span> 版权声明</div><div class="posts-copyright">文章版权归作者所有，未经允许请勿转载。</div></div>
<div class="apd my-3 "><div class="apd-body"><a href="https://www.aliyun.com/minisite/goods?userCode=btdkkz7w" target="_blank"><img src="https://www.52dianshang.com/wp-content/themes/onenav/assets/images/alad.jpg" alt="广告也精彩" /></a></div></div> </div>
</div>
<div class="near-navigation mt-4 py-2">
<div class="nav previous border-right border-color">
<a class="near-permalink" href="https://www.52dianshang.com/5143.html">
<span class="text-muted">上一篇</span>
<h4 class="near-title">企业官网建设报价学习路径：从新手到专家的完整成长指南</h4>
</a>
</div>
<div class="nav next border-left border-color">
<a class="near-permalink" href="https://www.52dianshang.com/5149.html">
<span class="text-muted">下一篇</span>
<h4 class="near-title">模板建站多少钱操作手册：完整工作流程与注意事项详解</h4>
</a>
</div>
</div>
<h4 class="text-gray text-lg my-4"><i class="site-tag iconfont icon-book icon-lg mr-1" ></i>相关文章</h4><div class="posts-row"><article class="posts-item post-item d-flex style-post-card post-2657 col-2a col-md-4a">
<div class="item-header">
<div class="item-media">
<a class="item-image" href="https://www.52dianshang.com/2657.html" target="_blank">
<img class="fill-cover lazy unfancybox" src="https://www.52dianshang.com/wp-content/themes/onenav/assets/images/t1.svg" data-src="https://www.52dianshang.com/wp-content/uploads/2025/12/deepseek-featured-2657-1767110422.png" height="auto" width="auto" alt="网站建设方案和价格操作手册：完整工作流程与注意事项详解">
</a>
</div>
</div>
<div class="item-body d-flex flex-column flex-fill">
<h3 class="item-title line2">
<a href="https://www.52dianshang.com/2657.html" title="网站建设方案和价格操作手册：完整工作流程与注意事项详解"target="_blank">网站建设方案和价格操作手册：完整工作流程与注意事项详解</a>
</h3>
<div class="mt-auto">
<div class="item-tags overflow-x-auto no-scrollbar"><a href="https://www.52dianshang.com/wangzhanzhizuo" class="badge vc-l-theme text-ss mr-1" rel="tag" title="查看更多文章"><i class="iconfont icon-folder mr-1"></i>网站制作</a></div>
<div class="item-meta d-flex align-items-center flex-fill text-muted text-xs"><div class="meta-left"><a href="https://www.52dianshang.com/author/0" class="avatar-sm mr-1" target="_blank"><img alt='' src='https://cdn2.iocdn.cc/avatar/?s=20&d=mm&r=g' srcset='https://cdn2.iocdn.cc/avatar/?s=40&d=mm&r=g 2x' class='avatar avatar-20 photo avatar-default' height='20' width='20' loading='lazy' decoding='async'/></a><span title="2025-12-31 00:00:22" class="meta-time">5个月前</span></div><div class="ml-auto meta-right"><span class="meta-comm d-none d-md-inline-block" data-toggle="tooltip" title="去评论" js-href="#comments"><i class="iconfont icon-comment"></i>0</span><span class="meta-view"><i class="iconfont icon-chakan-line"></i>132</span><span class="meta-like d-none d-md-inline-block"><i class="iconfont icon-like-line"></i>0</span></div></div>
</div>
</div>
</article><article class="posts-item post-item d-flex style-post-card post-3379 col-2a col-md-4a">
<div class="item-header">
<div class="item-media">
<a class="item-image" href="https://www.52dianshang.com/3379.html" target="_blank">
<img class="fill-cover lazy unfancybox" src="https://www.52dianshang.com/wp-content/themes/onenav/assets/images/t1.svg" data-src="https://www.52dianshang.com/wp-content/uploads/2026/02/deepseek-featured-3379-1770544819.png" height="auto" width="auto" alt="图片素材网站推荐技巧大全：提升效率的实用方法与操作指南">
</a>
</div>
</div>
<div class="item-body d-flex flex-column flex-fill">
<h3 class="item-title line2">
<a href="https://www.52dianshang.com/3379.html" title="图片素材网站推荐技巧大全：提升效率的实用方法与操作指南"target="_blank">图片素材网站推荐技巧大全：提升效率的实用方法与操作指南</a>
</h3>
<div class="mt-auto">
<div class="item-tags overflow-x-auto no-scrollbar"><a href="https://www.52dianshang.com/wangzhanzhizuo" class="badge vc-l-theme text-ss mr-1" rel="tag" title="查看更多文章"><i class="iconfont icon-folder mr-1"></i>网站制作</a></div>
<div class="item-meta d-flex align-items-center flex-fill text-muted text-xs"><div class="meta-left"><a href="https://www.52dianshang.com/author/0" class="avatar-sm mr-1" target="_blank"><img alt='' src='https://cdn2.iocdn.cc/avatar/?s=20&d=mm&r=g' srcset='https://cdn2.iocdn.cc/avatar/?s=40&d=mm&r=g 2x' class='avatar avatar-20 photo avatar-default' height='20' width='20' loading='lazy' decoding='async'/></a><span title="2026-02-08 18:00:19" class="meta-time">4个月前</span></div><div class="ml-auto meta-right"><span class="meta-comm d-none d-md-inline-block" data-toggle="tooltip" title="去评论" js-href="#comments"><i class="iconfont icon-comment"></i>0</span><span class="meta-view"><i class="iconfont icon-chakan-line"></i>74</span><span class="meta-like d-none d-md-inline-block"><i class="iconfont icon-like-line"></i>0</span></div></div>
</div>
</div>
</article><article class="posts-item post-item d-flex style-post-card post-4582 col-2a col-md-4a">
<div class="item-header">
<div class="item-media">
<a class="item-image" href="https://www.52dianshang.com/4582.html" target="_blank">
<img class="fill-cover lazy unfancybox" src="https://www.52dianshang.com/wp-content/themes/onenav/assets/images/t1.svg" data-src="https://www.52dianshang.com/wp-content/uploads/2026/04/deepseek-featured-4582-1776808825.png" height="auto" width="auto" alt="图片素材网站推荐应用指南：多场景解决方案与实战案例">
</a>
</div>
</div>
<div class="item-body d-flex flex-column flex-fill">
<h3 class="item-title line2">
<a href="https://www.52dianshang.com/4582.html" title="图片素材网站推荐应用指南：多场景解决方案与实战案例"target="_blank">图片素材网站推荐应用指南：多场景解决方案与实战案例</a>
</h3>
<div class="mt-auto">
<div class="item-tags overflow-x-auto no-scrollbar"><a href="https://www.52dianshang.com/wangzhanzhizuo" class="badge vc-l-theme text-ss mr-1" rel="tag" title="查看更多文章"><i class="iconfont icon-folder mr-1"></i>网站制作</a></div>
<div class="item-meta d-flex align-items-center flex-fill text-muted text-xs"><div class="meta-left"><a href="https://www.52dianshang.com/author/0" class="avatar-sm mr-1" target="_blank"><img alt='' src='https://cdn2.iocdn.cc/avatar/?s=20&d=mm&r=g' srcset='https://cdn2.iocdn.cc/avatar/?s=40&d=mm&r=g 2x' class='avatar avatar-20 photo avatar-default' height='20' width='20' loading='lazy' decoding='async'/></a><span title="2026-04-22 06:00:25" class="meta-time">1个月前</span></div><div class="ml-auto meta-right"><span class="meta-comm d-none d-md-inline-block" data-toggle="tooltip" title="去评论" js-href="#comments"><i class="iconfont icon-comment"></i>0</span><span class="meta-view"><i class="iconfont icon-chakan-line"></i>23</span><span class="meta-like d-none d-md-inline-block"><i class="iconfont icon-like-line"></i>0</span></div></div>
</div>
</div>
</article><article class="posts-item post-item d-flex style-post-card post-5081 col-2a col-md-4a">
<div class="item-header">
<div class="item-media">
<a class="item-image" href="https://www.52dianshang.com/5081.html" target="_blank">
<img class="fill-cover lazy unfancybox" src="https://www.52dianshang.com/wp-content/themes/onenav/assets/images/t1.svg" data-src="https://www.52dianshang.com/wp-content/uploads/2026/05/deepseek-featured-5081-1779552016.png" height="auto" width="auto" alt="如何选择网站建设公司技巧大全：提升效率的实用方法与操作指南">
</a>
</div>
</div>
<div class="item-body d-flex flex-column flex-fill">
<h3 class="item-title line2">
<a href="https://www.52dianshang.com/5081.html" title="如何选择网站建设公司技巧大全：提升效率的实用方法与操作指南"target="_blank">如何选择网站建设公司技巧大全：提升效率的实用方法与操作指南</a>
</h3>
<div class="mt-auto">
<div class="item-tags overflow-x-auto no-scrollbar"><a href="https://www.52dianshang.com/wangzhanzhizuo" class="badge vc-l-theme text-ss mr-1" rel="tag" title="查看更多文章"><i class="iconfont icon-folder mr-1"></i>网站制作</a></div>
<div class="item-meta d-flex align-items-center flex-fill text-muted text-xs"><div class="meta-left"><a href="https://www.52dianshang.com/author/0" class="avatar-sm mr-1" target="_blank"><img alt='' src='https://cdn2.iocdn.cc/avatar/?s=20&d=mm&r=g' srcset='https://cdn2.iocdn.cc/avatar/?s=40&d=mm&r=g 2x' class='avatar avatar-20 photo avatar-default' height='20' width='20' loading='lazy' decoding='async'/></a><span title="2026-05-24 00:00:16" class="meta-time">4天前</span></div><div class="ml-auto meta-right"><span class="meta-comm d-none d-md-inline-block" data-toggle="tooltip" title="去评论" js-href="#comments"><i class="iconfont icon-comment"></i>0</span><span class="meta-view"><i class="iconfont icon-chakan-line"></i>8</span><span class="meta-like d-none d-md-inline-block"><i class="iconfont icon-like-line"></i>0</span></div></div>
</div>
</div>
</article></div>
<!-- comments -->
<div id="comments" class="comments">
<h2 id="comments-list-title" class="comments-title text-lg mx-1 my-4">
<i class="iconfont icon-comment"></i>
<span class="noticom">
<a href="https://www.52dianshang.com/5146.html#respond" class="comments-title" >暂无评论</a>
</span>
</h2>
<div class="card">
<div class="card-body">
<div id="respond_box">
<div id="respond" class="comment-respond">
<form id="commentform" class="text-sm mb-4">
<div class="avatar-box d-flex align-items-center flex-fill mb-2">
<div class="avatar-img"><img class="avatar rounded-circle" src="https://www.52dianshang.com/wp-content/themes/onenav/assets/images/gravatar.jpg"></div> </div>
<div class="comment-textarea mb-3">
<textarea name="comment" id="comment" class="form-control" placeholder="输入评论内容..." tabindex="4" cols="50" rows="3"></textarea>
</div>
<div id="comment-author-info" class="row row-sm">
<div class="col-12 col-md-6 mb-3"><input type="text" name="author" id="author" class="form-control" value="" size="22" placeholder="昵称" tabindex="2"/></div>
<div class="col-12 col-md-6 mb-3"><input type="text" name="email" id="email" class="form-control" value="" size="22" placeholder="邮箱" tabindex="3" /></div>
</div>
<div class="com-footer d-flex justify-content-end flex-wrap">
<input type="hidden" id="_wpnonce" name="_wpnonce" value="515fe985d4" /><input type="hidden" name="_wp_http_referer" value="/5146.html" /> <a rel="nofollow" id="cancel-comment-reply-link" style="display: none;" href="javascript:;" class="btn vc-l-gray mx-2">再想想</a>
<button class="btn btn-hover-dark btn-shadow vc-theme ml-2" type="submit" id="submit">发表评论</button>
<input type="hidden" name="action" value="ajax_comment"/>
<input type='hidden' name='comment_post_ID' value='5146' id='comment_post_ID' />
<input type='hidden' name='comment_parent' id='comment_parent' value='0' />
</div>
</form>
<div class="clear"></div>
</div>
</div>
<div id="loading-comments"><span></span></div>
<div class="col-1a-i nothing-box nothing-type-none"><div class="nothing"><img src="https://www.52dianshang.com/wp-content/themes/onenav/assets/images/svg/wp_none.svg" alt="none" class="nothing-svg"><div class="nothing-msg text-sm text-muted">暂无评论...</div></div></div>
</div>
</div>
</div><!-- comments end -->
</div>
</div>
<div class="sidebar sidebar-tools d-none d-lg-block">
<div id="iow_tag_cloud_tool-4" class="card io-sidebar-widget io-widget-tag-cloud"><div class="sidebar-header "><div class="card-header widget-header"><h3 class="text-md mb-0"><i class="mr-2 iconfont icon-tools"></i>标签云</h3></div></div><span class="ajax-auto-post auto" data-href="https://www.52dianshang.com/wp-admin/admin-ajax.php" data-target="#iow_tag_cloud_tool-4 .ajax-panel" data-action="load_tag_cloud" data-instance="{"window":"1","taxonomy":["favorites","sitetag"],"count":"20","orderby":"name","show_count":""}"></span><div class="card-body d-flex flex-wrap ajax-panel" style="gap: 6px;"><div class="placeholder flex-fill" style="--height:30px;--width:65px;"></div><div class="placeholder flex-fill" style="--height:30px;--width:43px;"></div><div class="placeholder flex-fill" style="--height:30px;--width:52px;"></div><div class="placeholder flex-fill" style="--height:30px;--width:58px;"></div><div class="placeholder flex-fill" style="--height:30px;--width:78px;"></div><div class="placeholder flex-fill" style="--height:30px;--width:107px;"></div><div class="placeholder flex-fill" style="--height:30px;--width:99px;"></div><div class="placeholder flex-fill" style="--height:30px;--width:70px;"></div><div class="placeholder flex-fill" style="--height:30px;--width:108px;"></div><div class="placeholder flex-fill" style="--height:30px;--width:75px;"></div><div class="placeholder flex-fill" style="--height:30px;--width:47px;"></div><div class="placeholder flex-fill" style="--height:30px;--width:97px;"></div><div class="placeholder flex-fill" style="--height:30px;--width:43px;"></div><div class="placeholder flex-fill" style="--height:30px;--width:97px;"></div><div class="placeholder flex-fill" style="--height:30px;--width:41px;"></div><div class="placeholder flex-fill" style="--height:30px;--width:85px;"></div><div class="placeholder flex-fill" style="--height:30px;--width:68px;"></div><div class="placeholder flex-fill" style="--height:30px;--width:63px;"></div><div class="placeholder flex-fill" style="--height:30px;--width:49px;"></div><div class="placeholder flex-fill" style="--height:30px;--width:49px;"></div></div></div>
</div>
</div>
</main>
<footer class="main-footer footer-stick">
<div class="switch-container container-footer container-fluid">
<div class="footer row pt-5 text-center text-md-left">
<div class="col-12 col-md-4 mb-4 mb-md-0"><a href="https://www.52dianshang.com" class="logo-expanded footer-logo"><img src="https://www.52dianshang.com/wp-content/uploads/2025/11/1762239691-LOGO.png" height="40" switch-src="https://www.52dianshang.com/wp-content/uploads/2025/11/1762239691-LOGO.png" is-dark="false" alt="吾爱电商"></a><div class="text-sm mt-4">吾爱电商是一个链接未来生活、电商和科技的导航网站！</div><div class="footer-social mt-3"><a class="social-btn bg-l" href="javascript:;" data-toggle="tooltip" data-placement="top" data-html="true" title="<img src="https://www.52dianshang.com/wp-content/uploads/2025/10/1760863549-10172455SYgwra.jpg" height="100" width="100">" rel="external noopener nofollow"><i class="iconfont icon-wechat"></i></a><a class="social-btn bg-l" href="http://wpa.qq.com/msgrd?v=3&uin=17368590195&site=qq&menu=yes" target="_blank" data-toggle="tooltip" data-placement="top" title="QQ" rel="external noopener nofollow"><i class="iconfont icon-qq"></i></a><a class="social-btn bg-l" href="https://www.iotheme.cn" target="_blank" data-toggle="tooltip" data-placement="top" title="微博" rel="external noopener nofollow"><i class="iconfont icon-weibo"></i></a><a class="social-btn bg-l" href="https://www.iotheme.cn" target="_blank" data-toggle="tooltip" data-placement="top" title="GitHub" rel="external noopener nofollow"><i class="iconfont icon-github"></i></a><a class="social-btn bg-l" href="mailto:1234567788@QQ.COM" target="_blank" data-toggle="tooltip" data-placement="top" title="Email" rel="external noopener nofollow"><i class="iconfont icon-email"></i></a></div></div>
<div class="col-12 col-md-5 my-4 my-md-0">
<p class="footer-links text-sm mb-3"><a href="https://www.52dianshang.com/%e5%85%8d%e8%b4%a3%e5%a3%b0%e6%98%8e">免责声明</a>
<a href="https://www.52dianshang.com/%e6%b3%95%e5%be%8b%e5%a3%b0%e6%98%8e">法律声明</a>
<a href="https://www.52dianshang.com/privacy-policy">隐私政策</a>
<a href="https://www.52dianshang.com/%e7%94%a8%e6%88%b7%e5%8d%8f%e8%ae%ae">用户协议</a>
<a href="https://www.52dianshang.com/联系删除">联系删除</a>
<a href="https://www.52dianshang.com/about">关于我们</a>
</p>
</div>
<div class="col-12 col-md-3 text-md-right mb-4 mb-md-0"><div class="footer-mini-img text-center" data-toggle="tooltip" title="扫码加微信"><div class="bg-l br-md p-1"><img class=" " src="https://www.52dianshang.com/wp-content/uploads/2025/10/1760863549-10172455SYgwra.jpg" alt="扫码加微信吾爱电商"></div><span class="text-muted text-xs mt-2">扫码加微信</span></div><div class="footer-mini-img text-center" data-toggle="tooltip" title="扫码加微信"><div class="bg-l br-md p-1"><img class=" " src="https://www.52dianshang.com/wp-content/uploads/2025/10/1760863549-10172455SYgwra.jpg" alt="扫码加微信吾爱电商"></div><span class="text-muted text-xs mt-2">扫码加微信</span></div></div>
<div class="footer-copyright m-3 text-xs">
Copyright © 2025 <a class="" title="吾爱电商丨科技驱动增长" href="https://www.52dianshang.com/" rel="home">吾爱电商</a> <a class="" href="https://beian.miit.gov.cn/" target="_blank" rel="link noopener">苏ICP备2022000934号-2 </a>
<span style="color: #ff0000;">免责声明：本网站仅提供网址导航服务，对所链接网站的内容不承担任何责任。</span>
本站一切资源不代表本站立场如有侵权内容、不妥之处请第一时间联系我们删除，敬请谅解！QQ：1736801651 由<a href="https://www.iotheme.cn/?aff=109349" title="一为主题-精品wordpress主题" target="_blank" class="" rel="noopener"><strong> OneNav </strong></a>强力驱动
</div>
</div>
</div>
</footer><script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/onenav/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<div id="footer-tools" class="tools-right io-footer-tools d-flex flex-column">
<a href="javascript:" class="btn-tools go-to-up go-up my-1" rel="go-up" style="display: none">
<i class="iconfont icon-to-up"></i>
</a>
<a class="btn-tools custom-tool0 my-1 qr-img" href="javascript:;" data-toggle="tooltip" data-html="true" data-placement="left" title="<img src='https://www.52dianshang.com/wp-content/uploads/2025/10/1760863549-10172455SYgwra.jpg' height='100' width='100'>">
<i class="iconfont icon-wechat"></i>
</a><a class="btn-tools custom-tool1 my-1" href="http://wpa.qq.com/msgrd?v=3&uin=17368590195&site=qq&menu=yes" target="_blank" data-toggle="tooltip" data-placement="left" title="QQ" rel="external noopener nofollow">
<i class="iconfont icon-qq"></i>
</a> <a href="javascript:" class="btn-tools switch-dark-mode my-1" data-toggle="tooltip" data-placement="left" title="夜间模式">
<i class="mode-ico iconfont icon-light"></i>
</a>
</div>
<div class="search-modal" id="search-modal"><div class="search-body mx-0 mx-md-3"><form role="search" method="get" class="search-form search-card" action="https://www.52dianshang.com/"><div class="search-box"><div class="dropdown" select-dropdown><a href="javascript:" role="button" class="btn" data-toggle="dropdown" aria-expanded="false"><span class="select-item">网址</span><i class="iconfont i-arrow icon-arrow-b ml-2"></i></a><input type="hidden" name="post_type" value="sites"><div class="dropdown-menu"><a class="dropdown-item" href="javascript:" data-value="sites">网址</a><a class="dropdown-item" href="javascript:" data-value="post">文章</a><a class="dropdown-item" href="javascript:" data-value="app">软件</a><a class="dropdown-item" href="javascript:" data-value="book">书籍</a></div></div><input type="search" class="form-control" required="required" placeholder="你想了解些什么" value="" name="s" /><button type="submit" class="btn vc-theme search-submit"><i class="iconfont icon-search"></i></button></div></form><div class="search-body-box d-flex flex-column flex-md-row"></div></div></div><script type="text/javascript">window.IO = {"ajaxurl":"https:\/\/www.52dianshang.com\/wp-admin\/admin-ajax.php","uri":"https:\/\/www.52dianshang.com\/wp-content\/themes\/onenav","homeUrl":"https:\/\/www.52dianshang.com","minAssets":".min","uid":"","homeWidth":"2200","loginurl":"https:\/\/www.52dianshang.com\/login\/?redirect_to=https:\/\/www.52dianshang.com\/5146.html","sitesName":"吾爱电商","addico":"https:\/\/www.52dianshang.com\/wp-content\/themes\/onenav\/assets\/images\/add.png","order":"asc","formpostion":"top","defaultclass":"io-grey-mode","isCustomize":false,"faviconApi":"https:\/\/t0.gstatic.cn\/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&size=128&url=%url%","customizemax":10,"newWindow":true,"lazyload":true,"minNav":false,"loading":true,"hotWords":"baidu","classColumns":" col-2a col-sm-2a col-md-2a col-lg-3a col-xl-5a col-xxl-6a ","apikey":"TVRneU1ESXhOVGMzTWpreU5UUT11OHNSU05UZzJlSE5ZYkVwR1IzSlJWa3BVVkVNM2VucExaREYwWVdKVVZHUllaMGxa","isHome":false,"themeType":"auto-system","mceCss":"https:\/\/www.52dianshang.com\/wp-content\/themes\/onenav\/assets\/css\/editor-style.css","version":"5.58","isShowAsideSub":false,"asideWidth":"140","localize":{"liked":"您已经赞过了!","like":"谢谢点赞!","networkError":"网络错误 --.","parameterError":"参数错误 --.","selectCategory":"为什么不选分类。","addSuccess":"添加成功。","timeout":"访问超时，请再试试，或者手动填写。","lightMode":"日间模式","nightMode":"夜间模式","editBtn":"编辑","okBtn":"确定","urlExist":"该网址已经存在了 --.","cancelBtn":"取消","successAlert":"成功","infoAlert":"信息","warningAlert":"警告","errorAlert":"错误","extractionCode":"网盘提取码已复制，点“确定”进入下载页面。","wait":"请稍候","loading":"正在处理请稍后...","userAgreement":"请先阅读并同意用户协议","reSend":"秒后重新发送","weChatPay":"微信支付","alipay":"支付宝","scanQRPay":"请扫码支付","payGoto":"支付成功，页面跳转中","clearFootprint":"确定要清空足迹记录吗？"},"postData":{"postId":5146,"postType":"post"}};</script><script id="bootstrap-js-js" src="https://www.52dianshang.com/wp-content/themes/onenav/assets/js/bootstrap.bundle.min.js?ver=5.58"></script>
<script id="require-js" src="https://www.52dianshang.com/wp-content/themes/onenav/assets/js/require.js?ver=5.58"></script>
<script id="jetpack-stats-js-before">
_stq = window._stq || [];
_stq.push([ "view", JSON.parse("{\"v\":\"ext\",\"blog\":\"249548274\",\"post\":\"5146\",\"tz\":\"8\",\"srv\":\"www.52dianshang.com\",\"j\":\"1:15.3.1\"}") ]);
_stq.push([ "clickTrackerInit", "249548274", "5146" ]);
//# sourceURL=jetpack-stats-js-before
</script>
<script data-wp-strategy="defer" defer id="jetpack-stats-js" src="https://stats.wp.com/e-202622.js"></script>
</body>
</html> 
