运行效果:

源代码:

 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. 总结一下Java基础知识

    重中之重-----------基础 底层结构决定上层建筑,所以,基础很重要. 自信心 在开始说基础之前先说明一下自信心的重要性,没有自信心学什么东西都学不好. 核心自信***** 核心自信从三个方面来 ...

  2. OSPF协议原理及配置2-理解邻居和邻接关系

    OSPF是一个动态路由协议,运行OSPF的路由器之间需要交换链路状态信息和路由信息,在交换这些信息之前首先需要建立邻接关系.邻接关系用来交换链路状态及路由信息. 注意:并非所有的邻居关系都可以成为邻接 ...

  3. 还在写SQL做SAP二开?通过RFC调用NetWeaver,让HANA数据库操作更可靠

    相比于从零开始构建全套信息化系统,基于成熟的ERP等行业软件做二次开发是更多中大型企业应对个性化软件需求的首选方案.如何在二开模块中,可靠地对成品软件的数据库进行读写操作,以满足单据自动创建.元数据自 ...

  4. R-CNN小结

    1.背景 物体检测(object detection)是计算机视觉非常重要的一个领域.RCNN作为该领域的开山鼻祖,在深度学习出现之前,传统方法始终无法处理好物体检测问题(会通过非常庞大的计算,来算出 ...

  5. 2022年官网下安装MySQL最全版与官网查阅方法

    目录 安装部署MySQL 一.百度查找MySQL官网 二.如图找到DOWNLOADS位置,既是下载位置 三.双击进入DOWNLOADS,下拉找到如图位置(红圈位置是社区免费版,上边部分应该是收费版) ...

  6. How to Rebase Git Branch

    转自:How to Rebase Git Branch (with 3 steps) | Git Rebase | W3Docs Steps to rebasing branch Fetching c ...

  7. 使用数据库连接工具DBeaver连接H2数据库

    H2数据库第一次听说,学习了. H2数据库自带了一个浏览器web操作,但是非常的不好用,用DBeaver看着好用多了. 1.点击带+的连接图标 2.选择ALL点击H2 Embedded.(如果本地没有 ...

  8. WIRESHARK 提取百度云客户端中的下载地址

    序言:近两年感觉云盘是越来越不行了,什么115,360,华为,新浪一些网盘纷纷关门,现在手里能用的就只剩下一个百度云坚挺着.可那速度,简直感人,好吧,没钱冲VIP,就去找了一个破解版,用了一年,爽得飞 ...

  9. Linux下使用压力测试工具stress

    一:stress的安装 首先解压安装包到/usr/local/src/下 mv stress-1.0.4.tar.gz /usr/local/src​tar -zxf stress-1.0.4.tar ...

  10. 保姆教程系列二、Nacos实现注册中心

    前言: 请各大网友尊重本人原创知识分享,谨记本人博客:南国以南i 上篇我们介绍到  保姆教程系列一.Linux搭建Nacos 注册中心原理 一.环境准备 Java版本:1.8+   (Linux ce ...