官网复盘总结23.10

phy_winter
199 阅读6分钟

目前仍存在问题

  • 关于溢出属性仍不熟练（感觉是优先级问题/）
  • 关于优先级问题
  • 关于布局问题

正片开始，三二一上代码

首先清边距

*{
    margin: 0;
    padding: 0;
}

头部

分别用top，header两个div来表示欢迎栏和logo搜素栏

接下来是蓝色的banner导航栏的设置

首先头部的首页等内容采用ul li再设置浮动并调节边距

难点一：关于隐藏下拉菜单的hover

考核时做的它是这样的

问题是：鼠标移动到比如学院概况后，只显示蓝色的下拉栏而下拉栏里的的字不显示，只有你鼠标划到下面时才会有如图这样的显示

出错原因： 原来我把hover这个伪类属性作用在school这些弹出来的元素上了

联想截图_20231013195352.png

所以解决办法为：

  1. 我对hover属性作用在nav1上，即可正常显示
  2. 以及对其school边框进行了具体设置，使其和nav可以重合对应
 <div class="banner">
        <ul>
            <li class="nav">首页</li>
            <li class="nav1">学院概况
                <ul class="school1">
                        <li class="p1">学院简介</li>
                        <li class="p1">理事会</li>
                        <li class="p1">监事会</li>
                        <li class="p1">院长书记寄语</li>
                        <li class="p1">学院领导及分工</li>
                        <li class="p1">校园风光</li>
                </ul>
            </li>
            <li class="nav2">部门设置
                <ul class="school2">
                    <li class="p1">党政群部门</li>
                    <li class="p1">教学科研单位</li>
                    <li class="p1">直属单位</li>
            </ul>
            </li>
            <li class="nav3">招生就业
                <ul class="school3">
                    <li class="p1">招生之窗</li>
                    <li class="p1">就业指导</li>  
            </ul>
            </li>
            <li class="nav4">综合服务
                <ul class="school4">
                    <li class="p1">学院校历</li>
                    <li class="p1">作息时间</li>
                    <li class="p1">班车信息</li>
                    <li class="p1">地理交通</li>
            </ul>
            </li>
            <li class="nav5">信息公开
                <ul class="school5">
                    <li class="p1">会议信息</li>
                    <li class="p1">专业综合评估</li>
            </ul>
            </li>
            <li class="nav">主题教育网</li>
            <li class="nav">统一认证平台</li>
        </ul>
    </div>

css格式为：

.nav1 {

    width: 150px;
    height: 42px;
    float: left;
    list-style: none;
    line-height: 42px;
    font-size: 18px;
    color: white;
    text-align: center;
    position: relative;


}

.nav1:hover {
    background-color: #75a1e1;
    /* height: 248px; */
}
.school1{
        width: 150px;
        height:248px;
        background-color: white;
        box-shadow: 0 1px 5px #aaa;
        overflow: hidden;
        z-index: 10;
        display: none;
    }
    .nav1:hover .school1{ 
        width: 150px;
        height: 248px ;
        display: block;
    } 
    
     /* 下面是对隐藏框中文字设置 */
       .p1{
        /* margin: 0;
        padding: 0; */
        width: 150px;
        height: 40px;
        border:1px solid black;
        background-color:white;
        list-style: none;
        /* display: none; */
        font-size: 15px;
        color: black;
        text-align: center;
        padding-right: 10px;    
    }
    .p1:hover{
        display:inline-block !important;
        background-color:#1a72b7;
        color:white;
        font-size: 15px;
      
    }

结果如下：

联想截图_20231013202706.png

body部分

难点二：轮播图的设置

千锋第168集

p.s. 我们采用动画的形式，对轮播图进行设置，其中属性如下

animation:swiperrun 5s linear infinite;
    /* infinite 无限循环     linear 匀速 */

【无缝隙轮播】： 为了到最后一张能够很自然地过渡到最前面，我们在原本的轮播里再加上第一张图片，所以在播放到最后一张的时候再跳转到第一张（由于最后一张和第一张照片相同）所以就不会显得生硬了 QQ图片20231014091553.jpg

BUT 此时有一个问题就是，你的轮播图会一直无限循环，且在单独的每张上并不会停留 此时代码是

