用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. Redis学习笔记（二）——Keys通用操作

    1.查询所有key: keys * 2.*通用符(代表0或多),查询所有以n(*)开头的key: keys n* 3.?通用符(代表1个字符): key n? 4.del删除key [key1 key ...

  2. Redis---03Redis事务

    一.Redis事务 1.简述: Redis事务是一个单独的隔离操作:事务中的所有命令都会序列化.按顺序地执行.事务在执行的过程中,不会被其他客户端发送来的命令请求所打断 2.作用: 主要作用就是串联多 ...

  3. leo101

    tags: 贪心 date: 2019-4-4 jag2017autumnJ Farm Village 题面 题目链接 翻译 数轴上有 n 个村庄,每个村庄可以生产两个单位的粮食.在每个村庄生产一单位 ...

  4. STM32入门系列-开发工具keil5安装

    主要介绍如下三部分内容: keil5软件获取 keil5安装 安装STM32芯片包 软件获取 可以通过搜索引擎搜索关键字"KEIL5下载",找到其官方网站www.keil.com. ...

  5. 基于flask的python注册到eureka

    Eureka架构中的三个核心角色: 服务注册中心 Eureka的服务端应用,提供服务注册和发现功能,就是刚刚我们建立的eureka-demo 服务提供者 提供服务的应用,可以是SpringBoot应用 ...

  6. PHP实现页面静态化的简单方法分享

    为什么要页面静态化? 1.动态文件执行过程:语法分析-编译-运行 2.静态文件,不需要编译,减少了服务器脚本运行的时间,降低了服务器的响应时间,直接运行,响应速度快:如果页面中一些内容不经常改动,动态 ...

  7. pandas神器操作excel表格大全（数据分析数据预处理）

    使用pandas库操作excel,csv表格操作大全 关注公众号"轻松学编程"了解更多,文末有公众号二维码,可以扫码关注哦. 前言 准备三份csv表格做演示: 成绩表.csv su ...

  8. leetcode110:combination-sum-ii

    题目描述 给出一组候选数C和一个目标数T,找出候选数中起来和等于T的所有组合. C中的每个数字在一个组合中只能使用一次. 注意: 题目中所有的数字(包括目标数T)都是正整数 组合中的数字 (a 1,  ...

  9. 这些C++基础知识的基础知识你都学会了吗？

    一.C++基础知识 新的数据类型 C语言中的数据类型  C++中新的数据类型 思考:新的数据类型有什么好处?请看下面的代码:  可以见得:新的类型使整个程序更加简洁,程序变得易读易懂!这个就是bool ...

  10. ohmyzsh的安装过程中失败拒绝连接问题的解决

    1.打开官网https://ohmyz.sh/ 在官网能看到下面的界面 有这两种自动安装的方式 个人本次选择的是: wget https://raw.github.com/ohmyzsh/ohmyzs ...