前端（旧）
关注
分享
扫一扫
前端旧的内容
花花叔叔
珍爱生命，不要熬夜
展开
-
优秀学生信息表格案例
代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> table {原创 2021-08-21 19:35:47 · 600 阅读 · 0 评论 -
新闻网页案例
<!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> div {原创 2021-08-21 21:32:41 · 618 阅读 · 0 评论 -
滚动的轮子案例
使用tranform进行展示<!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> div原创 2021-08-24 14:45:33 · 335 阅读 · 0 评论 -
新浪导航案例
<!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> * { ma原创 2021-08-22 09:46:49 · 575 阅读 · 1 评论 -
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> div {原创 2021-08-22 16:44:58 · 535 阅读 · 0 评论 -
卡片居中案例
<!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> body {原创 2021-08-21 21:56:00 · 606 阅读 · 0 评论 -
走马灯案例
效果展示 走马灯 代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit原创 2021-08-25 16:35:50 · 493 阅读 · 0 评论 -
盒子居中效果案例（使用位移方法）
代码<!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> .father {原创 2021-08-24 12:36:33 · 376 阅读 · 0 评论 -
网页导航hot图标按钮
代码<!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> .tupian {原创 2021-08-22 11:28:46 · 729 阅读 · 1 评论 -
普通导航案例
代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> a {原创 2021-08-21 23:21:41 · 430 阅读 · 1 评论 -
逐帧动画案例（奔跑的小人）
代码<!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> div {原创 2021-08-25 12:53:35 · 1211 阅读 · 0 评论 -
立体呈现案例
代码<!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> .father {原创 2021-08-24 22:17:40 · 370 阅读 · 2 评论 -
全民出游案例
index.hyml代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./css/index.css"> <title&原创 2021-08-25 20:19:56 · 852 阅读 · 3 评论 -
iconfont的使用（详细介绍）
今天看iconfont的使用视频，有点断片，记得基础班没有讲过，可能是资源丢掉了，总结一下使用过程。下面是网站地址https://www.iconfont.cn/使用需要登录账号，可以使用github或者微博账号登录，在右上角第一个小图标。2. 选择自己需要的图标，先随便选中一个进行演示。（引入下面的资源）点进去之后，鼠标移动上去，点击购物车图标这样子的话，右上角的购物车里面就会显示出数量3. 选择完毕之后，就点击一下小购物车选择添加到项目（第一次使用的话需要新建一个项目，原创 2021-08-24 00:05:06 · 6639 阅读 · 4 评论 -
双开门案例（使用平移效果）
代码<!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> .father {原创 2021-08-24 14:02:55 · 1149 阅读 · 0 评论 -
小米商品页半透明效果案例
<!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> .father {原创 2021-08-22 11:45:40 · 359 阅读 · 1 评论 -
华为商城卡片阴影效果
代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="....原创 2021-08-24 19:31:16 · 429 阅读 · 0 评论 -
购物车案例
代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./ico原创 2021-08-23 21:27:29 · 352 阅读 · 0 评论 -
和平精英-缩放案例
<!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> .father {原创 2021-08-24 16:00:35 · 438 阅读 · 0 评论 -
会员注册表单案例
代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <form &原创 2021-08-21 20:01:37 · 1372 阅读 · 0 评论 -
游乐园项目（rem）
这种网页的设计稿件，需要设置的就是右上角调节为标准像素就可以使用了。下边栏是用固定定位效果，+可以使用flex布局，主轴+侧轴显示。主体部分还是使用padding-bottom给下边留出边距。文件框架提前准备（引入四部分文件）<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><link rel="stylesheet" href="./lib/iconfont/iconfont.css"&g.原创 2021-08-27 12:49:24 · 1054 阅读 · 0 评论 -
bilibili 移动端vw / vh 手段制作案例
现在比较流行的是rem制作方法，但是现在大厂（b站等）已经开始尝试使用vw、vh技术了，所以要学习vw技术，vw技术的优点就在于不用引入js文件等，相对于rem比较简单，使用过程可以全部使用vw或者全部使用vh作为单位，不建议vw和vh混合使用模式。单纯将字体图标和.css文件引入就可以了<link rel="stylesheet" href="./fonts/iconfont.css"><link rel="stylesheet" href="./css/index.css">原创 2021-08-27 17:41:52 · 735 阅读 · 3 评论 -
AlloyTeam项目（Bootstrap）
制作轮播图效果现在index.html文件中复制轮播图骨架，之后在.css文件中稍微修改内容，比如说要修改不同高度下的视口高度，所以要用到媒体查询，先将图片设置为100%，之后将父盒子的高度在媒体查询中设置，至于数据的话，就直接在网站上找就可以了。导航栏部分就是从文档中复制一个导航，之后该删的删，该加的加一加，如果不满意的话，直接在.css文件中书写就可以了，使用检查元素的方式进行查找更加方便。定制服务这个就是可以更改自己想要的样式，案例中是更改导航栏变成三条线的时机i，这个时候现在导航中看说明.原创 2021-08-28 12:15:55 · 474 阅读 · 0 评论 -
移动适配（引入js知识）
代码<!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> div {原创 2021-08-26 23:09:19 · 363 阅读 · 0 评论 -
Bootstrap 栅格系统补充 类名
代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./b..原创 2021-08-27 22:17:27 · 392 阅读 · 0 评论 -
Bootstrap栅格系统 案例
第一行和第四行要记住代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet".原创 2021-08-27 22:11:24 · 636 阅读 · 0 评论 -
媒体查询 隐藏效果 案例
理想效果缩小屏幕尺寸时候，有的内容就是直接隐藏掉了，所以下面模拟这个效果。左边的粉红色的盒子是固定宽度高度的，右边的绿色的盒子就是flex：1；占用剩余空间。使用的媒体查询就是相当于一个if条件，当达到一定条件时候，display：block隐藏。代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" con原创 2021-08-27 20:23:00 · 556 阅读 · 0 评论 -
京东流式布局底边栏案例
对于流式布局，就是百分比布局，宽度适用百分比，高度自适应就可以了。这个是一种比较古老的布局显示，需要稍作了解。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l原创 2021-08-25 23:57:20 · 380 阅读 · 2 评论 -
移动端支付界面制作（小兔鲜项目）
代码.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="./l原创 2021-08-26 21:33:19 · 1353 阅读 · 0 评论 -
Bootstrap补充内容
掌握BootStrap手册用法，使用全局CSS样式美化标签简单的说，就是在标签后面加上类名就可以了<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=de.原创 2021-08-27 23:18:46 · 371 阅读 · 0 评论 -
封装自己的数学对象
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> var myMath = {原创 2021-08-31 21:57:23 · 475 阅读 · 0 评论 -
JavaScrip 字符串替换 字符串转化为数组
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> // 替换字符串原创 2021-09-07 14:18:29 · 377 阅读 · 0 评论 -
构造函数创建对象案例
构造函数创建对象的原因：解决一个一个构造对象的麻烦，简化构造对象的方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <原创 2021-08-30 22:55:15 · 503 阅读 · 3 评论 -
javascrip变量交换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> var name1 = '卡卡西'原创 2021-08-28 21:54:27 · 335 阅读 · 0 评论 -
javascrip变量的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> var name =prompt(原创 2021-08-28 20:43:47 · 319 阅读 · 0 评论 -
利用字面量创建对象方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> var obj = {原创 2021-08-30 22:21:31 · 826 阅读 · 0 评论 -
显示年龄案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> var age = prompt(原创 2021-08-29 18:40:01 · 379 阅读 · 0 评论 -
javascrip计算年龄案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> var year = promp原创 2021-08-29 19:13:05 · 425 阅读 · 0 评论 -
JavaScrip截取字符串长度
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> var str = '改革春风吹满原创 2021-09-07 14:07:47 · 321 阅读 · 0 评论 -
JavaScrip Math使用（最大值）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> console.log(Math.原创 2021-08-31 21:08:37 · 359 阅读 · 0 评论