官网复盘00

最新推荐文章于 2024-07-23 16:37:55 发布

dundundunsis

最新推荐文章于 2024-07-23 16:37:55 发布

阅读量42

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/dundundunsis/article/details/133838766

版权

1.欢迎栏

第一个div栏顶宽度100%，中间div定好位置

       <div class="toptop">
            <div class="top">
                <div class="top1">欢迎访问南京邮电大学通达学院！</div>
            </div>
       </div>
       <style>
       .toptop {
    height: 40px;
    background-color: white;

      }

     .top {
    border: 1px solid #dcdcdc;
    height: 40px;
    line-height: 40px;

}

.top1 {
    border: 1px solid transparent;
    margin-left: 250px;
    font-size: small;
    background-color: white;
}
</style>

2.首页官网图标+搜索栏

首页宽度100%底色浅灰，图标搜索栏两个div盒子漂浮并排，搜索栏里input文案和搜索图标

   <div class="shouye">
<img src="../图片/南京邮电大学通达学院.png" alt="" class="tu">
        
  <div class="kuang">
       <form action="">
           <input type="text" class="text" placeholder="请输入搜索内容">
           <input type="image" src="../图片/官网搜索截图.png" alt="" class="sousuo1"  >
        </form>
  </div>
</div>
<style>
.shouye {
    border: 1px solid transparent;
    height: 150px;
    background-color: #f5f5f5;
}

.tu {
    border: 1px solid transparent;
    margin-left: 450px;
    width: 420px;
    margin-top: 40px;
    float: left;
}

.text {
    width: 300px;
    height: 40px;
    margin-left: 200px;
    float: left;
    margin-top: 60px;
    font-size: medium;
    color: #cccccc;

}

.sousuo1 {
    margin-top: 60px;
    height: 45px;
    width: 100px;
}

::placeholder {
    color: #cccccc;
}
</style>

3.菜单栏

行底色蓝，第一个ul是整体行，li是分出来的首页菜单，负责向右挤。
第二层内部ul和li是分属，每个栏相同。(让菜单下拉出来花了好大劲，z-position要在position relative的情况下用)
让菜单hover缓慢变色

<div class="q1" style="text-align: center;">
    <ul class="hang">
        <li class="li1">
            首页 
        </li>
        <li class="s1">
            <ul>
                <li class="d1">
                    学院概述
                    <ul>
                        <li class="d3">
                           学院简介
                        </li>
                        <li class="d3">
                           理事会
                        </li>
                        <li class="d3">
                           监事会
                        </li>
                        <li class="d3">
                           院长书记寄语
                        </li>
                        <li class="d3">
                           学院领导及分工
                        </li>
                        <li class="d3">
                           校园风光
                        </li>
                    </ul>
               
                </li>
            </ul>
           
        </li>
        <li class="s1">
            <ul>
                <li class="d1">
                    部门设置
                    <ul>
                        <li class="d3">
                           党政群部门
                        </li>
                        <li class="d3">
                          教学科研单位
                        </li>
                        <li class="d3">
                           直属单位
                        </li>
                    </ul>
               
                </li>
            </ul>
           
        </li>
        <li class="s1">
            <ul>
                <li class="d1">
                    招生就业
                    <ul>
                        <li class="d3">
                           招生之窗
                        </li>
                        <li class="d3">
                           就业指导
                        </li>
                    </ul>
               
                </li>
            </ul>
           
        </li>
        <li class="s1">
            <ul>
                <li class="d1">
                   综合服务
                    <ul>
                        <li class="d3">
                           学院校历
                        </li>
                        <li class="d3">
                           作息时间
                        </li>
                        <li class="d3">
                           班车信息
                        </li>
                        <li class="d3">
                           地理交通
                        </li>
                    </ul>
               
                </li>
            </ul>
           
        </li>
        <li class="s1">
            <ul>
                <li class="d1">
                    信息公开
                    <ul>
                        <li class="d3">
                           会议信息
                        </li>
                        <li class="d3">
                           理事会
                        </li>
                        <li class="d3">
                           专业综合评估
                        </li>
                    </ul>
               
                </li>
            </ul>
           
        </li>
        <li class="s1">
            <ul>
                <li class="d1">
                    主题教育网
                    
                </li>
            </ul>
           
        </li>
        <li class="s1">
            <ul>
                <li class="d1">
                    统一认证平台
                    
                </li>
            </ul>
           
        </li>
    </ul>
