学校官网复盘

_Koreyoshi
65 阅读5分钟

感悟：

经过国庆几天的集训，学习了html和css。不得不说刚开始几天真的很不适应。第一个，看的视频很多。在规定的时间里很难在把它看完的情况下还把笔记做好，只能依靠贴图。集训后历久好久终于把官网做的差不多了（其实细看还差好多）好了，话不多说开始复盘 首先边距清零

    *{
        margin: 0;
        padding: 0;
     }

欢迎栏

直接给他套一个box1来表示

导航栏和搜索框

整体用一个大的box2，里面分开三个div分别表示logo 搜索框 按钮 导航栏这里代码还是不够规范

正确：先用div 再把ul和li套进去

浮动与flex:浮动与flex都能单独完成块在一行的排列，不可以重复使用!!（来自李工的指导）

搜索框一开始做的比较稀碎，很奇怪但说不上来，经过一番折腾整出了合适的代码，展示一下

 <div class="search ">
            <input type="text" placeholder="请输入搜索内容" ,class="search1" 
            style="width: 400px;height: 39px;">
 </div>

按钮直接用图片就欧克，一开始用bottom折腾半天后面才知道图片也可以有点击的效果

下拉菜单

在二级菜单这里弄了好久，但现在效果也不是很好，等有时间还需要再精进一下。

问题 下拉菜单会被box3中的图片挡住 样子如下

image.png

解决方法：暂时还没解决，会出现奇奇怪怪的东西周三去听谭哥讲思路。

来了，终于解决了，先用定位：父绝子相。然后就是优先级的问题只需要加一个z-index:99就欧克,让下拉菜单排在前面。

 *{
    margin: 0;
    padding: 0;
}

.menu{
    width: 100%;
    height: 42px;
    background-color: #0573B8;
}

.ItemChild{
    padding-left: 10%;
    padding-right: 10%;
    width: 80%;
    height: 42px;

}

.ItemChild li{
    color: #fff;
    float: left;
    list-style: none;
    margin: 0 30px 0 30px;
    height: 42px;
    line-height: 42px;
    width: 110px;
    text-align: center;
}

.ItemChild li:hover{    
    background-color: #71a2e2;
    transition: all .4s ease-in-out;
}
.ThirdMenu{
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    display: none;
}

.ItemChild li:hover .ThirdMenu{
    display: block;
}
/*  z-index: 99  优先级 */
.ThirdMenu li{
    color: black;
    width: 110px;
    height: 42px;
    position: absolute;
    text-align: center;
    border: 1px solid rgb(219, 219, 219);
    font-size: 14px;
    z-index: 99;
    background-color: #fff;
}

.ThirdMenu li:hover{
    background-color:#0573B8;
    color: #fff;
    transition: all .4s ease-in-out;
}

.table1{
    top: 0px;
    right: -30px;
    line-height: 42px;
}
.table2{
    top: 42px;
    right: -30px;
    line-height: 42px;
}
.table3{
    top: 84px;
    right: -30px;
    line-height: 50px;
}
.table4{
    top:126px;
    right: -30px;
    line-height: 50px;
}
.table5{
    top:168px;
    right: -30px;
    line-height: 50px;
}
.table6{
    top:210px;
    right: -30px;
    line-height: 50px;
}


<div class="menu">
    <div class="menuItem">
        <ul class="ItemChild">
            <li>首页</li>
            <li>学校概况
                <ul class="ThirdMenu">
                    <li class="table1">学院简介</li>
                    <li class="table2">理事会</li>
                    <li class="table3">监事会</li>
                    <li class="table4">院长书记寄语</li>
                    <li class="table5">学院领导及分工</li>
                    <li class="table6">校园风光</li>

                </ul>
            </li>
            <li>部门设置
                <ul class="ThirdMenu">
                    <li class="table1">党政群部门</li>
                    <li class="table2">教学科研单位</li>
                    <li class="table3">直属单位</li>
                </ul>
            </li>
            <li>招生就业
                <ul class="ThirdMenu">
                    <li class="table1">招生之窗</li>
                    <li class="table2">就业指导</li>
                </ul>
            </li>
            <li>综合服务
                <ul class="ThirdMenu">
                    <li class="table1">学院校历</li>
                    <li class="table2">作息时间</li>
                    <li class="table3">班车信息</li>
                    <li class="table4">地理交通</li>
                </ul>
            </li>
            <li>信息公开
                <ul class="ThirdMenu">
                    <li class="table1">会议信息</li>
                    <li class="table2">专业综合评估</li>
                </ul>
            </li>
        
            <li>主题教育网 </li>
            <li>统一认证网 </li>
        </ul>
    </div>
