Web前端
关注
分享
扫一扫
文章平均质量分 53
HTML、CSS、Javascript、框架
程序员班长
武汉计算机硕士在读，热爱计算机也不想秃头
展开
-
不用框架手写新闻首页界面（大佬勿喷）
然后利用JavaScript设置一个定时器，每隔2s就会时全部图片整体的margin-top上移一个图片的垂直高度，这样在盒子中展示的图片就会每隔2s自动切换到下一张，建立一个索引，当在盒子中的图片为最后一张时，索引归零，重新计数，margin-top恢复初始值。左边是几个板块的标题，右边是每个板块对应的内容。然后利用JavaScript设置鼠标浮动事件，当鼠标放到某个板块标题上时，将对应的内容设置成display:block，这样就可以实现鼠标放到某个板块显示某个板块内容的效果了。原创 2020-05-26 15:09:20 · 462 阅读 · 0 评论 -
前端之登录注册页面案例
一、效果图（1）登录界面（2）注册界面二、详细设计（1）登录界面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>登录界面</title> <style> ...原创 2020-05-08 16:53:24 · 41081 阅读 · 16 评论 -
你需要了解的纯原生JS实现带有功能的前端购物车
先来介绍一下都有哪些功能叭添加购物车，清单库存数量会对应减少，库存不足会警告 从购物车删除，库存将返回清单，总价相应变化 点击"-"，数量会返回到清单库存 点击"+"，清单中库存会减少，库存不足会警告 勾选或取消勾选商品总价会相应变化 总价默认计算被选中的商品，添加商品到购物车时默认被选中 可以进行全选和反选，并一键删除，库存返回清单，总价改变好嘞，由于代码的注释已经非常的详细了...原创 2020-04-08 18:36:13 · 637 阅读 · 3 评论 -
纯JS实现省市县三级下拉联动
纯JS实现省市县三级下拉联动代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>省市县三级下拉联动-李康</title> <style> fieldset{ ...原创 2020-04-08 10:23:52 · 430 阅读 · 2 评论 -
震惊！Canvas原来还能这么搞！代码画一个时钟出来
学会了Canvas之后，发现canvas几乎什么都能画，看着自己家里的时钟突发奇想，能不能利用canvas画一个时钟出来呢？说搞就搞！直接上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>canvas动态时钟</tit...原创 2020-04-01 15:53:05 · 285 阅读 · 0 评论 -
前端之Tab切换
一、代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Tab栏目仿写</title> <style> *{ padding: 0; margin: 0; lis...原创 2020-03-19 14:58:24 · 405 阅读 · 0 评论 -
JavaScript实现轮播图
功能：1、图片会自动播放，鼠标放上面会暂停播放2、点击左右出现的箭头可以切换到上一张/下一张图片3、点击序号会跳转到对应图片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>当当网首页轮播图-By小黑</t...原创 2020-03-19 14:49:12 · 997 阅读 · 0 评论 -
京东每日特价专栏仿写
关于图片素材，在京东官网（注意是www.jd.com不是global.jd.com）可以找到，找不到的话留言我私发给你。一、代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>京东每日特价</title> ...原创 2020-03-16 12:34:58 · 658 阅读 · 0 评论 -
关于HTML头文件中的meta
META标签是HTML语言HEAD区的一个辅助性标签，它位于HTML文档头部的<HEAD>标记和<TITLE>标记之间，它提供用户不可见的信息。meta标签通常用来为搜索引擎robots定义页面主题，或者是定义用户浏览器上的cookie；它可以用于鉴别作者，设定页面格式，标注内容提要和关键字；还可以设置页面使其可以根据你定义的时间间隔刷新自己,以及设置RASC内容等级，等...原创 2019-12-28 09:59:15 · 641 阅读 · 0 评论 -
HTML导航页面结构
先放效果图代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>页面结构</title> <style> body,html{ margin:...原创 2019-12-18 13:04:27 · 1089 阅读 · 0 评论 -
Web前端之登录表单
仿照书上的例子写的一、HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>登陆表单</title> <link rel="stylesheet" href="css/style.css" ty...原创 2019-12-04 18:06:56 · 973 阅读 · 0 评论 -
CSS之Background-size:cover
background-size:100% 100%把背景图进行横向和纵向的拉伸，图片比例随之改变，可能导致图像失真background-size: cover把背景图扩展至足够大，直至完全覆盖背景区域，图片比例保持不变且不会失真，但某些部分被切割无法显示完整背景图像一般和如下语法连用background-image: url(../images/1.png);background-...原创 2019-12-04 16:01:08 · 2907 阅读 · 0 评论 -
CSS3之导航栏
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>导航栏</title> <style> a{ text-decoration: none;/*去除下划线*/...原创 2019-11-27 20:06:54 · 196 阅读 · 0 评论 -
css3之box-shadow
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Box-shadow</title> <style> .box{ width: 500px; ...原创 2019-11-27 12:14:49 · 186 阅读 · 0 评论 -
黑马书城项目实战
先放效果图一、HTML代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>黑马书城项目实战</title> <link rel="stylesheet" href="css/bookstore...原创 2019-11-27 12:05:18 · 2045 阅读 · 2 评论 -
CSS3多列布局
代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>多列布局</title> <style> p{ width: 1500px; ...原创 2019-11-19 20:37:02 · 203 阅读 · 0 评论 -
CSS3构建左侧导航栏
废话不说，先上图代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>设计左侧导航栏</title> <style> a{ text-decora...原创 2019-11-12 20:43:31 · 1081 阅读 · 0 评论 -
绘制HTML5的Logo
仿照黑马程序员的教程自己写的，总结一些经验一、HTML代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>HTML5 logo</title> <!--链入式样式表--> <l...原创 2019-11-07 11:30:51 · 7250 阅读 · 0 评论 -
CSS选择器
1.标签选择器根据指定的标签名称，在当前界面中找到所有该名称的标签，然后设置属性格式：标签名称{ 属性名称:属性值}注意点：标签选择器选中的是当前页面中所有该名称的标签2.id选择器根据指定的id找到对应的标签，然后设置属性格式：#id名称{ 属性名称:属性值}注意点：* 每一个html标签都有id属性* 同一个界面...原创 2019-11-07 11:30:03 · 241 阅读 · 0 评论 -
CSS中的margin和padding
padding和margin都是边距的含义：padding是控件的内容相对控件的边缘的边距，称为内边距；margin是控件边缘相对父空间的边距，称为外边距。一、举个例子<div style="background-color: red;width: 120px;height: 120px;margin: 10px;padding: 15px;"> <div st...原创 2019-11-07 10:44:24 · 1304 阅读 · 0 评论 -
CSS3的绝对定位与相对定位
一、position 的四个值：static、relative、absolute、fixed。绝对定位：absolute 和 fixed 统称为绝对定位相对定位：relative默认值：static二、relative定位与absolute定位的区别实例：HTML代码：css代码：初始效果：1、relative：相对于原来位置移动，元素设...转载 2019-11-06 18:22:57 · 454 阅读 · 0 评论