HTML+CSS实战：李清照词篇项目练习

需积分: 37 168 浏览量更新于2024-08-05 收藏 7KB MD 举报

在这个HTML+CSS项目练习源码中，主要目标是通过实践巩固HTML和CSS的基础知识，以便为后续开发大项目打下坚实的基础。代码内容包含两个部分：HTML结构与样式设计。 HTML基础概念与标签实践 1.1 HTML结构示例 - 李清照的词该段代码展示了一个简单的HTML页面，用于展示李清照的《清平乐》诗词。`<!DOCTYPE html>`声明文档类型为HTML5，`<html lang="en">`设置语言为英文。`<head>`部分包含了元数据，如字符集 `<meta charset="UTF-8">`、页面标题 `<title>` 和外部CSS链接 `<link rel="stylesheet" href="css/style.css">`，确保了页面的编码和样式统一。在`<body>`中，我们有三个主要元素：`<h1>`标题（诗歌名）、`<hr>`水平线以及两个 `<p>`段落，展示了诗词内容。`<h1>`使用了`text-align: center;`居中显示，`<p>`元素则设置了首行缩进和字体样式。 1.2 HTML元素应用 - 李清照简介这部分缺失，但可以推测会有一个类似的结构，可能包括一个关于李清照的简介，如姓名、生平等，使用HTML列表、段落等元素展示。这部分将HTML文本元素用于组织信息，并可能配合CSS进行美化，如标题级别、颜色等。 CSS样式设计 CSS代码定义了页面全局的样式规则，使用了`*`通配符选择器设置默认样式，包括清除内外边距、统一字体大小、设置盒模型等。接下来，针对不同元素（如`<h1>`、`<h2>`、`<p>`）进行了具体样式定制，如字体大小、对齐方式、颜色、行高等。`#time`选择器和`span`元素可能是用于特定元素的样式，例如时间标签或强调文字。效果图提供的图片展示了运用CSS样式后的HTML页面效果，可以看到标题居中，诗词内容整齐排列，且使用了梅花图像作为背景，整体布局清晰，风格简洁。通过这个HTML+CSS项目练习，学习者可以加深对HTML标签的理解，掌握如何布局和格式化文本，以及如何利用CSS进行页面美化。这对于提升网页开发技能至关重要，特别是对于理解和应用响应式设计原则，以适应不同设备的屏幕尺寸。

执笔画流年794

粉丝: 51
资源: 14

HTML+CSS实战：李清照词篇项目练习

HTML项目练习

项目练习demo

html+css+js新手练习项目

使用Echarts引入可视化大屏所需的第三方资源包。使用技术： 1.div + css 布局 -2.flex 布局 3. Less 4.原生js + jquery 使用 5. rem适配

for (let i = 0; i < this.$refs.newbox.length; i++) { this.$refs.newbox[i].style.display = 'block' } vue2应该怎么增加样式权重值 并且不可覆盖1

8套漂亮的html+css网站模板、网页设计源码.zip

花钱购买制作精美的留言板或者留言板设计的HTML + CSS + DIV 源码

$('#cssfile').attr('href','css/'+this.id+'.css');

vite +electron 使用normalize.css

最新资源

for (let i = 0; i < this.$refs.newbox.length; i++) { this.$refs.newbox[i].style.display = 'block' } vue2应该怎么增加样式权重值并且不可覆盖1