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代码对样式定义的重复,提高后期样式代码的可维护性,并增 ...
随机推荐
- LGP3307题解
题意有点儿神秘,而且出题人可能有点大病( 项链由 \(n\) 颗珠子构成,相邻的珠子不能相同. 每颗珠子上有 \(3\) 个数字,这 \(3\) 个数之间没有顺序,且 \(\gcd\) 为 \(1\) ...
- lgP6232题解
评蓝过分了吧,这题最多黄( 首先我们从挂钩的最上层向下走,假设这个挂杆的左边和右边一共有 \(k\) 件衣服. 若 \(k\) 是 \(2\) 的倍数,那么我们只能向左走(左边和右边的衣服一样多).反 ...
- Net之线程池的优点
使用线程池的好处: 1.减少在创建和销毁线程上所花的时间以及系统资源的开销 2.如不使用线程池,有可能造成系统创建大量线程而导致消耗完系统内存以及"过度切换".
- 八、Java面向对象编程
Java面向对象 初识面向对象 面向过程 & 面向对象 面向过程思想 步骤清晰简单,第一步做什么,第二部做什么... 面对过程适合处理一些较为简单的问题 面向对象思想 物以类聚,分类的思维模式 ...
- 开源版-阿里云人脸搜索M：N，人脸比对1：1
一.人脸搜索概要 本项目是阿里云视觉智能开放平台的人脸1:N的开源替代,项目中使用的模型均为开源模型,项目支持milvus和proxima向量存储库,并具有较高的自定义能力. 项目使用纯Java开发, ...
- 部署YUM源仓库与NFS共享存储服务
镜像下载.域名解析.时间同步请点击 阿里巴巴开源镜像站 一.YUM YUM (Yellow dog Updater Modified) ●基于RPM包构建的软件更新机制 ●可以自动解决依赖关系 ●所有 ...
- 如何运行MATLAB和C++混合编程
在GitHub下载了一个大佬的滤波器程序,包含MATLAB和C++,刚开始直接运行,发现提示如下: 然后,第一步:点击截图访问后面的链接,跳转到如下截图: 第二步:点击上面截图的左下角,R2015b版 ...
- 通过R Studio用Markdown写Beamer
技术背景 在写一些学术演示文档时,经常有可能用到Beamer--一种Latex的学术风PPT模板,比如下图所示的这种: 这种风格的演示文档有几个明显的优点:简约.严肃.可以用Latex敲公式和推导.可 ...
- Spring-boot-菜鸟-properties配置
如果测试结果出现中文乱码: 结果": Person{lastName='张胜男', age=11, boss=false, birth=Wed Nov 11 00:00:00 CST 202 ...
- memcached 的多线程是什么？如何使用它们？
线程就是定律(threads rule)!在 Steven Grimm 和 Facebook 的努力下, memcached 1.2 及更高版本拥有了多线程模式.多线程模式允许 memcached 能 ...