HTML+CSS+JavaScript代码实现功能

Alice_小哪吒

已于 2024-01-04 17:44:54 修改

阅读量452

点赞数 6

分类专栏： HTML+CSS+JS学习笔记文章标签： html css javascript 前端

于 2023-12-27 14:13:21 首次发布

本文链接：https://blog.csdn.net/weixin_57303037/article/details/135243560

版权

HTML+CSS+JS学习笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言

本文主要想介绍下通过HTML+CSS+JavaScript代码实现各种功能。小白可以通过本文对前端三宝有个简单的了解~

一、实现图片淡入淡出效果

1.设置图片样式

2.引入CSS样式

可采用外部样式表、内部样式表、内联样式三种方式插入

外部样式表：当样式需要应用于很多页面时，优先选择外部样式表。代码如下：

<head>

<link rel="stylesheet" type="text/css" href="styles/css1.css">

</head>

浏览器会从文件styles/css1.css中读到样式声明。

内部样式表：当单个文档需要特殊的样式时，应使用内部样式表。代码如下：

<head>
    <style>
        h1 {
            color:red;
            padding:10px 20px;
        }
    </style>
</head>

内联样式：需要将表现和内容混用，请慎用！代码如下：

<p style="color:blue;margin:10px 20px">这是一个段落。</p>

3.设置图片

保存在images/image1.jpg路径下

4.编写HTML代码

主要通过内部样式表方式编写。代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>2024新年快乐</title>
		<style>
            h1 {
				text-align:center;
				color:#B8860B;
				font-size:50px;
				margin:10px;
				padding:10px;
			}
			
			img {
				display:block;
				margin:10px auto;
				height:700px;
				width:1200px;
			}

            .fade-in-out {
				opacity: 0;
				animation: fade-in-out-animation 3s ease-in-out infinite;
			}
			
			@keyframes fade-in-out-animation {
				0% {
					opacity:0;
				}
				50% {
					opacity:1;
				}
				100% {
					opacity:0;
				}
			}
		</style>
	</head>

    <body>
        <h1>新年快乐</h1>
		<h1>龙年大吉</h1>
		<br>
		<img class="fade-in-out" src="images/image1.jpg" alt="Image">
    </body>
</html>

5.图片淡入淡出效果图

HTML实现图片淡入淡出

二、实现桌面图标排序

作为HTML前端初学者，我们会在很多桌面版界面发现存在各种桌面快捷版图标进入相应的界面，每个桌面图标都是按顺序排列在桌面左侧，我们如何通过HTML源码实在此功能呢？

下面直接上源码！！大家记得码住哦~

1. 测试图标排序HTML源码

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<title>测试图标排序</title>
		<style>
		
		body{
			background-repeat:repeat-x;
			background-image:url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201701%2F18%2F20170118224430_XyiTn.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1705807634&t=07a195a97d9708b432e5c27e5c6ab1ac');
		}
		
		img{
			width:100%;
			height:100%;
		}
		
		dl{
			
			margin:10px 20px;
			padding:20px;
		}
		
		.main{
			width:100px;
			height:100px;
			margin:10px 20px 30px;
			border:solid 1px green;
			position:relative;
			text-align:center;
		}
		
		.main context{
			position:absolute;
		}
		
		</style>
	</head>
	<body>
	<dl>
		<dt><div class="main">
			<img src="images/test.png" height="20px" width="20px"><br>
			<div class="context"><strong>测试图标1</strong></div>
		</div>
		</dt>
		<br>
		
		<dt><div class="main">
			<img src="images/test1.png" height="20px" width="20px"><br>
			<div class="context"><strong>测试图标2</strong></div>
		</div>
		</dt>
		<br>
		
		<dt><div class="main">
			<img src="images/test2.png" height="20px" width="20px"><br>
			<div class="context"><strong>测试图标3</strong></div>
		</div>
		</dt>
		<br>
		
		<dt><div class="main">
			<img src="images/2024.jpg" height="20px" width="20px"><br>
			<div class="context"><strong>测试图标4</strong></div>
		</div>
		</dt>
		<br>	
	</dl>
	
	</body>
</html>

2.测试图标排序效果图

说明：上文中的HTML源码为了使图标更为清晰，更为直观，设置的尺寸是比较大的，大家可通过调整CSS样式改变哦！另外也可以加入桌面自适应的功能~

三、实现下拉菜单功能

1.下拉菜单HTML源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS学习应用</title>
		<link href="styles/css2.css" rel="stylesheet" type="text/css">
	</head>
	<body>
	<h1>CSS学习应用</h1>
	
	<h2>下拉菜单</h2>
	<hr>
	
	<div class="dropdown">
		<button class="dropbtn">下拉菜单</button>
		<div class="dropdown-content">
			<a href="http://www.runoob.com">菜鸟教程 1</a>
			<a href="http://www.runoob.com">菜鸟教程 2</a>
			<a href="http://www.runoob.com">菜鸟教程 3</a>
		</div>
	</div>
	
	</body>
