1.制作导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>导航栏示例</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #150b36;
border-radius: 15px;
text-align: center;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
text-shadow: 5px 5px 5px gray;
}
li a:hover {
background-color: #8f2626;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#游戏1">游戏1</a></li>
<li><a href="#游戏2">游戏2</a></li>
<li><a href="#游戏3">游戏3</a></li>
<li><a href="#游戏4">游戏4</a></li>
<li><a href="#游戏5">游戏5</a></li>
<li><a href="#游戏6">游戏6</a></li>
<li><a href="#游戏7">游戏7</a></li>
<li><a href="#游戏8">游戏8</a></li>
<li><a href="#游戏9">游戏9</a></li>
</ul>
</body>
</html>
运行结果
2.制作教务系统登录页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录页面</title>
<style>
.container{
position: relative;
}
.background-image
{
width: 100%;
height: auto;
}
.text-box {
position: absolute;
top: 50%;
left: 70%;
transform: translate(-30%,-30%);
text-align: center;
color:black;
}
.text-box h1{
margin: 0;
}
.text-box p{
margin: 10px 0;
}
.container img{
right: 200px;
}
.end{
font-family: "微软雅黑";
font-size: 12px;
}
</style>
</head>
<body>
<img src="./中南.png" alt="">
<form>
<div class="container">
<img src="./教务系统.gif" class="background-image">
<div class="text-box">
<h1>用户登录</h1><br>
<div>
<p> 用户名:<input type="text" name="username"></p>
<p>密 码: <input type="password" name="password"></p>
<p> 验证码:<input type="text" name="yanzhengma"><br><br><img src="./验证码.jpg"></p>
<button>登录</button>
</div>
</div>
<br>
<div class="end">湖南强智科技发展有限公司 版权所有
<span>
<a href="#">隐私声明</a>|<a href="#">设为首页</a>
</span>
</div>
</div>
</form>
</body>
</html>
运行结果
3.制作教务处主页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>教务处</title>
</head>
<style>
.jg,img{
margin-bottom: -5px;
}
.dh{
background-color: rgb(236, 227, 227);
width: 1230px;
height: 45px;
margin-top: 0;
}
.dh li{
display: inline-block;
text-align: center;
margin-top: 10px;
font-family: "楷体";
font-size: 20px;
padding-left: 50px;
}
.bp,img{
margin-top: -10px;
}
.container{
display: inline;
width: 350px;
height: 400px;
}
.body1{
float: left;
width: 330px;
height: 350px;
text-align: center;
font-family: "楷体";
}
.body2{
float: left;
width: 370px;
height: 350px;
text-align: center;
font-family: "楷体";
}
.body2 li{
list-style-type: none;
}
.body3{
float: right;
width: 500px;
height: 400px;
text-align: left;
font-family: "楷体";
font-size: 15px;
}
.body3 h2{
text-indent: 200px;
}
.body3 li{
list-style-type: none;
}
.foot div{
margin-bottom: -50px;
display: inline-block;
}
.foot1{
line-height: 180px;
text-align: center;
width: 180px;
height: 180px;
text-align: center;
background-color:green ;
}
.foot2{
line-height: 180px;
text-align: center;
width: 180px;
height: 180px;
background-color: deepskyblue;
}
.foot .foot3{
line-height: 180px;
text-align: center;
width: 180px;
height: 180px;
background-color: darkorange;
}
.foot .foot4{
line-height: 180px;
text-align: center;
width: 180px;
height: 180px;
background-color: cornflowerblue;
}
.bottom{
width: 1270px;
height: 50px;
background-color: rgb(36, 112, 206);
text-align: center;
margin-top: 51px;
}
</style>
<body>
<div class="jg">
<img src="./教务处.png" width="1270px" height="120">
<ol class="dh">
<li>规章制度</li>
<li>通知公告</li>
<li>新闻动态</li>
<li>质量监控</li>
<li>教务系统</li>
<li>教学改革</li>
<li>教学简报</li>
</ol>
</div>
<div>
<img src="./教务桌面.jpg" width="1270px" height="200px">
</div>
<div class="container">
<div class="main"></div>
<div class="body1">
<h2>新闻动态</h2>
<p>2024年湖南省普通高校教师课堂教学竞赛校内选拔赛顺利进行</p>
<p>教务处组织召开2024年本科人才培养方案修订工作推进会</p>
</div>
<div class="body2">
<h2>通知公告</h2>
<ul>
<li>关于中南林业科技大学涉外学院2024年专升...</li>
<li>关于开展2019年度校级-流本科专业建设点...</li>
<li>院教发〔2024]7号关于做好2024届毕业论...</li>
<li>院教发〔2024]8号关于2024届毕业设计(..</li>
<li>关于开展2024年院级课程思政教学竟赛的通知</li>
<li>2024年“专升本”考试准考证打印及考试须知</li>
<li>中南林业科技大学涉外学院2024年专升本免...</li>
<li>关于2024年春季学期重修安排的通知</li>
<li>中南林业科技大学涉外学院2024年专升本免...</li>
</ul>
</div>
<div class="body3">
<h2>下载中心</h2>
<ul>
<li>教务处邮箱<br>
<span>2020-12-23</span>
</li><hr>
<li>2023年6月全国大学生四六级成绩<br><span>2023-08-24</span></li><hr>
<li>中南林业科技大学涉外学院免修课程...<br><span>2023-5-28</span></li><hr>
<li>2022年12月大学英语四六级成绩<br><span>2023-2-23</span></li><hr>
<li>2022年6月大学英语四六级成绩<br><span>2022-6-3</span></li><hr>
<li>中南林业科技大学涉外学院教室申请表<br><span>2022-12-2</span></li><hr>
<li>转专业申请表<br><span>2020-12-23</span></li><hr>
<li>2021年12月大学英语四六级成绩<br><span>2021-12-23</span></li><hr>
<li>2021年6月大学英语四六级成绩<br><span>2021-12-23</span></li><hr>
</ul>
</div>
<div class="foot">
<div class="foot1">学籍学业</div>
<div class="foot2">综合管理</div>
<div class="foot3">教改项目</div>
<div class="foot4">下载中心</div>
</div>
</div>
<div class="bottom">
<p>
Copyright ©2011 - 2019 中南林业科技大学涉外学院 域名备案信息： 湘教QS4-201405-010072 湘ICP备09017705号 <br>
地址：湖南省长沙市望城区丁字湾街道 邮箱：znlswdzb@163.com
</p>
</div>
</body>
</html>
运行结果
4.仿淘宝页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>仿淘宝页面</title>
<style>
*{
margin-top: 0px;
}
.dh1{
width: 1190px;
height: 30px;
background-color: rgb(216, 216, 216);
}
.dh1,li{
display: inline-block;
list-style: none;
margin-top: 5px;
font-size: 15px;
padding-left: 15px;
}
.search{
display: inline-block;
}
.search,.search-bp{
width: 900px;
height: 100px;
margin-top: 20px;
margin-left: 180px;
}
.text{
margin-left: -30px;
border: 2px solid red;
width: 450px;
height: 30px;
}
.red{
color: red;
}
.A{
color: rgb(177, 177, 177);
}
.submit{
width: 100px;
height: 40px;
background-color: red;
}
.search,a{
text-indent: 30px;
}
.container li{
width: 235px;
height:350px;
list-style-type: none;
display: inline-block;
border: 1px solid black;
position: relative;
}
.container a{
text-decoration: none;
}
.container img{
margin-top: 10px;
float: left;
width: 220px;
height: 235px;
text-align: center;
}
.pro-introduce{
font-family: "PingFangSC-Regular";
font-size: 15px;
color: #9b9b9b;
line-height: 20px;
padding-top: 10px;
text-indent: 10px;
}
.pro-price{
text-indent: -10px;
color: red;
font-size: 15px;
line-height: 30px;
}
.pro-boss{
color: #9b9b9b;
font-size: 9px;
line-height: 20px;
text-indent: -10px;
}
.pro-sale{
color: #9b9b9b;
font-size: 9px;
text-align: right;
margin-right: 2px;
}
</style>
</head>
<body>
<div class="dh1">
<ul>
<li ><select name="address" >
<option value="china">中国大陆</option>
<option value="tw">中国台湾</option>
<option value="xg">中国香港</option>
<option value="hg">韩国</option>
<option value="mg">美国</option>
</select></li>
<li>账号管理</li>
<li>手机逛淘宝</li>
<li>网页无障碍</li>
<li>淘宝网首页</li>
<li>我的淘宝</li>
<li>购物车</li>
<li>收藏夹</li>
<li>商品分类</li>
<li>免费开店</li>
<li>千牛卖家中心</li>
<li>帮助中心</li>
</ul>
</div>
<div class="search">
<div class="search-bp">
<form action="">
<input type="text" class="text" placeholder="朴彩英周边">
<input type="submit" class="submit" value="搜索">
</form><br>
<a class="red">一淘限时抢</a>
<a class="A">口红</a>
<a class="A">洗衣液</a>
<a class="A">女袜</a>
<a class="A">女睡衣</a>
<a class="A">女鞋</a>
<a class="A">运动鞋</a>
<a class="A">Dior</a>
<a class="A">新款女装</a>
<a class="A">zara</a>
<a class="A">女裤</a>
</div>
</div>
<!-- 商品列表展示 -->
<div class="container">
<!-- 所有商品信息 -->
<ul>
<li>
<a href="">
<!-- 1.图片 -->
<div class="pro-img"><img src="./朴彩英.jpg"></div>
<!-- 2.文字说明 -->
<div class="pro-introduce">
<span>BLACKPINK朴彩英rolo专辑R</span>
</div>
<!-- 3.价格 -->
<div class="pro-price"><span>126.51</span></div>
<!-- 4.店铺 -->
<div class="pro-boss"><span>广东</span></div>
<!-- 5.月销3000+ -->
<div class="pro-sale"><span>月销3000+</span></div>
</a>
</li>
<li>
<a href="">
<!-- 1.图片 -->
<div class="pro-img"><img src="./朴彩英.jpg"></div>
<!-- 2.文字说明 -->
<div class="pro-introduce">
<span>BLACKPINK朴彩英rolo专辑R</span>
</div>
<!-- 3.价格 -->
<div class="pro-price"><span>126.51</span></div>
<!-- 4.店铺 -->
<div class="pro-boss"><span>广东</span></div>
<!-- 5.月销3000+ -->
<div class="pro-sale"><span>月销3000+</span></div>
</a>
</li>
<li>
<a href="">
<!-- 1.图片 -->
<div class="pro-img"><img src="./朴彩英.jpg"></div>
<!-- 2.文字说明 -->
<div class="pro-introduce">
<span>BLACKPINK朴彩英rolo专辑R</span>
</div>
<!-- 3.价格 -->
<div class="pro-price"><span>126.51</span></div>
<!-- 4.店铺 -->
<div class="pro-boss"><span>广东</span></div>
<!-- 5.月销3000+ -->
<div class="pro-sale"><span>月销3000+</span></div>
</a>
</li>
<li>
<a href="">
<!-- 1.图片 -->
<div class="pro-img"><img src="./朴彩英.jpg"></div>
<!-- 2.文字说明 -->
<div class="pro-introduce">
<span>BLACKPINK朴彩英rolo专辑R</span>
</div>
<!-- 3.价格 -->
<div class="pro-price"><span>126.51</span></div>
<!-- 4.店铺 -->
<div class="pro-boss"><span>广东</span></div>
<!-- 5.月销3000+ -->
<div class="pro-sale"><span>月销3000+</span></div>
</a>
</li>
<li>
<a href="">
<!-- 1.图片 -->
<div class="pro-img"><img src="./朴彩英.jpg"></div>
<!-- 2.文字说明 -->
<div class="pro-introduce">
<span>BLACKPINK朴彩英rolo专辑R</span>
</div>
<!-- 3.价格 -->
<div class="pro-price"><span>126.51</span></div>
<!-- 4.店铺 -->
<div class="pro-boss"><span>广东</span></div>
<!-- 5.月销3000+ -->
<div class="pro-sale"><span>月销3000+</span></div>
</a>
</li>
<li>
<a href="">
<!-- 1.图片 -->
<div class="pro-img"><img src="./朴彩英.jpg"></div>
<!-- 2.文字说明 -->
<div class="pro-introduce">
<span>BLACKPINK朴彩英rolo专辑R</span>
</div>
<!-- 3.价格 -->
<div class="pro-price"><span>126.51</span></div>
<!-- 4.店铺 -->
<div class="pro-boss"><span>广东</span></div>
<!-- 5.月销3000+-->
<div class="pro-sale"><span>月销3000+</span></div>
</a>
</li>
<li>
<a href="">
<!-- 1.图片 -->
<div class="pro-img"><img src="./朴彩英.jpg"></div>
<!-- 2.文字说明 -->
<div class="pro-introduce">
<span>BLACKPINK朴彩英rolo专辑R</span>
</div>
<!-- 3.价格 -->
<div class="pro-price"><span>126.51</span></div>
<!-- 4.店铺 -->
<div class="pro-boss"><span>广东</span></div>
<!-- 5.月销3000+ -->
<div class="pro-sale"><span>月销3000+</span></div>
</a>
</li>
<li>
<a href="">
<!-- 1.图片 -->
<div class="pro-img"><img src="./朴彩英.jpg"></div>
<!-- 2.文字说明 -->
<div class="pro-introduce">
<span>BLACKPINK朴彩英rolo专辑R</span>
</div>
<!-- 3.价格 -->
<div class="pro-price"><span>126.51</span></div>
<!-- 4.店铺 -->
<div class="pro-boss"><span>广东</span></div>
<!-- 5.月销3000+ -->
<div class="pro-sale"><span>月销3000+</span></div>
</a>
</li>
</ul>
</div>
</body>
</html>
运行结果
扫一扫
3587
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
