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 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
随机推荐
- Spring源码之九finishRefresh详解
Spring源码之九finishRefresh详解 公众号搜索[程序员田同学],专职程序员兼业余写手,生活不止于写代码 Spring IoC 的核心内容要收尾了,本文将对最后一个方法 finishRe ...
- spring框架中Bean的生命周期
一.Bean 的完整生命周期 在传统的Java应用中,bean的生命周期很简单,使用Java关键字 new 进行Bean 的实例化,然后该Bean 就能够使用了.一旦bean不再被使用,则由Java自 ...
- 如何取消 UIView 动画？
原文链接 最近项目中有一个需求是需要手动点击相机对焦,这里由于相机对焦部分需要一个类似于系统对焦框一样的缩放动画,同时动画时长为0.3秒,因此这里就有一个很普遍的需求,如果用户在0.3秒内继续点击对焦 ...
- linux中文件颜色，蓝色，白色等各自代表的含义
linux中文件颜色,蓝色,白色等各自代表的含义 绿色文件---------- 可执行文件,可执行的程序 红色文件-----------压缩文件或者包文件 蓝色文件----------目录 白色文件- ...
- angular批量上传图片并进行校验
最近做一个项目,有一个批量上传图片,并校验是否是图片和上传最大数量的需求.下面分享一下我的想法,欢迎大神探讨. 首先是在html中支持批量上传和接收图片(mac下设置了之后不存在类型校验),下面上ht ...
- 常见的Socket网络异常场景分析
原创:打码日记(微信公众号ID:codelogs),欢迎分享,转载请保留出处. 简介 在目前微服务的背景下,网络异常越来越常见了,而有一些网络异常非常模糊,理解什么情况下会导致什么异常,还是有一定难度 ...
- 使用Docker 部署MongoDB
使用 Docker 部署 MongoDB 查看官网安装教程后感觉直接使用包管理器安装mongo比较复杂,本文主要介绍使用docker安装部署mongo的方法,并对基本配置项进行自定义.保姆式全程指导. ...
- kali下对Docker的详细安装
镜像下载.域名解析.时间同步请点击 阿里云开源镜像站 前言 Docker是渗透测试中必学不可的一个容器工具,在其中,我们能够快速创建.运行.测试以及部署应用程序.如,我们对一些漏洞进行本地复现时,可以 ...
- ssh-ssl编译安装
升级前准备 #下载所需依赖包#yum install -y gcc gcc-c++ glibc make autoconf openssl openssl-devel pcre-devel pam-d ...
- Mysql学习笔记-InnoDB深度解析
前言 我们在上一篇博客聊了Mysql的整体架构分布,连接层.核心层.存储引擎层和文件系统层,其中存储引擎层作为Mysql Server中最重要的一部分,为我们sql交互提供了数据基础支持.存储引擎和文 ...