1.关于南京邮电大学通达学院官网的仿写的总述及情况说明

总体情况说明:

本人于国庆中秋集训考核的时候已完成对该官网的初步撰写，总体来说能够较熟练的运用padding和margin来调节盒子之间的距离，能较熟练的运用一些标签及其属性，能自行摸索试验不同的，新的css属性以加强自身问题的解决能力，能善用浏览器搜索解决问题，如bing，w3cschool，csdn等，但，对于框架布局的总体分析，元素间的整合及排版能力还不强，单纯的只会利用浮动的堆叠及盒子间距离的调控来达到使网页在自己浏览器上布局合适的效果，简单来说，生搭硬凑，忽略了布局的整体性和适配性，一但更换电脑或浏览器或进行缩放会导致其错位，

所以，本人于3天前决定全部重写，总体框架全部换新，并探索其百分之百的适配性，以下便为此次重写遇到的问题，解决方法，重要内容，体会和经验教训

遇到以及自身的错误及问题(加上之前的集训)及解决方法:

1.对选择器和css属性代码的套娃以及选择器和属性目标的准确性还不够熟练，例如以下几类:

html 复制代码

```<style>
   /*第一种*/
   .item .item1{...}
   /*第二种*/
   div .item{...}
   /*第三种*/亲儿子选择器
   div>.item或者div>ul{...}
   /*第四种*/交集选择器
   div.box1{...}
   /*第五种*/div下box1选择器全赋值
   div[class=box1]{...}
   /*第六种*/兄弟选择器
   .box+li{...}
   </style>

2.对一些元素的定位不够精准，如图片或文本，或者说，根本不熟悉定位，这个有待后期复盘时补充加强

3.粗心大意，有时候被单词拼写错位这种极其低级的问题折磨好久，甚至怀疑自己方法的对错，例如之前的那个`totle`，直接被我写成`totel`，导致我找了20分钟也没发现问题出在哪

4.之前不注意整体的布局，只是盒子的浮动堆叠以此来达到预期效果，但是这次有用心设置版心和通栏，仔细琢磨每个细节，除轮播图外完整度可以上90%了，可最直接的问题就是适配度还不够，适配缩小已没有问题，但适配放大时就能显示出来布局还是有僵硬性，其实在f12检查官网源码的时候就已经知道会存在这个问题，但实力，知识技术的深度还不够支持我完成相应的适配，所以先放放，打好基础，稳稳的沉淀自己的技术

这是10.5号4小时多的考核效果，看起来还不错吧☺️

但这其实就是一拉就毁效果

所以才狠下心来有了今天的进阶版

5.盒子和盒子之间不知道为什么(有可能是clear:both的影响)会有一个小高度的留白，宽度是整行，上网查了一下好像是流的问题，我有印象之前千锋教育好像有提到过此现象，但就是想不起来在哪集，在最近复盘的时候会留意解决以下

6.对hover等等属性的运用还不够熟练灵活，例如官网通知公告下面的日期盒子的hover效果，自己试验了好多次都没有试出来(我承认千锋教育好像讲过，但是我也想不起来，因为我都是开3倍速刷前121集滴，嘿嘿)，简单来说就是个hover的目标问题，最后在瑞哥的帮助下得以解决，简单来说，hover需要给其父元素，也就是外面的那个大个的li，然后对象设置成日期盒子，以此完美解决问题，在这里谢谢瑞哥了

html 复制代码

```.news_list_2:hover .boxnews_list_div {
  background-color: rgb(113, 176, 19);
}

7.代码的规范度还不够，虽然按照基地的安排进行了主体和css的解释，但是class选择器的命名总体较混乱，导致编码和修改的有些时候把我也搞得头晕眼花，代码的简洁和精炼度还不够，以后会加强注意一下这方面的问题，培养成习惯

8.图片的span问题，就是给图片hover后能使其换色，目前总共有四种方法，如瑞哥提供的2种iconfont方法，耀哥提供的蒙板方法，还有王维康提供的一直颜色混搭融合方法

