前端笔记
关注
分享
扫一扫
文章平均质量分 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 · 120 阅读 · 0 评论 -
品优购代码规范
代码规范1. 概述欢迎使用品优购代码规范， 这个是我借鉴京东前端代码规范，组织的品优购内部规范。旨在增强团队开发协作、提高代码质量和打造开发基石的编码规范，以下规范是团队基本约定的内容，必须严格遵循。HTML规范基于 W3C、苹果开发者 等官方文档，并结合团队业务和开发过程中总结的规范约定，让页面HTML代码更具语义性。图片规范了解各种图片格式特性，根据特性制定图片规范，包括但不限于图片的质量约定、图片引入方式、图片合并处理等，旨在从图片层面优化页面性能。CSS规范统一规范团队 CSS 代原创 2021-10-13 21:32:14 · 158 阅读 · 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 · 207 阅读 · 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 · 464 阅读 · 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 · 118 阅读 · 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 · 167 阅读 · 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 · 109 阅读 · 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 · 324 阅读 · 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 · 202 阅读 · 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 · 121 阅读 · 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 · 1000 阅读 · 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 · 252 阅读 · 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 · 945 阅读 · 0 评论 -
PS的基本操作
因为网页美工大部分效果图都是利用PS来做的，所以以后我们大部分切图工作都是在PS里面完成文件->打开:可以打开我们要测量的图片ctrl + R:可以打开标尺，或者视图->标尺右击标尺，把路面的单位改为像素Ctrl + 加号(+)可以放大视图，Ctrl + (-) 可以缩小视图按住空格键，鼠标可以变成小手，拖动PS视图用选区拖动，可以测量大小Ctrl + D 可以取消选区，或者在旁边空白处点击一下也可以取消选区...原创 2021-08-08 23:36:25 · 1020 阅读 · 0 评论 -
html标签
说明浏览器内核备注IETridentIE，猎豹安全，360极速浏览器，百度浏览器firefoxGecko火狐浏览器内核SafariWebkit苹果浏览器内核chromeBlinkchrome/opera浏览器内核。Blink其实是Webkit的分支目前国内一般浏览器都会采用Webkit/Blink内核，如360，UC，QQ，搜狗等html基本结构标签标签名定义说明htmlhtml标签根标签head文档的头部原创 2021-08-08 23:35:18 · 305 阅读 · 0 评论 -
前端性能工具
browsershotsweb页面兼容性测试之browsershots工具使用PageSpeedPageSpeed 使用教程Chrome performance前端性能测试工具 Chrome performancewebpagetest测量和分析网页性能工具–webpagetestPageSpeed InsightsGoogle检测网页性能的工具PageSpeed InsightsYellowLabTools利用Docker安装Web前端性能测试工具YellowLabToolsYsl原创 2021-02-18 09:38:34 · 179 阅读 · 0 评论