小实例
文章平均质量分 75
前端小实战
这个作者很懒,什么都没留下…
展开
-
前端实战:小实例5——锚点导航
前言锚点定位用于网站某一模块的定位,让用户能够通过锚点直接跳到相应模块,从而实现页面内跳转,常在网页内容较长时使用。多个锚点显示可用一个无序列表显示,利用 ul 和 li 标签,在 li 标签中使用 a 标签实现锚点。实现思路1. 使用 div 包住锚点导航栏,在其中放置列表 ul 和 li;2. 在 li 标签中放置 a 标签,href 属性设置为 #锚点值 使其指向锚点处;3. 设置多个 div 模块模拟网页内容;4. 在 div 模块中设置 id 或在 div 模块中添加 a 标签并设置原创 2022-01-29 21:01:50 · 2737 阅读 · 0 评论 -
前端实战:小实例4——三角形图标绘制
前言给一个 div 元素设置一定的宽度、高度及四条不同颜色的边框时,每个颜色对应的边框形状为梯形(如下图左),将元素的宽高设为 0 后,边框形状变为三角形(如下图右)。实现思路1. 设置一个边框颜色不同且边框形状为三角形的正方形;2. 保留其中一个三角形的背景色,将其余三个的背景色改为其所覆盖的元素的背景色或改为透明色;3. 将绘制好的小三角形通过绝对定位放置在想要的位置原创 2022-01-29 17:49:56 · 326 阅读 · 0 评论 -
前端实战:小实例3——顶部栏
前言顶部栏是用户进入网站后最先看到的部分,一般包含了网站 logo、搜索框、登录注册按钮及其他内容等。通常制作顶部栏时,会将其划分为两部分,左边放置网站 logo,右边放置其余内容部分。内容部分一般可看作一个链接列表,在 HTML 使用 ul 标签和 li 标签元素进行表示,对应标签元素的具体用法可查看 HTML常见标签介绍。而搜索框则在 HTML 使用 input 标签元素进行表示,对应标签元素的具体用法可查看 HTML常见标签介绍2]原创 2022-01-29 15:57:20 · 755 阅读 · 0 评论 -
前端实战:小实例2——滚动轮播图
前言实现思路用 div 封装轮播图,用 img 标签放置所有图片,图片均初始化为不可见(display : none)HTML + CSS + JavaScript原创 2020-06-07 23:45:00 · 1725 阅读 · 0 评论 -
前端实战:小实例1——导航栏
前言一个导航栏可看作一个链接列表,在 HTML 使用 ul 标签和 li 标签元素进行结构表示,在 CSS 中进行样式处理,对应标签元素的具体用法可查看 HTML常见标签介绍。实现思路 1. 使用 div 包装导航栏,用 ul 和 li 标签展示导航栏的基本模样 2. 在 li 标签设置子导航栏 ul 和 li,将子导航栏初始设为不可见(display : none) 3. 在 CSS 中设置伪类选择器,鼠标移入时子导航栏设为可见原创 2020-05-24 22:14:09 · 3248 阅读 · 0 评论