至canvas之前学的所有东西复习/（项目支撑）

客官°小女子只卖身不卖艺 2023-03-01 12:34 1阅读 0赞

## 一、品优购项目（html,css静态页面） ##

> ###### 首先需要回忆一下原子类和初始化类： ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70]

1.  `<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">`

> ###### **第一点呢有一个favicon图标需要复习一下**爬去其他网站的favicon图标需要输入网址：xxxx.com/favicon.ico回车就可以下载到，自己制作需要用到ps看下面操作 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 3]

> ###### 文章标题和decription网站说明和keywords每个网站都有 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 4]

> ###### 字体图标 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 5]

@font-face {
                font-family: 'icomoon';
                src: url('fonts/icomoon.eot?3xv8f7');
                src: url('fonts/icomoon.eot?3xv8f7#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?3xv8f7') format('truetype'), url('fonts/icomoon.woff?3xv8f7') format('woff'), url('fonts/icomoon.svg?3xv8f7#icomoon') format('svg');
                font-weight: normal;
                font-style: normal;
                font-display: block;
            }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 6]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 7]

> ###### logo优化 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 8]

.logo a {
        
        display: block;
        width: 175px;
        height: 56px;
        background: url(../img/logo.png) no-repeat;
        text-indent: -9999px;
        /* font-size: 0; 也是可以的自由选择*/
        overflow: hidden;
    }

> ###### 设置圆角 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 9]

> ##### 快速创建盒子和兄弟 #####

![在这里插入图片描述][20200726103918484.png]  
![在这里插入图片描述][20200730164840667.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 10]

![在这里插入图片描述][20200726103927817.png]

> ###### 浮动小技巧：此处如果li给挤掉下去了可以把ul的宽往大放然后给ul一个overflow：hidden ######
> 
> 溢出隐藏就可以了

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 11]

> ###### vscode里Ctrl + G可以快速定位代码 ######

> ###### 新建第二页面或者子页面的时候需要把index的description 和 keywords也就是所有的meta标签复制过来通用的 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 12]

> ###### 删除线 ######

![在这里插入图片描述][20200727115636275.png]  
![在这里插入图片描述][20200727115702798.png]

> ###### 有行内块元素的地方（display: inline-block;）一般都有：vertical-align: middle;让行内块元素与行内元素垂直居中对其。 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 13]  
![在这里插入图片描述][20200727161919820.png]

> ###### 行内块在分页栏的妙用：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 14] ######
> 
> ![在这里插入图片描述][20200727170629770.png]  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 15]

> ###### 一开始是透明色： border: 1px solid transparent; ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 16]

> ###### 复习`> <`![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 17] ######

> ###### 注意css权重问题：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 18] ######

> ###### text-align: center; ######
> 
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 19]

> ###### 面包屑导航：![在这里插入图片描述][20200727173301464.png] ######

> ###### 超出的文字省略号显示 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 20]  
![在这里插入图片描述][20200729092032480.png]

> ###### 有表单的地方要有表单域from ######
> 
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 21]

> ###### input标签的搜索框：![在这里插入图片描述][20200729152414470.png] ######

> ##### css三角形的巧妙用法 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 22]  
![在这里插入图片描述][20200730145017566.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 23]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 24]

### 本地存储 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 25]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 26]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 27]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 28]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 29]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 30]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70]: /images/20230208/cff36848ded74adca6e2b236215065ef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 1]: /images/20230208/1668b0f0661f47e99b8bce0451b2517c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 2]: /images/20230208/00504cdbc7504e8482b242ded7f746d3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 3]: /images/20230208/3c0342bd733143cdb42095b3f9253353.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 4]: /images/20230208/9af01bd39590470e91f1c9c0dfdaa086.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 5]: /images/20230208/2b1677d8b7f54ffb8c3a9956297c8181.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 6]: /images/20230208/7956c3fa98e04f8a96f271d0d0bcf67c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 7]: /images/20230208/5cdc698658734c65a091273e3c70b9b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 8]: /images/20230208/e82ec6bc25a043c08ef5328f794cc5a9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 9]: /images/20230208/0c316aee51ef4ef1945d700bd5ba8e56.png
[20200726103918484.png]: /images/20230208/9645f258a86441d49ffbe2a024f4097f.png
[20200730164840667.png]: /images/20230208/6f23f9f760bd4f1a951f2eed2adfcf07.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 10]: /images/20230208/17603074dfb447a6989e1f3221c796c3.png
[20200726103927817.png]: /images/20230208/91414be059684a34ae7d595a1e956cfc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 11]: /images/20230208/9d9a37d26c504d708cc83e839ceb927d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 12]: /images/20230208/47efb36d4dad4305aa63afd5aaae0b14.png
[20200727115636275.png]: /images/20230208/30aaeefc300f4798bcf546f396a16356.png
[20200727115702798.png]: /images/20230208/cce7c4eb853349cba6088e3ac8ee6c91.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 13]: /images/20230208/ff69d88e5cc1426f907f8f56d1fa2b23.png
[20200727161919820.png]: /images/20230208/b60b2bd129c44a42ab2da0aa75470ea2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 14]: /images/20230208/5c2ff87a649d48dd9a6f4c46ccf26c19.png
[20200727170629770.png]: /images/20230208/c730384a29744387b687906ba923b169.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 15]: /images/20230208/75cddb8ca64b46b79e3b0ade24d5d573.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 16]: /images/20230208/0a9ccc71601b4e9ca3add09b9bad1602.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 17]: /images/20230208/30e2889755fd4c0d97d54da3039108a7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 18]: /images/20230208/9ec492d912024c73bd1a768ae8a3f493.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 19]: /images/20230208/ab1955ffd77b4f6eb7de5c49f6f45f94.png
[20200727173301464.png]: /images/20230208/919e9caaeed74eb7835aad48457ce940.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 20]: /images/20230208/5886b75bc977413eaf031b0a670654df.png
[20200729092032480.png]: /images/20230208/84371d8c935047cdb09fca4c66799d94.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 21]: /images/20230208/91fd4205dcea4ab6bb80903de7327576.png
[20200729152414470.png]: /images/20230208/d803509493da4b028b7e2cef3468e9f7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 22]: /images/20230208/de4fc630f29e43618813b28ae11685de.png
[20200730145017566.png]: /images/20230208/4fc75e6edc3d44fea5838eb878d8c3e0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 23]: /images/20230208/5c57af003b0d4a459f847795ccc0d2b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 24]: /images/20230208/5ae68b875e414cd7b6cb4e5f09874c12.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 25]: /images/20230208/9e22f6665fa74ad78a2f6fc7425403d4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 26]: /images/20230208/b0d2ae2976c14c2aab3e076db5890a2b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 27]: /images/20230208/564b384fb2234e8da3534493afdd06cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 28]: /images/20230208/0dc2556fc90e4aa497ed3b4f640576b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 29]: /images/20230208/ed106939edf541e1907d154f147f39c9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxNjk0MDQ5_size_16_color_FFFFFF_t_70 30]: /images/20230208/24893f510443448cb7a32cf9b9a24132.png