2023
#AB2542 #6768A7 #939597 #F3DD69 #214E7E #EF7A68 #5A4F87 #8FB058
网页logo
<link rel="icon" type="image/x-icon" href="./favicon.ico" />
引入css文件
<link rel="stylesheet" type="text/css" href="./css/shop.css">
表单
<form action="login2.jsp" method=post>
<input type="text" name="username" placeholder="用户名">
<input type="password" name="passwd" placeholder="密码">
<button type="submit">登录</button>
</form>发光：
box-shadow: 0 0 5px #03e9f4,
0 0 25px #03e9f4,
0 0 50px #03e9f4,
0 0 100px #03e9f4;内凹阴影 box-shadow: inset 0.2rem 0.2rem 0.5rem #c8d0e7, inset -0.2rem -0.2rem 0.5rem #FFFFFF;
外凸阴影box-shadow: 0.3rem 0.3rem 0.6rem #c8d0e7, -0.2rem -0.2rem 0.5rem #FFFFFF;
logo悬浮效果：margin:0.5px;opacity:0.5;
3D盒子翻转父亲: transition: all 0.3s;transform-style: preserve-3d;底部： transform: translateY(17.5px) rotateX(-90deg);
表单输入框效果：.login-box .user-box input:focus ~ label,.login-box .user-box input:valid ~ label { top: -20px; left: 0;color: #03e9f4; font-size: 12px;}
外凸 box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
内凹阴影：box-shadow: inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #f9f9f9;
内凹聚焦（更凹）：box-shadow: inset 4px 4px 4px #d1d9e6, inset -4px -4px 4px #f9f9f9;
圆形外凸box-shadow: 0.3rem 0.3rem 0.6rem #c8d0e7, -0.2rem -0.2rem 0.5rem #FFFFFF;
页面重定向 response.sendRedirect("error.jsp");
重写地址 <% String str =response.encodeRedirectURL("shop.jsp"); %>
防盗链 if (!mess.startsWith("http://127.0.0.1:8080/ch4_practice2")){response.sendRedirect("error.jsp");}
request接受值的编码格式 request.setCharacterEncoding("utf-8");
未登录不能访问 <% if(session.getAttribute("flag")==null){response.sendRedirect("error.jsp");}%>
颜色:root { --primary-light: #8abdff; --primary: #6d5dfc; --primary-dark: #5b0eeb; --white: #FFFFFF; --greyLight-1: #E4EBF5; --greyLight-2: #c8d0e7; --greyLight-3: #bec8e4; --greyDark: #9baacf; }
input{
outline: none;
border: none;
}user-select:none; list-style-type: none;.d-elip {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap
}box-shadow: 0 0 1px rgba(0, 0, 0, 0);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
overflow: auto;
隐藏滚动条
::-webkit-scrollbar{width:0;}
// 添加监听滚轮触发事件，当滚轮滚动时触发
window.addEventListener('scroll', bindHandleScroll);
bindHandleScroll() {
// document.documentElement指向同一个容器元素，此处为body
const scrollTop = document.documentElement.scrollTop; //滚动条顶端距离所在滚动框顶的距离
const clientHeight= document.documentElement.clientHeight; //当前滚轮所在的可视窗口高度
const scrollHeight= document.documentElement.scrollHeight; //滚动条所在滚动框的高度
// 触底条件
console.log(scrollTop + clientHeight >= scrollHeight); // 触底为true
}
window.onunload() {
// 清除事件监听
removeEventListener('scroll', bindHandleScroll);
}
1.flex-direction:column;将主轴改为y轴，纵轴
2.flex-direction:row; 将主轴改为x轴，横轴
3.flex-direction:row- reverse;主轴为x轴，并且翻转
4.flex-direction:column- reverse;主轴为y轴，并且翻转
值为flex-start 所有子元素在主轴头部显示 值为flex-end 所有子元素在主轴尾部显示 值为flex-center 所有子元素在主轴居中对齐 值为space-around 所有子元素平分剩余空间 值为space-between 所有子元素先两边贴边在平分剩余空间
开启flex布局后默认为不换行
如果想要换行效果设置flex-wrap：wrap
利用align-items能够设置侧轴元素对齐的方式在子项为单项（单行） 的时候使用 align-items的值为flex-start 表示从头开始 align-items的值为flex-end 表示从结尾开始 align-items的值为center 表示居中显示 align-items的值为stretch 会将子元素拉伸
Align-content适应于换行（多行）的情况下（单行情况下无效）， 可以设置 上对齐、 下对齐、居中、拉伸以及平均分配剩余空间等属 性值 Align-item和align-content的区别单行找 align-items 多行找 align-content
flex-flow就是flex-direction和flex-wrap的合写 如：flex-flow:row wrap;
一，子项flex属性使用 Flex用来设置分配剩余空间的比列的 剩余空间是指父盒子的宽度减去没有设置flex的盒子的宽度 在将剩余空间按占比分配给各个子盒子 比列计算：当前子盒子的flex数值/所有flex的总和 二，align-self和order align-self单独的设置某一个盒子的排列方式 order order:-1;
原文链接 https://blog.csdn.net/weixin_43183219/article/details/122278840
display:grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-columns: repeat(3,100px);
grid-template-rows: repeat(3,100px);
grid-template-columns:auto 100px auto;
grid-template-rows: repeat(3,minmax(150px,300px));
（5）min-content；max-content
min-content：以网格项的最大的最小内容来占据网格轨道
max-content：以网格项的最大的内容来占据网格轨道
fr关键字：这个单位用来表示分配剩余的空间，例如：grid-template-columns: 100px 4fr 1fr，表示第一列宽100px，剩余的空间分为5份，第二列宽是第三列的四倍。
grid-template-columns: 100px 4fr 1fr;
auto-fit的最后一步是，折叠空轨道，将空轨道的空间全部平均分配给已有元素的轨道
auto-fill的最后一步时保留空轨道留白，不会折叠空轨道
注意：auto-fit 和 auto-fill 只有在容器宽度大于子元素的最小宽度总和时才有显示区别
grid-template-columns: repeat(auto-fill,minmax(90px, 1fr));
grid-template-rows: repeat(auto,100px);
grid-row-gap，grid-column-gap ；grid-gap
grid-row-gap：设置行间距
grid-column-gap：设置列间距
grid-gap：是grid-row-gap和grid-column-gap的简写形式，
书写格式：grid-gap: < grid-row-gap> < grid-column-gap>;
grid-template-columns: repeat(3,150px);
grid-template-rows: repeat(3,150px);
grid-gap: 20px 20px;
start：将网格对齐到网格容器的起始边缘：
justify-content:start;
align-content:start;
justify-content:end;
align-content:end;
justify-content:center;
align-content:center;
space-evenly：项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔
justify-content:space-evenly;
align-content:space-evenly;
space-between ：项目与项目的间隔相等，项目与容器边框之间没有间隔：
space-around：每个项目两侧的间隔相等，项目之间的间隔比项目与容器边框的间隔大一倍：
grid-column-start 属性：单元格左边框所在的垂直网格线
grid-column-end 属性：单元格右边框所在的垂直网格线
grid-row-start 属性：单元格上边框所在的水平网格线
grid-row-end 属性：单元格下边框所在的水平网格线
比如：现在我们希望上图包含“a”的div占满第一行三个格子，高度不变，我们就需要设置div1的左边框在第一根网格线，右边框在第四根网格线：
.div1{
background-color: hotpink;
grid-column-start:1;
grid-column-end:4;
}
现在，我们想让a占到bcef的位置，我们可以设置左边框在第1根网格线，右边框在第3根网格线，上边框在第2根网格线，下边框在第4根网格线：
.div1{
background-color: hotpink;
grid-column-start:1;
grid-column-end:3;
grid-row-start: 2;
grid-row-end: 4;
}
这四个属性的值除了直接指定网格线之外，还可以使用“span”直接跨越单元格，比如，我们希望a可以跨越第一行和第二行的前两个方格，那么我们就可以直接使用“span”：
.div1{
background-color: hotpink;
grid-column-start:span 2;
grid-row-start:span 2;
}
grid-column 属性：是grid-column-start和grid-column-end的缩写
grid-column: < start-line> / < end-line>；
grid-row 属性：grid-row-start属性和grid-row-end的缩写
grid-column:grid-row: < start-line> / < end-line>;
比如说现在a想跨越第一行和第二行的前三个格子：
.div1{
background-color: hotpink;
grid-column:1/4;
grid-row:1/4;
}
grid-area：指定内容放在哪个区域，可使用grid-row-start、grid-column-start、grid-row-end、 grid-column-end的合并简写形式，直接指定项目的位置，
书写格式： grid-area: < row-start> / < column-start> / < row-end> /
< column-end>;
比如说，现在我们想将a放在，正中间的格子里，我们可以在div1里面设置grid-area：
.div1{
background-color: hotpink;
grid-area: 2/2/3/3;
}
place-self:属性是align-self属性和justify-self属性的合并简写形式
书写格式：place-self:center center;
grid-auto-flow：划分网格之后元素会自动放入格子里，默认值是“row”，即是“先行后列”，这个属性可以设置元素放入格子的顺序是"先行后列"还是"先列后行"。column表示"先列后行"。内容在可编辑区域，如input，textarea
<input id="demoInput" value="hello world">
<button id="btn">点我复制</button>
const btn = document.querySelector('#btn');
btn.addEventListener('click', () => {
const input = document.querySelector('#demoInput');
input.select();
if (document.execCommand('copy')) {
document.execCommand('copy');
console.log('复制成功');
}
})
不在可编辑区域，如div
<button id="btn">点我复制</button>
const btn = document.querySelector('#btn');
btn.addEventListener('click',() => {
const input = document.createElement('input');
document.body.appendChild(input);
input.setAttribute('value', '听说你想复制我');
input.select();
if (document.execCommand('copy')) {
document.execCommand('copy');
console.log('复制成功');
}
document.body.removeChild(input);
})var download = function (href, name) {
let eleLink = document.createElement('a')
eleLink.download = name
eleLink.href = href
eleLink.click()
eleLink.remove()
}
var downloadByBlob = function (url) {
var name=url.split('/').slice(-1)
var type=url.split('.').slice(-1)
if (type == 'zip') {
window.open(url)
} else {
let image = new Image()
image.setAttribute('crossOrigin', 'anonymous')
image.src = url
image.onload = () => {
let canvas = document.createElement('canvas')
canvas.width = image.width
canvas.height = image.height
let ctx = canvas.getContext('2d')
ctx.drawImage(image, 0, 0, image.width, image.height)
canvas.toBlob((blob) => {
let url = URL.createObjectURL(blob)
download(url, name)
// 用完释放URL对象
URL.revokeObjectURL(url)
})
}
}
}
// 调用函数
var url;
if(this.$store.state.isBgImage) {
url=this.$store.state.bgImageUrl
}else{
url=this.$store.state.bgVideoUrl
}
downloadByBlob(url) .a{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: #2f3640;
height: 40px;
border-radius: 40px;
padding: 10px;
}
.a:hover .b{
width: 200px;
padding: 0 6px;
}
.a:hover .c{
background-color: wheat;
}
.b{
border: none;
background: none;
/* 取消选中搜索框时的外边框 */
outline: none;
width: 0;
padding: 0;
transition: .4s;
line-height: 40px;
font-size: 20px;
color: wheat;
}
.c{
color: #e94118;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #2f3640;
display: flex;
justify-content: center;
align-items: center;
transition: .4s;
} $(document).on('keydown', function (e) {
console.log(e.keyCode); }//r 82 g 71 b 66 p 80 y 89//需求2：
$('#j_tb input').click(function () {
//判断下面的那四个多选框是否都被选中了。
var numOfAll = $('#j_tb input').length; //获取到下面所有多选框的个数。
var numOfSelect = $('#j_tb input:checked').length; //获取到下面被选中的多选框的个数。
console.log(numOfAll + ":" + numOfSelect);
//判断
// if(numOfAll == numOfSelect){
// //全部被选中。
// $('#j_cbAll').prop('checked',true);
// }else {
// //有的有没选中。
// $('#j_cbAll').prop('checked',false);
// } //上面这个判断其实可以优化。 $('#j_cbAll').prop('checked',numOfAll == numOfSelect); });
$('#right>li').mouseenter(function () {
//获取当前鼠标移入的这个li标签的索引.
var idx = $(this).index();
idx += 9;//9不要写死,9是左边li标签的个数.
//让中间索引对应的li显示,其他的li隐藏.
$('#center>li').eq(idx).show().siblings('li').hide();
});//3.选中的到右边. $('#btn-sel').click(function () { //找到左边select下拉菜单中,被选中的option项, 把这些option项添加到右边的select下拉菜单中. $('#src-city>option:selected').appendTo($('#tar-city')); });
var $div=window.$('.admire')
var w=$div.width()/2
var h=$div.height()/2
// 倾斜倍数定义
var multiple=10
$div.on("mousemove", (e) => {
var x_=(e.offsetX-w)/w*multiple
var y_=(e.offsetY-h)/h*multiple
$div.css({'transform':'translate(-50%,-50%) rotateX('+x_+'deg) rotateY('+y_+'deg)'})
}); function ShowTip(msg, type,bgColor,borderColor,fontColor) {
var $tip = $('.tips');
var top=$tip.length*45+10
var $tip = $('<div class="tips" style="position: fixed;right:-200px;padding: 10px 20px;box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);'+
'border-radius:8px;z-index:99;border:1px solid;display: flex;justify-content: center;align-items: center;"></div>');
$('body').append($tip);
$tip.stop(false).text(msg).css({
'color':fontColor,
'background-color':bgColor,
'border-color':borderColor,
'top':top
}).animate({
right:10
},500).delay(3000).animate({
top:-100
},1000,function(){
this.remove()
});
}
function PrimaryAlert(msg) {
ShowTip(msg, 'primary','#cfe2ff','#9ec5fe','#0a58ca');
}
function SuccessAlert(msg) {
ShowTip(msg, 'success','#d1e7dd','#a3cfbb','#146c43');
}
function DangerAlert(msg) {
ShowTip(msg, 'danger','#f8d7da','#f1aeb5','#b02a37');
}
function WarningAlert(msg) {
ShowTip(msg, 'warning','#fff3cd','#ffe69c','#997404');
}
function InfoAlert(msg) {
ShowTip(msg, 'info','#cff4fc','#9eeaf9','#087990');
}
function LightAlert(msg) {
ShowTip(msg, 'light','#fcfcfd','#e9ecef','#6c757d');
}
function DarkAlert(msg) {
ShowTip(msg, 'dark','#ced4da','#adb5bd','#495057');
}
export default{
PrimaryAlert,
SuccessAlert,
DangerAlert,
WarningAlert,
InfoAlert,
LightAlert,
DarkAlert
}