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 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
随机推荐
- 服务端&客户端注册进Eureka
目录 服务端(接口提供方) 创建项目 导入Eureka客户端POM 启动类添加注解 配置YML 暴漏接口 启动服务 集群 配置成功后页面如下 客户端(接口调用方) 修改Yml文件 配置类 启动类添加注 ...
- js数组和对象的区别,ajax传入多个参数值,ajax传多个数组数据
数组分为索引数组和关联数组 js中先声明一个空数组 arr = [] 索引数组 索引是整数,如arr[0] = 'a' 关联数组 索引是自定义的字符串,如arr['a'] = 'a' js中的对象 你 ...
- git pull origin master 报错问题解决 fatal: couldn‘t find remote ref master
报错:fatal: couldn't find remote ref master 解决:使用以下命令 git pull origin main 替代报错命令: git pull origin mas ...
- leetcode210.拓扑排序
拓扑排序能否成功,其实就是看有没有环 有环:说明环内结点互为前置,永远也不可能完成 无环:是线性的,可以完成 DFS方法 思路: 逆向思维,遍历到边界点(无邻接点相当于叶子),再不断回溯将结点加入到结 ...
- Linux(centos7)安装RabbitMQ
由于RabbitMQ是由Erlang语言开发的,所以我们需要体检安装erlang语言的环境 下载这三个安装包:https://www.aliyundrive.com/s/4AxfTepHjMD 执行安 ...
- 输入URL回车之后，究竟发生了什么
https://blog.csdn.net/androidstarjack/article/details/107031771 在浏览器输入URL回车之后发生了什么?(超详细版) 前言 这个问题已 ...
- setTimeout时间延迟为何不准?
单线程, 先执行同步主线程, 再执行异步任务队列
- ServletConfig对象和ServletContext对象有什么区别?
一个Servlet对应有一个ServletConfig对象,可以用来读取初始化参数. 一个webapp对应一个ServletContext对象. ServletContext对象获取初始化定义的参数. ...
- springboot 定时任务 session报错问题
一.自定义类 LocalVariable package com.lh.mes.base.thread; import java.util.Optional; public class LocalVa ...
- Thread 类的 sleep()方法和对象的 wait()方法都可以让线 程暂停执行，它们有什么区别?
sleep()方法(休眠)是线程类(Thread)的静态方法,调用此方法会让当前线程 暂停执行指定的时间,将执行机会(CPU)让给其他线程,但是对象的锁依然保 持,因此休眠时间结束后会自动恢复(线程回 ...