【GitHub前端练手项目--50天50个项目---商品加载效果-----day08】
GitHub热门前端练手项目，纯HTML、CSS、JS实现，50天50个项目，每日一个项目，打卡活动，解读项目中的知识点
GitHub项目官网连接
50Projects in 50 Days
项目展示
代码
HTML
<!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="style.css" /><title>Content Placeholder</title></head><body><div class="card"><div class="card-header animated-bg" id="header"> </div><div class="card-content"><h3 class="card-title animated-bg animated-bg-text" id="title"> </h3><p class="card-excerpt" id="excerpt"> <span class="animated-bg animated-bg-text"> </span><span class="animated-bg animated-bg-text"> </span><span class="animated-bg animated-bg-text"> </span></p><div class="author"><div class="profile-img animated-bg" id="profile_img"> </div><div class="author-info"><strong class="animated-bg animated-bg-text" id="name"> </strong><small class="animated-bg animated-bg-text" id="date"> </small></div></div></div></div><script src="script.js"></script></body>
</html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');* {box-sizing: border-box;
}body {background-color: #ecf0f1;font-family: 'Roboto', sans-serif;display: flex;align-items: center;justify-content: center;height: 100vh;overflow: hidden;margin: 0;
}img {max-width: 100%;
}.card {box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);border-radius: 10px;overflow: hidden;width: 350px;
}.card-header {height: 200px;
}.card-header img {object-fit: cover;height: 100%;width: 100%;
}.card-content {background-color: #fff;padding: 30px;
}.card-title {height: 20px;margin: 0;
}.card-excerpt {color: #777;margin: 10px 0 20px;
}.author {display: flex;
}.profile-img {border-radius: 50%;overflow: hidden;height: 40px;width: 40px;
}.author-info {display: flex;flex-direction: column;justify-content: space-around;margin-left: 10px;width: 100px;
}.author-info small {color: #aaa;margin-top: 5px;
}.animated-bg {background-image: linear-gradient(to right,#f6f7f8 0%,#edeef1 10%,#f6f7f8 20%,#f6f7f8 100%);background-size: 200% 100%;animation: bgPos 1s linear infinite;
}.animated-bg-text {border-radius: 50px;display: inline-block;margin: 0;height: 10px;width: 100%;
}@keyframes bgPos {0% {background-position: 50% 0;}100% {background-position: -150% 0;}
}JS
const header = document.getElementById('header')
const title = document.getElementById('title')
const excerpt = document.getElementById('excerpt')
const profile_img = document.getElementById('profile_img')
const name = document.getElementById('name')
const date = document.getElementById('date')const animated_bgs = document.querySelectorAll('.animated-bg')
const animated_bg_texts = document.querySelectorAll('.animated-bg-text')setTimeout(getData, 2500)function getData() {header.innerHTML ='<img src="https://images.unsplash.com/photo-1496181133206-80ce9b88a853?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2102&q=80" alt="" />'title.innerHTML = 'Lorem ipsum dolor sit amet'excerpt.innerHTML ='Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore perferendis'profile_img.innerHTML =-'<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="" />'name.innerHTML = 'John Doe'date.innerHTML = 'Oct 08, 2020'animated_bgs.forEach((bg) => bg.classList.remove('animated-bg'))animated_bg_texts.forEach((bg) => bg.classList.remove('animated-bg-text'))
}
知识点总结
CSS
input中的placeholder属性
input中的placeholder属性可以提供该输入字段的提示信息，该提示信息会在输入字段为空时显示出来
placeholder是H5 中的新属性
<input type="text" placeholder="账号">
<input type="password" placeholder="密码">
placeholder中的信息也是支持修改样式的，需要用到伪类选择器
因为不同浏览器的兼容性不同，所以为了适配各种不同的浏览器，应该这样写
input::-webkit-input-placeholder { /* WebKit, Blink, Edge */color: #909;font-size: 10px;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */color: #909;font-size: 10px;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */color: #909;font-size: 10px;
}
input:-ms-input-placeholder { /* Internet Explorer 10-11 */color: #909;font-size: 10px;
}
CSS 边框
参考自W3School
https://www.w3school.com.cn/css/css_border.asp
可以用border属性来设置元素的边框样式，元素的边框包含上边框、右边框、下边框、左边框，如果没有特意指出是哪个边框，那么就是四个边框的样式
边框样式
可以使用border-style属性来指定边框的样式
允许以下值：
dotted- 定义点线边框dashed- 定义虚线边框solid- 定义实线边框double- 定义双边框groove- 定义 3D 坡口边框。效果取决于 border-color 值ridge- 定义 3D 脊线边框。效果取决于 border-color 值inset- 定义 3D inset 边框。效果取决于 border-color 值outset- 定义 3D outset 边框。效果取决于 border-color 值none- 定义无边框hidden- 定义隐藏边框
还可以为四个边框设置不同的样式，按照上边框、右边框、下边框、左边框的顺序书写即可
div {width: 400px;height: 200px;border-style: dashed solid double dotted;
}
边框宽度
通过border-width属性来设置边框宽度
div {width: 400px;height: 200px;border-style: dashed;border-width: 5px;
}
四个边框也是可以设置不同宽度的，还是按照上边框、右边框、下边框、左边框的顺序书写即可
div {width: 400px;height: 200px;border-style: dashed solid double dotted;border-width: 8px 5px 3px 15px;
}
边框颜色
通过border-color属性来设置边框颜色
div {width: 400px;height: 200px;border-style: dashed solid double dotted;border-width: 8px 5px 3px 15px;border-color:blue
}
同样，也是可以定义四个边框不同的颜色，只需要按照上边框、右边框、下边框、左边框的顺序书写即可
div {width: 400px;height: 200px;border-style: dashed solid double dotted;border-width: 8px 5px 3px 15px;border-color:blue red green black;
}
单独设置各边框
⭐️上面的各个属性，如果设置四个值:happy:
border-color: red green blue black;
就是上边框、右边框、下边框、左边框
⭐️如果设置三个值
直接引用element的loading,默认的是全屏loading,实际中有很多地方不需要全屏loading,只需要某部分loading,如上图 话不多说,直接上代码 封装好的loading.js i ... Python Python开发 Python语言 适合初学者练手的 10 个 有趣Python项目 想成为一个优秀的开发者,没有捷径可走,势必要花费大量时间在键盘后. 而不断地进行各种小项目开发,可以 ... Python Python开发 Python语言 适合初学者练手的 10 个 有趣Python项目 想成为一个优秀的开发者,没有捷径可走,势必要花费大量时间在键盘后. 而不断地进行各种小项目开发,可以 ... Python Python开发 Python语言 适合初学者练手的 10 个 有趣Python项目 想成为一个优秀的开发者,没有捷径可走,势必要花费大量时间在键盘后. 而不断地进行各种小项目开发,可以 ... [前端][cornerstone]cornerstone.js如何编辑图像/加载已有图像数据(以画直线为例) 首次加载图像 加载已有图像 部分参考博客:<cornerstone.js 使用总结& ... 报错以后有可能是你拉下来的项目有父工程 他的住加载类默认成你的父工程的加载类了所有找不到 在父项目中删除掉这个 在子项目中 目的: 图片预加载能够使得用户在浏览后续页面的时候,不会出现图片加载一半导致浏览不流畅的情况. 方案一 项目打开的时候要对图片进行预加载,在App.vue里面的beforeCreate添加预加载程序 ... arcgis前端(2)----->基础篇–发布一个自定义地图及加载自定义地图/底图 文章目录 arcgis前端(2)----->基础篇--发布一个自定义地图及加载自定义地图/底图 前言 & ... 目录 项目场景: 问题描述 原因分析: 解决方案: 项目场景: 最近有个Springboot项目的图片不显示 问题描述 在项目中,可以上传图片,但加载失败 系统运行正常: 在添加图片的位置中,可以选择 ... GitHub项目推荐 推荐的这几个 GitHub 项目并不是简单的 XX 管理系统,我会从下面这些方向推荐几个入门级别但是不那么 Low 的项目. "我自己是一名从事了6年web前端开发的老 ...【GitHub前端练手项目--50天50个项目---商品加载效果-----day08】相关推荐
最新文章
热门文章