@keyframes swiperrun{
    0%{
        transform: translateX(0);
    }
    14%{
        transform: translateX(-1200px);
    }
    28%{
        transform: translateX(-2400px);
    }
    42%{
        transform: translateX(-3600px);
    }
    56%{
        transform: translateX(-4800px);
    }
    70%{
        transform: translateX(-6000px);
    }
    84%{
        transform: translateX(-7200px);
    }
    100%{
        transform: translateX(-7200px);
    }

而我们想要达到的效果是它可以在每一张上停留一会，所以我们只需把每张图片的百分比拆开写，我拿第一张举例

  0%{
        transform: translateX(0);
    }
    5%{
        transform: translateX(-1200px);
    }
    14%{
        transform: translateX(-1200px);
    }

而轮播图是一直在动的，而如果你想要当鼠标放在某张图片时停止的话，需要再给你的swiper-wrapper加一个属性，即暂停paused，（鼠标拿走就继续run了）

.swiper-wrapper:hover{
    animation-play-state:paused;
}

.完整代码为

<div class="swiper">
    <div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img  src="./body/1.jpg" style="width: 1200px; height: 450px;">
        </div>
        <div class="swiper-slide">
            <img  src="./body/2.jpg">
        </div>
        <div class="swiper-slide">
             <img src="./body/3.jpg" >
        </div>
        <div class="swiper-slide"> 
            <img  src="./body/4.jpg" >
        </div>
        <div class="swiper-slide">
             <img src="./body/5.jpg">
        </div>
        <div class="swiper-slide">  
            <img  src="./body/6.jpg">
        </div>
        <div class="swiper-slide">
            <img  src="./body/1.jpg" style="width: 1200px; height: 450px;">
        </div>
        </div>
        
    </div>
</div>
</div>

css为

.swiper{
    width: auto;
    height: 450px;
    background-color: #f5f5f5;
}
.swiper-container{
    width: 1200px;
    height: 450px;
    margin: 0 auto;
    overflow: hidden;
    background-color: #f5f5f5;
}
.swiper-container img{
    width: 1200px;
    height: 450px;
}
.swiper-wrapper{
    width: 9999px;
    animation:swiperrun 5s linear infinite;
    /* infinite 无限循环
    linear 匀速 */
}
.swiper-wrapper:hover{
    animation-play-state:paused;
}
.swiper-slide{
    float: left;
}
/*@key如上面的代码*/

难点三：下拉栏与大图部分的BUG

疑惑点1:为什么在最开始贴图的时候,下拉栏并不会把大图挤开，而在设置了轮播图之后却会被挤开

疑惑点2:大图部分的左右两边的颜色如果想要与下方灰色相同的话应该怎么设置，通过对css的设置发现，左右白色部分应该属于边距，通过对背景颜色的设置并不能改变其颜色 即如下：

联想截图_20231012232644.png

疑惑点1解决办法：

原来是我对nav：hover设置了高度，所以导致它的高度改变了，所以会挤压下面的轮播部分。

hover里不要再写高度了.....

.nav1:hover {
    background-color: #75a1e1;
    /* height: 248px; */
}

疑惑点2解决办法：

因为你原来设置的是margin：0 auto，只是单独设置了你的轮播图，并且存在边距且默认是白色的，所以你去改背景颜色是没有用的。

只要在轮播图的div外再套一个div作为你的结构，并设置背景颜色即可（具体css代码在上面）

body内容栏部分

四个内容栏的书写，思路大概是

  1. 搭建一个大的div，命名为under作为body整体
  2. 在under中创建四个box作为基本结构
  3. 在每个box中相应地分别填入内容
  4. 而例如box3中的文字会有hover属性，日期并没有，所以我这里是选择每行的内容设置一个div，在这个div里面在设置两个div，让他们浮动起来，再对有hover变色需求的文字进行单独设置，而由于浮动后位置并不是很契合，所以我又用了定位让他们展现为如图所示
  5. 图片与文字的div设置同理，都是一个div套几个div

现在是这样的

联想截图_20231014105028.png

buttom部分

tip：buttom和banner部分均用ul li然后再用浮动排成一排

1.

这里需要注意一个点：关于对图标hover变化的设置，我们选取透明度的方法

.icon img {
    filter: grayscale(100%);
    opacity: 1;
}

.icon:hover img {
    filter: none;
    opacity: 0.6;
}

2.

关于下面的微信图标以及其hover出来的二维码的编写，我是这样写的：一个大div里分别放这两个小div

<div class="wechat">
    <div class="ewm">
        <img src="./box/联想截图_20231011175303.png" style="width: 120px;">
</div>
<div class="we">
    <img src="./img/微信.svg"  width="50px">

</div>
</div>

css为

.wechat {
    float: right;
    width: 75px;
    height: 40px;
    position: relative;
    right: 70px;
    bottom: 100px;
}

.ewm img {
    position: relative;

    right: 35px;
}

.ewm {
    display: none;
}

.wechat:hover .ewm {
    display: block;
}

.wechat:hover {
    position: relative;
    bottom: 227px;
}

效果图如下：

联想截图_20231013210113.png 我感觉我这样写其实不太规范，因为我用了很多的定位，才把他们凑在一起的，所以之后如果再遇到这样的hover要再具体分析

3.

下面那个友情链接，用的是 readonly，意思是只读（即文字框中内容不能修改）

<div class="downlj">
    <input type="lj" readonly value="&emsp;友情链接" style="width: 230px; height: 40px;" >
</div>
avatar
文章
阅读
粉丝