2022.7.13前端学习日记

网页制作

                        

        

        一个大致的流程

1. 首先观察一行，大致分为了几个模块，然后把四个模块的宽高、间距、背景颜色写出来这样可以方便后续检查以及整体布局的细化和修改。 

2. 搜索引擎优化方法：将logo里面的a标签放上文字，设置文字的大小为0。这样子在网页搜索的时候就可以是自己的顺序靠前。

3. 最后再根据整体的位置和一些不和谐的地方进行修改。                             

        忘记以及学习到的知识点

1. 要记得进行搜索引擎优化title\description\keywords

2. 一个背景图位置负责了2件事情：改变箭头在盒子里面的位置，改变精灵图的位置，这样就会导致在精灵图中测量的位置有误差。解决方法：1.借助谷歌调试进行调试2.书写标签的时候，多添加一个盒子来调节精灵图的位置

   

3.  当发现用了vertical-align仍然没有办法使得文字和文本框居中对齐的话，有两种做法 1.分成两个部分写在div里面。2.整体是一个文本框，后面在定位将一个搜索的图标定位到上面来。

4. 伪元素添加的标签是行内，要变成行内块或者块

5. 如果行内块和行内文字不能通过vertical-align居中对齐，通过定位就可以实现

6. 做中间有很多图进行切换，就用ul嵌套li就可以，有多少个图就有多少个li

   

    圆点变白表示的是当前状态，只需要找到用户点击的li添加类名li变成白色的。
    

   

7. 当父级没有给宽度，子集又设置浮动时，可以用clearfix来清除浮动

   /* 双伪元素清除法 */
   .clearfix::before,
           .clearfix::after{
               /* clear:both; */
               content: '';
               /* 因为伪元素添加的是行内的 */
               display: table;
           }
           .clearfix::after{
               clear: both;
           }

8.  伪元素标签的写法有点遗忘

   .fresh .hd .all::after{
       /* 伪元素生成的标签是行内标签，行内写宽高不能生效 */
       display: inline-block;
       margin-left: 13px;
       content: '';
       width: 7px;
   	height: 13px;
       background-image: url(../images/sprites.png);
       background-position: 0 -110px; 
       vertical-align: middle;
   }
   

        疑惑的错误点

1. 当设置dispaly:inline-block时，小兔仙的背景图片会向下移动一行。设置为display：block时就不会出现问题。

   设置为块
    .header .logo h1 a{
       display:block;
       （diaplay:inline-block）
       width: 207px;
       height: 70px;
       background-image: url(../images/logo.png);
       background-size: contain;
       font-size: 0;
    }

   错误

   

   正确

   

    如果有知道原因的友友们，可以在评论区和我说一下是什么原因嘛？