</html>

2.下拉菜单CSS样式

/* CSS规则由两部分组成：选择器+声明：属性style和值 */
h1{
	color:red;
	text-align:center; 						
	/*文本对齐方式 
	left:左对齐
	right:右对齐
	center:居中
	start:如果内容方向是左至右，则等于left，反之为right
	end:如果内容方向是左至右，则等于right，反之为left
	justify:文字向两侧对齐，对最后一行无效*/
	/*text-decoration:underline;				/*文本修饰*/
	/*text-transform:uppercase;				/*文本转换 uppercase:所有文本大写 lowercase:所有文本小写 capitalize:每个单词首字母大写*/
	text-indent:20px;						/*文本缩进*/
	text-shadow:3px 3px 1px gray;			/*文本阴影*/
	
	
	font-family:'微软雅黑'; 						/*字体类型，设置字体系列*/
	font-size:40px;							/*设置字体大小*/
	font-style:normal;						/*字体样式 normal:正常 italic:斜体*/
	
	
	/*background-color:#e0ffff;				/*背景颜色*/
	/*background-image:url('https://static.runoob.com/images/demo/demo1.jpg');  /*背景图像*/
	background-repeat:no-repeat;				/*设置如何平铺背景图像 no-repeat:不平铺,repeat-x:水平方向平铺,repeat-y:垂直方向平铺*/
	background-attachment:fixed;			/*定义了背景图像相对于视口的固定或滚动 scroll fixed local initial inherit*/
	background-position:center top;			/*设置背景图像的初始位置 关键字：top bottom left right center*/
	
}

body{
	margin:40px 60px;
	color:DarkBlue;				/*背景颜色*/
	font-family:'微软雅黑';
	font-size:20px;	
	background-color:AliceBlue;
	background-image:url('https://static.runoob.com/images/demo/demo1.jpg');  
}

/*CSS轮廓--绘制于元素周围的一条线，位于边框边缘的外围，起到突出元素的作用*/
.demo1{
	border:1px solid red;
	outline:green dashed 1px;
	display:inline;  /*水平显示*/
	display:block;	/*显示块元素的链接*/
}


/*CSS边框*/
/*段落为p1设置边框属性，调用：class="p1"*/
p.p1{
	border-style:solid;		
	/*边框样式属性
	none：无边框
	dotted:定义一个点线边框
	dashed：定义一个虚线边框
	solid：定义实线边框
	double：定义两个边框，两个边框的宽度和border-width的值相同
	groove：定义3D沟槽边框
	ridge：定义3D脊边框
	inset：定义一个3D的嵌入边框
	outset：定义一个3D的突出边框
	*/
	border-width:1px;
	border-color:#98bf21;
}

/* class选择器，以一个点.号显示，调用：class="center" */
.center{
	text-align:center;
	margin:auto; 		/*元素居中对齐*/
	width:50%;
}


/* id选择器，以"#"定义，调用：id="demo" */
#demo{
	background-color:yellow;
}


/*CSS表格*/
table,td,th
{
	border:1px solid green;
}
th{
	background-color:green;
	color:white;
	padding:15px;
}
td{
	height:20px;
	vertical-align:center; 	/*垂直对齐属性*/
	text-align:center;		/*水平对齐属性*/
}


/*
CSS盒子模型：
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
*/
p{
	background-color:lightgray;
	width:300px;
	border:2px solid green;	
	padding:5px;
	margin:5px;
	/*CSS布局-overflow*/
	overflow:visible; 
	/*visible--内容会呈现在元素框之外
	hidden--内容被修剪，其余内容不可见
	scroll--内容被修剪，浏览器会显示滚动条来查看其余内容
	auto--如果内容被修剪，浏览器会显示滚动条来查看其余内容
	inherit--从父元素继承overflow属性的值 */
}

/*以下实现CSS垂直导航栏功能*/
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
	position: fixed;
    height: 25%;
    overflow: auto;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

li a.active {
    background-color: #4CAF50;
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}



/*CSS定位-position
static:静态定位
fixed:相对于浏览器窗口是固定位置
relative:相对定位元素
absolute:绝对定位
sticky:粘性定位，基于用户的滚动位置来定位*/

/*以下实现CSS下拉菜单功能*/
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 20px;
    border: none;
    cursor: pointer;
	margin:20px;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: relative;
    background-color: AliceBlue;
    min-width: 400px;
    box-shadow: 0px 12px 20px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 14px 25px;
    text-decoration: none;
    display: block;
	width:25%;
	height:25%;
}

