「测试开发全栈-HTML」(20)css的引入方式-综合案例

天说完了css的全部引入方式，今天根据一个综合案例来编写代码。

案例: 新闻页面

制作页面，整体可以分为两步:

1.搭建HTML结构页面

2.修改CSS样式

我们来看下具体的样式:

这就是一个普通的网页展示，对应的代码为:

<!DOCTYPE html>

<head>

<title>CSS样式-综合案例</title>

<style>

body {

/* 字号大小和字体，必须要写 */

font: 16px/28px 'Microsoft YaHei';

}

h1 {

/* 标题文字不加粗，正常展示 */

font-weight: 400;

/* 标题中的文字水平居中 */

text-align: center;

}

.gray {

/* 颜色为淡灰色，整体居中，字体大小小一些，为12px */

color: #888888;

font-size: 12px;

text-align: center;

}

/* 取消下划线 */

a {

text-decoration: none;

}

/* 搜索按钮中搜索两个字的颜色和宽度 */

.search {

color: #666;

width: 170px;

}

/* 按钮样式 */

.btn {

font-weight: 700;

}

/* 对图片的设置 */

.pic {

text-align: center;

}

/* 想要图片居中对齐，需要对图片的父标签<p>添加水平居中的代码 */

.footer {

color: blue;

font-size: 12px;

font-weight: 700;

}

/* 底部展示样式，也是使用class属性 */

</style>

</head>

<body>

<h1>男子嫌银行服务态度差取走500万，被银行证实</h1>

<div class="gray">来源: <a href="htttps://www.baidu.com">北京日报</a> 2021.10.15

</div>

<hr>

<p>微博大V@sunwear发文炮轰上海银行，声称由于该行服务态度不好，他准备分批将存在该行的几千万元全部取现转移，目前已取500万元带走，所取现金搬上了一辆劳斯莱斯。

上海银行工作人员回复称，的确有这样的事情发生，但也是个别现象。具体情况不是很清楚，已反馈专员跟进处理。</p>

<p>对于事件的经过，一位网友发文称，“该大V疫情期间去网点不愿意戴口罩，所以被保安阻拦。

网点负责人解释了很久，没有用，并且要网点负责人下跪道歉。”sunwear发布回应，否认自己不愿意戴口罩、逼负责人下跪道歉，并建议银行拿出监控看看保安是如何表现的。</p>

</p>

<h4>观察者网表示很赞</h4>

<p>sunwear表示，自己全程一共三句话：忘带了，你们这有么？哪有卖的？“我乖乖的去旁边买了一个口罩回来了。保安全程一句话没有，第一个手势指着我嘴，第二个手势扭着脑袋摆手让我出去，第三个手势挥手一指外面。

我以为他是个哑巴，我没有任何不愿意戴口罩的表现。</p>

<p class="footer">明天会有一个好天气</p>

</body>

</html>

对每一个段落都进行了标注，通过这个案例，将之前学到的HTML和CSS样式都用了一遍。

明天就要上班了，时间过的飞快。

端必学 40个精选案例实战一课吃透HTML5+CSS3+JS(超清完结)

"夏哉ke"：chaoxingit.com/5056/

前端必学：40个精选案例实战，一课吃透HTML5+CSS3+JS

在现代Web开发中，HTML5、CSS3和JavaScript是前端开发的基石。掌握这些技术，不仅能够构建出功能丰富、交互性强的网页，还能够提升用户体验和网站性能。本文将介绍40个精选的实战案例，帮助读者深入理解HTML5、CSS3和JavaScript的应用。

HTML5 实战案例

语义化标签的运用：使用HTML5的语义化标签（如、、等）优化页面结构。

表单验证：利用HTML5表单元素和属性（如、required等）进行客户端表单验证。

视频和音频播放器：使用和标签实现网页上的视频和音频播放功能。

Canvas绘图：利用Canvas API实现各种绘图效果，如画布动画、游戏等。

地理位置定位：利用Geolocation API获取用户地理位置信息，实现定位功能。

CSS3 实战案例

响应式布局：使用CSS3媒体查询和Flexbox/Grid布局实现响应式网页布局。

动画效果：利用CSS3动画（如@keyframes）和过渡效果（transition）制作页面动画。

渐变和阴影：利用CSS3渐变（linear-gradient、radial-gradient）和阴影（box-shadow）美化页面元素。

3D变换：使用CSS3的3D变换（transform: translate3d()、rotateX()等）创建立体效果。

自定义字体：利用@font-face属性引入自定义字体文件，实现页面字体的定制化。

JavaScript 实战案例

