Web前端 实验二(页面样式效果实战)
实验指导.pdf
实现页面样式
可见河南工业大学官网
实验指导已经提供了实现方式 此处提供自己闲来无事实现的一种方式
实际情况是没仔细看实验指导，拿到页面样式便开始无脑实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
<div class="head">
<img src="logo.png" />
<img src="logo2.png" />
</div>
<div class="HeadButton">
<button class="Button">学校概况</button>
<button class="Button">机构设置</button>
<button class="Button">学科师资</button>
<button class="Button">教育教学</button>
<button class="Button">科学研究</button>
<button class="Button">招生就业</button>
<button class="Button">海外交流</button>
<button class="Button">校园文化</button>
<button class="Button">公共服务</button>
</div>
<div class="RotationMap">
<div class="photo">
<img src="news1.jpg"/>
</div>
</div>]
<div class="info">
<div class="info_left">
<div class="info_left_button">
<button class="info_button">学校要闻</button>
<button class="info_button">综合教务</button>
</div>
<div class="info_left_mess">
<ul>
<li>我校何云浩同学入选全国“青年马克思主义者培养班"</li>
<li>郑州工程技术学院一行来校交流访问</li>
<li>学校召开"双-流"创建工作研讨会</li>
<li>校长李成伟到材料科学与工程学院调研指导工作</li>
<li>学校召开教师党支部书记座谈会</li>
</ul>
</div>
</div>
<div class="info_middle">
<div class="info_middle_button">
<button class="info_button">通知公告</button>
<button class="info_button">学术动态</button>
</div>
<div class="info_middle_mess">
<ul>
<li>校长李成伟到材料科学与工程学院调研指导工作"</li>
<li>开展“当好引路人，-起向未来”师德主题教育征文和..</li>
<li>河南省“课堂教学质量提升年专项行动”视频会议通知</li>
<li>校党委书记刘志军与学生代表座谈交流</li>
<li>第八届物理创新实验设计大赛通知</li>
</ul>
</div>
</div>
<div class="info_right">
<img class="info_image" src="news1.jpg" >
</div>
</div>
<div class="bottom">
<div class="bottom_button">
<img src="icon1.png">
<div>学校邮箱</div>
</div>
<div class="bottom_button">
<img src="icon2.png">
<div>VPN服务</div>
</div>
<div class="bottom_button">
<img src="icon3.png">
<div>服务门户</div>
</div>
<div class="bottom_button">
<img src="icon4.png">
<div>数字资源中心</div>
</div>
<div class="bottom_button">
<img src="icon5.png">
<div>图书馆</div>
</div>
<div class="bottom_button">
<img src="icon6.png">
<div>一网通办</div>
</div>
<div>
<div class="bottom_left">
<div class="bottom_button">
<div>图书馆</div>
</div>
<div class="bottom_button">
<div>校友总会</div>
</div>
<div class="bottom_button">
<div>综合服务</div>
</div>
<div class="bottom_button">
<div>实践教学</div>
</div>
<div class="bottom_button">
<div>教学质量</div>
</div>
</div>
<div class="bottom_left">
<div class="bottom_button">
<div>笃行网</div>
</div>
<div class="bottom_button">
<div>校务公开</div>
</div>
<div class="bottom_button">
<div>网络服务</div>
</div>
<div class="bottom_button">
<div>电子校务</div>
</div>
<div class="bottom_button">
<div>体质达标</div>
</div>
</div>
<div class="bottom_left">
<div class="bottom_button">
<select>
<option value="none" selected disabled hidden>请选择选项</option>
<option>国内高校</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="bottom_button">
<select>
<option value="none" selected disabled hidden>请选择选项</option>
<option>省内高校</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="bottom_button">
<select>
<option value="none" selected disabled hidden>请选择选项</option>
<option>友情链接</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</div>
</div>
<style>
.head{
height: 150px;
width: 100%;
background-color: #1b4f80;
}
.HeadButton{
padding-left: 5%;
height: 50px;
width: 95%;
background-color: #26426d;
}
.Button{
height: 50px;
width: 10%;
background-color: #26426d;
/* 去掉button的边框 */
border-style: none;
/* 去掉button的边框
border-color: transparent; */
}
.info{
display: flex;
height: 260px;
}
.info_left{
width: 500px;
height: 400px;
}
.info_left_button{
padding-left: 100px;
float: left;
}
.info_middle{
width: 500px;
height: 400px;
}
.info_middle_button{
padding-right: 100px;
float: left;
}
.info_right{
padding-right: 0px;
}
.info_image{
width: 600px;
height: 200px;
}
.info_button{
width: 190px;
height: 50px;
/* 去掉button的边框 */
border-style: none;
}
.bottom{
width: 95%;
height: 150px;
background-color: #1b4f80;
padding-left: 50px;
display: flex;
}
.bottom_button{
padding-left: 40px;
height: 10px;
}
.bottom_left{
width: 100%;
height: 20px;
background-color: #1b4f80;
padding-left: 50px;
display: flex;
}
.bottom_left{
width: 100%;
height: 20px;
background-color: #1b4f80;
padding-left: 50px;
display: flex;
}
.photo{
width:100%;
height:9999px;
animation:switch 15s infinite;
}
.photo > img{
float:left;
}
.RotationMap{
width:100%;
height:340px;
overflow:hidden;
}
@keyframes switch{
0%{};
20%{transform:translateX(0px);}
40%{transform:translateX(-820px);}
60%{transform:translateX(-1640px);}
80%{transform:translateX(-2460px);}
100%{transform:translateX(-3280px);}
}
</style>
</body>
</html>
我的效果
收获
下拉框实现
<select>
<!--默认选项-->
<option value="none" selected disabled hidden>请选择选项</option>
<!--下拉选项-->
<option>国内高校</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
纯CSS实现轮播图
核心代码
@keyframes switch{
0%{};
20%{transform:translateX(0px);}
40%{transform:translateX(-820px);}
60%{transform:translateX(-1640px);}
80%{transform:translateX(-2460px);}
100%{transform:translateX(-3280px);}
}
核心思想
使用@keyframes 使元素逐渐移动：
原创不易 转载请标明出处
如果对你有所帮助 别忘啦点赞支持哈
258
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