.dropdown-content a:hover {
	background-color: yellow;
	width:87%;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: orange;
}


/*以下实现CSS提示框功能*/
/* Tooltip 容器 */
.tooltip {
    position: relative;
    display: inline-block;
	cursor: not-allowed;
	font-size: 20px;
	padding: 20px 25px;
}
 
/* Tooltip 文本 */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 150px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 10px 15px;
    border-radius: 6px; /*为提示框添加圆角*/
 
    /* 定位 */
    position: absolute;
    z-index: 1;
	font-size: 15px;
}

/*底部提示框/顶部箭头*/
.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    bottom: 100%;  /* 提示工具头部 */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
	transform-origin: 50% 46px;
}

/* 鼠标移动上去后显示提示框 */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

3.下拉菜单效果图

四、实现垂直导航栏功能

1.垂直导航栏HTML源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS学习应用</title>
		<link href="styles/css2.css" rel="stylesheet" type="text/css">
	</head>
	<body>
	<h1>CSS学习应用</h1>
	
	<h2 >CSS垂直导航栏</h2>
	<hr>
	
	<ul>
		<li><a class="active" href="https://www.runoob.com">菜鸟教程首页</a><li>
		<li><a href="https://www.runoob.com/html/html-tutorial.html">HTML教程</a><li>
		<li><a href="https://www.runoob.com/go/go-tutorial.html">GO教程</a><li>
		<li><a href="https://www.runoob.com/python/python-tutorial.html">PYTHON教程</a><li>
		<li><a href="https://www.runoob.com/js/js-tutorial.html">JavaScript教程</a><li>
	</ul>
    </body>
<head>

上述代码中采用了link外部样式表，css2.css的代码同上-实现下拉菜单功能

2.垂直导航栏效果图

点击可以高亮显示，并可以跳转到对应的界面哦~

五、新年快乐源码（动态灯笼）

不知不觉，时间快要接近2023尾声，即将迎来明媚的2024，希望各位在新的一年里，阖家欢乐，财源滚滚，万事大吉，平安喜乐！！

1.新年动态灯笼HTML源码

