![](https://img-blog.csdnimg.cn/20210808233231679.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端笔记
文章平均质量分 51
一些前端的笔记和案例
安澜仙王
希望生活会越来越好
展开
-
品优购笔记
LOGO SEO优化1.logo里面首先放一个h1标签,目的是为了提权,告诉搜索引擎,这个地方很重要。2.h1里面再放一个链接,可以返回首页的,把logo的背景图片给链接即可。3.为了搜索引擎收录我们,我们链接里面要放文字(网站名称),但是文字不要显示出来。方法1:text-indent移到盒子外面(text-indent:-9999px),然后overflow:hidden,淘宝的做法.方法2:直接给font-size:0;就看不到文字了,京东的做法。4.最后给链接一个title属性原创 2021-11-09 22:08:55 · 77 阅读 · 0 评论 -
品优购代码规范
代码规范1. 概述欢迎使用品优购代码规范, 这个是我借鉴京东前端代码规范,组织的品优购内部规范。旨在增强团队开发协作、提高代码质量和打造开发基石的编码规范,以下规范是团队基本约定的内容,必须严格遵循。HTML规范基于 W3C、苹果开发者 等官方文档,并结合团队业务和开发过程中总结的规范约定,让页面HTML代码更具语义性。图片规范了解各种图片格式特性,根据特性制定图片规范,包括但不限于图片的质量约定、图片引入方式、图片合并处理等,旨在从图片层面优化页面性能。CSS规范统一规范团队 CSS 代原创 2021-10-13 21:32:14 · 131 阅读 · 0 评论 -
CSS三角应用-实现京东效果
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box1 { width: 0; height: 0; border-top: 10px solid #00B057; border-bottom: 10px solid #0055f..原创 2021-08-28 22:02:22 · 148 阅读 · 0 评论 -
仿土豆网显示隐藏遮罩案例
代码:<!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"> <title.原创 2021-08-15 16:17:16 · 412 阅读 · 0 评论 -
淘宝轮播焦点图
代码:<!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"> <title&.原创 2021-08-14 22:27:38 · 89 阅读 · 0 评论 -
PS 切图
常见的图片格式1,jpg格式:JPEG(JPG)对色彩的信息保留较好,高清,颜色较多,我们产品类的图片经常用jpg格式的2.gif格式:gif格式最多只能储存256色,所以通常用来显示简单图形以及字体,但是可以保存透明背景和动画效果,实际经常用于一些图片小动画效果3.png格式是一种新兴的网络图形格式,结合了gif和jgeg的优点,具有存储形式丰富的特点,能够保持透明背景,如果想要切成背景透明的图片,请选择png格式4.PSD图像格式PSD格式是Photoshop的专用格式,里面可以存放图层,通道,原创 2021-08-10 22:51:53 · 114 阅读 · 0 评论 -
浮动练习-手机盒子
<!DOCTYPE html><html><head> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } li { list-style: none; } .box { width: 1230px; height: 615px; margin: 100px auto; }..原创 2021-08-10 22:51:16 · 80 阅读 · 0 评论 -
浮动布局练习-li盒子并列
<!DOCTYPE html><html><head> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } li { list-style: none; } .box { width: 1226px; height: 285px; margin:0 auto; backgrou.原创 2021-08-10 22:50:39 · 254 阅读 · 0 评论 -
综合案例-浮动元素搭配标准流父盒子
代码:<!DOCTYPE html><html><head> <title></title> <style type="text/css"> .box { width: 1000px; height: 500px; background-color: green; margin: 0 auto; } .left { width: 300px; height: 100%; .原创 2021-08-10 22:50:05 · 116 阅读 · 0 评论 -
综合案例-新闻快报-去掉li之前的圆点
<!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"> <title>新.原创 2021-08-10 22:49:26 · 86 阅读 · 0 评论 -
综合案例-产品模块
代码<!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"> <title>.原创 2021-08-10 22:48:47 · 841 阅读 · 1 评论 -
padding应用-新浪导航
<!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"> <title>新浪.原创 2021-08-10 22:48:05 · 186 阅读 · 0 评论 -
nodejs 安装和配置
highlight: androidstudionodejs的安装以及配置window安装,下一步下一步就行了,接下来是配置创建好文件夹之后打开cmd 输入:npm config set prefix "D:\nodejs\node_global" 注意:这里的路径要改成你自己创建的文件夹的路径npm config set cache "D:\nodejs\node_cache" 注意:这里的路径要改成你自己创建的文件夹的路径进入环境变量对话框,在【系统变量】下新建【NODE_PA.原创 2021-08-08 23:40:21 · 839 阅读 · 0 评论 -
PS的基本操作
因为网页美工大部分效果图都是利用PS来做的,所以以后我们大部分切图工作都是在PS里面完成文件->打开:可以打开我们要测量的图片ctrl + R:可以打开标尺,或者视图->标尺右击标尺,把路面的单位改为像素Ctrl + 加号(+)可以放大视图,Ctrl + (-) 可以缩小视图按住空格键,鼠标可以变成小手,拖动PS视图用选区拖动,可以测量大小Ctrl + D 可以取消选区,或者在旁边空白处点击一下也可以取消选区...原创 2021-08-08 23:36:25 · 930 阅读 · 0 评论 -
html标签
说明浏览器内核备注IETridentIE,猎豹安全,360极速浏览器,百度浏览器firefoxGecko火狐浏览器内核SafariWebkit苹果浏览器内核chromeBlinkchrome/opera浏览器内核。Blink其实是Webkit的分支目前国内一般浏览器都会采用Webkit/Blink内核,如360,UC,QQ,搜狗等html基本结构标签标签名定义说明htmlhtml标签根标签head文档的头部原创 2021-08-08 23:35:18 · 256 阅读 · 0 评论 -
前端性能工具
browsershotsweb页面兼容性测试之browsershots工具使用PageSpeedPageSpeed 使用教程Chrome performance前端性能测试工具 Chrome performancewebpagetest测量和分析网页性能工具–webpagetestPageSpeed InsightsGoogle检测网页性能的工具PageSpeed InsightsYellowLabTools利用Docker安装Web前端性能测试工具YellowLabToolsYsl原创 2021-02-18 09:38:34 · 96 阅读 · 0 评论