</div>
<style>
.hang {
    border: 1px solid transparent;
    height: 40px;
    line-height: 40px;
    background-color: #0573b8;
}

li {
    border: 1px solid transparent;
    width: 130px;
    float: left;
    list-style: none;
    /* display: flex;
    justify-content: center; */
    color: white;
}

.d1 {
    /* border: 1px solid transparent; */
    height: 40px;
    line-height: 40px;
    width: 130px;
    flex-direction: column;
    /* display: flex;
    align-items: center; */
    background-color: #0573b8;
    /* vertical-align: top; */
}

.d3{position: relative;
    z-index: 4;
    background-color: white;
    display: none;
    /*下面这个加了好丑，记得删掉*/
    border-bottom:1px solid #d4d4d4;
   color: black;
   font-size: small;
}
.d1:hover .d3 {
    display: block;
}
.d3:hover{background-color: #0573b8;
    color: white;
}

.hang>li:hover {
    background-color: lightblue;
    transition-duration: 1s;
}
.hang>li>ul>li:hover {
    background-color: lightblue;
    transition-duration: 1s;
}

.li1 {
    margin-left: 300px;
}
</style>

3.大轮播图

最后只做出来自动轮播，用了script。
尖角号居然直接用&it和&gt就能做出来。

<div class="boxjpg">
    <div class="tv">
        <div><img type="image" src="../图片/qiangguo.jpg" alt="" class="qiangguo"  ></div>
        <div><img type="image" src="../图片/2023xuanchuanzhou.jpg" alt="" class="qiangguo"  ></div>
        <div><img type="image" src="../图片/dangdaihui.jpg" alt="" class="qiangguo"  ></div>
        <div><img type="image" src="../图片/disijiedangyuan.jpg" alt="" class="qiangguo"  ></div>
        <div><img type="image" src="../图片/guoqing.jpg" alt="" class="qiangguo"  ></div>
        <div><img type="image" src="../图片/qiangguo.jpg" alt="" class="qiangguo"  ></div>
        <div><img type="image" src="../图片/xintongxue.jpg" alt="" class="qiangguo"  ></div>
    </div>
    <div class="boxleft">&lt;</div>
    <div class="boxright">&gt;</div>
</div>
<script>
    var left =0;
    var timer;
    run()
    function run(){
        if(left<=-3200){
            left = 0;
        }
        imglist.style.marginLeft= left+'px';
        left-=10;
        timer= setTimeout(run,10); 
    }
    let index=2
    function refresh(){
        if(index<0){
            index=2
        }else if(index>2){
            index=0
        }
        let boxjpg=document.querySelector('.boxjpg')
        let width=getComputedStyle(boxjpg).width
        width=Number(width.slice(0,-2))
        boxjpg.querySelector(".tv").style.left=
        index*width*-1+"px"
    }
    function boxleft(){
        index--
        refresh()
    }
    function boxright(){
        index++
        refresh()
    }
    refresh()
</script>
<style>
.boxjpg{display: flex;
    width: 1200px;
    height: 441px;
margin-bottom: 20px;
position: relative;

left: 250px;
overflow: hidden;
}
.tv{animation:10s fdsafdaf infinite;
    display: flex;
}
@keyframes fdsafdaf{
    0%{}
    25%{transform: translateX(0px);}
    40%{transform: translateX(0px);}
    50%{transform: translateX(-1200px);}
    55%{transform: translateX(-1200px);}
    60%{transform: translateX(-1200px);}
    75%{transform: translateX(-2400px);}
    80%{transform: translateX(-2400px);}
    
    0%{}
}

