前端网页设计小技巧
文章平均质量分 53
一位即将成功的野男人
这个作者很懒,什么都没留下…
展开
-
用前端实现圣诞树以及前端开发部分知识的讲解
圣诞树源码粗讲:用前端实现圣诞树以及前端开发部分知识的讲解 效果展示: 圣诞树源码 <!DOCTYPE HEML PUBLIC> <html> <head> <meta charset="utf-8"> <style> html, body { width: 100%; height: 100%; marg.原创 2021-12-16 22:30:08 · 1148 阅读 · 0 评论 -
利用JS的onchange事件拖动进度条变换背景颜色
废话不多说,上图 点击右侧进入演示网页 大概思路是这样的,首先建立一个input框,然后type改成range,min="0" ,max="255" 即0到255表示黑到白的一个过程,并标注id="slider"。 然后把要修改的背景颜色的div或者body的id标注为changecolor。 最后用JS中的onchange事件函数将两个id连接起来,并注入事件。 不要忘了给进度条修改样式,因为不同的浏览器会有不同的样式,有的很好看,有的很复古。 代码如下 HTM...原创 2021-07-11 23:21:48 · 663 阅读 · 0 评论 -
利用CSS中的transform、transition等动画效果制作拍立得卡片效果
首先我们要知道拍立得的版型样式 即图片+留白 先点击右侧演示网页演示效果 版型样式为一个大盒子装一个小盒子图片和文字。CSS里面要记得图片和文字分别水平居中,用text-align,还有hover鼠标事件触发事件和transform的scale(),还有transition的事件过渡,让画面过渡更自然,再加上box-shadow,让其效果更突出,不与白色背景起冲突。 以下是HTML代码 <div class="content_box"...原创 2021-07-11 20:40:00 · 425 阅读 · 0 评论 -
JS、CSS解决标签颜色在黑色和白色背景颜色重叠问题/标签栏随背景切换变化而变化
如图,当标签在红框区域颜色可以正常显示,但到红框下面的一些区域则和白色背景颜色相重叠。则不显示。 我们可以改变标签栏的样式,让其在白色背景时变成黑色。 如图下所示 点击右侧 演示网页 即可演示网页 其中用到了JS和html中的onmouseover=“function()”事件。 在颜色变化的标签div中打一个id="nav_content", 在颜色和标签颜色重叠的div(如图中的蓝色区域)中写一个onmouseover=“function()”事件, 当鼠标移动到蓝色区域时...原创 2021-07-09 23:32:29 · 1467 阅读 · 0 评论