校园网仿写

最新推荐文章于 2024-10-09 21:37:09 发布

法助

最新推荐文章于 2024-10-09 21:37:09 发布

阅读量107

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/fazhu4/article/details/133819545

版权

截至目前，南邮官网仿写差两个轮播图以及一个浮动窗没写

有的想写的点忘了，还是得边写边记，不然写完忘了，在笔记里找也不记得哪些是新加的了

总体

南邮官网我总体上分为6部分

分为：顶部logo，二级菜单，轮播图，4个信息框，图标菜单，页尾标注

我的习惯是将每个部分设置一个大盒子，再在其中填充小盒子做内容以区分，方便修改（~~盒子太多了也不好改）~~

第一部分-logo

建立大盒子后在顶部建立白盒子放欢迎语，南邮logo直接从官网抠下来，设置好背景色后跟官网没有区别。

右侧输入框较简单，但是输入框侧面的搜索按钮定位很麻烦，要刚好跟搜索框的边重合。

第二部分-二级菜单

这部分在考核时没能做出来，考核时我方法是建立另外的盒子定位在菜单下方，在悬停菜单时显示，但就是不成功，估测是元素或者优先级的问题。后来利用了ul套ul的方法将二级菜单做出来。动画效果正好视频有讲，总体就二级菜单部分困扰了很久。

第三部分-轮播图

哈哈，没做，还没学，等做完另外两个官网再回来改，糊了张图片上去，算是留下位置，至少静态样式有了

第四部分-4个消息框

正好刚学完的flex布局来练练手，这布局是真好用，但痛苦的是四个小盒子，每个盒子的样式都不一样，每段文字还要一个盒子（官网就是这样写的）。这部分每个小盒子标题与内容直接的空隙卡住我了，刚开始我是设置的整个盒子，标题下的短线好设置，用border，但是空隙呢？没办法，最后将标题跟内容部分分为两部分拉开间距让背景色显示，但后来觉得不明显，之间连起来在中间加border。

第四个消息框

第四个消息框两张图加段文字，看着好做，但是鼠标挪上去的时候发现，他会放大！！我靠，这辅导员也没教我啊。好在还有搜索引擎，挺多地方不知道的搜索一下就有了~~(甚至可以抄段源代码)~~搜索到放大图片的码后发现，它出格了！帮帮我，百度先生！在csdn大佬的帮助下溢出隐藏overflow: hidden起到了作用。

第五部分-图标菜单

设置好box后，从网上下到图标，填上去。。。这几个图标五彩斑斓的灰，于是百度，启动！csdn大佬的脑回路是真的牛逼，用阴影投出白色图标，再将整体向一个方向挪走，直到原图表消失，很6.移动过程中，发现文字乱飘，一看发现图表文字在一个盒子，本来想新建盒子，但是发现被我强行挪回了原位，所以我F12检查时鼠标在前一个文字，图标却显示在下一个文字，没事，能跑，逻辑上也没错位。

 .box6{
            height: 130px;
            background-color: #0074b7;
        }
        .box61{
            box-sizing:border-box;
            height: 130px;
            width: 130px;
             /* background-color:green;  */
            padding: 20px 20px;
            text-align: center;
            float: left;
            position:relative; 
            left: 255px;        
             text-indent: -210px;/*缩进到盒外*/
            overflow: hidden;/*溢出隐藏原图*/
        }  
       .box61 img{
            filter: drop-shadow(100px 0px rgb(255, 255, 255));/*设置阴影*/
        } 
        .box61:hover img{
            filter: drop-shadow(100px 0px rgb(255, 255, 255,40%));}
           
        .box62{
            width: 89px;
            height: 20px;
            /* background-color: aqua; */
            position:absolute;
            left: 121px;


        }

第六部分-页尾

图标文字，友情链接都是靠定位完成，虽然写死但写死不好但确实好用。

那个微信小图标做出的悬停动画我一直做出成功，明明用了all检测，最后退而求其次用一种挺巧妙的方法，将他原本宽度设为0，悬停再出现宽度，成为悬停后从左往右浮现。

难点

此box6为图标菜单使用方法

.box6{
            height: 130px;
            background-color: #0074b7;
        }
        .box61{
            box-sizing:border-box;
            height: 130px;
            width: 130px;
             /* background-color:green;  */
            padding: 20px 20px;
            text-align: center;
            float: left;
            position:relative; 
            left: 255px;        
             text-indent: -210px;/*缩进到盒外*/
            overflow: hidden;/*溢出隐藏原图*/
        }  
       .box61 img{
            filter: drop-shadow(100px 0px rgb(255, 255, 255));/*设置阴影*/
        } 
        .box61:hover img{
            filter: drop-shadow(100px 0px rgb(255, 255, 255,40%));}

<div class="box3b">
            <ul class="box3">
                <li>首页</li>
                  <li>学院概况
                    <ul>
                        <li>学院简介</li>
                        <li>理事会</li>
                        <li>监事会</li>
                        <li>院长书记寄语</li>
                        <li>学院领导及分工</li>
                        <li>校园风光</li>
                    </ul>
    
                </li>
                <li>部门设置
                    <ul>
                        <li>党政群部门</li>
                        <li>教学科研单位</li>
                        <li>直属单位</li>
                    </ul>
                </li>
                <li>招生就业
                    <ul>
                        <li>招生之窗</li>
                        <li>就业指导</li>
                    </ul>
                </li>
                <li>综合服务
                    <ul>
                        <li>学校校历</li>
                        <li>作息时间</li>
                        <li>班车信息</li>
                        <li>地理交通</li>
                    </ul>
                </li>
                <li>信息公开
                    <ul>
                        <li>会议信息</li>
                        <li>专业综合评估</li>
                    </ul>
                </li>
                <li>主题教育网</li>
                <li>统一认证平台</li>
            </ul>
        </div>

        .box3b{
            height: 40px;
            background:#0074b7;
        }

        ul{list-style: none;}
        .box3{
            width:1212px ;
            margin:0 auto;
        }
        .box3>li{
        float:left;
        width: 150px;
        text-align: center;
        background:#0074b7;
        color:white;
        line-height: 40px;
        transition:all 2s;

        position: relative;/*相对定位，将自己变成块元素*/
    }
    .box3>li:hover{
        background:lightblue;
       
    }

    .box3>li>ul {
        display: none;
        background:white;
        color:black;

        position: absolute;/*绝对定位，脱离文档流*/
        left:0;
        top:40px;
        width: 148px;;
    }
    .box3>li:hover ul{
        display: block;
    }

    .box3>li li:hover{
        color:white;
        background-color: #0074b7;
        transition:all 1s;
    }

此为二级菜单写法

元素设置没明确导致考核在这里吃亏