CSS简单样式练习（五）
运行效果：
源代码：
1 <!DOCTYPE html>
2 <html lang="zh">
3 <head>
4 <meta charset="UTF-8">
5 <title>春天</title>
6 <style type="text/css">
7
8 *{
9 margin: 0;
10 padding: 0;
11 border: none;
12 }
13
14 body{
15 font-family: "宋体";
16 font-size: 12px;
17 }
18
19 .title{
20 font-size: 16px;
21 font-weight: bolder;
22 text-decoration: overline;
23 }
24
25 .container{
26 margin: 20px 20px;
27 height: 300px;
28 }
29
30 .text-content{
31 margin-top: 20px;
32 }
33
34 .green{
35 color: limegreen;
36 }
37
38 .red{
39 color: red;
40 }
41
42 .text-center{
43 text-align: center;
44 }
45 </style>
46 </head>
47 <body>
48 <div class="container">
49 <p class="red text-center title">春天</p>
50 <p class="green text-content"> 在<font class="red">春季</font>，地球的北半球开始倾向太阳，
51 受到越来越多的太阳光直射，因而气温开始升高。随着冰雪消融，河流水位上涨。<font class="red">春季</font>植物
52 开始发芽生长，许多鲜花开放。冬眠的动物苏醒，许多以卵过冬的动物孵化，鸟类开始迁徙，
53 离开越冬地向繁殖地进发。许多动物在这段时间里发情，因此中国也将<font class="red">春季</font>称为“万物复苏”
54 的季节。<font class="red">春季</font>气温和生物界的变化对人的心理和生理也有影响。</p>
55 </div>
56 </body>
57 </html>
CSS简单样式练习（五）的更多相关文章
- CSS简单样式练习（七）
运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...
- CSS简单样式练习（六）
运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...
- CSS简单样式练习（四）
运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...
- CSS简单样式练习（三）
运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...
- CSS简单样式练习（二）
运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...
- CSS简单样式练习（一）
运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...
- 前端学习日记之HTML、CSS 简单总结
前端学习日记之HTML.CSS 简单总结 标签(空格分隔): html css 前端学习日记 html超文本标记语言 一. h标题标签 h1-h7 <!DOCTYPE html> < ...
- CSS常用样式及示例
CSS常用样式及示例 一.简介 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...
- 谈谈一些有趣的CSS题目（十五）-- 奇妙的 background-clip: text
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
随机推荐
- react的”Hello World ！“
本文主要简述react的开始使用 1.引入js文件 <!-- 1.核心文件 --> <script crossorigin src="https://unpkg.com/r ...
- linux作业--第七周
1.解决DOS攻击生产案例:根据web日志或者或者网络连接数,监控当某个IP 并发连接数或者短时内PV达到100,即调用防火墙命令封掉对应的IP,监控频率每隔5分钟.防火墙命令为:iptables - ...
- 4. 堪比JMeter的.Net压测工具 - Crank 进阶篇 - 认识wrk、wrk2
目录 堪比JMeter的.Net压测工具 - Crank 入门篇 堪比JMeter的.Net压测工具 - Crank 进阶篇 - 认识yml 堪比JMeter的.Net压测工具 - Crank 进阶篇 ...
- iCloud开发: key-value Storage,CloudKit,iCloud Documents
目录 iCloud开发 iCloud三种类型的存储方式 项目配置 1.iCloud 官网配置 2.本地Xcode配置 注意事项 一.key-value storage 1.获取默认store 2.写入 ...
- yum源出现 AppStream‘ 缓存失败，忽略这个 repo。同步仓库 ‘base‘ 缓存失败，忽略这个 repo 的问题解决办法
今天安装Wget时出现如下错误 到 /etc/yum.repos.d/目录下编辑CentOS-Base.repo ,更改为如下内容. vim CentOS-Base.repo # CentOS-Bas ...
- ArcGIS进行容积率计算
空间分析--题目2 容积率(Plot Ratio/Floor Area Ratio/Volume Fraction)又称建筑面积毛密度,是指一个小区的地上总建筑面积与用地面积的比率.对于开发商来说,容 ...
- 一些Docker 操作集合
基本 显示所有容器(包括已停止): docker container ls -a 删除所有容器: docker stop $(docker ps -q) docker rm $(docker ps - ...
- 配置Openfiler做ISCS实验
在VMware workstation中安装openfiler(linux底层) 系统安装 选择redhat6,64bit 分配30G 2. 3.. 4.5. ...
- Kubernetes：存储管理
Blog:博客园 个人 参考:Volumes | Kubernetes.Persistent Volumes | Kubernetes.Kubernetes 基础入门实战 简单来说,存储卷是定义在Po ...
- Flink不止于计算，存算一体才是未来
"伴随着实时化浪潮的发展和深化,Flink 已逐步演进为实时流处理的领军技术和事实标准.Flink 一方面持续优化其流计算核心能力,不断提高整个行业的流计算处理标准,另一方面沿着流批一体 ...