</div>

body部分

轮播图

观看千锋168集 保证让你可以做的八九不离十了，后期还是需要继续学习一下。

.swiper-container{
        width: 1200px;
        height:430px;
        margin: 0 auto;
        overflow: hidden;
    }
    .swiper-container img{
        width: 1200px;
        height: 430px;
    }
    .swiper-slide{
        float: left;
    }
    .swiper-wrapper{
        width: 9999px;
        animation:swiperrun 7s linear infinite;
    }
    @keyframes swiperrun{
        0%{
           transform: translate(0);
        }
        5%{
            transform: translate(-640px);
        }
    
        25%{
            transform: translate(-640px);
        }
        30%{
            transform: translate(-1280px);
        }
        50%{
            transform: translate(-1280px);
        }
        55%{
            transform: translate(-1920px);
        }
        75%{
            transform: translate(-1920px);
        }
        80%{
            transform: translate(-2560px);
        }
        100%{
            transform: translate(-2560px);
        }

css如下：

.swiper-container{
        width: 1200px;
        height:430px;
        margin: 0 auto;
        overflow: hidden;
    }
    .swiper-container img{
        width: 1200px;
        height: 430px;
    }
    .swiper-slide{
        float: left;
    }
    .swiper-wrapper{
        width: 9999px;
        animation:swiperrun 7s linear infinite;
    }
    @keyframes swiperrun{
        0%{
           transform: translate(0);
        }
        5%{
            transform: translate(-640px);
        }
    
        25%{
            transform: translate(-640px);
        }
        30%{
            transform: translate(-1280px);
        }
        50%{
            transform: translate(-1280px);
        }
        55%{
            transform: translate(-1920px);
        }
        75%{
            transform: translate(-1920px);
        }
        80%{
            transform: translate(-2560px);
        }
        100%{
            transform: translate(-2560px);
        }
        }
  • linear:匀速
  • infinite：无限循环

不太完善的轮播就新鲜出炉了

下面的四个新闻小框，写着写着它变得离谱，具体如下

这是我的层级

错误1.png

这是正确的层级

正确1.jpg

正确：应该是在一个大的box里设置四个小的box 然后再对每一个小的box进行设置 如box1将它分为上下两个盒子，上半部分包括图片加旁边的文字，下半部分全为文字。同时在这四个box中，需将日期与文字分开成两个独立的div来设置，因为当鼠标移动时字会变色而日期不会。这就需要单独给文字的div设置hover

这里还要说一下：

  • 宽高不要都设成自动的，可以设为100%
  • 一定要注意代码都是成对出现的，防止出现代码嵌套会导致两个元素叠一起

图标与文字 图标直接在网站上找的但总是存在一个问题：文字无法放在图片正下方。这个问题困扰我好久，经过谭哥的指点最终找到答案

方法：将图片与下方文字放在同一个div中如下

正确3.jpg

这样套起来，只需要限制外面这个div的宽度和高度就ok了

问题：如何让鼠标悬停在一个图片上时，出现另一个图片，而鼠标划走时又会隐藏起来？

联想截图_20231020220307.png css样式为：

 .container{
            margin-top: 20%;
            width: 100%;
            height: 300px;
        }
        .weChat{
            padding-top: 90px;
            margin-left: 300px;
            width: 50px;
            height: 50px;
            position: relative;
        }

        .code{
            display: none;
            position: absolute;
            top: -90px;
            width: 100px;
            height: 100px;
        }
        .code img{
            display: block;
            width: 150px;
        }

        .weChat:hover .code{
            display: block;
        }


<div class="container">
        <div class="weChat">
            <img src="./微信.png" alt="">
            <div class="code">
                <img src="./二维码.png" alt="">
            </div> <!--我推荐放在wechat这个div下，方便实现相对定位-->
        </div>
    </div>
avatar
文章
阅读
粉丝