# WebDemos
###搜索框系列
一、搜索框自动隐现效果(纯CSS实现)
[点击查看在线效果](http://www.statssun.com/searchbox/)
1. 页面构成元素
- 内容输入框
- 搜索按钮
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SearchBox</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>
<body>
<div class="search-box">
<!--插入内容输入框-->
<input class="search-txt" type="text" name="" placeholder="Type to search">
<!--插入搜索按钮-->
<a class="search-btn" href="#"><i class="fas fa-search"></i></a>
</div>
</body>
</html>
```
2. 页面CSS格式
```css
body{
margin:0;
padding:0;
background:#e84118;
}
.search-box{
/*输入框垂直居中*/
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background:#2f3640;
height:40px;
border-radius:40px;
padding:10px;
}
/*输入框淡出*/
.search-box:hover > .search-txt{
width: 120px;
padding: 0 6px;
/*宽度设置过大时图标会下移*/
}
/*搜索按钮*/
.search-box:hover > .search-btn{
background: white;
color: #e84118;
}
/*输入文本显示格式设置*/
.search-txt{
border:none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 40px;
width: 0;
font-weight: bold;
}
/*搜索按钮格式设置*/
.search-btn{
position:relative;
color:#e84118;
float:right;
width:40px;
height:40px;
border-radius:50px;
background:#2f3640;
display:flex;
justify-content:center;
align-items:center;
transition:0.4s;
cursor:pointer;
}
/**/
.search-btn > i{
font-size: 30px;
}
```
二、搜索框点击边框圆角过渡变换（纯CSS实现）
[点击查看在线效果](http://www.statssun.com/SearchBox2/)
1. 页面构成
- 标题(可有可无)
- 表单：输入框和提交按钮
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SearchBox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">
<h1>Search</h1>
<form >
<!--插入表单-->
<input type="text" name="" placeholder="Type to Search">
<input type="submit" name="" value="Search">
</form>
</div>
</body>
</html>
```
2. 页面CSS格式
```css
body{
margin: 0;
padding: 0;
background: #000;
font-family: sans-serif;
}
h1{
margin: 0 0 10px;
padding: 0;
color: #ffffff;
font-size: 24px;
}
.box{
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
}
input{
position: relative;
/*设置行内块元素，效果同float，IE6、IE7不支持*/
display: inline-block;
font-size: 20px;
height: 50px;
/*定义总宽度和总高度的计算方式，这里总宽高=content+padding+border*/
box-sizing:border-box;
/*单独设置边框弧度变化效果*/
transition: border-radius .5s;
}
input[type="text"]{
background: #ffffff;
width: 340px;
border: none;
outline: none;
padding: 0 25px;
border-radius:25px 0 0 25px;
}
input[type="submit"]{
position: relative;
width: 150px;
left: -5px;
border-radius:0 25px 25px 0;
border: none;
outline: none;
cursor: pointer;
background: #ffc107;
color: #ffffff;
}
input[type="submit"]:hover{
background: #ff5722;
}
/*选择优化项：输入框和提交按钮设置为响应式布局，避免出现错位情况*/
```
三、在导航菜单栏添加搜索框（纯CSS实现）
[点击查看在线效果](http://www.statssun.com/SearchBox3/)
1. 页面构成
- 导航菜单
- 搜索框
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>带导航连接带搜索框</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<!--插入导航连接菜单-->
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Event</a></li>
<li><a href="#">Feedback</a></li>
<li><a href="#">Contact</a></li>
</ul>
<!--插入搜索框和搜索按钮-->
<form>
<input type="text" name="" placeholder="Type....">
<input type="submit" name="" value="Search">
</form>
</nav>
</body>
</html>
```
2. 页面CSS格式
```css
body{
padding: 0;
margin: 0;
background: skyblue;
font-family: sans-serif;
}
/*定义导航连接部分*/
nav{
width: 100%;
background: #112038;
overflow: auto;
}
ul{
margin: 0;
padding: 0;
list-style: none;
line-height: 60px;
}
ul li{
float: left;
}
ul li a{
background: #112038;
text-decoration: none;
width: 130px;
display:inline-block;
text-align: center;
color: #f2f2f2;
font-size: 18px;
letter-spacing: 0.5px;
}
/*通过透明度和字体大小变化设置动态效果*/
li a:hover{
color: #ffffff;
opacity: 0.5;
font-size: 19px;
}
form{
margin-top: 15px;
float: right;
margin-right: 100px;
}
input[type="text"]{
padding: 7px;
border: none;
font-size: 16px;
border-radius: 5px 0 0 5px;
}
input[type="submit"]{
float: right;
background: orange;
color: white;
border-radius:0 5px 5px 0;
cursor: pointer;
position: relative;
padding: 7px;
border: none;
font-size: 16px;
}
input[type="submit"]:hover{
background: red;
}
/*选择优化项：导航菜单和搜索框设置为响应式布局，避免出现页面窗口过小时出现错位情况*/
```
### 登陆表单系列
一、万圣节主题登录界面
[点击查看在线效果](http://www.statssun.com/LoginForm3/)
1. 页面结构
- 图标
- form表单
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LoginForm</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="login-box">
<img src="../../images/018.png" alt="">
<h1>Login Here</h1>
<form>
<p>Username</p>
<input type="text" name="" placeholder="Enter Your Name">
<p>Password</p>
<input type="password" name="" placeholder="Enter Password"><br>
<input type="submit" name="" value="Login"><br>
<a href="#">Lost your password?</a><br>
<a href="#">Don't here an account?</a>
</form>
</div>
</body>
</html>
```
2. CSS样式
```css
body{
padding: 0;
margin: 0;
font-family: sans-serif;
background: url("../../images/029.jpg") no-repeat scroll;
background-size:cover;
}
.login-box{
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
width: 240px;
height: 340px;
background: rgba(0,0,0,0.5);
border-radius:10px;
}
img{
width: 60px;
height: 60px;
border-radius: 50%;
position:relative;
left: 90px;
top: -30px;
}
h1{
margin: 0;
padding: 0;
text-align: center;
position: relative;
top: -15px;
font-size: 24px;
color: #ffffff;
}
form{
margin:0 25px;
color: #ffffff;
}
p{
margin: 0;
font-size: 16px;
}
input[type="text"],input[type="password"]{
background: transparent;
border:none;
border-bottom: 1px solid #ffffff;
padding: 5px 0;
margin-top: 5px;
margin-bottom: 10px;
width: 100%;
color: #ffffff;
}
input[type="submit"]{
width: 100%;
记录我在前端学习中做过的demos，html、css 、javascript.zip （14个子文件） 
code_111230 LoginForm1-登陆框宽度自动变化 
index.html 2KB LoginForm2-加入icon的登陆框 index.html 2KB JS贷款计算器 
javascript.js 3KB index.html 2KB LoginForm3-登陆框hover变化设置 style.css 1KB index.html 683B LoginForm4-双面登陆框 style.css 2KB index.html 978B searchbox1-搜索框自动隐现 index.html 2KB SearchBox2-搜索宽边框圆角过渡 style.css 882B index.html 386B SearchBox3-导航栏添加搜索框 style.css 1KB index.html 695B README.md 17KB资源评论
辣椒种子
- 粉丝: 4308
- 资源: 5837
最新资源
- MATLAB代码，LSTM（长短时记忆模型），粒子群优化LSTM（psolstm），量子粒子群优化LSTM（QPSOLSTM），可用于风电、光伏等负荷预测，时序预测，数据为单输入单输出，更数据简单，导
- 蒙特卡洛模拟电动汽车充电负荷特性 主要内容: 利用蒙特卡罗仿真生成大规模电动汽车无序充电功率曲线，分析大规模电动汽车接入对电网造成的影响 包括电动汽车日行驶里程概率分布，起始充电时间概率分布，耗电
- PMSM BLDC参数辨识工程源码，电阻电感和完全解耦FOC算法模块 无刷直流电机参数辨识代码 电阻电感磁链参数 含已经解耦的FOC算法模块 辨识精度和收敛速度好 很方便移植到你自己的工程里面 内含使
- 一个定时器控制8路舵机，一个定时器控制8路舵机，含舵机的其他速度控制代码 软件和教程资料
- FX5U Active Socket TCP通讯FB 功能块 有几个通道，就拖几个FB，FB里面全部用的相对地址，相互之间不受干扰 通道0~7 共8个 使用的是上电直接SM402自动连接，
- 四旋翼飞行器自适应或Pid姿态位置控制，可以对比输出，也可以选择其中一种算法输出，包含多个性能指标输出，可直接运行
- 储能PCS逆变器双向变流器设计方案资料，双向DCDC和三电平逆变PCS 30KW 成熟已量产 1.此系列为30KW储能PCS逆变器设计方案资料，双向DCDC和三电平逆变PCS； 2.仿真源码含有并网
- 模块化多电平变器MMC两种调制策略实现（交流3000V-直流5000V整流）仿真，单桥臂二十子模块，分别采用最近电平逼近NLM与载波移相调制CPS-PWM实现，仿真中使用环流抑制，NLM中采用快速排序
- MATLAB SIMULINK，MMC整流器仿真，双闭环控制，最近电平逼近调制，冒泡排序法，在2.5秒加入环流抑制，n=18，仅供学习参考，欢迎讨论，共同进步
- 光伏单相并网仿真 前级采用boost升压电路，采用变扰动观察法实现最大功率点追踪，追踪效果良好 后级采用双闭环控制，电压外环，pr电流内环，陷波器踢出二次功率脉动 单相锁相环采用基于广义二阶积分矢
- 汽车ABS防抱死系统，基于Carsim和Simulink的联合仿真模型 四轮均具有ABS系统，控制目标为四个制动缸压力 采用的是逻辑门限值方法 通过MATLAB状态机对abs系统增压，减压，保压
- 永磁同步直线电机 高阶非奇异快速终端滑模控制 控制效果如下图，提供参考文献和公式 注：控制参数非最优，仅供需要的同学参考
- RRT路径规划算法代码（MATLAB版本） 基于rrt算法的路径规划算法matlab代码，求解常见的路径规划问题 内含算法的注释，模块化编程，新手小白可快速入门 rrt算法，路径规划算法
- 研究背景：高斯光束整形为贝塞尔光束后，可以实现激光功率密度的进一步集中，从2mm的高斯光斑转变为10um左右的贝塞尔光斑，贝塞尔光束因高功率密度的特性，可以用于切割，由于超快激光特性，热影响区小，切割
- 级联H桥型statcom的Matlab仿真，可实现对三相电网的无功补偿（感性和容性），以及直流测电容电压平衡控制 所针对的电网系统为10kV，50Hz，主电路为级联h桥逆变器（CHB），在仿真中CH
- 编码器foc工程源码 编码器为1000线ABZ编码器 源码中含有foc初始电角度差的获取方法 模块化编程 非常适合工业量产和移植
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