DOM操作：使用JavaScript操作DOM元素，实现动态内容加载和交互效果。

事件处理：利用事件处理器（如addEventListener）处理用户交互事件，实现页面响应。

Ajax数据请求：使用XMLHttpRequest对象或Fetch API实现异步数据请求，实现页面数据的动态更新。

LocalStorage和SessionStorage：利用localStorage和sessionStorage存储数据，实现本地数据的持久化存储。

表单操作：使用JavaScript处理表单数据，实现表单验证、提交和重置功能。

综合实战案例

轮播图：利用HTML、CSS和JavaScript实现轮播图组件，展示多张图片或内容。

ToDo列表：使用HTML、CSS和JavaScript实现一个简单的ToDo列表应用，包括添加、删除和完成任务等功能。

网页计算器：利用HTML、CSS和JavaScript实现一个简单的网页计算器，支持基本的四则运算。

图片懒加载：利用JavaScript实现图片懒加载，提升页面加载性能和用户体验。

响应式导航菜单：使用HTML、CSS和JavaScript实现一个响应式导航菜单，适配不同设备和屏幕大小。

通过这40个实战案例，读者可以全面掌握HTML5、CSS3和JavaScript的应用，提升前端开发技能，构建出更加优秀的网页和应用。

学习前端必学的40个案例实战有以下优势和适合人群：

优势：

全面掌握前端技术：通过实战案例，能够全面深入地理解HTML5、CSS3和JavaScript的应用，包括语法、特性和最佳实践。

学以致用：案例实战使学习更具实用性，能够立即将所学知识应用到实际项目中，加深理解并提升技能。

丰富经验：通过解决实际问题的过程，积累丰富的开发经验，能够更好地应对复杂项目和挑战。

提升创造力：案例涵盖了各种不同类型的项目，从而激发学习者的创造力和解决问题的能力。

适应行业需求：掌握HTML5、CSS3和JavaScript等前端技术是当今Web开发行业的基本要求，能够更好地适应行业发展趋势。

适合人群：

初学者：对前端开发感兴趣的初学者可以通过实战案例系统地学习HTML5、CSS3和JavaScript，并快速上手实践。

自学者：自学能力强的人可以通过实战案例来系统地巩固和提升前端技能，完善自己的学习路径。

职业转型者：希望转向前端开发领域的人可以通过学习这些案例，快速掌握所需技能，并为职业转型做好准备。

前端开发者：已经从事前端开发工作的人可以通过进阶的实战案例来拓展自己的技能树，提升职业竞争力。

项目需求者：有实际项目需求的人可以通过学习这些案例来解决项目中遇到的问题，提高项目的质量和效率。

总的来说，学习前端必学的40个精选案例实战能够帮助各类学习者系统地掌握HTML5、CSS3和JavaScript等前端技术，并快速应用于实际项目中，从而提升自己的技能水平和就业竞争力。

们来先来分析一下这个案例。

标题容器左对齐，有固定的宽高。标题文字白色，水平垂直居中。

正文共四个段落，每个段落都有固定的宽度，右侧边界对齐。

前三个段落首行空两个字。每个段落里都有一段高亮的文本，有颜色和下划线修饰，也有文本斜体和加粗效果。

段落中的一些文字还有颜色、加粗、下划线以及倾斜等修饰效果。

第四个段落起始有个吉他图标，英文字体有外发光效果。

下面我们来制作这个网页。

创建 007-css-case-1 文件夹，在文件里创建一个 case-text-fonts.html 页面文件和 case-1.css 样式文件。

在 html 文件内创建基础代码，在 head 标签内部引入外部样式 case-1.css。

首先来制作标题。

添加一个 h1 元素，填入标题文本。

在编写标题样式之前，假设 UI 设计师给你的是一篇文章的图片，你可能就犯难了，如何获得标题的宽高、背景颜色和文字大小呢？

大家打开电脑里的QQ，登录进去，Mac电脑按下键盘 Control + Command + A，Windows电脑按下ctrl+alt+a，圈选页面标题，点击对号按钮，完成截屏。

在浏览器中输入 ps.gaoding.com，打开在线版 PS。点击文件，新建，再点击创建按钮。最后，Control + V，将截屏的图片粘贴过来。

应用选框工具，发现标题选区的宽度和高度分别为 200 和 50 像素，文字的大小为 24 像素。

应用吸管工具，点击标题框吸取背景色，点击前景色按钮，得到十六进制颜色值 #a52a2a。

有了这三个值，就可以定义标题的样式了。

h1 {
  width: 200px;
  height: 50px;
  background-color: #a52a2a;
  color: white;
  line-height: 50px;
  font-size: 24px;
  text-align: center;
}

