1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.topBox{
font-size: 16px;
padding: 0;
margin: 0;
outline: 0;
box-sizing: border-box;
width: 100%;
height: 100px;
background: #e2e0df;
min-width: 1280px;
}
.topContainer{
font-size: 16px;
padding: 0;
outline: 0;
box-sizing: border-box;
width: 1280px;
margin: auto;
padding-top: 15px;
position: relative;
height: 100px;
}
.head_left{
font-size: 16px;
padding: 0;
margin: 0;
outline: 0;
box-sizing: border-box;
float: left;
}
.hr_left{
font-size: 16px;
outline: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0px;
list-style: none;
float: left;
width: 270px;
height: 36px;
margin-top: 10px;
}
.li1{
outline: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0px;
list-style: none;
display: inline-block;
margin-left: 16px;
font-size: 14px;
line-height: 24px;
color: white;
}
.navBox{
font-size: 16px;
padding: 0;
margin: 0;
outline: 0;
box-sizing: border-box;
width: 100%;
height: 45px;
line-height: 45px;
min-width: 1280px;
}
.nav-menu{
font-size: 16px;
line-height: 45px;
padding: 0;
outline: 0;
box-sizing: border-box;
width: 1280px;
margin: 0 auto;
height: 45px;
}
.nav{
font-size: 16px;
outline: 0;
box-sizing: border-box;
padding: 0;
border: 0px;
list-style: none;
margin: auto;
height: 45px;
line-height: 45px;
display: inline-block;
width: 1200px;
position: relative;
left: 47px;
}
.li2{
font-size: 16px;
outline: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0px;
list-style: none;
float: left;
width: 133px;
min-height: 45px;
line-height: 45px;
text-align: center;
cursor: pointer;
position: relative;
}
.banner{
font-size: 16px;
padding: 0;
margin: 0;
outline: 0;
box-sizing: border-box;
height: 400px;
position: relative;
width: 100%;
}
.js-silder{
font-size: 16px;
padding: 0;
outline: 0;
box-sizing: border-box;
position: relative;
min-width: 320px;
height: 400px;
margin: 0 auto;
width: 1280px;
}
.silder-scroll{
font-size: 16px;
padding: 0;
margin: 0;
outline: 0;
box-sizing: border-box;
width: 100%;
overflow: hidden;
}
.silder-main{
font-size: 16px;
padding: 0;
margin: 0;
outline: 0;
box-sizing: border-box;
position: relative;
width: 100%;
height: 400px;
}
.silder_main-img{
font-size: 16px;
padding: 0;
margin: 0;
outline: 0;
box-sizing: border-box;
position: absolute;
top: 0;
width: 100%;
left: -1380px;
background-color: aqua;
}
</style>
<body>
<div class="topBox">
<div class="topContainer">
<div class="left">
<a href="" title="成都文理学院" class="logo">
<img src="./1.png" width="1000px" height="100px">
</a >
</div>
<div class="navBox">
<div class="nav-menu">
<a href=" ">
<img src="">
</a >
<ul class="nav">
<li style="display: none;" class="li2">
<a href="https://www.scu.edu.cn/index.htm" target="_blank">首页</a>
</li>
<li class="li2">
<a href="https://www.cdcas.edu.cn/xueyuangaikuang/xxgk_xyjj/12039/" target="_blank">学校概况</a>
</li>
<li class="li2">
<a href="https://www.cdcas.edu.cn/category/xinwengonggao/" target="_blank">新闻公告</a>
</li>
<li class="li2">
<a href="https://www.cdcas.edu.cn/category/jiaoxuekeyan/" target="_blank">教学科研</a>
</li>
<li class="li2">
<a href="https://fzygh.cdcas.edu.cn/" target="_blank">综改评教</a>
</li>
<li class="li2">
<a href="https://gj.cdcas.edu.cn/" target="_blank">国际交流</a>
</li>
<li class="li2">
<a href="https://zsw.cdcas.edu.cn/" target="_blank">招生</a>
</li>
<li class="li2">
<a href="https://jyw.cdcas.edu.cn/" target="_blank">就业</a>
</li>
<li class="li2">
<a href="https://www.cdcas.edu.cn/category/xueyuanshezhi/" target="_blank">学院设置</a>
</li>
<li class="li2">
<a href="https://www.cdcas.edu.cn/category/xinxigongkai/" target="_blank">信息公开</a>
</li>
<li class="li2">
<a href="https://www.cdcas.edu.cn/category/gonggongfuwu/" target="_blank">公共服务</a>
</li>
</ul>
</div>
</div>
<div class="banner">
<div class="js-silder">
<div class="silder-scroll">
<div class="silder-main" style="height: 400px;">
<div class="silder-main_img" style="left: -1380px;">
<a href=" " title=".">
<img src="https://www.cdcas.edu.cn/wp-content/uploads/sites/42/sites/42/2024/06/20221010102749-1.jpg" width="1380px" height="400px" alt="">
<p class="title" style="left: 52px; font-size: 20px; padding: 2px 8px; line-height: 33px; display: none;">.</p >
</a >
</div>
</div>
</div>
</div>
</div>
</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>
.box{
display: grid;
grid-template-columns: repeat(5,1fr);
height: 700px;
grid-template-rows: repeat(2,1fr);
grid-gap: 0px;
margin-top: 50px;
margin-left: 100px;
margin-right: 100px;
}
.prod-href{
text-decoration: none;
}
.prod-intoduce-span{
color: #9b9b9b;
font-size: 14px;
}
.prod-price{
font-size: 19px;
color: red;
}
.prod-boss{
color: #9b9b9b;
font-size: 12px;
}
.prod-sale{
color: #9b9b9b;
font-size: 12px;
border-top: 1px solid #f2f2f2;
text-align: right;
padding-top: 10px;
}
.prod-test-box{
width: 300px;
height: 340px;
margin: auto;
margin-top: 15px;
}
</style>
</head>
<body>
<div class="box">
<div class="prod">
<a class="prod-href" href=" ">
<div class="prod-test-box">
<img class="prod-img" width="260px" height="200px" src="https://img.alicdn.com/imgextra/i1/2764571734/O1CN01hMffrJ1OgDke8IzXE_!!2764571734-0-alimamacc.jpg_360x360xzq75.jpg_.webp " alt="">
<div class="prod-introduce">
<span class="prod-intoduce-span">脆升升香脆薯条20g25袋鲜切薯片蜂蜜黄油脆生生休闲零食大礼包</span>
</div>
<div class="prod-price">¥79.8</div>
<div class="prod-boss">脆升升食品旗舰店</div>
<div class="prod-sale">月销4万+</div>
</div>
</a >
</div>
<div class="prod">
<a class="prod-href" href=" ">
<div class="prod-test-box">
<img class="prod-img" width="260px" height="200px" src="https://img.alicdn.com/imgextra/i1/111634048/O1CN01dRftY21fm2B5HgTSp_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt="">
<div class="prod-introduce">
<span class="prod-intoduce-span">好利来冰山熔岩巧克力纯可可脂礼盒甜品糕点</span>
</div>
<div class="prod-price">¥59</div>
<div class="prod-boss">好利来官方旗舰店</div>
<div class="prod-sale">月销7000</div>
</div>
</a >
</div>
<div class="prod">
<a class="prod-href" href=" ">
<div class="prod-test-box">
<img class="prod-img" width="260px" height="200px" src="https://img.alicdn.com/imgextra/i3/6385622422/O1CN01Ew0qud1TlKFDeKsat_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp">
<div class="prod-introduce">
<span class="prod-intoduce-span">酸辣柠檬无骨鸡爪脱骨凤爪网红小吃即食休闲食品解馋零食好吃卤味</span>
</div>
<div class="prod-price">¥26.7</div>
<div class="prod-boss">天天特卖工厂店</div>
<div class="prod-sale">月销4万+</div>
</div>
</a >
</div>
<div class="prod">
<a class="prod-href" href=" ">
<div class="prod-test-box">
<img class="prod-img" width="260px" height="200px" src="https://img.alicdn.com/imgextra/i2/113712902/O1CN01QUhZFP1XJALm3Vxkb_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt="">
<div class="prod-introduce">
<span class="prod-intoduce-span">麻辣王子辣条30小包官方正品</span>
</div>
<div class="prod-price">¥6.9</div>
<div class="prod-boss">惠祥食品</div>
<div class="prod-sale">月销5000+</div>
</div>
</a >
</div>
<br>
<div class="prod">
<a class="prod-href" href=" ">
<div class="prod-test-box">
<img class="prod-img" width="260px" height="200px" src="https://img.alicdn.com/imgextra/i3/1910280086/O1CN01PAAaJL1CVQqOSxAi5_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt="">
<div class="prod-introduce">
<span class="prod-intoduce-span">靖江猪肉脯小包零食品蜜汁干吃的肉铺休闲边角料网红年货嘴牛肉味</span>
</div>
<div class="prod-price">¥69.9</div>
<div class="prod-boss">满满无限旗舰店</div>
<div class="prod-sale">月销64</div>
</div>
</a >
</div>
<div class="prod">
<a class="prod-href" href=" ">
<div class="prod-test-box">
<img class="prod-img" width="260px" height="200px" src="https://img.alicdn.com/imgextra/i3/31536383/O1CN01of0giM1x1T3rHHvHe_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt="">
<div class="prod-introduce">
<span class="prod-intoduce-span">三只松鼠罐装每日坚果500g孕妇健康休闲零食混合干果果仁早餐</span>
</div>
<div class="prod-price">¥310</div>
<div class="prod-boss">三只松鼠旗舰店</div>
<div class="prod-sale">月销4万+</div>
</div>
</a >
</div>
<div class="prod">
<a class="prod-href" href=" ">
<div class="prod-test-box">
<img class="prod-img" width="260px" height="200px" src="https://gw.alicdn.com/imgextra/i3/2424338511/O1CN01wjcqln2Ck5t12dUca_!!2-item_pic.png_.webp" alt="">
<div class="prod-introduce">
<span class="prod-intoduce-span">维达抽纸细韧面巾纸家用3层2400抽面巾纸餐巾纸eu</span>
</div>
<div class="prod-price">¥29.9</div>
<div class="prod-boss">维达官方旗舰店</div>
<div class="prod-sale">日销2千+</div>
</div>
</a >
</div>
<div class="prod">
<a class="prod-href" href=" ">
<div class="prod-test-box">
<img class="prod-img" width="260px" height="200px" src="https://gw.alicdn.com/imgextra/i3/3937219703/O1CN01ZJ8bkN2LY1zrcNVSo_!!3937219703-0-C2M.jpg_Q75.jpg_.webp" alt="">
<div class="prod-introduce">
<span class="prod-intoduce-span">夏季竹席凉席夏天2024新款席子学生宿舍单人冬夏两用床席冰丝草席</span>
</div>
<div class="prod-price">¥32</div>
<div class="prod-boss">天天特卖工厂店</div>
<div class="prod-sale">回头客6千+</div>
</div>
</a >
</div>
3.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
background-color: #faf8f8f0;
}
.login-container {
width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
h2 {
text-align: center;
color: #007aff;
}
img {
display: block;
margin: 0 auto;
width: 400px;
height: 200px;
}
.input-group {
margin-bottom: 15px;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 3px;
}
input[type="submit"] {
width: 100%;
padding: 10px;
background-color: aquamarine;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
.remember-checkbox {
margin-bottom: 15px;
}
.forgot-password {
text-align: right;
color: blue;
cursor: pointer;
}
</style>
</head>
<body>
<div class="login-container">
<h2>金铲铲之战</h2>
<img src="https://img2.baidu.com/it/u=500386308,3822815042&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500"alt="">
<div class="input-group">
<input type="text" placeholder="手机号/QQ 号/邮箱">
</div>
<div class="input-group">
<input type="password" placeholder="密码">
</div>
<div class="remember-checkbox">
<input type="checkbox"> 记住我
</div>
<input type="submit" value="登录">
<div class="forgot-password">忘记密码?</div>
</div>
</body>
</html>