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 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简单样式练习（一）的更多相关文章
- 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 ...
- CSS常用样式及示例
CSS常用样式及示例 一.简介 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...
- 纯CSS菜单样式，及其Shadow DOM，Json接口 实现
先声明,要看懂这篇博客要求你具备少量基础CSS知识, 当然如果你只是要用的话就随便了,不用了解任何知识 完整项目github链接:https://github.com/git-Code-Shelf/M ...
- CSS简单使用
CSS简单使用 标签 : 前端技术 CSS(Cascading Style Sheet : 层叠样式表单)用来定义网页显示效果. 可以解决HTML代码对样式定义的重复,提高后期样式代码的可维护性,并增 ...
随机推荐
- k8s集群StatefulSets的Pod优雅调度问题思考？
k8s集群StatefulSets的Pod优雅调度问题思考 考点之你能解释一下为什么k8s的 StatefulSets 需要VolumeClaimTemplate嘛? 考点之简单描述一下Statefu ...
- laravel7 h-ui模板点改
1:html页面 <td> @if($item->fang_status == 0) <span onclick="changeFangStatus(this,{{$ ...
- Higncharts 制作
<html> <head> <meta charset="UTF-8" /> <title>Highcharts 教程 | 菜鸟教程 ...
- vue3 区别于 vue2 的“与众不同”
希望本篇文章能帮你加深对 Vue 的理解,能信誓旦旦地说自己熟练Vue2/3.除此之外,也希望路过的朋友可以帮助我查漏补缺. 区别 生命周期的变化 整体来看,变化不大,只是名字大部分需要 + on ...
- Hive框架
1.什么是Hive? Hive 是基于Hadoop之上的数据仓库.2.什么是数据仓库? 数据仓库其实就是一个数据库 数据仓库是一个面向主题的,集成的,不可更新的,随时间不变化的数据集合,它用于支持 企 ...
- 5月4日 python学习总结 socketserver
一.socketserver SocketServer简化了网络服务器的编写. 它有4个类:TCPServer,UDPServer,UnixStreamServer,UnixDatagramServe ...
- 论php常见的问题[转载自原乌云]
论PHP常见的漏洞 ′ 雨. · 2015/01/14 10:08 0x00 前言 里面很多都是像laterain学习到的, 如果能考上cuit的话 自动献菊花了. 0x01 安装的问题 首先拿到一份 ...
- go语言学习入门篇 3-- 程序执行流程
先看下 Go 语言的程序结构: package main // 当前包名 import "fmt" // 导入程序中使用到的包 // 初始化函数 func init() { // ...
- 什么是原子操作？在 Java Concurrency API 中有哪些原 子类(atomic classes)？
原子操作(atomic operation)意为"不可被中断的一个或一系列操作" . 处理器使用基于对缓存加锁或总线加锁的方式来实现多处理器之间的原子操作. 在 Java 中可以通 ...
- 怎么样把ModelMap里面的数据放入Session里面？
答:可以在类上面加上@SessionAttributes注解,里面包含的字符串就是要放入session里面的key.