web前端第二次作业
一、学校官网
1.1学校官网
代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>学校官网1</title><style>:root{--all-width:1300px;}header.header{width: 100%;height: auto;border-bottom: 1px solid blue;}.top-logo{width: var(--all-width);height: 130px;margin: auto;display: flex;align-items: center;justify-content: space-between;}.top-logo>img{margin-top: 0;max-width: 300px;height: auto;}.search{width: 300px;height: 50px;display: flex;align-items: center;}.search>input{width: 150px;height: 40px;border-radius: 20px;border: 1px solid rgb(211, 211, 229);padding: 0 15px;}.search>input:focus{outline: none;border: 1px solid black;}.search button{width: 60px;height: 40px;border: none;/* background-image: linear-gradient(blue,white); */color: rgb(22, 112, 195);cursor: pointer;border-radius: 20px;}nav{width: 100%;background-color: rgb(31, 61, 150);}nav > ul{list-style: none; margin: 0 auto;padding: 0;max-width: var(--all-width);display: flex; justify-content: center; gap: 40px; }nav>ul>li{line-height: 50px;}nav>ul>li>a{display: block;color: #fff;text-decoration: none;font-size: 18px;padding: 0 10px;}nav > ul > li > a:hover{background-color: rgba(255,255,255,.2);border-radius: 4px;}.banner{width: 100%;height: 500px;background-image: url();background-size: cover;background-position: center;}.news-section{width: 100%;display: flex;justify-content: space-between;}.news-item{width: 30%;border: 1px solid #ccc;padding: 20px;box-sizing: border-box;}.box{width: 129%;max-width: var(--all-width);}.box img{width: 129%;height: auto;display: block;}</style>
</head>
<body><header class="header"><div class="top-logo"><img src="./3.png" alt="校徽"><div class="search"><input type="text" placeholder="搜索"><button>搜索</button></div></div><nav><ul><li><a href="#">首页</a></li><li><a href="#">学校概况</a></li><li><a href="#">党建工作</a></li><li><a href="#">学院设置</a></li><li><a href="#">人才培养</a></li><li><a href="#">招生就业</a></li><li><a href="#">活力校园</a></li><li><a href="#">校园风采</a></li><li><a href="#">信息服务</a></li></ul></nav><div class="box"><img src="./2.png" alt=""></div></header><div class="banner"></div>
</body>
</html>效果如下：
1.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>:root{--all-width:1300px;}body {font-family: Arial, sans-serif;margin: 0;padding: 0;background-color: #f5f5f5;}header {background-color: #fff;padding: 10px 20px;display: flex;justify-content: space-between;align-items: center;box-shadow: 0 2px 4px rgba(0,0,0,0.1);}.logo {display: flex;align-items: center;}.logo img {width: 100%;height: 40px;margin-right: 10px;}nav ul {list-style: none;display: flex;align-items: center;}nav ul li {margin: 0 15px;}nav ul li a {color: #333;text-decoration: none;font-weight: bold;font: "宋体";}.search-bar {display: flex;align-items: center;}.search-bar input[type="text"] {padding: 8px;border: 1px solid #ccc;border-radius: 4px;font-size: 16px;outline: none;}.search-bar button {padding: 8px 12px;margin-left: 5px;background-color: #007bff;color: white;border: none;border-radius: 4px;cursor: pointer;}.search-bar button:hover {background-color: #0056b3;}.banner {background-color: white;color: white;text-align: center;padding: 50px 0;font-size: 24px;font-weight: bold;}.course-section, .live-section {padding: 20px;}.course-section h2, .live-section h2 {margin-bottom: 20px;}.course-list, .live-list {display: flex;flex-wrap: wrap;justify-content: space-between;}.course-item, .live-item {width: 23%;background-color: #fff;border: 1px solid #ddd;border-radius: 8px;overflow: hidden;box-shadow: 0 2px 4px rgba(0,0,0,0.1);margin-bottom: 20px;}.course-item img, .live-item img {width: 100%;height: auto;}.course-item h3, .live-item h3 {padding: 10px;margin: 0;font-size: 18px;}footer {background-color: #003366;color: white;text-align: center;padding: 10px 0;position: relative;width: 100%;}/* 蓝色登录按钮 */.btn-login{width: 80px;height: 40px;border: none;/* background-image: linear-gradient(blue,white); */color: rgb(138, 150, 161);cursor: pointer;border-radius: 15px;}/* .btn-login:hover{background:#40a9ff;} *//* 红色重置按钮 */.btn-reset{width: 80px;height: 40px;border: none;/* background-image: linear-gradient(blue,white); */color: rgb(195, 212, 224);cursor: pointer;border-radius: 15px;background-color: rgb(19, 119, 241);}</style>
</head>
<body><header><div class="logo"><img src="./在线学堂.png" alt="logo"></div><nav><ul><li><a href="#">首页</a></li><li><a href="#">全部课程</a></li><li><a href="#">公开课</a></li><li><a href="#">云课直播</a></li><li><a href="#">新闻公告</a></li><li><a href="#">数图资源</a></li><li><a href="#">智汇大讲堂</a></li></ul></nav><div class="search-bar"><input type="text" placeholder="请输入课程名称"><button type="submit">搜索</button></div><div><button class="btn-login">教师登录</button><button class="btn-reset">学生登录</button></div></header><div class="banner"><img src="./8.png" alt=""></div><div class="course-section"><h2>计算机实训</h2><div class="course-list"><div class="course-item"><img src="https://s2.yinghuaonline.com/upfiles/1676421601320.jpg" alt="课程1"><h3>5G全网部署仿真与实践</h3></div><div class="course-item"><img src="https://s2.yinghuaonline.com/upfiles/1655295971670.jpg"alt="课程2"><h3>大学计算机基础</h3></div><div class="course-item"><img src="https://s2.yinghuaonline.com/upfiles/1676365389801.jpg" alt="课程3"><h3>机器人制作与创客综合能力实训</h3></div><div class="course-item"><img src="https://s3.hongmukej.com/upfiles/1750215334996.png" alt="课程4"><h3>数据挖掘</h3></div></div></div><div class="live-section"><h2>热门直播</h2><div class="live-list"><div class="live-item"><img src="https://s2.yinghuaonline.com/upfiles/1650260636816.png" alt="直播1"><h3>商务谈判技巧</h3></div><div class="live-item"><img src="https://s2.yinghuaonline.com/upfiles/1650260339702.png" alt="直播2"><h3>打造高执行力团队</h3></div><div class="live-item"><img src="https://s2.yinghuaonline.com/upfiles/1650260472088.png" alt="直播3"><h3>高校资产管理的信息化应用</h3></div><div class="live-item"><img src="https://s2.yinghuaonline.com/upfiles/1650260500497.png" alt="直播4"><h3>新时代智慧校园建设</h3></div></div></div>
</body>
</html>效果如下：
1.3学校教务系统登陆界面
代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>学校教务系统登录界面</title><style>/* 原 logo 区域 */.logo{position:relative;padding:30px 0;height:80px;line-height:80px;}.logo img{height:80px;margin-left:15%;vertical-align:middle;}/* 主容器 */.flex-container{width:1500px;height:300px;margin:auto;background-color:#eee9e9;display:flex;align-items:center;}/* 左侧大图 */.nav{width:49%;height:550px;margin-left:15px;display:flex;align-items:center;justify-content:center;}.nav img{width:60%;height:55%;}/* 右侧登录卡片 */.login-card{width:50%;padding:0 50px;display:flex;flex-direction:column;justify-content:space-between;height:230px;}.login-title{font-size:22px;font-weight:600;color:#333;margin-bottom:25px;}.form-group{display:flex;align-items:center;margin-bottom:10px;}.form-group label{width:70px;font-size:15px;text-align:right;margin-right:12px;}/* 新增：限制输入框长度 */.input-box{width:220px; /* 想要的宽度，可自行再改 */}.input-box input{width:100%;height:30px;padding:0 12px;border:1px solid #d9d9d9;border-radius:4px;}/* 小图区域 */.small-banner{align-self:center;margin-top:10px;}.small-banner img{height:40px;width:auto;}.aone{margin-left: 10%;color: gray;}.two{color: blue;}.afour{margin-left: 75%;color: gray;}footer a{color:#007bff;text-decoration:none;margin:0 5px;}footer a:nth-child(2){text-decoration:underline;}</style>
</head><body><!-- logo --><div class="logo"><img src="./4.png" alt="logo"></div><!-- 主区域 --><div class="flex-container"><!-- 左侧大图 --><div class="nav"><img src="./5.png" alt=""></div><!-- 右侧登录 --><div class="login-card"><div class="login-title">用户登录</div><form action="#" method="post"><div class="form-group"><label>用户名</label><div class="input-box"><input type="text" placeholder="请输入您的学号" required></div></div><div class="form-group"><label>密码</label><div class="input-box"><input type="password" placeholder="请输入您的密码" required></div></div></form><!-- 小图 --><div class="small-banner"><img src="./6.png" alt=""></div></div></div><!-- 页脚 --><footer><a href="#" class="aone">湖南强智科技发展有限公司 版权所有</a><a href="#" class="atwo">找回密码</a> <a href="#" class="afour">隐私声明|设为首页</a></footer>
</body>
</html>效果如下：
二、淘宝网页
2.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>body{height: 630px;background-color:rgb(241, 241, 241);}.main1{width: 1280px;height:70px ;margin: auto;}.top1{float: left;margin-left: 28px;}.main2{width: 150px;height: 70px;float: left;margin-left: 980px;}.top2,.top3{width: 120px;height: 5px;margin-top: 15px;font-size: x-small; }.top4,.top5{ color:grey;text-decoration: none;}.top5,.top4:hover{color: orange;text-decoration: none;}.middle{width: 850px;height: 520px;background-color: white;border-radius: 20px;margin: auto;margin-top: 90px; }.middle1{width: 350px;height: 450px;float: left;font-family: "黑体" }.middle2{width: 400px;height: 450px;margin-left: 80px;float: left;font-family: "黑体"}.inner1{width: 200px;height: 30px;font-size: larger;margin-left: 70px;text-align: center;margin-top: 60px;}.inner2{width: 210px;height: 210px;margin-left: 70px;margin-top: 30px;}.inner3{width: 30px;height: 20px;float: left;font-size: x-small;margin-left: 70px;margin-top: 15px;color: gray; }.inner4{width: 55px;height: 20px;float: left;font-size: x-small;color: rgb(255, 98, 0);margin-top: 15px;}.inner5{width: 130px;height: 20px;float: left;font-size: x-small;margin-top: 15px;color: gray;}.inner6{width: 120px;height: 20px;margin-top: 80px;margin-left: 120px;color: gray;font-size: 15px;}.inner7{width: 100px;height: 30px;color: rgb(255, 94, 0);font-size: larger;font-weight: 1000;margin-top: 55px;margin-left: 75px;float: left;}.inner8{width: 100px;height: 30px;color: black;font-size: larger;font-weight: 400;margin-top: 55px;margin-left: 35px;float: left;}.input1,.input2{width: 280px;height: 40px;margin-left: 50px;border-radius: 10px;margin-top: 30px;background-color: rgb(236, 235, 235);border: 0cap;}.input3{text-decoration: none;margin-left: 280px;font-size: x-small;color: grey;}.input4{width: 280px;height: 40px;margin-left: 50px;border-radius: 10px;margin-top: 70px;background-color: rgb(255, 94, 0);border: 0cap;color: white;}.aone,.atwo,.athree,.afour{text-decoration: none;color: grey;margin-left: 10px;font-size: smaller; }.aone{margin-left: 45px;}.input5{margin-top: 30px;}</style>
</head>
<body><div class="main1"><div class="top1"><img src="./1.png" alt="taobao" width="70px" height="70px"></div><div class="main2"><div class="top2"><a href="" class="top4">网络无障碍</a></div><div class="top3"><a href="https://survey.taobao.com/apps/zhiliao/rWq00C2IB?spm=a2107.1.0.0.762211d9Ubw8RQ" class="top4">"登陆页面"改进建议</a></div></div></div><div class="middle"><div class="middle1"><div class="inner1">手机扫码登录</div><div class="inner2"> <img src="./二维码.png" alt="登录" width="210px" height="210px"></div><div class="inner3">打开</div><div class="inner4">淘宝app</div><div class="inner5">——点击左上角扫一扫</div><div class="inner6">怎么扫码登录?</div></div><div class="middle2"><div class="inner7">密码登录</div><div class="inner8">短信登录</div><input type="text" placeholder=" 账号名/邮箱/手机号" class="input1"><input type="password" placeholder=" 请输入登录密码" class="input2" ><a href="https://passport.taobao.com/ac/password_find.htm?from_site=0&lang=zh_CN&app_name=tb&tracelog=signin_main_pass" class="input3">忘记密码</a><button class="input4">登录</button><div class="input5"><a href="" class="aone"> 支付宝登录 |</a><a href="" class="atwo"> 钉钉登录 |</a><a href="" class="athree"> 忘记账号 |</a><a href="" class="afour"> 免费注册</a></div></div></div>
</body>
</html>效果如下：
2.2淘宝商品浏览界面
代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>淘宝</title><!-- 技巧：1.布局2.小格子3.通过调试工具看源代码--><style>/* 1.所有商品初始窗体 */.prod_all{width: 1310px;height: 1000px;margin: auto;}li{list-style: none;width: 214px;height: 328px;display: inline-block;}li:hover{border: 1px solid orangered;border-radius: 12px;}img{border-radius: 12px;margin-left: 2.8px;}.introduce{font-size: 16px;line-height: 24px;}.price{color: orangered;font-weight: bold;font-family: "黑体";font-size: 20px;margin-top: 10px;}.price>span:nth-child(1){font-size: 16px;}</style>
</head>
<body><div class="prod_all"><li><!-- 1.图片 --><div><img width="200px" height="250px" src="https://img.alicdn.com/imgextra/i2/1989471083/O1CN017hdmSR1Js3zyYlcng_!!1989471083.jpg_.webp"></div><!-- 2.商品介绍 --><div class="introduce">Fanptntox 迷情夏威夷 紫色U领网纱拼接吊带连衣裙度假收腰长裙子</div><!-- 3.价格 --><div class="price"><span>￥</span><span>238</span></div></li><li><!-- 1.图片 --><div><img width="200px" height="250px" src="https://img.alicdn.com/imgextra/i2/1989471083/O1CN017hdmSR1Js3zyYlcng_!!1989471083.jpg_.webp"></div><!-- 2.商品介绍 --><div class="introduce">Fanptntox 迷情夏威夷 紫色U领网纱拼接吊带连衣裙度假收腰长裙子</div><!-- 3.价格 --><div class="price"><span>￥</span><span>238</span></div></li><li><!-- 1.图片 --><div><img width="200px" height="250px" src="https://img.alicdn.com/imgextra/i2/1989471083/O1CN017hdmSR1Js3zyYlcng_!!1989471083.jpg_.webp"></div><!-- 2.商品介绍 --><div class="introduce">Fanptntox 迷情夏威夷 紫色U领网纱拼接吊带连衣裙度假收腰长裙子</div><!-- 3.价格 --><div class="price"><span>￥</span><span>238</span></div></li><li><!-- 1.图片 --><div><img width="200px" height="250px" src="https://img.alicdn.com/imgextra/i2/1989471083/O1CN017hdmSR1Js3zyYlcng_!!1989471083.jpg_.webp"></div><!-- 2.商品介绍 --><div class="introduce">Fanptntox 迷情夏威夷 紫色U领网纱拼接吊带连衣裙度假收腰长裙子</div><!-- 3.价格 --><div class="price"><span>￥</span><span>238</span></div></li><li><!-- 1.图片 --><div><img width="200px" height="250px" src="https://img.alicdn.com/imgextra/i2/1989471083/O1CN017hdmSR1Js3zyYlcng_!!1989471083.jpg_.webp"></div><!-- 2.商品介绍 --><div class="introduce">Fanptntox 迷情夏威夷 紫色U领网纱拼接吊带连衣裙度假收腰长裙子</div><!-- 3.价格 --><div class="price"><span>￥</span><span>238</span></div></li><li><!-- 1.图片 --><div><img width="200px" height="250px" src="https://img.alicdn.com/imgextra/i2/1989471083/O1CN017hdmSR1Js3zyYlcng_!!1989471083.jpg_.webp"></div><!-- 2.商品介绍 --><div class="introduce">Fanptntox 迷情夏威夷 紫色U领网纱拼接吊带连衣裙度假收腰长裙子</div><!-- 3.价格 --><div class="price"><span>￥</span><span>238</span></div></li><li><!-- 1.图片 --><div><img width="200px" height="250px" src="https://img.alicdn.com/imgextra/i2/1989471083/O1CN017hdmSR1Js3zyYlcng_!!1989471083.jpg_.webp"></div><!-- 2.商品介绍 --><div class="introduce">Fanptntox 迷情夏威夷 紫色U领网纱拼接吊带连衣裙度假收腰长裙子</div><!-- 3.价格 --><div class="price"><span>￥</span><span>238</span></div></li><li><!-- 1.图片 --><div><img width="200px" height="250px" src="https://img.alicdn.com/imgextra/i2/1989471083/O1CN017hdmSR1Js3zyYlcng_!!1989471083.jpg_.webp"></div><!-- 2.商品介绍 --><div class="introduce">Fanptntox 迷情夏威夷 紫色U领网纱拼接吊带连衣裙度假收腰长裙子</div><!-- 3.价格 --><div class="price"><span>￥</span><span>238</span></div></li><li><!-- 1.图片 --><div><img width="200px" height="250px" src="https://img.alicdn.com/imgextra/i2/1989471083/O1CN017hdmSR1Js3zyYlcng_!!1989471083.jpg_.webp"></div><!-- 2.商品介绍 --><div class="introduce">Fanptntox 迷情夏威夷 紫色U领网纱拼接吊带连衣裙度假收腰长裙子</div><!-- 3.价格 --><div class="price"><span>￥</span><span>238</span></div></li><li><!-- 1.图片 --><div><img width="200px" height="250px" src="https://img.alicdn.com/imgextra/i2/1989471083/O1CN017hdmSR1Js3zyYlcng_!!1989471083.jpg_.webp"></div><!-- 2.商品介绍 --><div class="introduce">Fanptntox 迷情夏威夷 紫色U领网纱拼接吊带连衣裙度假收腰长裙子</div><!-- 3.价格 --><div class="price"><span>￥</span><span>238</span></div></li><li><!-- 1.图片 --><div><img width="200px" height="250px" src="https://img.alicdn.com/imgextra/i2/1989471083/O1CN017hdmSR1Js3zyYlcng_!!1989471083.jpg_.webp"></div><!-- 2.商品介绍 --><div class="introduce">Fanptntox 迷情夏威夷 紫色U领网纱拼接吊带连衣裙度假收腰长裙子</div><!-- 3.价格 --><div class="price"><span>￥</span><span>238</span></div></li><li><!-- 1.图片 --><div><img width="200px" height="250px" src="https://img.alicdn.com/imgextra/i2/1989471083/O1CN017hdmSR1Js3zyYlcng_!!1989471083.jpg_.webp"></div><!-- 2.商品介绍 --><div class="introduce">Fanptntox 迷情夏威夷 紫色U领网纱拼接吊带连衣裙度假收腰长裙子</div><!-- 3.价格 --><div class="price"><span>￥</span><span>238</span></div></li></div></body>
</html>效果如下：
2.3淘宝购物车页面
代码如下：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>淘宝购物车界面</title><style>.Tbsl{background-color: #FFFFFF;height: 80px;margin: 0px 0px 24px;}.box{text-align: center;overflow: hidden;}button{height: 18px;width: 22px;text-align: center;border: #F5F5F5; }</style></head><body><table> <tr><td width="68%"><img src="./淘宝购物车.png" /> </td><td><div id="Tbsl"><select style=" outline: none; width:50px;height:32px;border: 3px solid orangered;border-right: none;color: gainsboro;"><option selected="selected" disabled="disabled">宝贝</option><optgroup label="鞋靴"></optgroup><optgroup label="服装"></optgroup></select><input type="search" style="outline: none; border: 3px solid orangered; border-left: none; border-right: none; height: 31px; width:250px;"/><button style="color: #F5F5F5; width: 50px; height: 32px;background-color: red;border-color: red;">搜索</button> </div></td></tr></table><table border="0" width="1300px"height="500px"><thead style="height: 30px;"><th align="right"><input type="checkbox" name="全选"/></th><th align="left">全选</th><th colspan="2">商品信息</th><th>单价</th><th width="5%">数量</th><th>金额</th><th>操作</th></thead><tr height="30px"><td align="right"><input type="checkbox" name="勾选"/></td><td colspan="10">店铺:MAC魅可官方店<img src="口红.png"height="23px"width="23px" /> </td></tr><tr height="30px"><td align="right"><input type="checkbox" name="勾选"/></td><td><img src="口红.png"width="140px"height="150px"/></td><td width="35%"> <a href="https://www.taobao.com">【直播专享】MAC/魅可大子弹头口红唇膏哑光显色669/602/666</a><br/><img src="./9.png"width="150px"height="60px"/></td><td><font color="gainsboro">版本<br/>哑光大子弹头 | 浓郁持色 大宠粉666</font> </td><td><del><font color="grey">¥225.00</font></p></del> <p>¥185.00</p></td><td align="center" width="10%"><div class="box"><button>+</button><input type="number" value="1" style="border: none; height: 16px;width:30px;text-align: center;"/><button>-</button></div></td><td><font color="red">¥185.00</font></td><td><a href="#">移入收藏夹</a></br><a href="#">删除</a></td></tr><tr height="30px"><td align="right"><input type="checkbox" name="勾选"/></td><td colspan="10">店铺:cogi高资旗舰店<img src= https://gw.alicdn.com/imgextra/i2/O1CN01Mo9BIf1DOOTmHgOR1_!!6000000000206-2-tps-102-48.png height="23px"width="30px" /> </td></tr><tr height="30px"><td align="right"><input type="checkbox" name="勾选"/></td><td><img src="./面膜.png"width="140px"height="150px" /></td><td><a href="https://www.taobao.com">[重磅升级]高姿面膜女蜂巢补水保湿舒缓积雪草修护熬夜肌官方正品</a><br/><img src="./10.png"width="200px"height="70px"/></td><td><font color="gainsboro">【升级版22片】3.0版到手2盒+2片<br/>【升级版组合装】3.0版锁水1盒+焕采1盒+修护2盒+7片</font> </td><td> <p><color="grey">¥199.00</p> </td><td> <div class="box"><button>+</button><input type="number" value="1" style=" border: none; height: 16px;width: 30px;text-align: center;"/><button>-</button></td><td><font color="red">¥199.00</font> </td><td><a href="#">移入收藏夹</a></br><a href="#">删除</a> </td></tr><tfoot align="right" style="background-color: gainsboro;"><tr><td colspan="8">合计（不含运费）：0元<span> </span><input type="button" value="结算"style="background-color: red; width: 34px;height: 25px;color: #F5F5F5;border: none;"/></td></tr></tfoot></table></body>
</html>效果如下：
