![](https://img-blog.csdnimg.cn/20210525190919972.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS3
文章平均质量分 58
CSS
Etui۹(・༥・´)و ̑̑
拉屎之于工作,如同代码之于生活。
展开
-
三个漂亮的网页登录页面源码及素材——可用于前端初学者练习HTML&CSS
注:这三个登录页面涉及到的图片素材可自行寻找,字体图标素材可以在阿里字体图标库获取(https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2),如需原版素材可联系作者QQ(3416252112)废话不多说先上图为敬!!文件目录结构FIRST1、html源码(index.html)<!DOCTYPE html><html lang="zh"><head> <me原创 2021-10-11 19:11:01 · 35495 阅读 · 14 评论 -
jQuery两行代码实现手风琴效果!!!!!!(本文有点水,别介哈)
废话不多说,直接上图 **↓** 源码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"原创 2021-05-28 21:53:08 · 187 阅读 · 0 评论 -
前端制作科技感网页登录界面
注:如需背景图请联系作者(QQ:3416252112)效果图:源码:<!DOCTYPE html><html><head> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>科燃原创 2021-04-24 15:56:21 · 5782 阅读 · 3 评论 -
HTML/CSS/JS制作网页中的二级下拉菜单
注:该练习中涉及的move方法(移动效果)可参考博文“JavaScript_网页中使用按钮控制图形的移动效果(https://editor.csdn.net/md/?articleId=115607200)”若对此练习有所疑惑可参考尚硅谷李立超老师在B站的js基础教程(https://www.bilibili.com/video/BV1YW411T7GX?p=138)下面我们看一下该下拉菜单的效果图:以下为源码和解析:css文件:second.css@charset "utf-8";/* s原创 2021-04-15 20:44:08 · 1901 阅读 · 6 评论 -
JavaScript制作网页中的轮播图(带有过渡效果)源码解析
注:本练习主要以效果图和源码解析的方式介绍,如有疑问可参考尚硅谷李立超老师的JS基础教程(https://www.bilibili.com/video/BV1YW411T7GX?p=136);效果图:![在这里插入图片描述](https://img-blog.csdnimg.cn/20210413203106801.gif源码解析:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8原创 2021-04-13 20:33:55 · 867 阅读 · 1 评论 -
JS定时器_制作网页中图片的轮播效果
效果图:源码及解析:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <原创 2021-04-11 21:23:58 · 362 阅读 · 2 评论 -
JavaScript_Browser对象(BOM)的使用方法及特点
注:本案例主要介绍Navigator对象、History对象、Location对象的使用方法及特点1.BOM简介BOM浏览器对象模型BOM可以使我们通过JS来操作浏览器在BOM中为我们提供了一组对象,用来完成对浏览器的操作BOM对象Window代表的是整个浏览器的敞口,同时window也是网页中的全局对象Navigator代表的当前浏览器的信息,通过该对象可以来识别不同的浏览器Location代表当前浏览器的地址栏信息,通过Location可以获取到地址栏信息,或者搜索浏览器跳转页面原创 2021-04-10 20:53:00 · 348 阅读 · 0 评论 -
JavaScript中DOM键盘事件,使用键盘方向键控制图形的移动
注: 键盘事件 onkeydown 按键按下 如果按住按键不松,则该事件会连续触发 当onkeydown连续触发时,第一次和第二次之间会间隔时间稍长,其他的会非常快 这种设计是为了防止一些误操作 onkeyup 按键被松开原创 2021-04-10 15:45:16 · 1046 阅读 · 2 评论 -
如何使用JavaScript制作网页中跟随鼠标移动的图形?
注:本案例主要演示 网页中的几个坐标属性的用法(clientX,clientY,pageX,pageY),如有疑问可去B站观看尚硅谷李立超老师的JS教程(https://www.bilibili.com/video/BV1YW411T7GX?p=112&spm_id_from=pageDriver)。效果图:源码及解析:<!DOCTYPE html><html> <head> <meta charset="UTF-8">原创 2021-04-05 14:37:13 · 738 阅读 · 0 评论 -
前端制作简单的“注册页面——阅读协议”页面及效果
注:如对文中的scrollHeight、scrollTop、clientHeight属性有所一伙,请参考博文“JavaScript中元素client、offset、scroll相关属性的应用”(链接:https://blog.csdn.net/m0_47015897/article/details/115426441)效果图:源码及解析:<!DOCTYPE html><html> <head> <meta charset="UTF-原创 2021-04-04 11:09:06 · 3563 阅读 · 0 评论 -
JavaScript中元素client、offset、scroll相关属性的应用
注:本联系主要讲解的属性为:clientHeight、clientWidth、offsetParent、offsetWidth、offsetHeight、offsetLeft、offsetRight、scrollWidth、scrollHeight、scrollTop、scrollLeft效果图:源码及解析:<!DOCTYPE html><html> <head> <meta charset="UTF-8">原创 2021-04-04 10:59:44 · 206 阅读 · 0 评论 -
JavaScript使用DOM修改、操作和读取CSS样式
注:本案例通过单击button按钮来体现css样式被修改和读取的过程操作CSS样式效果图:读取CSS样式效果图:DOM操作CSS样式源码及解析:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>使用DOM操作CSS样式</title> <style>原创 2021-04-03 20:57:36 · 389 阅读 · 0 评论 -
JavaScript实现向表格中添加记录和删除记录(JS添加删除节点练习)
注:本案例适合dom初学者练习节点的删除添加操作。效果图:源码及解析:html & JavaScript源码:<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>添加删除记录练习</title> <link rel="stylesheet"原创 2021-03-30 20:33:58 · 640 阅读 · 0 评论 -
JS控制复选框选中状态
效果图:源码:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>全选练习</title> <script type="text/javascript"> window.onload = function(){原创 2021-03-27 20:31:52 · 3926 阅读 · 1 评论 -
JavaScript_DOM查询练习
注:具体视频教程可参考尚硅谷李立超老师教程(https://www.bilibili.com/video/BV1YW411T7GX?p=94)本练习主要适用于初学者,我在源码中适当加入了文本注释以便初学者参考。运行界面:css文件:@CHARSET "UTF-8";body { width: 800px; margin-left: auto; margin-right: auto;}button { width: 300px; margin-bottom: 10px;}#原创 2021-03-27 15:37:27 · 286 阅读 · 0 评论 -
JavaScript_网页中单击按钮切换图片
本案例效果如图:实现源码:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>图片切换</title> <!-- <link rel="stylesheet" href="./css/reset.css"> --> <style> *原创 2021-03-25 19:52:59 · 644 阅读 · 1 评论 -
前端入门学习路线图(思维导图)
这个路线图是我刚开始学习前端时给自己规划的,希望对你有所帮助^ _ ^!原创 2021-03-15 16:56:35 · 532 阅读 · 0 评论 -
CSS/HTML静态购物网站项目源码解析(品优购)——该项目包含主页、注册页、列表页三个网页
注:该项目所涉及的素材文件请QQ联系作者(Etui:3416252112)首先:上图!index.html------主页register.html-------注册页list.html-----列表页摘要:作为一个前端初学者,这是我学完html和css基础后做的第二个练习(第一个是小米商城),在练习过程中也遇到了很多困难,好在最终都一一解决,这是一个成长的过程!这个项目是我在B站中pink老师的教程里看到的,我先是自己尝试敲了一遍,然后再回头看一遍老师的方法。(我感觉这种学习方法很不错原创 2021-02-19 16:33:21 · 10247 阅读 · 6 评论 -
JavaScript强制类型转换与运算符
注:练习一主要讲述“显式”的三种强制转换,即:1、其他数据类型转换为String型2、其他数据类型转换为Number型3、其他数据类型转换为Boolean型练习二为五个运算符的使用,在练习二中也包括“隐式”的强制转换,例如:通过+、-、*、/等运算符可以将非数值的变量或常量进行运算,且结果为数值型。练习一:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2021-02-19 15:31:10 · 207 阅读 · 0 评论 -
CSS&HTML&REM制作手机端网页(小练习)
效果图:html文件:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> &l原创 2021-02-03 12:17:22 · 978 阅读 · 1 评论 -
CSS/HTML制作在网页中持续旋转的六面体
注:更改图片路径即可实现重新引用效果图:源码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>复仇者联盟</title> <link rel="s原创 2021-01-30 17:17:26 · 1419 阅读 · 3 评论 -
CSS/HTML制作网页中动态时钟解析
简介:该案例中旋转的并非是指针,而是将背景设置为透明色的指针父元素。对于实现钟表效果,只需要将指针父元素块在clock中居中,然后指针在其父元素中居中,让指针父元素旋转即可。效果图:背景:源码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in原创 2021-01-30 16:26:08 · 682 阅读 · 1 评论 -
HTML、CSS制作小米商城网页首页源码解析
简介:这是我学习前端以来仿写的第一个项目,沿着尚硅谷李立超老师的教学视频学习。在仿写这个项目的过程中即巩固了这两周以来的知识,也增加了一些小经验(主要是老师传授),同时也让自己更加有信心学习下去。相信自己一定会实现自己的小梦想!加油!小米官网效果:效果图:文件目录:HTML文件index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &原创 2021-01-29 17:32:49 · 30707 阅读 · 20 评论 -
CSS/HTML制作电影网站中的电影卡片
简介:本案例宽度固、底部评分栏宽高固定,总体高度可根据文量和图片的大小自动调整效果图(通过不同文字和图片呈现效果):源码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原创 2021-01-27 11:04:56 · 5458 阅读 · 1 评论 -
CSS/HTML制作京东商城顶部导航条
京东商城原网站:效果图:源码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>京东商城导航条</title> <link rel="stylesh原创 2021-01-24 17:14:30 · 4306 阅读 · 4 评论 -
CSS高度塌陷问题的解决方案
以下两个案例分别使用HTML标签和CSS伪元素解决高度塌陷问题<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>高度塌陷的解决方法</title> <sty原创 2021-01-23 10:45:02 · 188 阅读 · 0 评论 -
CSS/HTML制作W3School网页的导航条
W3School原网页:效果图:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>W3School导航条</title> <link rel="sty原创 2021-01-22 17:13:49 · 1792 阅读 · 0 评论 -
CSS/HTML制作网易新闻右侧新闻栏的解析及步骤
网易新闻原网站:效果图:源码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>网易新闻右侧列表</title> <link rel="styles原创 2021-01-22 11:50:22 · 2749 阅读 · 0 评论 -
CSS/HTML制作京东商城左侧导航栏的解析及步骤
京东商城原网站:效果图:该仿制效果与原网站效果相似度百分之九十五以上源码:<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>京东商城左侧导航条</title>原创 2021-01-22 11:42:25 · 2574 阅读 · 0 评论 -
使用CSS/HTML制作网页中简单的图片列表
效果图:源码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片的列表</title> <link rel="stylesheet" href=".原创 2021-01-22 11:36:33 · 1091 阅读 · 1 评论 -
CSS行内元素与盒子模型
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>行内元素的盒模型</title> <style> .s1{原创 2021-01-22 11:33:40 · 398 阅读 · 0 评论 -
CSS盒模型的使用方法(边框、内边距、外边距)
一、边框<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子模型_边框</title> <style> .box1{原创 2021-01-22 11:30:50 · 335 阅读 · 0 评论 -
CSS中的长度单位和颜色单位—像素、百分比、em、rem、rgb/rgba、hsl/hsla用法及区别
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>单位</title> <style> /* 长度单位:原创 2021-01-20 11:11:29 · 451 阅读 · 0 评论 -
CSS学习笔记——属性选择器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* [原创 2020-12-27 20:43:17 · 172 阅读 · 0 评论 -
CSS3学习笔记——HTML网页中引用CSS的三种方式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 第二种方式: -将样原创 2020-12-26 15:31:44 · 341 阅读 · 0 评论 -
CSS3学习笔记——关系选择器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 为d原创 2020-12-26 15:28:41 · 214 阅读 · 0 评论 -
CSS3学习笔记——复合选择器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 将class为red的元素设原创 2020-12-26 15:27:33 · 204 阅读 · 0 评论 -
CSS选择器的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 将所原创 2020-12-26 15:25:16 · 151 阅读 · 0 评论