运行效果:

源代码:

 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. 题解 P1659 【[国家集训队]拉拉队排练】

    一眼可得PAM 如果没学过PAM的可以看这里:PAM学习小结 我们令PAM上多记录一个信息\(sum\),表示该节点表示串在原串上出现了多少次. 当我们处理完了\(sum\),对于长度\(len\)为 ...

  2. vue2.x结合echarts2实现显示具体省份热力图

    最近研究了一下VUE2.X结合ehcarts实现热力图,先看下最终: 效果话不多说,直接上代码: 1 <!DOCTYPE html> 2 <html> 3 <head&g ...

  3. Python函数-5 生成器

    生成器有时候,序列或集合内的元素的个数非常巨大,如果全制造出来并放入内存,对计算机的压力是非常大的.比如,假设需要获取一个10**20次方如此巨大的数据序列,把每一个数都生成出来,并放在一个内存的列表 ...

  4. Django之 rest_framework (一基本组件)

    目录 RESTFUL 序列化 视图三部曲 认证与权限组件 解析器 分页 RESTFUL 一.什么是RESTFUL REST与技术无关代表的是一种软件架构风格,REST是Representational ...

  5. linux内存(三)内核与用户空间交互

    来自网址http://www.kerneltravel.net/jiaoliu/005.htm 用户程序和内核的信息交换是双向的,也就是说既可以主动从用户空间向内核空间发送信息,也可以从内核空间向用户 ...

  6. ModSecurity的规则

    一.ModSecurity的规则 基本格式 SecRule VARIABLES OPERATOR ACTIONS SecRule:ModSecurity主要的指令,用于创建安全规则. VARIABLE ...

  7. ctf之POST

    题目信息如下 可知该题考察post请求知识 直接将what=flag以post传参格式进行传参即可获得flag

  8. 知识点简单总结——minmax容斥

    知识点简单总结--minmax容斥 minmax容斥 好像也有个叫法叫最值反演? 就是这样的一个柿子: \[max(S) = \sum\limits_{ T \subseteq S } min(T) ...

  9. CF 920A Water The Garden

    本题可以看做是一个数学题 因为 在第 1 和第 3 个洒水器之间的 花园灌溉的时间只要 (1 + 3 ) >> 1 - 1 + 1;//这么长的时间 那么我么就可以以此类推到 从而我么可以 ...

  10. ubuntu开启emqx/nginx/uwsgi自启动服务

    一.emqx开机自启 a.首先在执行如下命令  vi /lib/systemd/system/emqx.service 创建了emqx.service文件然后在文件中写入如下内容 [Unit] Des ...