<html>
	<head>
		<meta charset="utf-8">
		<title>喜庆灯笼</title>
		<style type="text/css">
			.deng-box {
				position: fixed;
				top: -40px;
				right: 150px;
				z-index: 9999;
				pointer-events: none;
			}
			
			.deng-box1 {
				position: fixed;
				top: -30px;
				right: 10px;
				z-index: 9999;
				pointer-events: none;
			}
			
			.deng-box2{
				position: fixed;
				top: -40px;
				left: 150px;
				z-index: 9999;
				pointer-events: none;
			}
			
			.deng-box3 {
				position: fixed;
				top: -30px;
				left: 10px;
				z-index: 9999;
				pointer-events: none;
			}
			
			.deng-box1 .deng,
			.deng-box3 .deng {
				position: relative;
				width: 120px;
				height: 90px;
				margin: 50px;
				background: #d8000f;
				background: rgba(216,0,15,0.8);
				border-radius: 50% 50%;
				-webkit-transform-origin: 50% -100px;
				-webkit-animation: swing 5s infinite ease-in-out;
				box-shadow: -5px 5px 30px 4px #fc903d
			}
			
			.deng {
				position: relative;
				width: 120px;
				height: 90px;
				margin: 50px;
				background: #d8000f;
				background: rgba(216,0,15,0.8);
				border-radius: 50% 50%;
				-webkit-transform-origin: 50% -100px;
				-webkit-animation: swing 3s infinite ease-in-out;
				box-shadow: -5px 5px 50px 4px #fa6c00;
			}
			
			.deng-a {
				width: 100px;
				height: 90px;
				background: #d8000f;
				background: rgba(216,0,15,0.1);
				margin: 12px 8px 8px 8px;
				border-radius: 50% 50%;
				border: 2px solid #dc8f03;
			}
			
			.deng-b {
				width: 45px;
				height: 90px;
				background: #d8000f;
				background: rgba(216,0,15,0.1);
				margin: -4px 8px 8px 26px;
				border-radius: 50% 50%;
				border: 2px solid #dc8f03;
			}
			
			.xian {
				position: absolute;
				top: -20px;
				left: 60px;
				width: 2px;
				height: 20px;
				background: #dc8f03;
			}
			
			.shui-a {			
				position: relative;
				width: 5px;
				height: 20px;
				margin: -5px 0 0 59px;
				-webkit-animation: swing 4s infinite ease-in-out;
				-webkit-transform-origin: 50% -45px;
				background: orange;
				border-radius: 0 0 5px 5px;
			}
			
			.shui-b {
				position: absolute;
				top: 14px;
				left: -2px;
				width: 10px;
				height: 10px;
				background: #dc8f03:
				border-radius: 50%;
			}

			.shui-c {
				position: absolute;
				top: 18px;
				left: -2px;
				width: 10px;
				height: 35px;
				background: orange;
				border-radius: 0 0 0 5px;
			}
			
			.deng:before {
				position: absolute;
				top: -7px;
				left: 29px;
				height: 12px;
				width: 60px;
				content: " ";
				display: block;
				z-index: 999;
				border-radius: 5px 5px 0 0;
				border: solid 1px #dc8f03;
				background: orange;
				background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03);
			}
			
			.deng:after {
				position: absolute;
				bottom: -7px;
				left: 10px;
				height: 12px;
				width: 60px;
				content: " ";
				display: block;
				margin-left: 20px;
				border-radius: 0 0 5px 5px;
				border: solid 1px #dc8f03;
				background: orange;
				background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03);
			}
			
			.deng-t {
				font-family: 黑体, Arial, Lucida Grande, Tahoma, sans-serif;
				font-size: 3.2rem;
				color: #dc8f03;
				font-weight: 700;
				line-height: 85px;
				text-align: center;
			}
			.night .deng-box,
			.night .deng-box1,
			.night .deng-t {
				background:transparent !important;
			}
			
			@-moz-keyframes swing {
				0% {
					-moz-transform: rotate(-1Odeg);
				}
				50% {
					-moz-transform: rotate(10deg);
				}
				100% {
					-moz-transform: rotate(-10deg);
				}
			}
			
			@-webkit-keyframes swing {
				0% {
					-webkit-transform: rotate(-10deg);
				}
				50% {
					-webkit-transform: rotate(10deg);
				}
				100% {
					-webkit-transform: rotate(-10deg);
				}
			}
		</style>	
		
		<style>
			h1 {
				text-align:center;
				color:#B8860B;
				font-size:50px;
				margin:10px;
				padding:10px;
			}
			
			h3 {
				text-align:center;
				color:#4B0082;
				font-size:25px;
				padding:10px;
			}
			
			body {
				background-image:url('https://img.tukuppt.com/bg_grid/00/13/34/ieRv1gTX6x.jpg!/fh/350'); 
			}
			
			img {
				display:block;
				margin:10px auto;
				height:60%;
				width:80%;
			}
			
		</style>
	</head>
	
	<body>
		<div class="deng-box2">
			<div class="deng">
				<div class="xian">
			</div>
			<div class="deng-a">
				<div class="deng-b">
					<div class="deng-t">年</div>
				</div>
			</div>
			<div class="shui shui-a">
				<div class="shui-c"></div>
				<div class="shui-b"></div>
				</div>
			</div>
		</div>
		
		<div class="deng-box3">
			<div class="deng">
				<div class="xian">
			</div>
			<div class="deng-a">
				<div class="deng-b">
					<div class="deng-t">新</div>
				</div>
			</div>
			<div class="shui shui-a">
				<div class="shui-c"></div>
				<div class="shui-b"></div>
				</div>
			</div>
		</div>
		
		<div class="deng-box1">
			<div class="deng">
				<div class="xian">
			</div>
			<div class="deng-a">
				<div class="deng-b">
					<div class="deng-t">乐</div>
				</div>
			</div>
			<div class="shui shui-a">
				<div class="shui-c"></div>
				<div class="shui-b"></div>
				</div>
			</div>
		</div>
		
		<div class="deng-box">
			<div class="deng">
				<div class="xian">
			</div>
			<div class="deng-a">
				<div class="deng-b">
					<div class="deng-t">快</div>
				</div>
			</div>
			<div class="shui shui-a">
				<div class="shui-c"></div>
				<div class="shui-b"></div>
				</div>
			</div>
		</div>
		
		<br>
		<h1>新年快乐</h1>
		<h1>龙年大吉</h1>
		<br>
		<img src="images/2024.jpg" alt="HappyNewYear">
		
		<h3>小哪吒祝各位在新的一年里，心想事成，财运亨通！</h3>
	</body>
	
</html>

2.新年动态灯笼效果图

Alice_小哪吒

关注

6
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
HTML+CSS+JavaScript代码实现功能

2.引入CSS样式：可采用外部样式表、内部样式表、内联样式三种方式插入。浏览器会从文件styles/css1.css中读到样式声明。3.设置图片，保存在images/image1.jpg路径下。：当样式需要应用于很多页面时，优先选择外部样式表。4.编写HTML代码，主要通过内部样式表方式编写。：当单个文档需要特殊的样式时，应使用内部样式表。：需要将表现和内容混用，请慎用！
复制链接

扫一扫

专栏目录