01-大一前端小白仿写的第一个网页（学校官网）

Tsugumi
97 阅读5分钟

学习周期：国庆假期
所用知识：html+css基础
知识来源：001-开启HTML5大前端学习之旅_哔哩哔哩_bilibili

01-导航hover部分

image.png

注意事项：一级菜单需要设置高度
tips：一级菜单如果宽度为网页宽度，每个li等分后将间隔过大，可使宽度为各li宽度之和，方便直接用于平分各li ，后在同位置设置背景可解决宽度不够问题

html部分

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

css部分

            width: 1200px;
            background-color: #0573b8;
            position: absolute;
            top: 193px; left: 220px;
            height: 42px;
        }
        ul{
            list-style: none;
        }
        .box3 .item{
            float: left;
            width: 145px;
            text-align: center;
            color: white;
            background-color: #0573b8;
            line-height: 42px;
        }
        .item:hover{
            background-color: lightblue;
        }
        .item ul {
            display: none;
            background-color: white;
            color: black;
        }
        .item:hover ul{
            display: block;
        }
        .item li:hover{
            background-color: #0573b8;
        }

02-轮播图

image.png

ps:个人技术力有限 只用css动画实现了自动轮播

html部分：建立库 在库中放入轮播图片

    <!-- 创建外部展示容器 -->
    <div class="banner-container">
        <!-- 创建图片存储容器 -->
    <div class="banner-img-container">
         <img src="./lunbo-01.png" alt="">
         <img src="./lunbo-02.png" alt="">
         <img src="./lunbo-03.png" alt="">
         <img src="./lunbo-04.png" alt="">
         <img src="./lunbo-05.png" alt="">
    </div>
    </div>

css部分：实现动画效果 并设置总停留时间与宽度

.banner-container{
	width:1200px;
	height: 430px;
	/* 轮播图居中 */
	margin:1rem auto;
	/* 隐藏超出展示容器的内容 */
	overflow: hidden;
	position: absolute;
    top: 218px;
    left: 220px;
}

.banner-container .banner-img-container {
	width:6000px;
	height:430px;
	overflow: hidden;
	position: absolute;
	/* 开启弹性盒，让图片横向排列 */
	display: flex;
	animation: run 10s ease infinite;
}

.banner-container .banner-img-container img{
	width:1200px;
	height:100%;
}

/* 动画关键帧 */
@keyframes run {
	0%,10%{
		/* margin-left: 0; */
		transform: translateX(0);
	}
	20%,30%{
		/* margin-left: -1200px;; */
		transform: translateX(-1200px);
	}
	40%,50%{
		/* margin-left: -2400px; */
		transform: translateX(-2400px);
	}
	60%,70%{
		/* margin-left: -3600px; */
		transform: translateX(-3600px);
	}
	80%,90%{
		/* margin-left: -4800px; */
		transform: translateX(-4800px);
	}
	100%{
		/* margin-left: 0; */
		transform: translateX(0);
	}

ps：宽度为总图片宽度之和

03-div块和文本部分

image.png ps：这部分的图片和文字一起手动轮播因技术力不够没有完成，其余部分为正常文本标签和定位标签

        width: 573px;
        height: 400px;
        background-color: white;
        color:#0573b8;
        position: absolute;
        top: 710px; left: 220px;
        font-size: 20px;
        font-weight: 800;
        line-height: 52px;
        text-indent: 31px;
        
    }
    .box6 span{
        color:black;
        font-size: 14px;
        font-weight: 300;

    }
    .box7{
        width: 573px;
        height: 400px;
        background-color: white;
        color:#0573b8;
        position: absolute;
        top: 710px; left: 850px;
        font-size: 20px;
        font-weight: 800;
        line-height: 52px;
        text-indent: 31px;
    }
    .box7 span{
        color:black;
        font-size: 14px;
        font-weight: 300;
    }
    .box10{
        width: 573px;
        height: 400px;
        background-color: white;
        color:#0573b8;
        position: absolute;
        top: 1140px; left: 220px;
        font-size: 20px;
        font-weight: 800;
        line-height: 52px;
        text-indent: 31px;
    }
    .box10 span{
        color:black;
        font-size: 14px;
        font-weight: 300;
    }
    .box11{
        width: 573px;
        height: 400px;
        background-color: white;
        color:#0573b8;
        position: absolute;
        top: 1140px; left: 850px;
        font-size: 20px;
        font-weight: 800;
        line-height: 52px;
        text-indent: 31px;
    }
    .box11 span{
        color:black;
        font-size: 14px;
        font-weight: 300;
    }
    .box12{
        position: absolute;
        width: 99px;
        height: 42px;
        top: 99px;
        right: 223px
    }

/（span真好用

04-图标hover部分

image.png

图标来源：iconfont-阿里巴巴矢量图标库

hover图标透明度设置

    filter: #0573b8(100%);
    opacity: 1;
}
.box20:hover img{
    filter: none;
    opacity: 0.6;
}
.box21 img{
    width: 54px;
    height: 60px;
    position: absolute;
    top: 1602px; left: 430px;
}
.box21 img{
    filter: #0573b8(100%);
    opacity: 1;
}
.box21:hover img{
    filter: none;
    opacity: 0.6;
}

tips：注意图标大小，查询后直接在矢量库下载同等大小的

05-结尾文本以及友情链接

image.png

        南京邮电大学通达学院 版权所有 本站消息未经许可 不得转载</br>

扬州市邗江区润扬南路33号 邮编：225127 电子邮件：tdxy@njupt.edu.cn</br>

Copyright © 2012 All Rights Reserved 苏ICP备2022004827号-1</br>

苏公网安备 32100302010629号
    </div>
    <div class="box31">
        <img src="./icon8.png" alt="">
    </div>
    <div class="box32">
        <img src="./last.png" alt="">
    </div>

ps：友情链接以目前技术力还无法实现其跳转

总结：第一次仿写网页，有诸多不足，下面几点还需完善

  • 定位用的过多，且对px不够熟练，很多定位要好几次才能到想要的位置
  • 还没养成多写注释的习惯，有时看不懂自己写的什么
  • 部分标签没记住
  • 为了赶工做网页导致跳了很多集视频案例没看，有时间需看完
  • 第一次写博客还不够熟练可能不够美观，或者条理不够清晰

结尾感受

短时间内接受大量知识可能有点不适应，但作为码农，高效的学习能力是必须的，还是要多多看课

第一次用掘金写博客感觉确实很好用，但还是希望能早日拥有一个自己个人博客网站

感受就写道这里，要赶紧run去写下一个官网了

ps：要多用搜索引擎

c6b7ef957b00e643b939abcf8947aa2.jpg

avatar
文章
阅读
粉丝