• H5,Css小姐又作画了


                 用H5和CSS3做出自己名字缩写。
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>name:slx</title>
    		<style>
    			/*40 60 40*/
    			#name{margin: auto;  600px; height:300px; background: red; position: relative;}
    
    			.s{position: relative; left: 150px;  40px; height: 60px; top: 120px;}
    			.s1{ 40px; height:5px;background: yellow;}
    			.s2{ 40px; height:5px;background: yellow; margin-top: 20px;}
    			.s3{ 40px; height:5px;background: yellow; margin-top: 20px;}
    			.s4{ 5px; height:27px;background: yellow; position: absolute; bottom: 33px;}
    			.s5{ 5px; height:27px;background: yellow; position: absolute; bottom: 6px; left: 35px;}
    			
    			.l{position: relative; left: 230px;  40px; height: 60px; top: 60px;}
    			.l1{ 5px; height:55px;background: yellow; position: absolute;}
    			.l2{ 40px; height:5px;background: yellow; position: absolute; top: 50px;}
    			
    			.x{position: relative; left: 310px;  40px; height: 60px; }
    			.x1{ 6px; height:55px;background: yellow; position: absolute; transform: skewX(35deg); left: 17px;}
    			.x2{ 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>
    

      

  • 相关阅读:
    SQL Server 2005 出现“此数据库没有有效所有者”错误的解决方法
    使用swfupload出现SecurityError Error #2156问题
    读取Excel表
    POJ 1953 (DP)
    POJ 1050 (DP)
    POJ 1276 (DP)
    POJ 1579 (DP)
    HDOJ 4223 (DP)
    POJ 1080 (DP)
    POJ 1458 (DP)
  • 原文地址:https://www.cnblogs.com/21doctor-sun/p/13653854.html
Copyright © 2020-2023  润新知