html5cssjs案例(html5 css js)
HTML5+CSS3小实例：手风琴式加载动画
HTML5+CSS3做一个手风琴式的加载动画，这动画、这质感、这配色，就问你喜不喜欢？！这个案例的知识点主要是：css的自定义属性 + 动画延迟 + 颜色滤镜（hue-rotate）。
效果：
源码：
学了半年前端，基本的html+css+js都会了，有没有什么好的项目可以当案例做的。
前端涵盖技术范围之广，不仅只是html+css+js。下面推荐几个前端实战项目：1.京东登陆注册案列（HTML+CSS）,登陆页面指的是需要提供账号密码验证的界面。
2.个人博客项目（HTML5+CSS）,个人博客是涉及前端领域的第一个项目，运用前端基础知识，培养项目思维。
3.企业网站，强化对HTML+CSS+PS(切图)、各种布局等初期所学全部知识的综合应用，培养遇到问题时的分析与调试能力。
4.H5音乐播放器、H5小游戏（HTML+CSS+JAVASCRIPT），通过游戏应用开发，强化JAVASCRIPT基础、DOM操作和事件机制在实际场景中的运用。
5.楼层跳动、轮播、表单验证（HTML5+CSS3+jQuery）,掌握jQuery插件的运用。
电商购物网站（HTML5+CSS3+jQuery+EasyUI），掌握动画开发能力，及常见插件的使用
html5和css和js怎么使用
css可以使页面以一定的布局方式显示出来。
而js对页面的各种动态效果进行处理，如进行图片的替换，图片的滚动，层的显示与隐藏，快捷键的处理等等。
要想使用css和js，只需要引入到html中便可。
方法如下：
下面是HTML5引用css文件：
link?rel="stylesheet"?href="../css/demo1.css"
Html5引用js文件
script?src="../js/firstjs.js"/script
注意：引用时要有顺序，因为是从上往下依次执行调用，所以引用时要注意执行的顺序
怎么用html5+js+css实现如图所示的搜索下拉框，谢谢
div?class="searchModel"
select?name=""?id=""?value="2"
option?value="0"科室/option
option?value="1"疾病/option
option?value="2"医院/option
/select
input?type="text"?placeholder="请输入搜索内容"
button搜索/button
/div
style
html,
body,
div,
input,
select,
button?{
margin:?0;
padding:?0;
border:?none;
outline:?none;
}
.searchModel?{
display:?flex;
border:?1px?solid?orange;
border-radius:?4px;
overflow:?hidden;
margin:?20px;
height:?44px;
}
.searchModel?select?{
color:?#fff;
background:?orange;
padding:?0?22px;
/*?appearance:?none;?*/
/*?-moz-appearance:?none;?*/
/*?Firefox?*/
/*?-webkit-appearance:?none;?*/
/*?Safari?和?Chrome?*/
}
select::-ms-expand?{display:?none;}
.searchModel?select?option{
color:?#333;
background:?#fff;
}
.searchModel?input?{
flex:?1;
padding:?0?10px;
}
.searchModel?button?{
width:?44px;
color:?#fff;
background:?orange;
}
/style
要改变下拉选项选中的样式，就用div去模拟下拉框
js部分，button提交表单，或者是div模拟提交ajax