前端html-部件模板收集（附源码）

已于 2022-06-01 15:41:40 修改
阅读量2.8k 收藏 36
点赞数 2
文章标签： 前端 html css javascript
于 2022-05-31 21:23:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_57210034/article/details/125072823
版权
本文详细介绍了前端开发中的多个实用部件，包括下拉列表、定位导航、选项卡切换、轮播图和页面布局。从简单下拉菜单到响应式JavaScript侧边栏菜单，再到各种轮播图实现，提供了丰富的示例代码和效果展示，帮助开发者提升页面交互体验。
摘要由CSDN通过智能技术生成

目录

1.下拉列表

1.1 简单下拉菜单

 1.2 输入框的下拉列表

1.2 响应式 JavaScript 侧边栏下拉菜单 可折叠隐藏

2.定位导航

3.选项卡切换

3.1 简单选项卡切换-自动

3.2 简单选项卡切换+延时

4.轮播图

4.1 渐变轮播

4.2 滚动轮播（走马）

4.2.3 简单展示框

4.3 滑动轮播（走马）

5.页面布局

5.1 瀑布流布局

1.下拉列表

1.1 简单下拉菜单

效果图：

说明：使用css中的hover属性就可以实现，关键代码在

.downorder:hover a{

        display: block;/*鼠标移入菜单盒子时显示a标签内容*/

}

.downtext a {

        display: none;/*隐藏a标签内容*/

}

源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>简单下拉菜单</title>
		<style type="text/css">
			.downorder {
				width: 100px;
				height: auto;
				position: relative;
			}
			.downorder:hover a{
				display: block;/*鼠标移入菜单显示a标签内容*/
			}
			.order {
				position: relative;
				text-align: center;
				display: inline-block;
				font-size: 16px;
				padding: 15px;
				background-color: dodgerblue;

			}
			.order:hover {
				background-color: aqua;
				color: #FFFF00;
			}
			.downtext {
				position: relative;
				text-align: center;
				display: inline-block;
				font-size: 16px;
				background-color: #7FFF00;
			}
			.downtext a {
			    display: none;/*隐藏a标签内容*/
			    text-decoration: none;
			    color: red;
			    padding: 15px;
			}
			.downtext a:hover {
				background-color: aqua;
				color: #FFFF00;
			}
		</style>
	</head>
	<body>
		<div class="downorder">
			<button class="order">
				下拉菜单
			</button>
			<div class="downtext">
				<a href="javascript:;">内容1</a>
				<a href="javascript:;">内容2</a>
				<a href="javascript:;">内容3</a>
				<a href="javascript:;">内容4</a>
			</div>
		</div>
	</body>
</html>

 1.2 输入框的下拉列表

效果图：

 说明：用datalist标签就可以实现，

源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>数据列表</title>
	</head>
	<body>
		<form action="" method="get">
			<label for="item">选择你想要的内容：</label>
			<input type="text" list="items" name="item" id="item"/>
			    <datalist id="items">
			    	<option value="会玩手机的猫"></option>
			    	<option value="最爱鱼的!猫"></option>
			    	<option value="来自星星的猫"></option>
			    	<option value="天猫国际会玩猫"></option>
			    	<option value="咪了个猫"></option>
			    </datalist>
			<input type="submit" value="提交"/>
		</form>
	</body>
</html>

1.2 响应式 JavaScript 侧边栏下拉菜单 可折叠隐藏

这是一款基于纯JavaScript实现的侧边栏菜单，因为整个菜单并没有使用jQuery等第三方插件，因此菜单比较轻量级的。这款JS侧边栏菜单的特点是点击按钮可以展开和隐藏，并且在隐藏时自动显示提示文字，展开后又隐藏提示文字，很好地做到了自适应效果。

效果：

HTML代码

非常简单，用一个<ul>元素构建了一个景点列表，同时用二级标题显示城市名称。

