web组件排版
关注
分享
扫一扫
WEB页页常见组件的制作方法
2019camila
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
选择卡Tab排版
选择卡Tab排版目录1 选项卡切换原理2 编写HTML文件3 编写CSS样式4 编写JS脚本1 选项卡切换原理选项卡切换包括2项关键技术：1、选项卡标签项与选项卡内容项的关联实现关联最简单的办法是建立HTML结构时就使选项卡标签项与选项卡内容项的顺序一一对应，当触发第n个选项卡标签时，就切换第n个选项卡内容区可见。2、选项卡内容项的隐藏控制显隐控制的基本逻辑是显示时添加定义displa...原创 2019-12-05 10:53:43 · 1576 阅读 · 0 评论 -
水平方向无缝滚动的图片特效
1 编写HTML文件在这里插入代码片2 编写CSS样式在这里插入代码片3 编定JS脚本在这里插入代码片原创 2019-12-05 10:39:04 · 1883 阅读 · 0 评论 -
CSS绘制三角形图标
1CSS绘制三解形图标原理对内容容器进行相对定位，对内容容器的伪元素:before和:after进行绝对定位，设置top、right、bottom、left来控制三角形的绘制位置，设置伪元素:before和:after的宽高均为0，并定义上右下左边框样式，此时上右下左的边框线变成了4个三角形，通过设置某些边的边框颜色透明实现三角形隐藏，从而实现三角形图标的绘制。2 HTML结构<!DO...原创 2019-12-05 10:25:03 · 1632 阅读 · 0 评论 -
列表排版
列表排版目录1 列表类型1.1无序列表1.2 有序列表1.3 自定义列表2 列表相关样式2.1 list-style-type属性2.2 list-style-image属性2.3 list-style-postion属性3 新闻列表的实现3.1 编写HTML文件3.2 编写CSS样式1 列表类型HTML定义了有序列表（ol）、无序列表（ul）和定义列表（dl）三种不同的列表类型。有序列表为每...原创 2019-12-05 09:27:26 · 2499 阅读 · 0 评论 -
图片排版
图片排版目录1 CSS图像风格样式1.1 圆角图片1.1.1 图片效果1.1.2 样式定义1.2 圆形图片1.2.1 图片风格1.2.2 样式定义1.3 简单白色框架图片1.3.1 图片效果1.3.2 样式定义2 叠加样式图片标题排版2.1 叠加式图片标题效果2.2 HTML文档2.3 CSS样式1 CSS图像风格样式1.1 圆角图片1.1.1 图片效果1.1.2 样式定义.img-r...原创 2019-12-04 17:24:26 · 2178 阅读 · 0 评论 -
轮播图排版
1 编写HTML文件<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>美丽的校园</title> <link rel="stylesheet" href="css/carousel.css" /> <script sr...原创 2019-12-05 09:23:51 · 2171 阅读 · 1 评论