H5,Css小姐又作画了
用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小姐又作画了的更多相关文章
- H5 CSS 悬浮滚动条
H5 CSS 悬浮滚动条 refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
- 【黑马pink老师的H5/CSS课程】(一)基本介绍
视频P4~P6 黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动 1.网页 1.1 什么是网页 网站是网页的集合,网页是构成网站的基本元素,常用html格式文件 1. ...
- H5 CSS的格式
02-CSS的格式 标签名称{ 属性名称: 属性对应的值; ... } 2.注意点: 1.style标签必须写在head标签的开始标签和结束标签之间(也就是必须和title标签是兄弟关系) 2.sty ...
- h5 . css入门 2.CSS基础
CSS基础 学习目标 1.CSS简介 2.CSS语法 3.样式的创建 4.两种引入外部样式表的区别 5.样式表的优先级和作用域 6.CSS选择器 7.选择器的权重 8.浮动属性的简单应用 9.HTML ...
- H5 css学习
p{text-indent:2em;}段前空两格 段落排版--行间距(行高) p{line-height:1.5em;} 段落排版--中文字间距.字母间距 h1{ letter-spaci ...
- 实训H5+CSS 太极图
大概就是上面这个样子 我们准备 两个半圆,两个大圆,两个小圆,然后稍微的进行覆盖就行~ <!doctype html> <html> <head> <meta ...
- 【黑马pink老师的H5/CSS课程】(二)标签与语法
视频链接:P8~P29 黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动 参考链接: HTML 元素 1.HTML语法规范 1.1 基本语法概述 HTML 标签是由尖 ...
- “前”方有坑,绕道而行(一)-- H5+CSS
1. 关于 数字.英文 不换行问题: 情景:昨天测试 小程序,输入英文,没有换行,且 下方有横向滚动条: 解决:word-break: word-break:break-all; /*只对英文起作用 ...
- h5+css 垂直导航菜单
http://blog.csdn.net/baidu_32731497/article/details/51814427
随机推荐
- 一些免费API接口
转载自:https://www.cnblogs.com/haimishasha/p/6351403.html 天气接口 聚合数据: http://op.juhe.cn/onebox/weather/q ...
- java处理大数据量任务时的可用思路--未验证版,具体实现方法有待实践
1.Bloom filter适用范围:可以用来实现数据字典,进行数据的判重,或者集合求交集基本原理及要点:对于原理来说很简单,位数组+k个独立hash函数.将hash函数对应的值的位数组置1,查找时如 ...
- Hive 如何快速拉取大批量数据
用hive来做数仓类操作,或者大数据的运算,是没有疑问的,至少在你没有更多选择之前. 当我们要hive来做类似于大批量数据的select时,也许问题就会发生了变化. 1. 通用解决方案之分页 首先,我 ...
- RS485转以太网的概述和应用领域
如今随着物联网技术的不断发展,各种接口更新换代的速度非常的快,RS485转以太网的主要作用就是提供串口转TCP/IP网络接口的功能,它可以将RS232/485/422串口转换成TCP/IP网络接口,实 ...
- 《Clojure编程》笔记 第2章 函数式编程
目录 背景简述 第2章 函数式编程 背景简述 本人是一个自学一年Java的小菜鸡,理论上跟大多数新手的水平差不多,但我入职的新公司是要求转Clojure语言的.坊间传闻:通常情况下,最好是有一定Jav ...
- Photoshop如何安装蓝湖插件
Photoshop如何安装蓝湖插件 下载蓝湖插件 直通车:蓝湖Photoshop插件: Photoshop版本要求为cc2017以上, 下载后是一个zip格式的文件,我们需要解压. 下载的文件 解压后 ...
- Pycharm激活码亲测有效,2020Pycharm最新激活码免费分享~
Pycharm激活码,亲测有效!!! 如果下边的Pycharm激活码过期失效了的话,大家可以关注微信公众号:Python联盟,然后回复"激活码"即可获取最新Pycharm永久激活码 ...
- 基于gin的golang web开发:mysql增删改查
Go语言访问mysql数据库需要用到标准库database/sql和mysql的驱动.标准库的Api使用比较繁琐这里再引入另一个库github.com/jmoiron/sqlx. go get git ...
- HTML生成横向的PDF
HTML生成PDF请参照:https://www.cnblogs.com/yunfeiyang-88/p/10984740.html 如要生成横向的PDF:在html模板的style标签里面加入@pa ...
- Vue常用性能优化
Vue常用性能优化 Vue常用的一些优化方式,主要是在构建项目过程需要注意的方面. 编码优化 避免响应所有数据 不要将所有的数据都放到data中,data中的数据都会增加getter和setter,并 ...