.qiangguo {
    width: 1200px;
    height: 441px;
    top: 0;
}
.boxleft{background-color: #6d6c6c3f;
    position: absolute;
    width: 50px;
    height: 100px;
    top: 160px;
    color: #ccc;
    border-radius: 0 5px 5px 0;
    text-align: center;
    line-height: 100px;
    font-size: 27px;
    display: none;
}
.boxright{background-color: #6d6c6c3f;
    position: absolute;
    width: 50px;
    height: 100px;
    top: 160px;
    color: #ccc;
    border-radius:  5px  0  0 5px ;
    text-align: center;
    line-height: 100px;
    font-size: 27px;
    right: 0;
    display: none;
}
.boxjpg:hover .boxleft{display: block;
}
.boxleft:hover{transition: 1s;
    background-color: #00000050;
}
.boxright:hover{transition: 1s;
    background-color: #00000050;
}
.boxjpg:hover .boxright{
    display: block;
}
</style>

4.四个大块

1）学校要闻

多层div套。
第一层套整个大块。
第二块套学校要闻小栏（其中还要分”更多“小块，调整位置以及hover）。
第三套小轮播（虽然没做）但是搞了个壳子外表，加四个按钮
第四套多行文字，其中还分文字和日期

<main>
    <div class="p6">
       <div class="p3">
            <div class="p7">学校要闻</div>
            <div class="geng">更多+</div>
       </div>
       <div class="p9">
           <ul class="w2">
                
                    <div class="yundong">
                        <img src="../图片/运动会.jpg"class="zhaohaitao">
                        <div class="v3">
                            南京邮电大学赵海涛教授来我院作讲座
                        </div>
                        <div class="v4">9月27日下午，通信工程学院新学期第一期通达大讲堂在行政楼报告厅开讲，讲座特邀南京邮电大学通信与信息工程学院副院长赵海涛教授担
                          
                           <button >
                           4
                           </button>
                           <button>
                            3
                           </button>
                           <button>
                            2
                           </button>
                           <button>
                            1
                           </button>
                            <!-- <ul>
                                <li class="botton"></li>
                                <li class="botton"></li>
                                <li class="botton"></li>
                                <li class="botton"></li>
                                <li class="botton"></li>
                            </ul>
                           <script> $(".botton").click(function(){alert(1)})</script> -->
                        </div>
                       
                    </div>
                <li class="w1">
                    <span class="c1">&emsp;我院举行2023级新生军训总结表彰大会</span>
                    <div class="w3">
                     10/09
                    </div>
                </li>
                <li class="w1">
                    <span class="c1"> &emsp;我院成功举办“百校千企万岗”2023年江苏大学生就业帮扶“送岗直</span>
                     <div class="w3">
                      10/08
                     </div>
                 </li>
                 <li class="w1">
                    <span class="c1">&emsp;喜讯：我院荣获“扬州市文明校园”称号</span>
                    <div class="w3">
                     10/07
                    </div>
                </li>
                <li class="w1">
                    <span class="c1">&emsp;我院举办江苏省高校毕业生“百校联动”招聘活动暨2024届毕业生</span>
                    <div class="w3">
                 09/28
                </div>
                 </li>
       </div>
    </ul>
    </div >
    <div class="p2">
        <div class="p3">
<style>
.p6{margin-top: 20px;
    border: 1px  solid transparent;
    padding-bottom: 20px;
}

.p3 {
    border-bottom: 2px solid #d4d4d4;
    height: 50px;
    width: 580px;
    float: left;
    line-height: 50px;
    margin-bottom: 0;
}

form {
    height: 500px;
}

.p2 {margin-top: 20px;
    float: right;
    padding-bottom: 20px;
}
.p4{margin-top: 0px;
    float: right;
    padding-bottom: 20px;
}
.p8{ border-bottom: 2px solid #0573b8;
    height: 50px;
    width: 120px;
    float: left;
    text-align: center;
    display: inline;
    margin-left: 25px;
margin-bottom: 0;
}

