html常用组件

表单

表单的构成

基本标签

form表单、input框、错误格式提示框、重置按钮、提交按钮

标签的组合

输入框名称+输入框+icon图标+错误提示框

验证组件的功能

input输入框:判断输入内容是否符合格式,不符合:在错误格式提示框显示对应内容

form表单:判断所有输入框是否符合格式要求。不符合:直接返回。符合:继续向下执行

代码





效果图

html常用组件_第1张图片

如何引入iconfont

搜送想要的图标

html常用组件_第2张图片

 添加到购物车

html常用组件_第3张图片

添加至项目

html常用组件_第4张图片

 下载到本地

html常用组件_第5张图片

 解压并且添加到vue脚手架中

html常用组件_第6张图片

引入样式并使用 

html常用组件_第7张图片

分页器 

代码





效果演示

静态页面

html常用组件_第8张图片

currentPage初始值为1 

点击按钮3

html常用组件_第9张图片

currentPage值为3 

输入55

html常用组件_第10张图片

currentPage值19

点击向后一页 

html常用组件_第11张图片

currentPage值19,没有变化

输入aaaa 

html常用组件_第12张图片

currentPage值为19,没有变化

放大镜 

代码




    
    
    
    Document
    


    

效果

html常用组件_第13张图片

轮播图 

遮盖型轮播图示例

代码




    HTML 轮播图
    


    

移动型轮播图示例

代码




    移动型轮播图
    


    
1
2
3

我的轮播图

轮播图的功能

①手动点击实现轮播图的跳转

②有左右两个buttton切换按钮

③每张图片对应一个的独有的小圆点

④切换时,具有动画效果

代码




    
    
    
    Document
    


    
1
2
3

效果图

html常用组件_第14张图片

其他

css选择器nth-child(n)

n是从1开始的,不是0

JavaScript修改css样式的方式

①元素.style.样式名="样式值"

②元素.className="类名”

③使用for循环时,注意变量i使用let来声明

侧边导航栏 

代码





效果图

html常用组件_第15张图片

你可能感兴趣的:(HtmlCss,javascript,前端,html)