<div id="menu">
    <!--隐藏菜单-->
    <div id="ensconce">
        <h2>
            <img src="images/show.png" alt="">
            国内各地景点
        </h2>
    </div>

    <!--显示菜单-->
    <div id="open">
        <div class="navH">
            国内各地景点
            <span><img class="obscure" src="images/obscure.png" alt=""></span>
        </div>
        <div class="navBox">
            <ul>
                <li>
                    <h2 class="obtain">北京景点<i></i></h2>
                    <div class="secondary">
                        <h3>故宫</h3>
                        <h3>十三陵</h3>
                        <h3>圆明园</h3>
                        <h3>长城</h3>
                        <h3>雍和宫</h3>
                        <h3>天坛公园</h3>
                    </div>
                </li>
                <li>
                    <h2 class="obtain">南京景点<i></i></h2>
                    <div class="secondary">
                        <h3>栖霞寺</h3>
                        <h3>夫子庙</h3>
                        <h3>海底世界</h3>
                        <h3>中山陵</h3>
                        <h3>乌衣巷</h3>
                        <h3>音乐台</h3>
                    </div>
                </li>
                <li>
                    <h2 class="obtain">上海景点<i></i></h2>
                    <div class="secondary">
                        <h3>东方明珠</h3>
                        <h3>外滩</h3>
                        <h3>豫园</h3>
                        <h3>文庙</h3>
                        <h3>世博园</h3>
                        <h3>田子坊</h3>
                    </div>
                </li>
                <li>
                    <h2 class="obtain">深圳景点<i></i></h2>
                    <div class="secondary">
                        <h3>华侨城</h3>
                        <h3>观澜湖</h3>
                        <h3>世界之窗</h3>
                        <h3>东门老街</h3>
                        <h3>七娘山</h3>
                        <h3>光明农场</h3>
                    </div>
                </li>
                <li>
                    <h2 class="obtain">广州景点<i></i></h2>
                    <div class="secondary">
                        <h3>白云山</h3>
                        <h3>长隆</h3>
                        <h3>黄花岗公园</h3>
                        <h3>中山纪念堂</h3>
                        <h3>华南植物园</h3>
                        <h3>南沙湿地公园</h3>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

CSS代码

CSS代码也并不复杂，主要渲染了鼠标滑过菜单项时的背景颜色渐变动画，同时定义了菜单展开时的折叠动画效果。

#menu {
  overflow: hidden;
  height: 100%;
  float: left;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#menu #ensconce {
  /*éšè—èœå•æ ·å¼*/
  width: 0.35rem;
  height: 100%;
  background-color: #20343c;
  float: left;
  text-align: center;
  position: relative;
  display: none;
}
#menu #ensconce h2 {
  cursor: pointer;
  color: #fff;
  font-size: 0.24rem;
  line-height: 0.5rem;
  width: 100%;
  position: absolute;
  top: 35%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(0%, -50%);
}
#menu #ensconce h2 img {
  width: 52%;
}
#menu #open {
  /*显示èœå•æ ·å¼*/
  width: 2.6rem;
  height: 100%;
  background-color: #363a45;
  padding-bottom: 0.1rem;
  box-sizing: border-box;
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  -o-transition: all 0.8s ease;
  -ms-transition: all 0.8s ease;
}
#menu #open .navH {
  height: 0.6rem;
  background-color: #44495a;
  line-height: 0.6rem;
  text-align: center;
  font-size: 0.2rem;
  color: #fff;
  position: relative;
  box-sizing: border-box;
}
#menu #open .navH span {
  position: absolute;
  top: 49%;
  right: 0;
  padding: 0 0.15rem;
  cursor: pointer;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
  display: inline-block;
}
#menu #open .navH span .obscure {
  width: 0.24rem;
}
#menu #open .navBox {
  height: 100%;
  overflow-y: auto;
  padding-left: 0.05rem;
  padding-right: 0.07rem;
  margin-top: 0.1rem;
}
#menu #open .navBox ul li {
  background-color: #393c4a;
  cursor: pointer;
  margin-bottom: 4px;
}
#menu #open .navBox ul li .obtain {
 background-color: #3889D4; 
}
#menu #open .navBox ul li .obtain:hover {
 background-color: #3D8332; 
}
#menu #open .navBox ul li h2 {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #fff;
  font-size: 0.15rem;
  padding: 0.15rem 0;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  -ms-transition: all 0.6s ease;
}
#menu #open .navBox ul li h2 i {
  position: absolute