.geng {
    border-bottom: 1px solid transparent;
    height: 48px;
    width: 100px;
    float: right;
    text-align: center;
    display: inline;
    font-weight: 50;
    font-size: small;
    color: black;
    margin-bottom: 0;
}

.p7 {
    border-bottom: 2px solid #0573b8;
    height: 50px;
    width: 120px;
    float: left;
    text-align: center;
    display: inline;
    margin-left: 25px;
   margin-bottom: 0;
}
.p9{margin-bottom: 0;
    height: 300px;

}
.w2{border: 1px solid transparent;
    height: 300px;
    display: flex;
    flex-direction: column;
 margin-bottom: 20px;
    flex-direction: column;
}
.p1{margin-top: 0px;
    border: 1px  solid transparent;
   height: 300px;
   background-color: white;
}


.geng:hover {margin-bottom: 0;
    color: #0573b8
}
.p10{border: 1px solid transparent;
    color: black;
   display: flex;
    width: 300px;
    height: 30px;
    position: relative;
    flex-direction: column;
    font-size: 15px;
    font-weight: 100;
}
.w4{border: 1px solid transparent;
    height: 250px;
    display: flex;
    flex-direction: column;
 margin-bottom: 20px;
    flex-direction: column-reverse;
    
}
.w5{height: 150px;
border: 1px solid red;
width: 500px;
background-color: #f3f2f2;
}
.yundong{
    height: 120px;
    margin: 10px 0 10px 20px;
    width: 520px;
    border: 1px solid transparent;
    background-color: #f2f2f2;
}
.zht{float: left;
    display: flex;
    height: 120px;
    margin: 10px 0 10px 30px;
    width: 550px;
    border: 1px solid transparent;
}

.zhaohaitao{ height: 120px;
    width: 180px;
    float: left;
    }
.v3{background-color: #f2f2f2;
    color: black;
    height: 20px;
    width: 300px;
    font-size: medium;
   float: left;
   position: relative;
   left: 20px;
   
   margin-bottom: 0px;
}
.v4{background-color: #f2f2f2;
    color: black;
    font-size: 15px;
    height:60px;
    width: 300px;
   float: left;
   position: relative;
   left: 20px;
   top: 10px;
   margin-bottom: 10px;
  
font-weight: 100;
}
/* .yundong{height: 120px;
    width: 180px;
   margin-left: 20px;
   margin-top: 20px;
   float: left;
} */

.c1:hover{color: #0573b8;

}
button{border-radius: 10px;
height: 12px;
width: 12px;
float: right;
color: transparent;
background-color: white;
border: 1px solid #0573b8;
margin: 2px;
}

button:focus{
    background-color: #0573b8;
}
.w1{border: 1px solid transparent;
    color: black;
   display: flex;
    width: 580px;
    height: 32px;
    position: relative;
    flex-direction: column;
    font-size: 15px;
    font-weight: 100;
    line-height: 32px
}
.w3{position:absolute;
    display: flex;
    height: 30px;
    right: 0;
    width: 50px;
    font-size: 8px;
    line-height: 30px;
    margin-right: 10px;
    color: rgb(77, 76, 76);
    font-weight: 400;
}
</style>

2）通知公告

