1.              用H5和CSS3做出自己名字缩写。
  1. <html>
  2. 	<head>
  3. 		<meta charset="utf-8">
  4. 		<title>name:slx</title>
  5. 		<style>
  6. 			/*40 60 40*/
  7. 			#name{margin: auto; width: 600px; height:300px; background: red; position: relative;}
  8.  
  9. 			.s{position: relative; left: 150px; width: 40px; height: 60px; top: 120px;}
  10. 			.s1{width: 40px; height:5px;background: yellow;}
  11. 			.s2{width: 40px; height:5px;background: yellow; margin-top: 20px;}
  12. 			.s3{width: 40px; height:5px;background: yellow; margin-top: 20px;}
  13. 			.s4{width: 5px; height:27px;background: yellow; position: absolute; bottom: 33px;}
  14. 			.s5{width: 5px; height:27px;background: yellow; position: absolute; bottom: 6px; left: 35px;}
  15.  
  16. 			.l{position: relative; left: 230px; width: 40px; height: 60px; top: 60px;}
  17. 			.l1{width: 5px; height:55px;background: yellow; position: absolute;}
  18. 			.l2{width: 40px; height:5px;background: yellow; position: absolute; top: 50px;}
  19.  
  20. 			.x{position: relative; left: 310px; width: 40px; height: 60px; }
  21. 			.x1{width: 6px; height:55px;background: yellow; position: absolute; transform: skewX(35deg); left: 17px;}
  22. 			.x2{width: 6px; height:55px;background: yellow; position: absolute; transform: skewX(-35deg);  left: 17px;}
  23.  
  24. 			.truename{position: relative;margin: auto;top: 97px; text-align: right;}
  25. 		</style>
  26. 	</head>
  27. 	<body>
  28. 		<div id="name">
  29. 			<div class="s">
  30. 				<div class="s1"></div>
  31. 				<div class="s2"></div>
  32. 				<div class="s3"></div>
  33. 				<div class="s4"></div>
  34. 				<div class="s5"></div>
  35. 			</div>
  36.  
  37. 			<div class="l">
  38. 				<div class="l1"></div>
  39. 				<div class="l2"></div>
  40. 			</div>
  41.  
  42. 			<div class="x">
  43. 				<div class="x1"></div>
  44. 				<div class="x2"></div>
  45. 			</div>
  46.  
  47. 			<div class="truename">作者：孙露秀</div>
  48. 		</div>
  49. 	</body>
  50. </html>

　　

H5,Css小姐又作画了的更多相关文章

  1. H5 CSS 悬浮滚动条

    H5 CSS 悬浮滚动条 refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!

  2. 【黑马pink老师的H5/CSS课程】（一）基本介绍

    视频P4~P6 黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动 1.网页 1.1 什么是网页 网站是网页的集合,网页是构成网站的基本元素,常用html格式文件 1. ...

  3. H5 CSS的格式

    02-CSS的格式 标签名称{ 属性名称: 属性对应的值; ... } 2.注意点: 1.style标签必须写在head标签的开始标签和结束标签之间(也就是必须和title标签是兄弟关系) 2.sty ...

  4. h5 . css入门 2.CSS基础

    CSS基础 学习目标 1.CSS简介 2.CSS语法 3.样式的创建 4.两种引入外部样式表的区别 5.样式表的优先级和作用域 6.CSS选择器 7.选择器的权重 8.浮动属性的简单应用 9.HTML ...

  5. H5 css学习

    p{text-indent:2em;}段前空两格   段落排版--行间距(行高) p{line-height:1.5em;} 段落排版--中文字间距.字母间距  h1{    letter-spaci ...

  6. 实训H5+CSS 太极图

    大概就是上面这个样子 我们准备 两个半圆,两个大圆,两个小圆,然后稍微的进行覆盖就行~ <!doctype html> <html> <head> <meta ...

  7. 【黑马pink老师的H5/CSS课程】（二）标签与语法

    视频链接:P8~P29 黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动 参考链接: HTML 元素 1.HTML语法规范 1.1 基本语法概述 HTML 标签是由尖 ...

  8. “前”方有坑，绕道而行（一）-- H5+CSS

    1. 关于  数字.英文 不换行问题: 情景:昨天测试 小程序,输入英文,没有换行,且 下方有横向滚动条: 解决:word-break: word-break:break-all; /*只对英文起作用 ...

  9. h5+css 垂直导航菜单

    http://blog.csdn.net/baidu_32731497/article/details/51814427

随机推荐

  1. Graph-GCN

    前言 在大型图中,节点的低维向量embedding被证明了作为各种各样的预测和图分析任务的特征输入是非常有用的.顶点embedding最基本的基本思想是使用降维技术从高维信息中提炼一个顶点的邻居信息, ...

  2. 手把手教你使用 Prometheus 监控 MySQL 与 MariaDB.md

    概述 MySQL 是常用的关系型数据库,MariaDB 作为 MySQL 的分支版本,兼容 MySQL 协议,也越来越流行.在 Kubernetes 环境中如何使用 Prometheus 来对它们进行 ...

  3. K8S的Kafka监控(Prometheus+Grafana)

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  4. 《Clojure编程》笔记 第2章 函数式编程

    目录 背景简述 第2章 函数式编程 背景简述 本人是一个自学一年Java的小菜鸡,理论上跟大多数新手的水平差不多,但我入职的新公司是要求转Clojure语言的.坊间传闻:通常情况下,最好是有一定Jav ...

  5. JS中this的指向性问题

    一.this用于访问当前方法所属的对象,谁调用的方法,方法就属于谁 // 普通函数 let obj = { a : 12, fn() { console.log(this == obj); // tr ...

  6. Docker（10）- docker create 命令详解

    如果你还想从头学起 Docker,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1870863.html 作用 创建一个新的容器但不启动它 ...

  7. 1.深入Istio：Sidecar自动注入如何实现的？

    转载请声明出处哦~,本篇文章发布于luozhiyun的博客:https://www.luozhiyun.com 本文使用的Istio源码是 release 1.5. 这篇文章打算讲一下sidecar, ...

  8. System.Net邮件发送功能踩过的坑

    System.Net邮件发送功能踩过的坑 目录 System.Net邮件发送功能踩过的坑 1.EazyEmail邮件发送类库 2.邮件发送授权码与邮件密码 3.通过邮件密码来发送邮件 4.Wiresh ...

  9. SpringBoot魔法堂：说说带智能提示的spring-boot-starter

    前言 前几个月和隔壁组的老王闲聊,他说项目的供应商离职率居高不下,最近还有开发刚接手ESB订阅发布接口才两周就提出离职,而他能做的就只有苦笑和默默地接过这个烂摊子了. 而然幸福的家庭总是相似的,而不幸 ...

  10. 鸿蒙系统应用开发之JS实现一个简单的List

    在之前的文章鸿蒙应用开发之怎么更好的远程连接手表模拟器做调试里我运行了一个穿戴设备的应用,利用JS UI实现了一个最简单的HelloWorld. 今天我打算在智慧屏设备上利用豆瓣音乐的接口数据实现一个 ...