运行效果:

源代码:

 1 <!DOCTYPE html>
2 <html lang="zh">
3 <head>
4 <meta charset="UTF-8">
5 <title>城东早春</title>
6 <style type="text/css">
7 *{
8 margin: 0;
9 padding: 0;
10 border: none;
11 }
12
13 body{
14 font-family: "宋体";
15 }
16
17 .container{
18 width: 50%;
19 margin-top: 20px;
20 margin-left: 20px;
21 }
22
23 .red{
24 color: red;
25 }
26
27 .blue{
28 color: blue;
29 }
30
31 .bold{
32 font-weight: bolder;
33 }
34
35 .text-center{
36 text-align: center;
37 }
38
39 .text-right{
40 text-align: right;
41 }
42
43 h4,h3,h2,h1{
44 margin: 20px 0;
45 }
46
47 </style>
48 </head>
49 <body>
50 <div class="container">
51 <p class="red bold text-center">城东早春</p><br />
52 <p class="red text-right"><i>作者:杨巨源</i></p><br />
53 <h4 class="blue bold">诗家清景在新春,</h4>
54 <h3>绿柳才黄半未均。</h3>
55 <h2 class="blue">若待上林花似锦,</h2>
56 <h1>出门俱是看花人。</h1>
57 </div>
58 </body>
59 </html>

CSS简单样式练习(一)的更多相关文章

  1. CSS简单样式练习(七)

    运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...

  2. CSS简单样式练习(六)

    运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...

  3. CSS简单样式练习(五)

    运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...

  4. CSS简单样式练习(四)

    运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...

  5. CSS简单样式练习(三)

    运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...

  6. CSS简单样式练习(二)

    运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...

  7. CSS常用样式及示例

    CSS常用样式及示例 一.简介      层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...

  8. 纯CSS菜单样式,及其Shadow DOM,Json接口 实现

    先声明,要看懂这篇博客要求你具备少量基础CSS知识, 当然如果你只是要用的话就随便了,不用了解任何知识 完整项目github链接:https://github.com/git-Code-Shelf/M ...

  9. CSS简单使用

    CSS简单使用 标签 : 前端技术 CSS(Cascading Style Sheet : 层叠样式表单)用来定义网页显示效果. 可以解决HTML代码对样式定义的重复,提高后期样式代码的可维护性,并增 ...

随机推荐

  1. Windows原理深入学习系列-特权

    这是[信安成长计划]的第 21 篇文章 0x00 目录 0x01 介绍 0x02 结构分析 0x03 进程注入测试 0x04 参考文章 0x01 介绍 在 Token 当中还存在一个特别重要的内容-- ...

  2. 为什么我的MySQL会“抖”一下?

    不知道你有没有遇到过这样的场景,一条 SQL 语句,正常执行的时候特别快,但是有时也不知道怎么回事,它就会变得特别慢,并且这样的场景很难复现,它不只随机,而且持续时间还很短. 1)InnoDB 在处理 ...

  3. 解决 MySQL 的 Table is marked as crashed and should be repaired 问题

    解决方法: 找到mysql的安装目录的bin/myisamchk工具,在命令行中输入: myisamchk -c -r ../data/mysql/user.MYI 然后myisamchk 工具会帮助 ...

  4. 1.2 简单的STL案例

    文章目录 1.容器算法迭代器分离案例 2.专栏回顾:第一章到第二章2.2 1.容器算法迭代器分离案例 案例:统计某个元素在数组里出现的次数 简易版(帮助理解,无STL) #include<ios ...

  5. Net Framework 中托管代码与非托管代码的区别

    托管代码与非托管代码的区别 1 简单的说,就是代码被编译成MSIL后在.net的Framework下运行,同操作系统底层的交互都交给framework去做. 所谓非托管代码就是脱离了Framework ...

  6. Prepared SQL 性能测试

    一:Prepere Statement 简介  prepare statement 即 SQL 预处理.什么是 SQL 预处理? 普通 SQL 语句执行的逻辑 需要经过 server 层 的 分析器 ...

  7. Markdown初识及基本使用

    Markdown初识及基本使用 ​ 由Typora编写. 一.初识Markdown 允许人们使用易读易写的纯文本格式编写文档. 是一种轻量级标记语言 编写的文档可以导出 HTML .Word.图像.P ...

  8. 不会DRF?源码都分析透了确定不来看?

    目录 不会DRF?源码都分析透了确定不来看? 快速使用DRF写出接口 序列化和反序列化 drf快速使用 views.py serializer.py urls.py 在settings的app中注册 ...

  9. SpringBoot:自定义注解实现后台接收Json参数

    0.需求 在实际的开发过程中,服务间调用一般使用Json传参的模式,SpringBoot项目无法使用@RequestParam接收Json传参 只有@RequestBody支持Json,但是每次为了一 ...

  10. 数据库MySql的学习(1)--基本操作

    转自 博客园-hoojo-http://www.cnblogs.com/hoojo/archive/2011/06/20/2085390.html 一.数据库简单介绍 1. 按照数据库的发展时间顺序, ...