文字里套两小div，一个日期加背景色，一个是文案调整字大小

            <div class="p7">通知公告</div>
            <div class="geng">更多+</div>
        </div>
        <div class="r1">
            <ul class="r2">
             <li class="r3">
                <div class="r4">
                   <center> 09/12</center>
                   </div>
                 <span class="r5">
                    &emsp;关于禁止携带餐食进入教室和课堂的通告</span>
             </li>
             <li class="r3">
                <div class="r4">
                   <center> 07/24</center>
                   </div>
                 <span class="r5">
                    &emsp;声明</span>
             </li>
             <li class="r3">
                <div class="r4">
                   <center> 06/22</center>
                   </div>
                 <span class="r5">
                    &emsp;
                    关于2023年暑假有关事项的通知</span>
             </li>
             <li class="r3">
                <div class="r4">
                   <center> 06/01</center>
                   </div>
                 <span class="r5">
                    &emsp;
                    关于进一步加强和规范学院校园网主页 新闻照片要求的通知</span>
             </li>
             <li class="r3">
                <div class="r4">
                   <center> 03/29</center>
                   </div>
                 <span class="r5">
                    &emsp;
                    南京邮电大学通达学院公开招聘高低压电工的公告</span>
             </li>
             <li class="r3">
                <div class="r4">
                   <center> 03/29</center>
                   </div>
                 <span class="r5">
                    &emsp;
                    南京邮电大学通达学院2023年公开招聘辅导员公告</span>
             </li>
             <li class="r3">
                <div class="r4">
                   <center> 03/05</center>
                   </div>
                 <span class="r5">
                    &emsp;
                    南京邮电大学通达学院采购信息
                </span>
             </li>
        </div>
         
     </ul>
    </div>
    <div  class="p1">
        <div class="p3">
        <style>
        .r1{border: 1px solid transparent;
    height: 300px;
    width: 580px;
}
.r4{border: 1px solid transparent;
    height: 30px;
    width: 60px;
    line-height: 30px;
   margin-top: 8px;
   background-color: #0573b8;
   color: white;
   font-weight: 400;
   font-size: 20px;
}
.r3{width: 550px;
    color: black;
    border: 1px solid transparent;
    height: 40px;
    line-height: 40px;
    margin-left: 20px
}
.r5{font-weight: 100;
    font-size: medium;
}
.r3:hover .r4{transition-duration: 1s;
    background-color: rgb(138, 168, 92);
}
</style>

3）人才培养小块

如上

           <div class="p8">人才培养</div>
        <div class="geng">更多+</div>
        <div class="p9">
            <ul class="w21">
             <li class="w1">
                 <span class="c11">&emsp;我院在2021年全国大学生电子设计竞赛中获得全国一等奖</span>
                 <div class="w3">
                  12/21
                 </div>
             </li>
             <li class="w1">
                 <span class="c11">&emsp;我院摘得第七届中国国际“互联网+”大学生创新创业大赛国家级银奖</span>
                 <div class="w3">
                  10/18
                 </div>
             </li>
             <li class="w1">
                <span class="c1"> &emsp;我院学生在2023年全国大学生数学建模竞赛（江苏赛区）中喜获佳绩</span>
                 <div class="w3">
                  10/09
                 </div>
             </li>
             <li class="w1">
                 <span class="c1">&emsp;我院在第九届中国国际“互联网+”大学生创新创业大赛 江苏省决赛中再获佳</span>
                 <div class="w3">
                  08/02
                 </div>
             </li>
             <li class="w1">
                 <span class="c1">&emsp;我院在2022年江苏省普通高校本专科 优秀毕业论文（设计）评选中再</span>
                 <div class="w3">
                  08/02
                 </div>
             </li>
             <li class="w1">
                 <span class="c1">&emsp;我院学生在第十四届“蓝桥杯”软件类省赛中再获佳绩</span>
                 <div class="w3">
                  04/25
                 </div>
             </li>
             <li class="w1">
                 <span class="c1">&emsp;通信工程学院与扬州移动公司召开产教融合基层教学组织研讨会</span>
                 <div class="w3">
                  04/22
                 </div>
             </li>
             <li class="w1">
                 <span class="c1">&emsp;我院在2022年江苏省高等学校劳动教育优秀实践项目评选中荣获二等奖</span>
                 <div class="w3">
                  03/03
                 </div>
             </li>
             <li class="w1">
                 <span class="c1">&emsp;我院在2022年江苏省教育信息化论文征集 比赛中喜获佳绩</span>
                 <div class="w3">
                 03/03
                 </div>
             </li>
          
        </div>
         
     </ul>
    </div>
    </div>
    <style>
    .w21{display: flex;
    flex-direction: column;
    padding-bottom: 15px;
    height: 300px;
    background-color: white;
}

