用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>

　　

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. WTM系列教学视频全免费

    WTM框架问世以来,受到越来越多开发者的喜爱,为了回报大家的厚爱,原本在CSDN上的教学视频已经全部免费,900多分钟的视频,而且还会继续更新. 为了方便大家观看,在B站上也同步更新,地址如下: CS ...

  2. 【总结】swagger

    1.swagger概念及配置 1.1基本概念 1.是一款让你更好的书写API文档的规范且完整框架. 2.提供描述.生产.消费和可视化RESTful Web Service. 3.是由庞大工具集合支撑的 ...

  3. python框架Django简介与安装

    Django简介 关注公众号"轻松学编程"了解更多. 发布于2005年,最负盛名且成熟的Python网络框架 最初用来制作在线新闻的Web站点 开源Web框架,遵守BSD协议 BS ...

  4. Amdocs收购OPENET：关于5G应用落地的思考

    今年8月,全球通讯和媒体领导者之一Amdocs收购了Openet.在VoltDB,听到这个消息,我们感到非常高兴和自豪!在过去的7年里,我们一直是Openet解决方案的基础数据平台. 尽管许多供应商仍 ...

  5. 解决pl/sql developer中数据库插入数据乱码问题

    最近学习SSM项目开发,用到oracle数据库, 使用管理软件PL/sql developer往数据库表中插入数据时记录乱码.  结果如下: 可以看到中文数据都乱码成了???????问号, 看了网上各 ...

  6. （三）URI、URL和URN/GET与POST的区别

    (一)URI.URL.URN HTTP使用统一资源标识符(Uniform Resource Identifiers,URI)来传输数据和建立连接. URL是一种特殊类型的URI,包含了用于查找某个资源 ...

  7. Azure DevOps 扩展之 Hub 插件的菜单权限控制配置

    这是 Hub 插件的描述配置代码片段: { "contributions": [ { "id": "feature-hidden-fields-man ...

  8. mns: Money Never Sleeps! 自己开发的一款 IDEA 插件介绍.

    一边敲代码, 一边关注股票/基金行情, 还不怕同事盯到自己的屏幕! 对于一个关注股市跟基金的研发人员来说, 莫过于一天到晚写代码, 而不能及时的查看股市行情跟基金走势了吧. 写代码的时候比较容易忘记看 ...

  9. SpringMVC 直接返回中文字符串时，出现乱码(?)的问题

    在springmvc.xml中加入下面配置得以解决. <mvc:annotation-driven> <mvc:message-converters> <bean cla ...

  10. 最简单的基于FFmpeg的直播系统开发移动端例子：IOS 视频解码器

    本文记录IOS平台下基于FFmpeg的视频解码器.该示例C语言的源代码来自于<最简单的基于FFMPEG+SDL的视频播放器>.相关的概念就不再重复记录了. 源代码 项目的目录结构如图所示. ...