网页开发入门必读：本文深入浅出地讲解了HTML与CSS的基础结构与样式，助你快速掌握构建网页的核心技能。HTML负责搭建网页的骨架，通过语义化标签定义内容结构，而CSS则负责美化页面，利用选择器精准控制样式。文章详细介绍了HTML常用标签、语义化布局，以及CSS选择器的使用方法，并深入剖析了CSS盒模型，助你理解页面布局的基石。此外，还分享了高效组织和管理HTML与CSS文件的技巧，提升开发效率，是前端开发初学者的必备教程。掌握HTML和CSS，你就能轻松创建出结构清晰、美观大方的网页。
HTML和CSS是网页开发的基础，HTML负责结构，CSS负责样式，二者结合通过语义化标签和选择器实现内容与表现分离，利用盒模型进行布局，并通过模块化文件管理提升开发效率。
要开始构建任何网页，HTML和CSS是你的左膀右臂。简单来说，HTML负责搭建页面的骨架和内容，就像你盖房子先搭框架、砌墙一样；而CSS则负责给这个骨架穿上衣服、涂上颜色、摆放家具，让它看起来美观、有风格，并能根据需要灵活调整布局。它们俩缺一不可，共同决定了用户最终看到的网页是什么样子。
解决方案
理解HTML和CSS的基础，首先要明白它们各自的职责边界，以及如何协同工作。HTML（超文本标记语言）是用来定义网页内容的结构和语义的，比如哪些是标题，哪些是段落，哪里是图片，哪里是链接。它通过一系列预定义的“标签”（tags）来标记这些内容。而CSS（层叠样式表）则专门用于描述HTML文档的呈现样式，比如字体大小、颜色、背景、边距，甚至是复杂的布局。
它们结合起来，最常见的做法就是将CSS代码独立存储在一个.css文件中，然后通过HTML的
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页</title>
<link rel="stylesheet" href="style.css"> <!-- 引入外部CSS文件 -->
</head>
<body>
<header>
<h1>欢迎来到我的世界</h1>
</header>
<main>
<p>这是一段关于HTML和CSS的介绍。</p>
<button>点我了解更多</button>
</main>
<footer>
<p>© 2023 我的网站</p>
</footer>
</body>
</html>而对应的style.css文件可能包含：
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
h1 {
font-size: 2.5em;
margin-bottom: 10px;
}
main {
padding: 20px;
max-width: 800px;
margin: 20px auto;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
p {
line-height: 1.6;
}
button {
background-color: #007bff;
color: white;
padding: 10px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #0056b3;
}
footer {
text-align: center;
padding: 20px;
background-color: #333;
color: #fff;
margin-top: 30px;
}通过这种方式，我们既定义了页面的结构，又赋予了它独特的外观。
HTML网页骨架：常用标签与语义化布局实践
构建一个网页，就像搭建一座房子，首先得有框架和不同的功能区域。HTML的核心就是这些“框架”——各种标签。从最基础的</code>），以及引入外部CSS文件（<code><link rel="stylesheet" href="style.css"></code>）。这些内容用户通常看不到，但对浏览器解析和搜索引擎优化至关重要。</p><p>而所有用户可见的内容，都放在<code><body></code>标签里。这里面才是我们真正“写”页面的地方。我们用各种标签来组织内容，比如：</p><ul><li><strong>标题：</strong> <code><h1></code>到<code><h6></code>，数字越小，标题级别越高，字体越大。这不仅仅是视觉上的大小，更是语义上的重要性。</li><li><strong>段落：</strong> <code><p></code>用于包裹普通文本段落。</li><li><strong>链接：</strong> <code><a></code>（anchor）标签，通过<code>href</code>属性指定跳转目标。</li><li><strong>图片：</strong> <code><img></code>标签，通过<code>src</code>属性指定图片路径，<code>alt</code>属性提供图片描述，对SEO和无障碍访问非常重要。</li><li><strong>列表：</strong> 无序列表<code><ul></code>和有序列表<code><ol></code>，每个列表项用<code><li></code>表示。</li><li><strong>容器：</strong> <code><div></code>是一个通用的块级容器，常用于布局。<code><span></code>是一个通用的行内容器。它们本身没有语义，但通过CSS可以赋予它们任何样式。</li></ul><p>随着HTML5的出现，我们有了更多语义化的标签，这让我们的代码更具可读性，也对搜索引擎更友好。比如：</p><ul><li><code><header></code>：通常用于页面的顶部，包含网站Logo、导航等。</li><li><code><nav></code>：包含导航链接。</li><li><code><main></code>：页面的主要内容，一个页面通常只有一个<code><main></code>。</li><li><code><article></code>：独立的、可分发的内容，比如一篇文章或博客帖子。</li><li><code><section></code>：页面中一个独立的通用内容区块。</li><li><code><footer></code>：页面的底部，通常包含版权信息、联系方式等。</li></ul><p>使用这些语义化标签，不仅让我们的代码结构更清晰，也帮助辅助阅读设备更好地理解页面内容。这不仅仅是写给浏览器看的，更是写给未来维护者和搜索引擎看的。比如，一个博客文章的结构可能会是这样：</p><pre><article>
<header>
<h1>我的第一篇博客文章</h1>
<p>作者：张三，发布日期：2023年10月27日</p>
</header>
<section>
<h2>引言</h2>
<p>这是文章的引言部分，介绍文章的主题。</p>
</section>
<section>
<h2>正文</h2>
<p>这里是文章的主要内容。</p>
<ul>
<li>要点一</li>
<li>要点二</li>
</ul>
</section>
<footer>
<p>标签：HTML, CSS, 入门</p>
</footer>
</article></pre><p>这样的结构，即使没有CSS样式，也能清晰地表达出内容的层级和关系。</p><h3>CSS选择器：精准定位与样式应用之道</h3><p>CSS之所以强大，很大程度上在于其选择器机制。选择器就像是CSS的“瞄准镜”，它能让我们精确地找到HTML文档中的特定元素，然后把样式应用上去。如果不理解选择器，你的样式可能会作用到不该作用的地方，或者根本不生效。</p><p>最基础的选择器有几种：</p><ul><li><strong>元素选择器 (Type Selector)：</strong> 直接用HTML标签名来选择。比如<code>p { color: blue; }</code>会把所有<code><p></code>标签的文字变成蓝色。</li><li><strong>类选择器 (Class Selector)：</strong> 通过元素的<code>class</code>属性来选择。HTML元素可以有多个类。在CSS中使用<code>.</code>前缀。比如<code><p class="highlight"></code>对应的CSS是<code>.highlight { background-color: yellow; }</code>。这种方式非常灵活，可以复用。</li><li><strong>ID选择器 (ID Selector)：</strong> 通过元素的<code>id</code>属性来选择。<code>id</code>在一个HTML文档中必须是唯一的。在CSS中使用<code>#</code>前缀。比如<code><div id="main-header"></code>对应的CSS是<code>#main-header { font-size: 3em; }</code>。ID选择器的优先级很高，但因为它唯一性，通常用于JavaScript操作或特定布局区域。</li></ul><p>除了这些，还有更高级、更复杂的组合：</p><ul><li><strong>后代选择器 (Descendant Selector)：</strong> 选中某个元素内部的所有特定后代元素。例如<code>div p { margin-bottom: 10px; }</code>会选中所有<code><div></code>内部的<code><p></code>标签。</li><li><strong>子选择器 (Child Selector)：</strong> 只选中某个元素的直接子元素。例如<code>ul > li { list-style-type: square; }</code>只会选中<code><ul></code>的直接子<code><li></code>。</li><li><strong>相邻兄弟选择器 (Adjacent Sibling Selector)：</strong> 选中紧接在某个元素后面的兄弟元素。例如<code>h1 + p { text-indent: 2em; }</code>会选中紧跟在<code><h1></code>后面的第一个<code><p></code>。</li><li><strong>通用兄弟选择器 (General Sibling Selector)：</strong> 选中某个元素之后的所有兄弟元素。例如<code>h1 ~ p { color: gray; }</code>会选中<code><h1></code>之后的所有<code><p></code>。</li><li><strong>属性选择器 (Attribute Selector)：</strong> 根据元素的属性和属性值来选择。例如<code>a[target="_blank"] { color: red; }</code>会选中所有<code>target</code>属性值为<code>_blank</code>的<code><a></code>标签。</li><li><strong>伪类 (Pseudo-classes)：</strong> 选中处于特定状态的元素。例如<code>a:hover { text-decoration: underline; }</code>会在鼠标悬停在链接上时添加下划线。其他常见的有<code>:focus</code>, <code>:active</code>, <code>:nth-child()</code>, <code>:first-child</code>, <code>:last-child</code>等。</li><li><strong>伪元素 (Pseudo-elements)：</strong> 选中元素的特定部分。例如<code>p::first-letter { font-size: 2em; }</code>会选中段落的第一个字母。其他有<code>::before</code>, <code>::after</code>，常用于创建装饰性内容。</li></ul><p>理解这些选择器，特别是它们的优先级（specificity），是写好CSS的关键。简单来说，ID选择器优先级高于类选择器，类选择器高于元素选择器。当多个规则作用于同一个元素时，优先级高的规则会生效。如果优先级相同，则后定义的规则会覆盖先定义的。有时候，你可能会看到<code>!important</code>，它能强制提升某个声明的优先级，但通常建议避免滥用，因为它会破坏CSS的层叠机制，让调试变得困难。</p><p>来看个例子：</p><pre>/* 元素选择器 */
p {
font-size: 16px;
}
/* 类选择器 */
.intro-text {
color: #444;
}
/* ID选择器 */
#main-title {
text-align: center;
font-weight: bold;
}
/* 后代选择器 */
.card h2 {
color: #0056b3;
border-bottom: 1px solid #eee;
}
/* 伪类 */
button:hover {
opacity: 0.9;
}
/* 伪元素 */
.quote::before {
content: "“";
font-size: 2em;
vertical-align: middle;
margin-right: 5px;
}</pre><p>通过这些选择器，我们能精确地控制页面上每一个元素的样式，实现复杂的视觉效果。</p><h3>CSS盒模型：布局的基石与尺寸计算逻辑</h3><p>CSS盒模型，这是前端布局里一个绕不开的核心概念，也是很多新手容易感到困惑的地方。但一旦你真正理解了它，你就会发现，所有元素的布局、尺寸计算都围绕着它展开。你可以把HTML页面上的每个元素都想象成一个矩形的“盒子”，这个盒子由四个部分组成：内容区（Content）、内边距（Padding）、边框（Border）、外边距（Margin）。</p><ol><li><strong>内容区 (Content)：</strong> 这是盒子最核心的部分，比如文本、图片等实际内容占据的空间。它的尺寸由<code>width</code>和<code>height</code>属性决定。</li><li><strong>内边距 (Padding)：</strong> 内容区和边框之间的空间。它用于增加内容与边框之间的距离，让内容不至于“贴”在边框上。<code>padding</code>会增加元素的总尺寸。</li><li><strong>边框 (Border)：</strong> 围绕在内边距外面的线。你可以设置它的宽度、样式和颜色。<code>border</code>同样会增加元素的总尺寸。</li><li><strong>外边距 (Margin)：</strong> 边框外面的空间，用于控制元素与其他元素之间的距离。<code>margin</code>不会增加元素的实际尺寸，但会影响它在页面上的位置和与其他元素的间距。</li></ol><p>默认情况下，CSS盒模型是<code>content-box</code>。这意味着当你设置一个元素的<code>width</code>和<code>height</code>时，它们只应用于内容区。如果你再添加<code>padding</code>和<code>border</code>，元素的总宽度和总高度就会是：</p><ul><li><strong>总宽度 = <code>width</code> + <code>padding-left</code> + <code>padding-right</code> + <code>border-left-width</code> + <code>border-right-width</code></strong></li><li><strong>总高度 = <code>height</code> + <code>padding-top</code> + <code>padding-bottom</code> + <code>border-top-width</code> + <code>border-bottom-width</code></strong></li></ul><p>这在进行精确布局时，常常会让人感到头疼，因为每次计算元素总尺寸都要考虑这些额外的部分。</p><p>为了解决这个问题，CSS3引入了<code>box-sizing</code>属性，其中最常用的值是<code>border-box</code>。当你设置<code>box-sizing: border-box;</code>时，<code>width</code>和<code>height</code>属性将包括内容区、内边距和边框。也就是说：</p><ul><li><strong>总宽度 = <code>width</code></strong></li><li><strong>总高度 = <code>height</code></strong></li></ul><p>在这种模式下，你设置的<code>width</code>和<code>height</code>就是元素在页面上占据的实际可见空间，<code>padding</code>和<code>border</code>会“挤压”内容区的空间，而不是向外扩展。这使得布局计算变得直观得多，特别是在响应式设计和网格布局中，<code>border-box</code>几乎成了标准实践。通常，我们会在CSS的开头加上：</p><pre>/* 让所有元素的盒模型都采用 border-box */
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}</pre><p>这段代码会确保所有元素都继承<code>border-box</code>的盒模型行为，极大简化了布局计算。</p><p>理解盒模型对于处理元素之间的间距、对齐以及响应式设计至关重要。比如，当两个垂直方向的元素都有<code>margin</code>时，它们的<code>margin</code>可能会发生“外边距合并”（margin collapsing），即取两者中较大的那个值作为最终的间距，而不是简单相加。这些都是你在实践中会遇到的细节，掌握盒模型能让你更好地预测和控制元素的行为。</p><pre><div class="box content-box-example">
内容区
</div>
<div class="box border-box-example">
内容区 (border-box)
</div></pre><pre>.box {
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid black;
margin: 10px;
background-color: lightblue;
text-align: center;
line-height: 100px; /* 垂直居中文本 */
}
.content-box-example {
/* 默认行为，总宽度 = 100 + 2*20 + 2*5 = 150px */
box-sizing: content-box;
}
.border-box-example {
/* 总宽度 = 100px，内容区会被压缩 */
box-sizing: border-box;
background-color: lightcoral;
}</pre><p>通过这个例子，你可以直观地看到两种盒模型下，即使<code>width</code>和<code>height</code>设置相同，元素最终占据的空间却是不同的。</p><h3>高效组织与管理HTML和CSS文件，提升开发效率</h3><p>在小型项目甚至是一些个人页面中，我们可能习惯于把所有CSS都写在一个<code>style.css</code>文件里，或者干脆直接写在HTML的<code><style></code>标签中。但这在稍大一点的项目中，很快就会变得难以管理和维护。想象一下，一个上千行的CSS文件，你要找一个特定按钮的样式，那简直是噩梦。因此，一套清晰的文件组织和管理策略是提升开发效率的关键。</p><ol><li><p><strong>外部样式表优先：</strong>
始终优先使用外部CSS文件（通过<code><link rel="stylesheet" href="path/to/style.css"></code>引入）。这不仅实现了内容与样式的分离，让HTML文件更干净，也让CSS文件可以被多个HTML页面复用，减少了代码冗余。浏览器还会缓存外部CSS文件，提升页面加载速度。</p></li><li><p><strong>模块化CSS：</strong>
不要把所有CSS都堆在一个文件里。根据功能、组件或页面区域进行拆分。例如：</p><ul><li><code>base.css</code>：定义全局样式，如字体、颜色变量、重置样式（reset.css 或 normalize.css）。</li><li><code>layout.css</code>：定义页面整体布局，如header、footer、main、sidebar等。</li><li><code>components/button.css</code>：针对特定组件的样式，如按钮、卡片、表单。</li><li><code>pages/home.css</code>：针对特定页面的特殊样式。</li><li><code>utilities.css</code>：一些常用的工具类，如清除浮动、隐藏元素等。
然后，你可以在主CSS文件（比如<code>style.css</code>）中，使用<code>@import</code>规则将这些模块化的文件导入进来，或者在HTML中引入多个<code><link></code>标签。</li></ul><pre>/* style.css */
@import 'base.css';
@import 'layout.css';
@import 'components/button.css';
/* ... 更多模块 */</pre></li><li><p><strong>文件夹结构：</strong>
一个清晰的项目文件夹结构，能让你一眼就知道什么文件放在哪里。一个常见的结构是：</p><pre>my-project/
├── index.html
├── about.html
├── css/
│ ├── base.css
│ ├── layout.css
│ ├── components/
│ │ ├── button.css
│ │ └── card.css
│ └── pages/
│ └── home.css
├── js/
│ ├── main.js
│ └── modules/
│ └── carousel.js
└── img/
├── logo.png
└── background.jpg</pre><p>这种结构让文件各司其职，查找和修改都非常方便。</p></li><li><p><strong>命名规范：</strong>
遵循一致的命名规范，如BEM（Block Element Modifier）、SMACSS或OOCSS等，能让CSS类名更具语义化，减少冲突，提高可读性。例如，BEM会将一个按钮命名为<code>.button</code>，它的变体是<code>.button--primary</code>，按钮内的文本是<code>.button__text</code>。</p></li><li><p><strong>注释：</strong>
在复杂的CSS文件中，添加清晰的注释说明代码块的功能、目的或任何特殊注意事项，对于团队协作和未来维护至关重要。</p></li><li><p><strong>预处理器（Preprocessors）：</strong>
对于大型项目，Sass、Less或Stylus等CSS预处理器能极大地提升开发效率。它们引入了变量、嵌套、混合（mixins）、函数等编程特性，让CSS更具动态性和可维护性。例如，你可以定义颜色变量，在多处复用，一旦需要修改，只需改一个地方。</p><pre>/* _variables.scss (Sass示例) */
$primary-color: #007bff;
$font-stack: 'Arial', sans-serif;
/* button.scss */
.button {
background-color: $primary-color;
font-family: $font-stack;
/* ... */
}</pre><p>预处理器代码最终会被编译成标准的CSS文件。</p></li></ol><p>通过这些策略，我们不仅能写出功能正常的代码，更能写出</p><p>今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~</p> </div>
<div class="labsList">
<a href="javascript:;" title="html">html</a>
<a href="javascript:;" title="CSS">CSS</a>
<a href="javascript:;" title="网页开发">网页开发</a>
<a href="javascript:;" title="CSS选择器">CSS选择器</a>
<a href="javascript:;" title="CSS盒模型">CSS盒模型</a>
</div>
<div class="cateBox">
<div class="cateItem">
<a href="/article/373204.html" title="CSS子元素伸缩比例设置技巧" class="img_box">
<img src="/uploads/20251105/1762331976690b0d481c186.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="CSS子元素伸缩比例设置技巧">CSS子元素伸缩比例设置技巧 </a>
<dl>
<dt class="lineOverflow"><a href="/article/373204.html" title="CSS子元素伸缩比例设置技巧" class="aBlack">上一篇<i></i></a></dt>
<dd class="lineTwoOverflow">CSS子元素伸缩比例设置技巧</dd>
</dl>
</div>
<div class="cateItem">
<a href="/article/373206.html" title="WebSocket协议详解与应用解析" class="img_box">
<img src="/uploads/20251105/1762332032690b0d80c1b97.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="WebSocket协议详解与应用解析">
</a>
<dl>
<dt class="lineOverflow"><a href="/article/373206.html" class="aBlack" title="WebSocket协议详解与应用解析">下一篇<i></i></a></dt>
<dd class="lineTwoOverflow">WebSocket协议详解与应用解析</dd>
</dl>
</div>
</div>
</div>
</div>
<div class="leftContBox pt0">
<div class="pdl20">
<div class="contTit">
<a href="/articlelist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a>
<div class="tit">最新文章</div>
</div>
</div>
<ul class="newArticleList">
<li>
<div class="contBox">
<a href="/article/406934.html" class="img_box" title="Atom编辑器运行HTML详细教程">
<img src="/uploads/20251203/17647665316930334335ba1.png" onerror="this.src='/assets/images/moren/morentu.png'" alt="Atom编辑器运行HTML详细教程">
</a>
<dl>
<dd class="cont1">
<span>
<a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
<a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
| 37秒前 |
<a href="javascript:;" class="aLightGray" title="html">html</a>
<a href="javascript:;" class="aLightGray" title="预览">预览</a>
<a href="javascript:;" class="aLightGray" title="Atom">Atom</a>
<a href="javascript:;" class="aLightGray" title="live-server">live-server</a>
<a href="javascript:;" class="aLightGray" title="open-in-browser">open-in-browser</a>
</span>
</dd>
<dt class="lineOverflow">
<a href="/article/406934.html" class="aBlack" target="_blank" title="Atom编辑器运行HTML详细教程">Atom编辑器运行HTML详细教程</a>
</dt>
<dd class="cont2">
<span><i class="view"></i>352浏览</span>
<span class="collectBtn user_collection" data-id="406934" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
</dd>
</dl>
</div>
</li>
<li>
<div class="contBox">
<a href="/article/406930.html" class="img_box" title="HTML设置网页语言属性的方法，通常通过标签的lang属性来实现。以下是具体步骤和示例：1.使用lang属性在标签中添加lang属性，并指定语言代码（如en表示英语，zh表示中文）。网页标题2.语言代码标准英文：en中文：zh或zh-CN（推荐使用更具体的代码）日文：ja法语：fr德语：de西班牙语：es3.可选的xml:lang属性在某些情况下，可以同时使用xml:lang属性以支持XML兼容性">
<img src="/uploads/20251203/176476635269303290db598.png" onerror="this.src='/assets/images/moren/morentu.png'" alt="HTML设置网页语言属性的方法，通常通过标签的lang属性来实现。以下是具体步骤和示例：1.使用lang属性在标签中添加lang属性，并指定语言代码（如en表示英语，zh表示中文）。网页标题2.语言代码标准英文：en中文：zh或zh-CN（推荐使用更具体的代码）日文：ja法语：fr德语：de西班牙语：es3.可选的xml:lang属性在某些情况下，可以同时使用xml:lang属性以支持XML兼容性">
</a>
<dl>
<dd class="cont1">
<span>
<a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
<a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
| 3分钟前 |
</span>
</dd>
<dt class="lineOverflow">
<a href="/article/406930.html" class="aBlack" target="_blank" title="HTML设置网页语言属性的方法，通常通过标签的lang属性来实现。以下是具体步骤和示例：1.使用lang属性在标签中添加lang属性，并指定语言代码（如en表示英语，zh表示中文）。网页标题2.语言代码标准英文：en中文：zh或zh-CN（推荐使用更具体的代码）日文：ja法语：fr德语：de西班牙语：es3.可选的xml:lang属性在某些情况下，可以同时使用xml:lang属性以支持XML兼容性">HTML设置网页语言属性的方法，通常通过标签的lang属性来实现。以下是具体步骤和示例：1.使用lang属性在标签中添加lang属性，并指定语言代码（如en表示英语，zh表示中文）。网页标题2.语言代码标准英文：en中文：zh或zh-CN（推荐使用更具体的代码）日文：ja法语：fr德语：de西班牙语：es3.可选的xml:lang属性在某些情况下，可以同时使用xml:lang属性以支持XML兼容性</a>
</dt>
<dd class="cont2">
<span><i class="view"></i>122浏览</span>
<span class="collectBtn user_collection" data-id="406930" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
</dd>
</dl>
</div>
</li>
<li>
<div class="contBox">
<a href="/article/406917.html" class="img_box" title="js判断质数的for循环实现方法">
<img src="/uploads/20251203/17647657596930303f43fae.png" onerror="this.src='/assets/images/moren/morentu.png'" alt="js判断质数的for循环实现方法">
</a>
<dl>
<dd class="cont1">
<span>
<a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
<a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
| 13分钟前 |
</span>
</dd>
<dt class="lineOverflow">
<a href="/article/406917.html" class="aBlack" target="_blank" title="js判断质数的for循环实现方法">js判断质数的for循环实现方法</a>
</dt>
<dd class="cont2">
<span><i class="view"></i>439浏览</span>
<span class="collectBtn user_collection" data-id="406917" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
</dd>
</dl>
</div>
</li>
<li>
<div class="contBox">
<a href="/article/406914.html" class="img_box" title="JavaScript数组排序技巧与优化解析">
<img src="/uploads/20251203/176476565269302fd49c3b6.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="JavaScript数组排序技巧与优化解析">
</a>
<dl>
<dd class="cont1">
<span>
<a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
<a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
| 15分钟前 |
</span>
</dd>
<dt class="lineOverflow">
<a href="/article/406914.html" class="aBlack" target="_blank" title="JavaScript数组排序技巧与优化解析">JavaScript数组排序技巧与优化解析</a>
</dt>
<dd class="cont2">
<span><i class="view"></i>200浏览</span>
<span class="collectBtn user_collection" data-id="406914" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
</dd>
</dl>
</div>
</li>
<li>
<div class="contBox">
<a href="/article/406913.html" class="img_box" title="CSS绝对定位制作图片角标教程">
<img src="/uploads/20251203/176476557369302f85a654e.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="CSS绝对定位制作图片角标教程">
</a>
<dl>
<dd class="cont1">
<span>
<a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
<a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
| 16分钟前 |
<a href="javascript:;" class="aLightGray" title="CSS定位">CSS定位</a>
<a href="javascript:;" class="aLightGray" title="absolute">absolute</a>
<a href="javascript:;" class="aLightGray" title="relative">relative</a>
<a href="javascript:;" class="aLightGray" title="图片角标">图片角标</a>
<a href="javascript:;" class="aLightGray" title="topright">topright</a>
</span>
</dd>
<dt class="lineOverflow">
<a href="/article/406913.html" class="aBlack" target="_blank" title="CSS绝对定位制作图片角标教程">CSS绝对定位制作图片角标教程</a>
</dt>
<dd class="cont2">
<span><i class="view"></i>139浏览</span>
<span class="collectBtn user_collection" data-id="406913" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
</dd>
</dl>
</div>
</li>
<li>
<div class="contBox">
<a href="/article/406909.html" class="img_box" title="JS实现页面访问统计方法详解">
<img src="/uploads/20251203/176476539369302ed104e3f.png" onerror="this.src='/assets/images/moren/morentu.png'" alt="JS实现页面访问统计方法详解">
</a>
<dl>
<dd class="cont1">
<span>
<a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
<a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
| 19分钟前 |
<a href="javascript:;" class="aLightGray" title="JS脚本">JS脚本</a>
<a href="javascript:;" class="aLightGray" title="第三方平台">第三方平台</a>
<a href="javascript:;" class="aLightGray" title="网页访问统计">网页访问统计</a>
<a href="javascript:;" class="aLightGray" title="前后端结合">前后端结合</a>
<a href="javascript:;" class="aLightGray" title="IP去重">IP去重</a>
</span>
</dd>
<dt class="lineOverflow">
<a href="/article/406909.html" class="aBlack" target="_blank" title="JS实现页面访问统计方法详解">JS实现页面访问统计方法详解</a>
</dt>
<dd class="cont2">
<span><i class="view"></i>372浏览</span>
<span class="collectBtn user_collection" data-id="406909" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
</dd>
</dl>
</div>
</li>
<li>
<div class="contBox">
<a href="/article/406897.html" class="img_box" title="Next.js404路由错误解决方法">
<img src="/uploads/20251203/176476486469302cc029586.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="Next.js404路由错误解决方法">
</a>
<dl>
<dd class="cont1">
<span>
<a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
<a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
| 28分钟前 |
</span>
</dd>
<dt class="lineOverflow">
<a href="/article/406897.html" class="aBlack" target="_blank" title="Next.js404路由错误解决方法">Next.js404路由错误解决方法</a>
</dt>
<dd class="cont2">
<span><i class="view"></i>276浏览</span>
<span class="collectBtn user_collection" data-id="406897" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
</dd>
</dl>
</div>
</li>
<li>
<div class="contBox">
<a href="/article/406895.html" class="img_box" title="表单自动化怎么实现？Zapier连接教程">
<img src="/uploads/20251203/176476478969302c75159ba.png" onerror="this.src='/assets/images/moren/morentu.png'" alt="表单自动化怎么实现？Zapier连接教程">
</a>
<dl>
<dd class="cont1">
<span>
<a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
<a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
| 29分钟前 |
</span>
</dd>
<dt class="lineOverflow">
<a href="/article/406895.html" class="aBlack" target="_blank" title="表单自动化怎么实现？Zapier连接教程">表单自动化怎么实现？Zapier连接教程</a>
</dt>
<dd class="cont2">
<span><i class="view"></i>342浏览</span>
<span class="collectBtn user_collection" data-id="406895" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
</dd>
</dl>
</div>
</li>
<li>
<div class="contBox">
<a href="/article/406883.html" class="img_box" title="CSS设置border-box包含padding和border的方法">
<img src="/uploads/20251203/176476431669302a9c91d97.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="CSS设置border-box包含padding和border的方法">
</a>
<dl>
<dd class="cont1">
<span>
<a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
<a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
| 37分钟前 |
</span>
</dd>
<dt class="lineOverflow">
<a href="/article/406883.html" class="aBlack" target="_blank" title="CSS设置border-box包含padding和border的方法">CSS设置border-box包含padding和border的方法</a>
</dt>
<dd class="cont2">
<span><i class="view"></i>308浏览</span>
<span class="collectBtn user_collection" data-id="406883" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
</dd>
</dl>
</div>
</li>
<li>
<div class="contBox">
<a href="/article/406878.html" class="img_box" title="CSS导航菜单滑动动画实现教程">
<img src="/uploads/20251203/1764764070693029a698497.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="CSS导航菜单滑动动画实现教程">
</a>
<dl>
<dd class="cont1">
<span>
<a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
<a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
| 41分钟前 |
</span>
</dd>
<dt class="lineOverflow">
<a href="/article/406878.html" class="aBlack" target="_blank" title="CSS导航菜单滑动动画实现教程">CSS导航菜单滑动动画实现教程</a>
</dt>
<dd class="cont2">
<span><i class="view"></i>488浏览</span>
<span class="collectBtn user_collection" data-id="406878" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
</dd>
</dl>
</div>
</li>
<li>
<div class="contBox">
<a href="/article/406874.html" class="img_box" title="Cookie与LocalStorage选择指南">
<img src="/uploads/20251203/1764763897693028f958574.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="Cookie与LocalStorage选择指南">
</a>
<dl>
<dd class="cont1">
<span>
<a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
<a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
| 44分钟前 |
<a href="javascript:;" class="aLightGray" title="cookie">cookie</a>
<a href="javascript:;" class="aLightGray" title="安全性">安全性</a>
<a href="javascript:;" class="aLightGray" title="localStorage">localStorage</a>
<a href="javascript:;" class="aLightGray" title="浏览器存储">浏览器存储</a>
<a href="javascript:;" class="aLightGray" title="数据用途">数据用途</a>
</span>
</dd>
<dt class="lineOverflow">
<a href="/article/406874.html" class="aBlack" target="_blank" title="Cookie与LocalStorage选择指南">Cookie与LocalStorage选择指南</a>
</dt>
<dd class="cont2">
<span><i class="view"></i>396浏览</span>
<span class="collectBtn user_collection" data-id="406874" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
</dd>
</dl>
</div>
</li>
<li>
<div class="contBox">
<a href="/article/406873.html" class="img_box" title="JavaScript性能优化：WebWorkers处理密集任务">
<img src="/uploads/20251203/1764763832693028b80c537.png" onerror="this.src='/assets/images/moren/morentu.png'" alt="JavaScript性能优化：WebWorkers处理密集任务">
</a>
<dl>
<dd class="cont1">
<span>
<a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
<a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
| 45分钟前 |
</span>
</dd>
<dt class="lineOverflow">
<a href="/article/406873.html" class="aBlack" target="_blank" title="JavaScript性能优化：WebWorkers处理密集任务">JavaScript性能优化：WebWorkers处理密集任务</a>
</dt>
<dd class="cont2">
<span><i class="view"></i>170浏览</span>
<span class="collectBtn user_collection" data-id="406873" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
</dd>
</dl>
</div>
</li>
</ul>
</div>
</div>
<div class="mainRight">
<!-- 右侧广告位banner -->
<div class="rightContBox" style="margin-top: 0px;">
<div class="rightTit">
<a href="/courselist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a>
<div class="tit lineOverflow">课程推荐</div>
</div>
<ul class="lessonRecomRList">
<li>
<a href="/course/9.html" class="img_box" target="_blank" title="前端进阶之JavaScript设计模式">
<img src="/uploads/20221222/52fd0f23a454c71029c2c72d206ed815.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="前端进阶之JavaScript设计模式">
</a>
<dl>
<dt class="lineTwoOverflow"><a href="/course/9.html" target="_blank" class="aBlack" title="前端进阶之JavaScript设计模式">前端进阶之JavaScript设计模式</a></dt>
<dd class="cont1 lineTwoOverflow">
设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。 </dd>
<dd class="cont2">543次学习</dd>
</dl>
</li>
<li>
<a href="/course/2.html" class="img_box" target="_blank" title="GO语言核心编程课程">
<img src="/uploads/20221221/634ad7404159bfefc6a54a564d437b5f.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="GO语言核心编程课程">
</a>
<dl>
<dt class="lineTwoOverflow"><a href="/course/2.html" target="_blank" class="aBlack" title="GO语言核心编程课程">GO语言核心编程课程</a></dt>
<dd class="cont1 lineTwoOverflow">
本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。 </dd>
<dd class="cont2">516次学习</dd>
</dl>
</li>
<li>
<a href="/course/74.html" class="img_box" target="_blank" title="简单聊聊mysql8与网络通信">
<img src="/uploads/20240103/bad35fe14edbd214bee16f88343ac57c.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="简单聊聊mysql8与网络通信">
</a>
<dl>
<dt class="lineTwoOverflow"><a href="/course/74.html" target="_blank" class="aBlack" title="简单聊聊mysql8与网络通信">简单聊聊mysql8与网络通信</a></dt>
<dd class="cont1 lineTwoOverflow">
如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让 </dd>
<dd class="cont2">500次学习</dd>
</dl>
</li>
<li>
<a href="/course/57.html" class="img_box" target="_blank" title="JavaScript正则表达式基础与实战">
<img src="/uploads/20221226/bbe4083bb3cb0dd135fb02c31c3785fb.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="JavaScript正则表达式基础与实战">
</a>
<dl>
<dt class="lineTwoOverflow"><a href="/course/57.html" target="_blank" class="aBlack" title="JavaScript正则表达式基础与实战">JavaScript正则表达式基础与实战</a></dt>
<dd class="cont1 lineTwoOverflow">
在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。 </dd>
<dd class="cont2">487次学习</dd>
</dl>
</li>
<li>
<a href="/course/28.html" class="img_box" target="_blank" title="从零制作响应式网站—Grid布局">
<img src="/uploads/20221223/ac110f88206daeab6c0cf38ebf5fe9ed.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="从零制作响应式网站—Grid布局">
</a>
<dl>
<dt class="lineTwoOverflow"><a href="/course/28.html" target="_blank" class="aBlack" title="从零制作响应式网站—Grid布局">从零制作响应式网站—Grid布局</a></dt>
<dd class="cont1 lineTwoOverflow">
本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。 </dd>
<dd class="cont2">485次学习</dd>
</dl>
</li>
</ul>
</div>
<div class="rightContBox">
<div class="rightTit">
<a href="/ai.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a>
<div class="tit lineOverflow">AI推荐</div>
</div>
<ul class="lessonRecomRList">
<li>
<a href="/ai/13100.html" target="_blank" title="ChatExcel酷表：告别Excel难题，北大团队AI助手助您轻松处理数据" class="img_box">
<img src="/uploads/20251027/176155320368ff2b3345c06.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="ChatExcel酷表：告别Excel难题，北大团队AI助手助您轻松处理数据" style="object-fit:cover;width:100%;height:100%;">
</a>
<dl>
<dt class="lineTwoOverflow"><a href="/ai/13100.html" class="aBlack" target="_blank" title="ChatExcel酷表">ChatExcel酷表</a></dt>
<dd class="cont1 lineTwoOverflow">
ChatExcel酷表是由北京大学团队打造的Excel聊天机器人，用自然语言操控表格，简化数据处理，告别繁琐操作，提升工作效率！适用于学生、上班族及政府人员。 </dd>
<dd class="cont2">3186次使用</dd>
</dl>
</li>
<li>
<a href="/ai/13099.html" target="_blank" title="Any绘本：开源免费AI绘本创作工具深度解析" class="img_box">
<img src="/uploads/20251023/176120760368f9e5333da5f.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="Any绘本：开源免费AI绘本创作工具深度解析" style="object-fit:cover;width:100%;height:100%;">
</a>
<dl>
<dt class="lineTwoOverflow"><a href="/ai/13099.html" class="aBlack" target="_blank" title="Any绘本">Any绘本</a></dt>
<dd class="cont1 lineTwoOverflow">
探索Any绘本（anypicturebook.com/zh），一款开源免费的AI绘本创作工具，基于Google Gemini与Flux AI模型，让您轻松创作个性化绘本。适用于家庭、教育、创作等多种场景，零门槛，高自由度，技术透明，本地可控。 </dd>
<dd class="cont2">3398次使用</dd>
</dl>
</li>
<li>
<a href="/ai/13098.html" target="_blank" title="可赞AI：AI驱动办公可视化智能工具，一键高效生成文档图表脑图" class="img_box">
<img src="/uploads/20251021/176103600268f746e238bb8.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="可赞AI：AI驱动办公可视化智能工具，一键高效生成文档图表脑图" style="object-fit:cover;width:100%;height:100%;">
</a>
<dl>
<dt class="lineTwoOverflow"><a href="/ai/13098.html" class="aBlack" target="_blank" title="可赞AI">可赞AI</a></dt>
<dd class="cont1 lineTwoOverflow">
可赞AI，AI驱动的办公可视化智能工具，助您轻松实现文本与可视化元素高效转化。无论是智能文档生成、多格式文本解析，还是一键生成专业图表、脑图、知识卡片，可赞AI都能让信息处理更清晰高效。覆盖数据汇报、会议纪要、内容营销等全场景，大幅提升办公效率，降低专业门槛，是您提升工作效率的得力助手。 </dd>
<dd class="cont2">3429次使用</dd>
</dl>
</li>
<li>
<a href="/ai/13097.html" target="_blank" title="星月写作：AI网文创作神器，助力爆款小说速成" class="img_box">
<img src="/uploads/20251014/176043000368ee07b3159d6.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="星月写作：AI网文创作神器，助力爆款小说速成" style="object-fit:cover;width:100%;height:100%;">
</a>
<dl>
<dt class="lineTwoOverflow"><a href="/ai/13097.html" class="aBlack" target="_blank" title="星月写作">星月写作</a></dt>
<dd class="cont1 lineTwoOverflow">
星月写作是国内首款聚焦中文网络小说创作的AI辅助工具，解决网文作者从构思到变现的全流程痛点。AI扫榜、专属模板、全链路适配，助力新人快速上手，资深作者效率倍增。 </dd>
<dd class="cont2">4535次使用</dd>
</dl>
</li>
<li>
<a href="/ai/13096.html" target="_blank" title="MagicLight.ai：叙事驱动AI动画视频创作平台 | 高效生成专业级故事动画" class="img_box">
<img src="/uploads/20251014/176040000268ed9282edf80.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="MagicLight.ai：叙事驱动AI动画视频创作平台 | 高效生成专业级故事动画" style="object-fit:cover;width:100%;height:100%;">
</a>
<dl>
<dt class="lineTwoOverflow"><a href="/ai/13096.html" class="aBlack" target="_blank" title="MagicLight">MagicLight</a></dt>
<dd class="cont1 lineTwoOverflow">
MagicLight.ai是全球首款叙事驱动型AI动画视频创作平台，专注于解决从故事想法到完整动画的全流程痛点。它通过自研AI模型，保障角色、风格、场景高度一致性，让零动画经验者也能高效产出专业级叙事内容。广泛适用于独立创作者、动画工作室、教育机构及企业营销，助您轻松实现创意落地与商业化。 </dd>
<dd class="cont2">3807次使用</dd>
</dl>
</li>
</ul>
</div>
<!-- 相关文章 -->
<div class="rightContBox">
<div class="rightTit">
<a href="/articlelist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a>
<div class="tit lineOverflow">相关文章</div>
</div>
<ul class="aboutArticleRList">
<li>
<dl>
<dt class="lineTwoOverflow"><a href="/article/207000.html" class="aBlack" title="JavaScript函数定义及示例详解">JavaScript函数定义及示例详解</a></dt>
<dd>
<span class="left">2025-05-11</span>
<span class="right">502浏览</span>
</dd>
</dl>
</li>
<li>
<dl>
<dt class="lineTwoOverflow"><a href="/article/72840.html" class="aBlack" title="优化用户界面体验的秘密武器：CSS开发项目经验大揭秘">优化用户界面体验的秘密武器：CSS开发项目经验大揭秘</a></dt>
<dd>
<span class="left">2023-11-03</span>
<span class="right">501浏览</span>
</dd>
</dl>
</li>
<li>
<dl>
<dt class="lineTwoOverflow"><a href="/article/76259.html" class="aBlack" title="使用微信小程序实现图片轮播特效">使用微信小程序实现图片轮播特效</a></dt>
<dd>
<span class="left">2023-11-21</span>
<span class="right">501浏览</span>
</dd>
</dl>
</li>
<li>
<dl>
<dt class="lineTwoOverflow"><a href="/article/83771.html" class="aBlack" title="解析sessionStorage的存储能力与限制">解析sessionStorage的存储能力与限制</a></dt>
<dd>
<span class="left">2024-01-11</span>
<span class="right">501浏览</span>
</dd>
</dl>
</li>
<li>
<dl>
<dt class="lineTwoOverflow"><a href="/article/85057.html" class="aBlack" title="探索冒泡活动对于团队合作的推动力">探索冒泡活动对于团队合作的推动力</a></dt>
<dd>
<span class="left">2024-01-13</span>
<span class="right">501浏览</span>
</dd>
</dl>
</li>
</ul>
</div>
</div>
</div>
<div class="footer">
<div class="footerIn">
<div class="footLeft">
<div class="linkBox">
<a href="/about/1.html" target="_blank" class="aBlack" title="关于我们">关于我们</a>
<a href="/about/5.html" target="_blank" class="aBlack" title="免责声明">免责声明</a>
<a href="#" class="aBlack" title="意见反馈">意见反馈</a>
<a href="/about/2.html" class="aBlack" target="_blank" title="联系我们">联系我们</a>
<a href="/send.html" class="aBlack" title="广告合作">内容提交</a>
</div>
<div class="footTip">Golang学习网：公益在线Go学习平台，帮助Go学习者快速成长！</div>
<div class="shareBox">
<span><i class="qq"></i>技术交流群</span>
</div>
<div class="copyRight">
Copyright 2023 http://www.17golang.com/ All Rights Reserved ｜ <a href="https://beian.miit.gov.cn/" target="_blank" title="备案">苏ICP备2023003363号-1</a>
</div>
</div>
<div class="footRight">
<ul class="encodeList">
<li>
<div class="encodeImg">
<img src="/assets/examples/qrcode_for_gh.jpg" alt="Golang学习网">
</div>
<div class="tit">关注公众号</div>
<div class="tip">Golang学习网</div>
</li>
<div class="clear"></div>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
<!-- 微信登录弹窗 -->
<style>
.popupBg .n-error{
color: red;
}
</style>
<div class="popupBg">
<div class="loginBoxBox">
<div class="imgbg">
<img src="/assets/images/leftlogo.jpg" alt="">
</div>
<!-- 微信登录 -->
<div class="loginInfo encodeLogin" style="display: none;">
<div class="closeIcon" onclick="$('.popupBg').hide();"></div>
<div class="changeLoginType cursorPointer create_wxqrcode" onclick="$('.loginInfo').hide();$('.passwordLogin').show();">
<div class="tip">密码登录在这里</div>
</div>
<div class="encodeInfo">
<div class="tit"><i></i> 微信扫码登录或注册</div>
<div class="encodeImg">
<span id="wx_login_qrcode"><img src="/assets/examples/code.png" alt="二维码"></span>
<!-- <div class="refreshBox">
<p>二维码失效</p>
<button type="button" class="create_wxqrcode">刷新1111</button>
</div> -->
</div>
<div class="tip">打开微信扫一扫，快速登录/注册</div>
</div>
<div class="beforeLoginTip">登录即同意 <a href="#" class="aBlue" title="用户协议">用户协议</a> 和 <a href="#" class="aBlue" title="隐私政策">隐私政策</a></div>
</div>
<!-- 密码登录 -->
<div class="loginInfo passwordLogin">
<div class="closeIcon" onclick="$('.popupBg').hide();"></div>
<div class="changeLoginType cursorPointer create_wxqrcode" onclick="$('.loginInfo').hide();$('.encodeLogin').show();">
<div class="tip">微信登录更方便</div>
</div>
<div class="passwordInfo">
<ul class="logintabs selfTabMenu">
<li class="selfTabItem loginFormLi curr">密码登录</li>
<li class="selfTabItem registerFormBox ">注册账号</li>
</ul>
<div class="selfTabContBox">
<div class="selfTabCont loginFormBox" style="display: block;">
<form name="form" id="login-form" class="form-vertical form" method="POST" action="/index/user/login">
<input type="hidden" name="url" value="//www.17golang.com/article/373205.html"/>
<input type="hidden" name="__token__" value="aab9cbc79044cdbc2df635bb310a510a" /> <div class="form-group" style="height:70px;">
<input class="form-control" id="account" type="text" name="account" value="" data-rule="required" placeholder="邮箱/用户名" autocomplete="off">
</div>
<div class="form-group" style="height:70px;">
<input class="form-control" id="password" type="password" name="password" data-rule="required;password" placeholder="密码" autocomplete="off">
</div>
<div class="codeBox" style="height:70px;">
<div class="form-group" style="height:70px; width:205px; float: left;">
<input type="text" name="captcha" class="form-control" placeholder="验证码" data-rule="required;length(4)" />
</div>
<span class="input-group-btn" style="padding:0;border:none;">
<img src="/captcha.html" width="100" height="45" onclick="this.src = '/captcha.html?r=' + Math.random();"/>
</span>
</div>
<div class="other">
<a href="#" class="forgetPwd aGray" onclick="$('.loginInfo').hide();$('.passwordForget').show();" title="忘记密码">忘记密码</a>
</div>
<div class="loginBtn mt25">
<button type="submit">登录</button>
</div>
</form>
</div>
<div class="selfTabCont registerFormBox" style="display: none;">
<form name="form1" id="register-form" class="form-vertical form" method="POST" action="/index/user/register">
<input type="hidden" name="invite_user_id" value="0"/>
<input type="hidden" name="url" value="//www.17golang.com/article/373205.html"/>
<input type="hidden" name="__token__" value="aab9cbc79044cdbc2df635bb310a510a" /> <div class="form-group" style="height:70px;">
<input type="text" name="email" id="email2" data-rule="required;email" class="form-control" placeholder="邮箱">
</div>
<div class="form-group" style="height:70px;">
<input type="text" id="username" name="username" data-rule="required;username" class="form-control" placeholder="用户名必须3-30个字符">
</div>
<div class="form-group" style="height:70px;">
<input type="password" id="password2" name="password" data-rule="required;password" class="form-control" placeholder="密码必须6-30个字符">
</div>
<div class="codeBox" style="height:70px;">
<div class="form-group" style="height:70px; width:205px; float: left;">
<input type="text" name="captcha" class="form-control" placeholder="验证码" data-rule="required;length(4)" />
</div>
<span class="input-group-btn" style="padding:0;border:none;">
<img src="/captcha.html" width="100" height="45" onclick="this.src = '/captcha.html?r=' + Math.random();"/>
</span>
</div>
<div class="loginBtn">
<button type="submit">注册</button>
</div>
</form>
</div>
</div>
</div>
<div class="beforeLoginTip">登录即同意 <a href="https://www.17golang.com/about/3.html" target="_blank" class="aBlue" title="用户协议">用户协议</a> 和 <a href="https://www.17golang.com/about/4.html" target="_blank" class="aBlue" title="隐私政策">隐私政策</a></div>
</div>
<!-- 重置密码 -->
<div class="loginInfo passwordForget">
<div class="closeIcon" onclick="$('.popupBg').hide();"></div>
<div class="returnLogin cursorPointer" onclick="$('.passwordForget').hide();$('.passwordLogin').show();">返回登录</div>
<div class="passwordInfo">
<ul class="logintabs selfTabMenu">
<li class="selfTabItem">重置密码</li>
</ul>
<div class="selfTabContBox">
<div class="selfTabCont">
<form id="resetpwd-form" class="form-horizontal form-layer nice-validator n-default n-bootstrap form" method="POST" action="/api/user/resetpwd.html" novalidate="novalidate">
<div style="height:70px;">
<input type="text" class="form-control" id="email" name="email" value="" placeholder="输入邮箱" aria-invalid="true">
</div>
<div class="codeBox" style="height:70px;">
<div class="form-group" style="height:70px; width:205px; float: left;">
<input type="text" name="captcha" class="form-control" placeholder="验证码" />
</div>
<span class="input-group-btn" style="padding:0;border:none;">
<a href="javascript:;" class="btn btn-primary btn-captcha cursorPointer" style="background: #2080F8; border-radius: 4px; color: #fff; padding: 12px;
position: absolute;" data-url="/api/ems/send.html" data-type="email" data-event="resetpwd">发送验证码</a>
</span>
</div>
<input type="password" class="form-control" id="newpassword" name="newpassword" value="" placeholder="请输入6-18位密码">
<div class="loginBtn mt25">
<button type="submit">重置密码</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?3dc5666f6478c7bf39cd5c91e597423d";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<script src="/assets/js/require.js" data-main="/assets/js/require-frontend.js?v=1671101972"></script>
</body>
</html>
