用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. Api版本控制

    版本控制是计算机软件行业人士使用的术语.但进化是我们所有人都要经历的事情,它适用于这个世界上的每个对象. 在计算机软件行业,可以看到每3至4年,每台计算机软件都会附带不同的发行版/版本,以满足当前/现 ...

  2. B. Once Again... 解析(思維、DP、LIS、矩陣冪)

    Codeforce 582 B. Once Again... 解析(思維.DP.LIS.矩陣冪) 今天我們來看看CF582B 題目連結 題目 給你一個長度為\(n\)的數列\(a\),求\(a\)循環 ...

  3. F2. Same Sum Blocks (Hard) 解析(思維、前綴和、貪心)

    Codeforce 1141 F2. Same Sum Blocks (Hard) 解析(思維.前綴和.貪心) 今天我們來看看CF1141F2(Hard) 題目連結 題目 給你一個數列\(a\),要你 ...

  4. STM32入门系列-库帮助文档使用

    在前面文件夹介绍时,提到了stm32f10x_stdperiph_lib_um.chm文件,此文件是库函数使用帮助文档,可以直接打开如下图. 因为STM32库函数非常多,我们不可能把所有的外设函数都记 ...

  5. Redis常用命令(3)——Hash

    HDEL 格式:HDEL key field [field ...] 作用:删除哈希表中的一个或多个域. 返回值:删除的域的个数. HEXISTS 格式:HEXISTS key field 作用:判断 ...

  6. 学了元件作用域，我终于对JMeter开窍了

    引子 先看一下这个例子,测试计划"进入考场"下面有一个线程组,线程组下面有 3 个 HTTP 请求,分别是学生登录.考场 token和进入房间: 它们的处理逻辑是: 学生登录后,在 ...

  7. Unknown CMake command

    Unknown CMake command "add_clang_library".等 在官网上照着打 发现上面错误 结果是版本问题 选好版本和选项catkin还是rosbuild

  8. python_登陆验证文件上传下载_socket

    client.py import os import sys import json import struct import socket # 下载--接收文件 def download(sk): ...

  9. MySQL视图详细介绍

    前言: 在MySQL中,视图可能是我们最常用的数据库对象之一了.那么你知道视图和表的区别吗?你知道创建及使用视图要注意哪些点吗?可能很多人对视图只是一知半解,想详细了解视图的同学看过来哟,本篇文章会详 ...

  10. centos6 安装 terminator

    yum install terminator 报错: No package terminator available. 解决: yum install epel-release 报错 Cannot r ...