定义 h1 选择器，声明样式 width: 200px，height: 50px，background-color: #a52a2a，color: white，font-size: 24px,text-align:center

在浏览器中查看页面，标题的效果基本上都实现了。接下来完成文本的垂直居中对齐。

可以通过给文本声明 line-height 行高属性，来间接实现文本的垂直居中，那行高的值设置为多少呢？根据前面学习的行高知识，将行高的值设置为 50px，也就是文本所在容器的高度。这样，文本在容器中恰好就垂直居中了。

接下来制作四个段落。

在 HTML里添加四个 p 元素，填入一些文本。下面给这些段落添加样式。

p {
  width: 500px;
  text-indent: 2em;
  text-align: justify;
  word-spacing: 10px;
  text-transform: capitalize;
  line-height: 28px;
}

定义 p 选择器，声明样式：width: 500px，让每一个段落都有固定的宽度。text-indent: 2em，每个段首空两格。text-align: justify，实现段落右侧边界对齐。给最后一段英文添加样式：word-spacing: 10px，添加单词间距。text-transform: capitalize，每个单词首字母大写。最后再添加 line-height: 28px，给段落设置一个行间距。

四个段落基本上制作完毕了。接下来装饰个别段落和文字。

分别使用三个 span 元素将这三部分文字包裹起来。给第一个和第三个 span 元素定义 class 属性，值为 mark1。(第一个段落里面的带有下滑划线区域,和第三个段落中的下划线区域)

在CSS中定义 mark1 选择器，声明样式 color: red，text-decoration-line: underline，text-decoration-style: double。

我们看，这两部分文本被红色、双下划线修饰了。

实际效果第三部分文本还带有一个波浪线。需要再定义一个样式覆盖一下。

给这个 span 的样式类再添加一个 mark2。

定义选择器 mark2，声明样式 text-decoration-style: wavy。

效果实现了。

给第二个 span 添加 class 属性，值为 mark3。

定义选择器 mark3，声明样式 color: orange。

第二部分文本变成了橙色。

案例还要求这两部分文字为倾斜效果。使用 span 元素把他们包裹起来，定义 class 等于 mark4。

定义选择器 mark4，声明样式 font-style: italic。

文本倾斜效果实现了。

实际上，千锋全部学科的名称和被特殊修饰的文本都有加粗效果，给全部学科再添加一个 span元素包裹在外层。给所有需要加粗的 span 都添加 mark0 样式类名。

定义选择器 mark0，声明样式 font-weight: bold。

文本加粗效果实现了。

.mark0 {
  font-weight:bold
}

.mark1 {
  color: red;
  text-decoration-line: underline;
  text-decoration-style: double;
}

.mark2 {
  text-decoration-style: wavy;
}

.mark3 {
  color:orange;
}

.mark4 {
  font-style: italic;
}

最后，给英文段落定义特殊字体并添加外发光的效果。

.p1 {
  font-family: "Sofia", sans-serif;
  text-indent: 0;
}

在 head 里添加引用谷歌字体的 css 链接，和自定义 icon 图标的 js 地址。

给英文的段落元素定义 class 属性，值为 p1 font-effect-outline。

添加 p1 选择器，声明样式：font-family: "Sofia", sans-serif。

字体效果实现了！在段首还有一个 icon 图标。

如何查找自己心仪的图标呢？大家可以访问 fontawesome 官网这个地址，海量图标就任你选择了。guitar 就在这里。（https://fontawesome.com/search?p=2&favorites=staff）

在段落头部添加 i 元素，定义 class属性，值为 fas fa-guitar。（注意中间有空格）。

我们发现，真正使用这个图标时，样式类的值，要求在官网查找到的图标名字前，加上 fa- (读作：fa杠)，并且还需要添加 fas。

图标添加好了！实际的效果，最后一行没有缩进。

在 .p1 (注意这里有点) 选择器里添加 text-indent: 0，来覆盖 p 元素的样式。

为什么能覆盖呢？答对了，因为作用的优先级—— class 选择器要大于元素选择器。

这样，就取消了最后一行的段首缩进！

文章配套视频链接：https://www.bilibili.com/video/BV1oU4y1278g?p=68

在线咨询

上一篇：html基础必备-必需标记，前端小白一看就会
下一篇：HTML+CSS CSS3 特殊的“边线”outline

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

「测试开发全栈-HTML」(20)css的引入方式-综合案例

端必学 40个精选案例实战 一课吃透HTML5+CSS3+JS(超清完结)

您的项目需求

端必学 40个精选案例实战一课吃透HTML5+CSS3+JS(超清完结)