HTML与CSS基础结构及样式教程
时间：2025-11-05 16:39:53
302浏览
收藏
网页开发入门必读：本文深入浅出地讲解了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:;" class="aLightGray" title="html">html</a>
<a href="javascript:;" class="aLightGray" title="CSS">CSS</a>
<a href="javascript:;" class="aLightGray" title="网页开发">网页开发</a>
<a href="javascript:;" class="aLightGray" title="CSS选择器">CSS选择器</a>
<a href="javascript:;" class="aLightGray" title="CSS盒模型">CSS盒模型</a>
</div>
</div>
<!-- 最新阅读 -->
<div class="contBoxNor">
<div class="contTit">
<div class="tit">相关阅读</div>
<a href="/articlelist.html" class="more">更多></a>
</div>
<ul class="latestReadList">
<li>
<div class="info">
<a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
<a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
| 6个月前 |
<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="函数声明">函数声明</a>
<a href="javascript:;" class="aLightGray" title="Function构造函数">Function构造函数</a>
</div>
<div class="tit lineOverflow"><a href="/article/207000.html" title="JavaScript函数定义及示例详解" class="aBlack">JavaScript函数定义及示例详解</a></div>
<div class="opt">
<span><i class="view"></i>502</span>
<span class="collectBtn user_collection" data-id="207000" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
</div>
</li>
<li>
<div class="info">
<a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
<a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
| 2年前 |
<a href="javascript:;" class="aLightGray" title="CSS">CSS</a>
<a href="javascript:;" class="aLightGray" title="优化">优化</a>
<a href="javascript:;" class="aLightGray" title="体验">体验</a>
</div>
<div class="tit lineOverflow"><a href="/article/72840.html" title="优化用户界面体验的秘密武器：CSS开发项目经验大揭秘" class="aBlack">优化用户界面体验的秘密武器：CSS开发项目经验大揭秘</a></div>
<div class="opt">
<span><i class="view"></i>501</span>
<span class="collectBtn user_collection" data-id="72840" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
</div>
</li>
<li>
<div class="info">
<a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
<a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
| 2年前 |
<a href="javascript:;" class="aLightGray" title="图片轮播">图片轮播</a>
<a href="javascript:;" class="aLightGray" title="微信小程序">微信小程序</a>
<a href="javascript:;" class="aLightGray" title="特效">特效</a>
</div>
<div class="tit lineOverflow"><a href="/article/76259.html" title="使用微信小程序实现图片轮播特效" class="aBlack">使用微信小程序实现图片轮播特效</a></div>
<div class="opt">
<span><i class="view"></i>501</span>
<span class="collectBtn user_collection" data-id="76259" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
</div>
</li>
<li>
<div class="info">
<a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
<a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
| 1年前 |
<a href="javascript:;" class="aLightGray" title="sessionStorage">sessionStorage</a>
<a href="javascript:;" class="aLightGray" title="存储能力">存储能力</a>
<a href="javascript:;" class="aLightGray" title="限制解析">限制解析</a>
</div>
<div class="tit lineOverflow"><a href="/article/83771.html" title="解析sessionStorage的存储能力与限制" class="aBlack">解析sessionStorage的存储能力与限制</a></div>
<div class="opt">
<span><i class="view"></i>501</span>
<span class="collectBtn user_collection" data-id="83771" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
</div>
</li>
<li>
<div class="info">
<a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
<a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
| 1年前 |
<a href="javascript:;" class="aLightGray" title="团队合作">团队合作</a>
<a href="javascript:;" class="aLightGray" title="冒泡事件">冒泡事件</a>
<a href="javascript:;" class="aLightGray" title="促进作用">促进作用</a>
</div>
<div class="tit lineOverflow"><a href="/article/85057.html" title="探索冒泡活动对于团队合作的推动力" class="aBlack">探索冒泡活动对于团队合作的推动力</a></div>
<div class="opt">
<span><i class="view"></i>501</span>
<span class="collectBtn user_collection" data-id="85057" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
</div>
</li>
</ul>
</div>
<!-- 最新阅读 -->
<div class="contBoxNor">
<div class="contTit">
<div class="tit">最新阅读</div>
<a href="/articlelist.html" class="more">更多></a>
</div>
<ul class="latestReadList">
<li>
<div class="info">
<a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
<a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
| 5分钟前 |
</div>
<div class="tit lineOverflow"><a href="/article/407143.html" title="PostCSS插件配置全攻略" class="aBlack">PostCSS插件配置全攻略</a></div>
<div class="opt">
<span><i class="view"></i>258</span>
<span class="collectBtn user_collection" data-id="407143" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
</div>
</li>
<li>
<div class="info">
<a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
<a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
| 8分钟前 |
<a href="javascript:;" class="aLightGray" title="cors">cors</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="同源策略">同源策略</a>
</div>
<div class="tit lineOverflow"><a href="/article/407140.html" title="跨域问题与CORS解决方法详解" class="aBlack">跨域问题与CORS解决方法详解</a></div>
<div class="opt">
<span><i class="view"></i>484</span>
<span class="collectBtn user_collection" data-id="407140" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
</div>
</li>
<li>
<div class="info">
<a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
<a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
| 12分钟前 |
<a href="javascript:;" class="aLightGray" title="背景">背景</a>
<a href="javascript:;" class="aLightGray" title="CSS渐变">CSS渐变</a>
<a href="javascript:;" class="aLightGray" title="linear-gradient">linear-gradient</a>
<a href="javascript:;" class="aLightGray" title="radial-gradient">radial-gradient</a>
<a href="javascript:;" class="aLightGray" title="颜色停点">颜色停点</a>
</div>
<div class="tit lineOverflow"><a href="/article/407135.html" title="CSS渐变色详解：linear-gradient与radial-gradient用法" class="aBlack">CSS渐变色详解：linear-gradient与radial-gradient用法</a></div>
<div class="opt">
<span><i class="view"></i>402</span>
<span class="collectBtn user_collection" data-id="407135" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
</div>
</li>
<li>
<div class="info">
<a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
<a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
| 35分钟前 |
</div>
<div class="tit lineOverflow"><a href="/article/407107.html" title="padding-top和padding-bottom的区别在于，前者控制元素顶部的内边距，后者控制底部的内边距。简单来说，padding-top会让元素内容与上方边界之间留出空间，而padding-bottom则会让内容与下方边界之间留出空间。两者共同作用于元素的垂直方向，但分别影响不同的区域。" class="aBlack">padding-top和padding-bottom的区别在于，前者控制元素顶部的内边距，后者控制底部的内边距。简单来说，padding-top会让元素内容与上方边界之间留出空间，而padding-bottom则会让内容与下方边界之间留出空间。两者共同作用于元素的垂直方向，但分别影响不同的区域。</a></div>
<div class="opt">
<span><i class="view"></i>334</span>
<span class="collectBtn user_collection" data-id="407107" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
</div>
</li>
<li>
<div class="info">
<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分钟前 |
<a href="javascript:;" class="aLightGray" title="FLEXBOX">FLEXBOX</a>
<a href="javascript:;" class="aLightGray" title="清除浮动">清除浮动</a>
<a href="javascript:;" class="aLightGray" title="float属性">float属性</a>
<a href="javascript:;" class="aLightGray" title="CSSGrid">CSSGrid</a>
<a href="javascript:;" class="aLightGray" title="CSS浮动布局">CSS浮动布局</a>
</div>
<div class="tit lineOverflow"><a href="/article/407100.html" title="CSS浮动布局详解与清除方法" class="aBlack">CSS浮动布局详解与清除方法</a></div>
<div class="opt">
<span><i class="view"></i>460</span>
<span class="collectBtn user_collection" data-id="407100" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
</div>
</li>
<li>
<div class="info">
<a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
<a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
| 43分钟前 |
<a href="javascript:;" class="aLightGray" title="主题切换">主题切换</a>
<a href="javascript:;" class="aLightGray" title="color属性">color属性</a>
<a href="javascript:;" class="aLightGray" title="currentColor">currentColor</a>
<a href="javascript:;" class="aLightGray" title="颜色统一管理">颜色统一管理</a>
<a href="javascript:;" class="aLightGray" title="减少重复代码">减少重复代码</a>
</div>
<div class="tit lineOverflow"><a href="/article/407098.html" title="CSScurrentColor统一颜色管理技巧" class="aBlack">CSScurrentColor统一颜色管理技巧</a></div>
<div class="opt">
<span><i class="view"></i>160</span>
<span class="collectBtn user_collection" data-id="407098" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
</div>
</li>
<li>
<div class="info">
<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分钟前 |
</div>
<div class="tit lineOverflow"><a href="/article/407096.html" title="CSS导入外部样式表方法详解" class="aBlack">CSS导入外部样式表方法详解</a></div>
<div class="opt">
<span><i class="view"></i>189</span>
<span class="collectBtn user_collection" data-id="407096" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
</div>
</li>
<li>
<div class="info">
<a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
<a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
| 52分钟前 |
</div>
<div class="tit lineOverflow"><a href="/article/407085.html" title="WebCryptoAPI：JavaScript密码学实战教程" class="aBlack">WebCryptoAPI：JavaScript密码学实战教程</a></div>
<div class="opt">
<span><i class="view"></i>140</span>
<span class="collectBtn user_collection" data-id="407085" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
</div>
</li>
<li>
<div class="info">
<a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
<a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
| 54分钟前 |
</div>
<div class="tit lineOverflow"><a href="/article/407083.html" title="JS对象属性变化监听全解析" class="aBlack">JS对象属性变化监听全解析</a></div>
<div class="opt">
<span><i class="view"></i>310</span>
<span class="collectBtn user_collection" data-id="407083" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
</div>
</li>
<li>
<div class="info">
<a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
<a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
| 55分钟前 |
<a href="javascript:;" class="aLightGray" title="开发效率">开发效率</a>
<a href="javascript:;" class="aLightGray" title="浏览器扩展">浏览器扩展</a>
<a href="javascript:;" class="aLightGray" title="HTML代码编辑">HTML代码编辑</a>
<a href="javascript:;" class="aLightGray" title="快速编辑">快速编辑</a>
<a href="javascript:;" class="aLightGray" title="页面内编辑">页面内编辑</a>
</div>
<div class="tit lineOverflow"><a href="/article/407082.html" title="浏览器扩展快速编辑HTML方法" class="aBlack">浏览器扩展快速编辑HTML方法</a></div>
<div class="opt">
<span><i class="view"></i>275</span>
<span class="collectBtn user_collection" data-id="407082" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
</div>
</li>
<li>
<div class="info">
<a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
<a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
| 1小时前 |
</div>
<div class="tit lineOverflow"><a href="/article/407063.html" title="Stripe邮政编码验证方法详解" class="aBlack">Stripe邮政编码验证方法详解</a></div>
<div class="opt">
<span><i class="view"></i>413</span>
<span class="collectBtn user_collection" data-id="407063" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
</div>
</li>
<li>
<div class="info">
<a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
<a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
| 1小时前 |
</div>
<div class="tit lineOverflow"><a href="/article/407057.html" title="CSS浮动布局响应式实现方法" class="aBlack">CSS浮动布局响应式实现方法</a></div>
<div class="opt">
<span><i class="view"></i>138</span>
<span class="collectBtn user_collection" data-id="407057" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
</div>
</li>
</ul>
</div>
<!-- 课程推荐 -->
<div class="contBoxNor">
<div class="contTit">
<div class="tit">课程推荐</div>
<a href="/courselist.html" class="more">更多></a>
</div>
<ul class="classRecomList">
<li>
<a href="/course/9.html" title="前端进阶之JavaScript设计模式" class="img_box">
<img src="/uploads/20221222/52fd0f23a454c71029c2c72d206ed815.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="前端进阶之JavaScript设计模式">
</a>
<dl>
<dt class="lineOverflow">
前端进阶之JavaScript设计模式 </dt>
<dd class="cont1 lineOverflow">设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。</dd>
<dd class="cont2">
<a href="/course/9.html" title="前端进阶之JavaScript设计模式" class="toStudy">立即学习</a>
<span>543次学习</span>
</dd>
</dl>
</li>
<li>
<a href="/course/2.html" title="GO语言核心编程课程" class="img_box">
<img src="/uploads/20221221/634ad7404159bfefc6a54a564d437b5f.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="GO语言核心编程课程">
</a>
<dl>
<dt class="lineOverflow">
GO语言核心编程课程 </dt>
<dd class="cont1 lineOverflow">本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。</dd>
<dd class="cont2">
<a href="/course/2.html" title="GO语言核心编程课程" class="toStudy">立即学习</a>
<span>516次学习</span>
</dd>
</dl>
</li>
<li>
<a href="/course/74.html" title="简单聊聊mysql8与网络通信" class="img_box">
<img src="/uploads/20240103/bad35fe14edbd214bee16f88343ac57c.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="简单聊聊mysql8与网络通信">
</a>
<dl>
<dt class="lineOverflow">
简单聊聊mysql8与网络通信 </dt>
<dd class="cont1 lineOverflow">如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让</dd>
<dd class="cont2">
<a href="/course/74.html" title="简单聊聊mysql8与网络通信" class="toStudy">立即学习</a>
<span>500次学习</span>
</dd>
</dl>
</li>
<li>
<a href="/course/57.html" title="JavaScript正则表达式基础与实战" class="img_box">
<img src="/uploads/20221226/bbe4083bb3cb0dd135fb02c31c3785fb.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="JavaScript正则表达式基础与实战">
</a>
<dl>
<dt class="lineOverflow">
JavaScript正则表达式基础与实战 </dt>
<dd class="cont1 lineOverflow">在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。</dd>
<dd class="cont2">
<a href="/course/57.html" title="JavaScript正则表达式基础与实战" class="toStudy">立即学习</a>
<span>487次学习</span>
</dd>
</dl>
</li>
<li>
<a href="/course/28.html" title="从零制作响应式网站—Grid布局" class="img_box">
<img src="/uploads/20221223/ac110f88206daeab6c0cf38ebf5fe9ed.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="从零制作响应式网站—Grid布局">
</a>
<dl>
<dt class="lineOverflow">
从零制作响应式网站—Grid布局 </dt>
<dd class="cont1 lineOverflow">本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。</dd>
<dd class="cont2">
<a href="/course/28.html" title="从零制作响应式网站—Grid布局" class="toStudy">立即学习</a>
<span>485次学习</span>
</dd>
</dl>
</li>
</ul>
</div>
</div>
<!-- footer -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="footer">
<ul>
<li ><a href="/" class="aLightGray"><em class="material-icons">home</em><span>首页</span></a></li>
<li class="curr"><a href="/articlelist.html" class="aLightGray"><em class="material-icons">menu_book</em><span>阅读</span></a></li>
<li ><a href="/courselist.html" class="aLightGray"><em class="material-icons">school</em><span>课程</span></a></li>
<li ><a href="/ai.html" class="aLightGray"><em class="material-icons">smart_toy</em><span>AI助手</span></a></li>
<li ><a href="/user.html" class="aLightGray"><em class="material-icons">person</em><span>我的</span></a></li>
</ul>
</div>
<script src="/assets/js/require.js" data-main="/assets/js/require-frontend.js?v=1671101972"></script>
<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>
</body>
</html>