html 复制代码

```<style>
         *{
            margin: 0;
            padding: 0;
         }
         .hover img{
            width: 100px;
            height: 100px;
            filter: grayscale(100%);
            opacity: 1;
         }
         .hover img:hover{
            filter: grayscale(0);
            opacity: 1;
         }
    </style>
</head>
<body>
    <div class="hover">
        <img src="_购物车 (1).svg" width="100px" height="100px">
    </div>
</body>
</html>

此为耀哥提供的蒙板方法，总体来说就是设置其灰色度以达到纯色改变的效果，但适用范围并不大

9.自身实力还是不够，清楚的知道自己和王佬和其他学长之间依然存在很大的距离，有很多想要学的，做的东西还没有足够技术来支撑，当然也不必为此担心，按照自己的节奏来，继续保持编程的痴迷性就好了哈

10.待补充...

核心代码讲解:

1.主要对版心和通栏进行了统一，采取css一个属性覆盖全部版心的方法，还有span也相同，例如以下

html 复制代码

```.comon {
  width: 1200px;
}
.totle:hover {
  color: rgb(9, 114, 148);
}
.news_list_li1:hover .totle2{
  color: rgb(5, 81, 107);
}
.molan_li:hover .molan_img_box{
  opacity: 0.5;
}

2.还有二级菜单的相关编写也很重要

html 复制代码

```.tonglan {
  background: #0573b8;
  height: 47px;
  width: 100%;
  clear: both;
}
.tonglanbox {
  margin: 0px auto;
}
.item1 {
  text-align: center;
  width: 134px;
  line-height: 47px;
  color: #ffffff;
  font-size: 16px;
  list-style: none;
  float: left;
  position: relative;
  display: block;
}
.item1:hover {
  background-color: rgb(110, 178, 201);
}
.item1:hover .item2 {
  display: block;
}
.item1 > ul {
  position: absolute;
}
.item2 {
  display: none;
  text-align: center;
  background-color: white;
  color: black;
  border: 0.5px solid rgb(183, 173, 173, 0.3);
  border-left: 0px;
  border-right: 0px;
  width: 134px;
  float: left;
}
.item2:hover {
  background-color: #0573b8;
  color: white;
}

3.大概就是这些吧，然后就是盒子的整体复制，图表栏列表的排布，这里就不呈现了

总结与心得:

正如瑞哥说的那样，国庆集训暴露了很多人不同阶段的问题，我也较清楚的认识到自己的问题，所以这里先为自己能决定重写的勇气点个赞

我知道，自己的实力远远不够，要走的路，学的东西还很长很多，但我突然发现，好像不知不觉，我彻底沉醉于写代码，我很喜欢写代码的那种成就感，喜欢那种充实感，那种神秘感和高级感，最最最重要的是，我能清楚的感觉到我在代码世界的创造性思维正在一点点的重塑，能清楚的感觉到天赋在一点点的回来，并发挥作用，可能不了解我的人感觉我在夸夸其词，但只有我自己清楚，编程对于我这末路天才，失败者，曾经的抑郁症患者来说，给予了多大的解脱和感动

是的，我知道我还不够强，但是，我并不焦虑于那些比我厉害的，因为我知道，迟早有一天我会到达他们的高度，并超越他们，我有坚定的自信和信念，这些的这些，都只是时间问题，而此时此刻，天赋还没回来的时候，努力便是能早日达到那天的加速器，我知道这话有些傲慢，但我决无半点傲慢之意，我很讲义气，懂得感恩，很喜欢瑞哥这种有实力又为人谦逊的人，我会以他为榜样的

那些曾经无数次打击我，唾弃我，伤害我，嘲笑我的人，谢谢，我会重回巅峰的，带着荣誉和天赋！

关于南京邮电大学通达学院官网的仿写总结

1.关于南京邮电大学通达学院官网的仿写的总述及情况说明

总体情况说明: