常用的html元素样式，一个简单的html样例

最新推荐文章于 2023-10-27 15:19:41 发布

志男

最新推荐文章于 2023-10-27 15:19:41 发布

阅读量561

点赞数

分类专栏：前端文章标签： html css

本文链接：https://blog.csdn.net/qq_39612654/article/details/106619631

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

html 的简单demo
常用的元素样式
单独改变背景颜色的透明度
鼠标点击的javascript的样式
在这里插入图片描述背景图片透明度的改变

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>html demo</title>
	<style type="text/css">
		.text{
			color:#363636;
			line-height: 1.5em;
			text-indent: 2em;
		}
		div::before{
			content:"";
			width: 400px;height: 250px;
			/*border:1px solid red;*/
			padding: 15px;
			/*background-color: yellow; */
			/*div里整体都会被透明*/
			/*background-color: rgba(0,0,0,0.1)*/
			/*背景颜色的透明度*/
			 background-image: url(3.png);
			 background-size: 430px 280px;
			 background-repeat: no-repeat;
			 border-radius: 15px;
			 opacity: 0.4;
			 z-index:-1;
			 position:absolute;
			 box-shadow:6px 6px 6px #888;
		}
		div{
			position: fixed;
			width: 430px;height: 280px;
			border-radius: 15px;
			box-shadow:6px 6px 6px #888;
		}
	</style>
</head>
<body>
	<div>
		<h3 style="color:brown;text-align: center;font-size: 20px;"onmouseover="change(this)" onmouseout="old(this)">陌陌，发现真实的距离</h3>
		<p class="text">陌陌的文案，-0.5厘米的距离</p>
		<p class="text">第二天他们又分手了</p>
		<p class="text">第二天他们又分手了</p>
		<p class="text">第二天他们又分手了</p>
		<p class="text">第二天他们又分手了~~~</p>
	</div>
	<script type="text/javascript">
		function change(element){
			element.style.fontSize = '20.1px'
			element.style.color = 'green'
		}
		function old(element){
			element.style.fontSize = '20px'
			element.style.color = 'brown'
		}
		
	</script>
	
</body>
</html>

志男

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
常用的html元素样式，一个简单的html样例

html 的简单demo常用的元素样式单独改变背景颜色的透明度鼠标点击的javascript的样式背景图片透明度的改变<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>html demo</title> <style type="text/css"> .text{ color:#363636; line-
复制链接

扫一扫