博主信息
博文 16
粉丝 0
评论 0
访问量 16441
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
简单样式封装
琥珀的博客
原创
835人浏览过

实例

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="../static/js/highlight/styles/default.css">
	<title></title>
	<style>
		.lyh-w100{
			width:100px;			
		}
		.lyh-w200{
			width:200px;			
		}
		.lyh-h100{
			height:100px;
		}
		.lyh-h200{
			height:200px;
		}
		.lyh-bgc-red{
			background-color:red;
		}
		.lyh-bgc-green{
			background-color:green;
		}
		.lyh-border-r30{
			border-radius: 30%;
				}
		.lyh-border-r50{
			border-radius: 50%;
		}
		
	</style>
</head>
<body>
		<pre>
		<code class="html">
                &lt;!DOCTYPE html&gt;
                &lt;html&gt;
                &lt;head&gt;
                &lt;meta charset="UTF-8"&gt;
                &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
                &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
                &lt;title></title&gt;
                &lt;style>
                .lyh-w100{
                width:100px;
                }
                .lyh-w200{
                width:200px;
                }
                .lyh-h100{
                height:100px;
                }
                .lyh-h200{
                height:200px;
                }
                .lyh-bgc-red{
                background-color:red;
                }
                .lyh-bgc-green{
                background-color:green;
                }
                .lyh-border-r30{
                border-radius: 30%;
                }
                .lyh-border-r50{
                border-radius: 50%;
                }
                
                &lt;/style&gt;
                &lt;/head&gt;
                &lt;body&gt;
                    &lt;button class="lyh-w200 lyh-h50 lyh-bgc-green"&gt;
                通过
                &lt;/button&gt;
                &lt;button class="lyh-w100 lyh-h50 lyh-bgc-red"&gt;
                不通过
                &lt;/button&gt;
                &lt;/body&gt;
                &lt;/html&gt;
		</code>
		</pre>
	    <button class="lyh-w200 lyh-h50 lyh-bgc-green">通过</button>
		<button class="lyh-w100 lyh-h50 lyh-bgc-red">不通过</button>	
			<!--引入代码高亮插件-->
			<script src="../static/js/highlight/highlight.pack.js"></script>
			<!--初始化插件-->
			<script>hljs.initHighlightingOnLoad();</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

运行结果:

1111.jpg

批改状态:合格

老师批语:现在还在补前端的作业, 辛苦了, 尽快做好当下
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学