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>

　　

posted @ 2020-09-11 20:06  卿家尘归尘  阅读(77)  评论(0)    收藏  举报