利用CSS布局做一个简单的荣誉证书

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style type="text/css">

body{

background-image: url(../pic/125.jpg);

background-repeat: no-repeat;

background-size: 700px 500px;

}

.f1{

font-family: sans-serif;

font-size: 1.5em;

}

.f2{

font-family: serif;

font-size: 1.7em;

}

.f3{

font-family: serif;

font-size: 1.4em;

}

.div1{

padding-left: 80px;

padding-top: 160px;

}

.div2{

padding-left: 130px;

}

.div3{

padding-left: 80px;

}

.div4{

padding-left: 380px;

padding-top: 40px;

}

.div5{

padding-left: 400px;

}

</style>

<title></title>

</head>

<body>

<p class="div1">

<b class="f1">王登高</b>

<b class="f2">同学:</b>

</p>

<p class="div2">

<b class="f3">

学习不认真,整天嘻嘻哈哈,无所事情。逗比指数

</p>

<p class="div3">

在班级中排列第一,特发此证书,以资鼓励。

</p>

<p class="div4">

<b>2015年8月19日</b>

</p>

<p class="div5">

逗比学院

</p>

</body>

</html>

效果图:

时间: 2024-11-01 13:57:40

利用CSS布局做一个简单的荣誉证书的相关文章

CSS布局中一个简单的应用BFC的例子

什么是BFC BFC(Block Formatting Context),简单讲,它是提供了一个独立布局的环境,每个BFC都遵守同一套布局规则.例如,在同一个BFC内,盒子会一个挨着一个的排,相邻盒子的间距是由margin决定且垂直方向的margin会重叠.而float和clear float也只对同一个BFC内的元素有效. 什么情况产生BFC W3C标准中这样描述:Floats, absolutely positioned elements, block containers (such as

利用python+tkinter做一个简单的智能电视遥控器

要通过python实现遥控器功能分两步: 第一步:开发图形化界面 第二步:使PC端给电视发送相应指令 现在就开始第一步操作实现遥控器功能,python2输入以下代码 注意:python3需要将代码中的from Tkinter import * 替换为from tkinter import * 将from SimpleDialog import * 替换为import tkinter.simpledialog #coding=utf-8from Tkinter import * from Simp

python小练习,利用dict,做一个简单的登录。

'''利用字典实现登录'''users=[{'username':'jerry','pwd':'123456'},{'username':'tom','pwd':'1'}] def login(username,pwd): print(username,pwd) if(username==''or pwd==''): return 0 else: isbool=True for dict1 in users: if (dict1['username']==username and dict1['

利用文件打开方式with open(&#39;文件名&#39;,方式) as 变量名做一个简单的复制(排除大文件bug)

1 #!usr/bin/env python 2 #-*- coding=utf-8 -*- 3 4 with open('b.py','r') as obj1, open('c.py','w') as obj2: 5 for line in obj1.read(): 6 obj2.write(line) 将a.py的数据一行一行的进行复制 节省的了内存 另外 这种打开方式 免除了 之后需要的f.close() 对代码量上有细微的差距...(我自己想的...) 注意:第二个open不接with

web前端课程技术内容之如何做一个简单的手机端页面的翻页

[如何做一个简单的手机端页面的翻页] 第一步:创建移动端页面内 HTML + CSS [注]可用弹性布局 但需要注意的是 外层盒子的定位 第二步: 思考问题 要实现怎样的效果? 1. 手指滑动时触发事件[左右]两个方向 2.点击footer部分的下标实现切换效果 3.点击footer部分的下标实现下标颜色变化 第三步:编写JS代码 添加监听事件 document.addEventListener('DOMContentLoaded',function(){ 创建一个数组用于调用数组属性值 或者

使用React并做一个简单的to-do-list

1. 前言 说到React,我从一年之前就开始试着了解并且看了相关的入门教程,而且还买过一本<React:引领未来的用户界面开发框架 >拜读.React的轻量组件化的思想及其visual-dom的这种技术创新,也算是早就有了初步了解.一来没有学的太深入,二来后来在工作中和业余项目中都没有用到,因此慢慢的就更加生疏了. 近期,因为我想把自己的开源项目wangEditor能放在React.angular和vuejs中使用.先从react开始,顺手自己也重试一下React的基础知识,顺便再做一个小d

如何做一个简单的Chrome Extension用于网页截屏

Chrome extension是一个文件包,里面包含了一个配置文件manifest.json,以及一些用于Web开发的文件和资源 (HTML, JavaScript, CSS,等). Chrome Extension开发指南 Chrome Extension Overview Chrome Extension Debugging Chrome Extension Samples 如何实现网页截屏功能 看一下manifest文件: {       "name": "Scree

.Net Core 3.0后台使用httpclient请求网络网页和图片_使用Core3.0做一个简单的代理服务器

原文:.Net Core 3.0后台使用httpclient请求网络网页和图片_使用Core3.0做一个简单的代理服务器 目标:使用.net core最新的3.0版本,借助httpclient和本机的host域名代理,实现网络请求转发和内容获取,最终显示到目标客户端! 背景:本人在core领域是个新手,对core的使用不多,因此在实现的过程中遇到了很多坑,在这边博客中,逐一介绍下.下面进入正文 正文: 1-启用httpClient注入: 参考文档:https://docs.microsoft.c

使用Multiplayer Networking做一个简单的多人游戏例子-2/3(Unity3D开发之二十六)

猴子原创,欢迎转载.转载请注明: 转载自Cocos2Der-CSDN,谢谢! 原文地址: http://blog.csdn.net/cocos2der/article/details/51007512 使用Multiplayer Networking做一个简单的多人游戏例子-1/3 使用Multiplayer Networking做一个简单的多人游戏例子-2/3 使用Multiplayer Networking做一个简单的多人游戏例子-3/3 7. 在网络中控制Player移动 上一篇中,玩家操