最低0.47元/天 解锁文章
Mr.羽猫君
关注
  • 2
    点赞
  • 踩
  • 36
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5清爽扁平手机端模板素材是一款适合手机移动端小部件样式模板下载。_html网站模板_网页源码移动端前端_H5模.rar
08-04
6. **前端源码**：前端源码是指编写网页所需的HTML、CSS和JavaScript代码。这些源码提供了模板的具体实现，开发者可以通过查看和学习源码来理解其工作原理，从而优化或复制到自己的项目中。 7. **H5模**：这里的...
分享77个Html前端模板，总有一款适合您
zy0412326的专栏
02-16 1034
高端建筑设计企业网站web前端模板Kasuua。创意电商购物网站UI设计前端模板-Ayira。css3 slider menu前端单页模板。分享77个Html前端模板，总有一款适合您。Bootstrap3浅色淡雅响应式窄屏网站。Bootstrap蓝白色单页个人网站模板。Bootstrap服装购物商城前端模板。Bootstrap3黑色系个人网站单页。Bootstrap个性滚屏博客单页模板。紫色全屏渐变css3动画UI企业模板。Bootstrap浅色淡雅个人博客。仿WIN8扁平式UI的html模板。
60套HTML前端模板-源码-各类前端项目源码合集
09-16
各种网站模板、后台模板、商城模板、CMS模板、网页模板、响应式模板、自适应模板、手机模板等网站源码。商城模板网站模板、商城模板网站源码、商城模板建站模板下载、电商模板、移动端模板、个人博客模板、课程设计、网站门户、响应式网页源码
大学生简单静态HTML网页模板源码——家乡介绍美丽乡村11页
最新发布
网页设计与制作 | HTML+CSS+JS
06-18 417
家乡旅游景点网页作业制作 网页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS的代码量也很足、很细致，使用hover来完成过渡效果、鼠标滑过效果等，使用表格、表单补充模块，为方便新手学习页面中没有使用js有需要的可以自行添加。 ⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——
分享118个HTML个性简实模板，总有一款适合您
zy0412326的专栏
02-25 4454
分享118个HTML个性简实模板，总有一款适合您
网页整体布局基本模板
qq_63806300的博客
07-12 6690
网页整体布局
你想要的100套HTML模板
热门推荐
好好读书
01-13 3万+
你想要的100套HTML模板
博客系统前端页面代码实现及页面展示(代码版)
weixin_61436104的博客
05-27 3107
博客系统前端代码及页面展示
426_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码 (2).zip
08-04
HTML5手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码 (2) 这个资源包主要包含了一套适用于手机和电脑的HTML5网站模板，它旨在提供一个跨平台、自适应且响应式的网页设计解决方案。HTML5是现代网页开发的...
904js_HTML手机电脑网站_网页源码移动端前端js效果_H5模板_自适应css源码ui组件.zip
08-03
该压缩包文件“904js_HTML手机电脑网站_网页源码移动端前端js效果_H5模板_自适应css源码ui组件.zip”包含了用于构建跨平台的手机和电脑网站的HTML源码、CSS样式和JavaScript特效。这些资源是前端开发的重要组成部分...
bootstrap响应式后台html模板源码 v2.2
10-06
Bootstrap是由Twitter开发并开源的一款前端开发工具，它提供了一系列的预定义样式、表单、按钮、导航及其他UI组件，使得开发者能够快速构建美观且响应式的网页应用。 H+模板的核心特性是完全响应式设计，这意味着...
个人blog蓝白_HTML手机电脑网站_网页源码移动端前端js效果_H5模板_自适应css源码ui组件.zip
08-04
在这个个人博客模板中，可能会包含各种预设的UI组件，如文章卡片、侧边栏小部件、评论系统等。 6. **响应式设计** 响应式设计是一种网页设计方法，使网站能够根据用户的设备和屏幕尺寸自动调整布局和样式。这主要...
分享75个Html前端模板，总有一款适合您
zy0412326的专栏
02-16 569
HTML5绿色有机农场水果蔬菜网站模板。HTML5时尚家具椅子电子商务网站模板。设计开发互联网公司HTML5网站模板。HTML5金融服务机构响应式网站模板。响应式商务服务机构HTML5网站模板。HTML5山庄别墅房产中介网站模板。HTML5育儿园托儿所宣传网站模板。管道维修服务机构HTML5网站模板。HTML5电脑手机维修服务网站模板。家政清洁服务机构HTML5网站模板。HTML5现代家居装潢公司网站模板。HTML5在线教育培训课程网站模板。HTML5数字产品服务公司网站模板。
分享76个Html前端模板，总有一款适合您
adendean的博客
02-16 610
bootstrap响应式美国社会教育HTML网站模板-Stretch。bootstrap响应式宽屏风景图片拍摄网站模板-CROPPIC。bootstrap响应式医疗健康企业类网站模板-MEDLINE。软件产品服务设计公司响应式网站模板-Soft Landing。简洁大气的bootstrap响应式企业官网单页模板-Vira。绿色bootstraps响应式旅游摄影类网站模板-benzo。精美大型鞋子商城网站响应式整站模板-BRANDLOGO。房地产家居门户信息网站模板--OrangeCounty。
前端模板代码
qq_57662137的博客
03-18 352
带有CSS和JavaScript的前端页面模板
[WEB]超牛的前端页面模板收集
王德封-逐浪
09-11 5797
本帖志在收集前端技术大牛做的页面模板、以备设计和开发人员参考。后续会持续更新...,各位大牛有好的前端页面模板欢迎留言提供。本帖所有内容来自互联网，如果有侵犯您的版权，请留言，我会删除处理。 1.HTML5数据可视化模板： 1）内含20个HTML5模板。主要用于大屏数据可视化和数据分析平台的数据展示。个人认为其中的第2、18、20个最有代表性。https://download.csdn...
分享83个Html前端模板，总有一款适合您
zy0412326的专栏
02-17 914
分享83个Html前端模板，总有一款适合您。战争游戏画面特效制作公司网站模板。专注SEO优化服务企业网站模板。UI设计师个人作品展示博客模板。码头集装箱生产商HTML5模板。大牌明星演唱会订票官方网站模版。绿色系实用的UI工具包网页模板。绿粉色咖啡餐厅类目CSS3模板。大宗交易房地产租贷企业网站模板。小清新房间装修设计报价公司模板。漂亮大气的黑灰色摩托车企业模板。绿色调实用的UI工具包网页模板。扁平化咖啡餐厅类目CSS3模板。四季如春旅游景点HTML5模板。H5电子行业响应式企业网站模板。
分享97个html5模板，总有一款适合您
zy0412326的专栏
03-12 1431
智能数据UIKIT组件响应式网页模板。公路背景网站开通倒计时响应式网页模板。多种扁平UIKIT组件响应式网页模板。企业服务团队产品展示响应式网页模板。登录注册选项卡切换响应式网页模板。电影票选座预订组件响应式网页模板。最大化企业动态展示响应式网页模板。时尚图文购物车列表响应式网页模板。红色UIKIT组件响应式网页模板。个人资料选项卡切换响应式网页模板。团队服务产品介绍响应式网页模板。功能服务价格展示响应式网页模板。简洁团队产品展示响应式网页模板。创意品牌团队展示响应式网页模板。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值