.c11{font-weight:600
}
.c11:hover{color: #0573b8;

}
.box12{margin-top: 10px;
    height: 300px;
    border: 1px solid transparent;
}
.wyl{
   
    
    height: 120px;
    margin: 10px 0 10px 30px;
    width: 550px;
    border: 1px solid transparent;
}

.v1{
    color: black;
    height: 20px;
    width: 340px;
    font-size: medium;
   float: left;
   position: relative;
   left: 20px;
   
   margin-bottom: 0px;
}
.v2{
    color: black;
    font-size: 15px;
    height:60px;
    width: 340px;
   float: left;
   position: relative;
   left: 20px;
   top: 10px;
   margin-bottom: 10px;
  
font-weight: 100;
}
    </style>

4）校园文化小块

一大块套两小块
两小块里放图片文字

    <div class="p4">
        <div class="p3">
            <div class="p8">校园文化</div>
            <div class="geng">更多+</div>
        </div>
        <div class="box12">
            <div class="wyl">
                <img src="../图片/wangyaolan.png" class="wylpng">
                <div class="v1">
                    南京信息工程大学王尧教授来我院作专题报
                </div>
                <div class="v2">9月13日下午，南京信息工程大学原党委副书记、副校长，江苏省高校辅导员研究会副理事长，中国高教学会学生工作研究会副理事长王尧
                </div><br>
                <div class="xq">
                【详情】
                </div>
            </div>
            <div class="wyl">
                <img src="../图片/zhaohaitao.jpg"class="zhaohaitao">
                <div class="v1">
                    南京邮电大学赵海涛教授来我院作讲座
                </div>
                <div class="v2">9月27日下午，通信工程学院新学期第一期通达大讲堂在行政楼报告厅开讲，讲座特邀南京邮电大学通信与信息工程学院副院长赵海涛教授担
                </div><br>
                <div class="xq">
                【详情】
                </div>
            </div>

        </div>
    </div>
</main>
<style>
.wylpng{ height: 120px;
width: 180px;
float: left;
}
.xq{line-height: 20px;
    color: rgb(145, 7, 7);
    height: 20px;
    width: 80px;
    font-size: 15px;
    position: relative;
    left: 10px;
    margin-bottom: 0;
    font-weight: 100;
}
.wyl:hover .v1{transition-duration: 0.8s;
    color: #0573b8;
}
.wyl:hover .xq{transition-duration: 0.8s;
    color: #0573b8;
}
</style>

5）底栏

底色蓝，图片hover改透明度

<footer>
    <div class="b7">
    <div class="m2">
        <div><img src="../图片/教务系统.png" class="png1"></div>
        <div class="jiao">&emsp;教务系统</div>
    </div>
    <div class="m1">
        <div><img src="../图片/邮箱.png" class="png1"></div>
        <div class="jiao">&emsp;邮箱系统</div>
    </div>
    <div class="m3">
        <div><img src="../图片/业务图标_图书管理系统.png" class="png1"></div>
        <div class="jiao">&emsp;图书馆</div>
    </div>
    <div class="m4">
        <div><img src="../图片/时钟.png" class="png1"></div>
        <div class="jiao">&emsp;作息时间</div>
    </div>
    <div class="m5">
        <div><img src="../图片/业务图标_校历查询.png" class="png1"></div>
        <div class="jiao">&emsp;通达校历</div>
    </div>
    <div class="m6">
        <div><img src="../图片/24gl-phoneLoudspeaker.png" class="png1"></div>
        <div class="jiao">&emsp;电话黄页</div>
    </div>
    <div class="m7">
        <div><img src="../图片/邮箱.png" class="png1"></div>
        <div class="jiao">&emsp;院长信箱</div>
    </div>
    <div class="m8">
        <div><img src="../图片/邮箱.png" class="png1"></div>
        <div class="jiao">&emsp;书记信箱</div>
    </div>
    <div class="m9">
        <div><img src="../图片/学校_学校信息.png" class="png1"></div>
        <div class="jiao">&emsp;学院12345</div>
    </div>
    </div>
    <div class="b8">
    <styel>
    .b7 {display: flex;
    flex-direction: row;
    border: 1px solid transparent;
    background-color: #0573b8;
    height: 150px;
    width: 100%;
}


