HTML简单组件
关注
分享
扫一扫
文章平均质量分 50
HTML简单组件
一方通行00
只想做简洁，清晰明了的分享内容
展开
-
html简单组件（九）：简洁的商城订单列表显示（带状态）
html简单组件（九）：简洁的商城订单列表显示（带状态）效果图为：HTML代码 <div class="textDiv"> <div class="head"> <b>订单编号：</b> 2021032610194432 </div> <div class="context"> <b>订单时间：</b> 2021-03-26 10:11:23 &l原创 2021-03-26 14:22:20 · 3014 阅读 · 1 评论 -
html简单组件（八）：公告/广告自动轮播效果实现
html简单组件（八）：公告/广告自动轮播效果实现实现效果：HTML代码 <div class="list"> <ul> <li class="lt">广告1..........</li> <li class="lt">广告2..........</li> <li class="lt">广告3..........</li> <li class="lt">原创 2021-03-08 11:39:36 · 1625 阅读 · 0 评论 -
html简单组件（七）：使用transform实现轮播图
html简单组件（七）：transform实现图片轮播实现效果图：HTML代码 <div class="box"> <div class="list"> <ul> <li id="g0" class="center"><img src="img/1.jpg" alt="" /></li> <li id="g1" class="right"><img src="img/2原创 2021-02-09 17:31:46 · 2722 阅读 · 1 评论 -
html简单组件（六）：移入div放大特效（scale）
html简单组件（六）：点击Div放大特效（scale）实现效果图：完整代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>点击放大div</title> <style> .demo{ width: 500px; height: 260px; border: 1px solid black;原创 2021-02-09 09:27:02 · 1630 阅读 · 0 评论 -
html简单组件（五）：点击旋转箭头
html简单组件（五）：点击旋转箭头实现效果图：完整代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>test</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <style>原创 2021-02-08 12:41:03 · 2814 阅读 · 0 评论 -
html简单组件（四）：滚动条显示隐藏和更改滚动条样式
HTML+CSS实现最简单的滚动条显示隐藏和更改滚动条样式实现效果图：HTML代码 <div class="list scroll"> <div class="list-item">测试滚动条</div> <div class="list-item">测试滚动条</div> <div class="list-item">测试滚动条</div> <div class="list-item原创 2021-01-06 14:23:14 · 8078 阅读 · 0 评论 -
html简单组件（三）：简洁美观的搜索框
html+jquery简洁美观的搜索框搜索框效果图：HTML代码： <div class="main"> <div class="pannel-div search"> <input type="text" class="in" id="in" placeholder="请输入查询内容" /> <button class="btn_search" onclick="showInput()">搜索</button>原创 2020-12-30 20:44:44 · 14886 阅读 · 0 评论 -
html简单组件（二）：简洁弹窗
html+jquery实现简洁弹窗代码实现效果图为：html代码 <div> <button class="btn" onclick="show()">点击弹窗</button> <!-- 弹窗遮罩层 --> <div class="dialog"> <!-- 弹窗内容 --> <div class="content"> <div class="aclose"&g原创 2020-12-30 19:31:18 · 17723 阅读 · 3 评论 -
html简单组件（一）：最简单的右侧导航栏
html+jquery+CSS实现最简单的右侧导航栏效果一直在百度上没找到最简单实现右侧导航栏效果的代码，索性自己做一个最简单的demo最简单的效果图废话不多说，直接上代码html+jquery代码html主代码<div class="mobile-nav"> <ul> <li class="nav_menu"><a onclick="change(1)">首页</a></li> <li cla原创 2020-12-29 09:49:55 · 14778 阅读 · 4 评论