用H5和CSS3做出自己名字缩写。
<html>

	<head>

		<meta charset="utf-8">

		<title>name:slx</title>

		<style>

			/*40 60 40*/

			#name{margin: auto; width: 600px; height:300px; background: red; position: relative;}

			.s{position: relative; left: 150px; width: 40px; height: 60px; top: 120px;}

			.s1{width: 40px; height:5px;background: yellow;}

			.s2{width: 40px; height:5px;background: yellow; margin-top: 20px;}

			.s3{width: 40px; height:5px;background: yellow; margin-top: 20px;}

			.s4{width: 5px; height:27px;background: yellow; position: absolute; bottom: 33px;}

			.s5{width: 5px; height:27px;background: yellow; position: absolute; bottom: 6px; left: 35px;}

			.l{position: relative; left: 230px; width: 40px; height: 60px; top: 60px;}

			.l1{width: 5px; height:55px;background: yellow; position: absolute;}

			.l2{width: 40px; height:5px;background: yellow; position: absolute; top: 50px;}

			.x{position: relative; left: 310px; width: 40px; height: 60px; }

			.x1{width: 6px; height:55px;background: yellow; position: absolute; transform: skewX(35deg); left: 17px;}

			.x2{width: 6px; height:55px;background: yellow; position: absolute; transform: skewX(-35deg);  left: 17px;}

			.truename{position: relative;margin: auto;top: 97px; text-align: right;}

		</style>

	</head>

	<body>

		<div id="name">

			<div class="s">

				<div class="s1"></div>

				<div class="s2"></div>

				<div class="s3"></div>

				<div class="s4"></div>

				<div class="s5"></div>

			</div>

			<div class="l">

				<div class="l1"></div>

				<div class="l2"></div>

			</div>

			<div class="x">

				<div class="x1"></div>

				<div class="x2"></div>

			</div>

			<div class="truename">作者：孙露秀</div>

		</div>

	</body>

</html>

　　

最新文章

  1. jquery中ajax的简单使用
  2. java项目中读取properties文件
  3. Sql Practice 2
  4. A*算法详解 BZOJ 1085骑士精神
  5. Unity插件研究院之ResourceChecker
  6. CentOS命令登录MySQL时，报错ERROR 1045 (28000):
  7. PHP中的超级全局变量
  8. 哈希（1） hash的基本知识回顾
  9. Spring面试笔记
  10. 用JAVA给JSON进行排版
  11. 促销R语言应用性能
  12. mui 访问手机自带是否连接网络
  13. [bzoj4240] 有趣的家庭菜园
  14. Java实现Zip压缩包解压
  15. POJ.3321 Apple Tree ( DFS序 线段树 单点更新 区间求和)
  16. python之函数用法__str__()
  17. 【laravel5.4】重定向带参数
  18. hashSet的底层是数组，其查询效率非常高
  19. Many-to-many relationships in EF Core 2.0 – Part 1: The basics
  20. jstack 命令学习笔记

热门文章

  1. 论文解读《Plug-and-Play Priors for Model Based Reconstruction》
  2. 当eclipse调用tomcat的时候发生了什么？
  3. jq animate 的第二写法
  4. D. Rescue Nibel! 解析(思維、組合、離散化、差分)
  5. B. Rock and Lever 解析(思維)
  6. Mybatis---00Mybatis入门
  7. ORACLE 数据泵 expdp/impdp
  8. 关于机器翻译评价指标BLEU(bilingual evaluation understudy)的直觉以及个人理解
  9. 网络爬虫第三次作业——多线程、scrapy框架
  10. python实现有趣的数学逻辑程序