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代码对样式定义的重复,提高后期样式代码的可维护性,并增 ...
随机推荐
- U3D破解方法
文件我的云盘里面有,然后操作如下:Win版破解方法:1.安装Unity后(联网破解不成功就断网试试),运行破解补丁.2.点击Browse选择Unity所在路径 例如我的Unity安装路径 F:\Sof ...
- centos7下mysql安装
centos7只包含了mariadb的安装源 我们需要到官方下载社区版:https://dev.mysql.com/downloads/ 下载安装包并上传到服务器 安装出现错误 这个是系统自带的Mar ...
- 《前端运维》一、Linux基础--06Shell流程控制
这章我们来学习下流程控制,简单来说就是逻辑判断和循环的写法.并不复杂,我们来简单地看下. 1.if语句 shell的if语句有两种写法,一种是shell脚本式的,一种是命令式的. if conditi ...
- RabbitMQ Go客户端教程1——HelloWorld
本文翻译自RabbitMQ官网的Go语言客户端系列教程,本文首发于我的个人博客:liwenzhou.com,共分为六篇,本文是第一篇--HelloWorld. 这些教程涵盖了使用RabbitMQ创建消 ...
- [SHA2017](web) writeup
[SHA2017](web) writeup Bon Appétit (100) 打开页面查看源代码,发现如下 自然而然想到php伪协议,有个坑,看不了index.php,只能看 .htaccess ...
- 面试官：Zookeeper是什么，它有什么特性与使用场景？
哈喽!大家好,我是小奇,一位不靠谱的程序员 小奇打算以轻松幽默的对话方式来分享一些技术,如果你觉得通过小奇的文章学到了东西,那就给小奇一个赞吧 文章持续更新 一.前言 作为一名Java程序员,Zook ...
- vs2017连接sqlsever数据库
vs2017连接mysql数据库操作步骤 怎样使用vs2017连接数据库 [C++]VS2015/VS2017连接Mysql数据库教程
- 什么是GUI？
图形用户界面(Graphical User Interface,简称 GUI,又称图形用户接口)是指采用图形方式显示的计算机操作用户界面.图形用户界面是一种人与计算机通信的界面显示格式,允许用户使用鼠 ...
- python 迭代器和生成器基础知识
1.迭代器遵循迭代器协议:必须拥有__iter__方法和__next__方法--字符串.列表.元组.字典.集合都是可迭代的--可以被for循环的都是可迭代的 2. 迭代器有的好处是可以节省内存 3.生 ...
- 什么是基于 Java 的 Spring 注解配置?
基于 Java 的配置,允许你在少量的 Java 注解的帮助下,进行你的大部分 Spring 配置而非通过 XML 文件. 以@Configuration 注解为例,它用来标记类可以当做一个 bean ...