.m1,.m3,.m4,.m5,.m6,.m7,.m8,.m9{border: 1px solid transparent;
    width: 100px;
    height: 150px;
    display: flex;
    flex-direction: column;
   margin: 20px;
}
.m2{border: 1px solid transparent;
    width: 100px;
    height: 150px;
    display: flex;
    flex-direction: column;
   margin-left: 400px;
   margin: 20px 20px 20px 200px;
}
.png1{color: white;
    display: flex;
width: 100px;

}
.jiao{width: 100px;
    height: 20px;
margin:0 auto;
    display: flex;
    position: relative;
    top: 10px;
}

.m3:hover .png1{
    opacity: 0.5;
}
.m1:hover .png1{
    opacity: 0.5;
}
.m2:hover .png1{
    opacity: 0.5;
}
.m4:hover .png1{
    opacity: 0.5;
}
.m5:hover .png1{
    opacity: 0.5;
}
.m6:hover .png1{
    opacity: 0.5;
}
.m7:hover .png1{
    opacity: 0.5;
}
.m8:hover .png1{
    opacity: 0.5;
}
.m9:hover .png1{
    opacity: 0.5;
}


/*m8里面的照片设置大小*/
/* .m8 img{
    height: 40px;
    width: 40px;
} */
/*这改的是b7下面的m系列中照片，b7没有另外照片，所以直接这么改*/
.b8 {position: relative;
    border: 1px solid transparent;
    background-color: white;
    height: 300px;
    width: 100%;
   display: flex;
}
.b7 img{margin: 0 auto;
    height: 60px;
    width: 60px;
    position: relative;
    top: 10px;
}
/*居中的样式稍微再改一下就行了*/
       </style>

6）最后

分两大块，左右文字加微信图片
箭头菜单没做

        <div class="wei">
            南京邮电大学通达学院 版权所有 本站消息未经许可 不得转载<br>
    
    扬州市邗江区润扬南路33号 邮编：225127 电子邮件：tdxy@njupt.edu.cn <br>
    
    Copyright © 2012 All Rights Reserved 苏ICP备2022004827号-1 <br>
    
    <img src="../图片/bei.png" alt="" class="bei">苏公网安备 32100302010629号
    <br><img src="../图片/icon8.png" class="icon8">
        </div>
         <div class="weixin">
              <img src="../图片/微信 (2).png" alt="" class="weixin2">
              <input type="text" class="text2" placeholder="友情链接">
          
            </div>
           
     </div>
        
         
        
    </div>
        </footer>
  <style>
  .icon8{ margin-left: 0px;
    height: 50px;
    margin-top: 10px;
width: 160px;
}
.wei {
    border: 1px solid transparent;
    height: 200px;
    margin-top: 50px;
    margin-left: 200px;
    width: 500px;
}
.bei{display: inline;

}

.weixin{margin-top: 50px;
    margin-left: 100px;
    border: 1px solid transparent;
    height: 200px;
    width: 40%;
  display: inline;
    display: inline;
}
.weixin2{position: absolute;
    margin-left: 300px;
    height: 40px;
    margin-top: 30px;
}
.text2{color: #ccc;
    height: 30px;
    width: 200px;
    margin-top: 30px;
    margin-left: 400px;
    outline: none;
   
    
}
::placeholder{user-select: none;
    color: black;
}

  </style>
    
</body>
</html>

dundundunsis

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
官网复盘00

1.欢迎栏第一个div栏顶宽度100%，中间div定好位置 <div class="toptop"> <div class="top"> <div class="top1">欢迎访问南京邮电大学通达学院！</div> </div> </div> <style> .toptop {
复制链接

扫一扫