1代码：
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
background-color: #eecfcf;
}
.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: 120px;
height: 30px;
}
.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: #007aff;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
.remember-checkbox {
margin-bottom: 15px;
}
.forgot-password {
text-align: right;
color: #007aff;
cursor: pointer;
}
</style>
</head>
<body>
<div class="login-container">
<h2>腾讯视频登录</h2>
<img src="D:\web\code\作业\腾讯视频.png" 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>运行结果：
2代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第三次作业2</title>
<style>
.box{
width: 100%;
}
.prod{
width: 234px;
height: 366px;
list-style: none;
border: 1px solid #f2f2f2;
display: inline-block;
line-height: 1.6;
margin-left: -5px;
}
.prod-href{
text-decoration: none;
}
.prod:hover{
border-color: red;
}
.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: 210px;
height: 340px;
margin: auto;
margin-top: 15px;
}
</style>
</head>
<body>
<div class="box">
<ul class="prods">
<li class="prod">
<a class="prod-href" href="https://detail.tmall.com/item.htm?id=565432953266&ali_refid=a3_430673_1006:1109604749:N:emtiAWsF8%2Bzhhxaiwzc0Aw%3D%3D:440a0238b8dcae83405c67b43591f700&ali_trackid=1_440a0238b8dcae83405c67b43591f700&spm=a2e0b.20350158.31919782.1&bxsign=tanXjpd4d9gp-AQ6PwGiqKj-s87ADQJKsd5PYznTeM1GtyV52ZNKtSNqoMudZNckWZKNvRLxrxshkmA_P1YwTIQyFwkKWLuU4xhnChHEI5Wxyk">
<div class="prod-test-box">
<img class="prod-img" width="200px" height="200px" src="https://gw.alicdn.com/imgextra/i4/2112174637/TB2GmuhfsUrBKNjSZPxXXX00pXa_!!2112174637.jpg_240x10000Q75.jpg_.webp" alt="">
<div class="prod-introduce">
<span class="prod-intoduce-span">吊带打底裙女白色防透内搭衬裙大码外穿长款莫代尔打底背心裙夏季</span>
</div>
<div class="prod-price">￥77</div>
<div class="prod-boss">梅尚雅旗舰店</div>
<div class="prod-sale">月销2000+</div>
</div>
</a>
</li>
<li class="prod">
<a class="prod-href" href="https://item.taobao.com/item.htm?spm=a21bo.jianhua/a.201876.d3.5af92a897rVB7s&id=534932865559&scm=1007.40986.369799.0&pvid=336cf5f8-a910-479b-960e-72154c8ce70c">
<div class="prod-test-box">
<img class="prod-img" width="200px" height="200px" src="https://gw.alicdn.com/imgextra/i2/204553836/TB2G5FHqCcqBKNjSZFgXXX_kXXa_!!204553836.jpg_240x10000Q75.jpg_.webp" alt="">
<div class="prod-introduce">
<span class="prod-intoduce-span">【八包装】正宗老北京桂花酸梅汤原材料包古法自制乌梅酸梅汁饮料</span>
</div>
<div class="prod-price">￥39.8</div>
<div class="prod-boss">诗茉</div>
<div class="prod-sale">月销1000+</div>
</div>
</a>
</li>
<li class="prod">
<a class="prod-href" href="https://detail.tmall.com/item.htm?id=545830057067&item_type=ad&ali_refid=a3_431358_1007:122117574:H:122117574_0_12097072984:ec89e29d19a513109937f02fb7aaf5d9&ali_trackid=296_ec89e29d19a513109937f02fb7aaf5d9&spm=a21bo.jianhua/a.201876.d29&scm=1007.40986.387801.0">
<div class="prod-test-box">
<img class="prod-img" width="200px" height="200px" src="https://gw.alicdn.com/imgextra/i3/3174944909/O1CN01nF28qh1m8NG5NEf4r_!!0-item_pic.jpg_240x10000Q75.jpg_.webp" alt="">
<div class="prod-introduce">
<span class="prod-intoduce-span">雅马哈电钢琴P48B专业88键重锤数码电子钢琴</span>
</div>
<div class="prod-price">￥1999</div>
<div class="prod-boss">雅马哈艺可专卖店</div>
<div class="prod-sale">月销300+</div>
</div>
</a>
</li>
<li class="prod">
<a class="prod-href" href="https://detail.tmall.com/item.htm?id=695874187914&item_type=ad&ali_refid=a3_431358_1007:12974530:H:12974530_0_10861864198:b92f7439abf1625ea68dcff8e8686ab1&ali_trackid=296_b92f7439abf1625ea68dcff8e8686ab1&spm=a21bo.jianhua/a.201876.d41&scm=1007.40986.387801.0">
<div class="prod-test-box">
<img class="prod-img" width="200px" height="200px" src="https://gw.alicdn.com/imgextra/i2/92688455/O1CN0124yEjl2CKRhu0FYgh_!!0-item_pic.jpg_240x10000Q75.jpg_.webp" alt="">
<div class="prod-introduce">
<span class="prod-intoduce-span">李宁吾适LITE | 跑步鞋男女透气轻便软厚底减震运动鞋</span>
</div>
<div class="prod-price">￥278</div>
<div class="prod-boss">李宁官方网店</div>
<div class="prod-sale">月销2000+</div>
</div>
</a>
</li>
<li class="prod">
<a class="prod-href" href="https://item.taobao.com/item.htm?id=805504973361&item_type=ad&ali_refid=a3_431358_1007:6620255007:H:6620255007_0_14092039103:ef015df735f809e64adeb0d5c30531ea&ali_trackid=296_ef015df735f809e64adeb0d5c30531ea&spm=a21bo.jianhua/a.201876.d59&scm=1007.40986.387801.0">
<div class="prod-test-box">
<img class="prod-img" width="200px" height="200px" src="https://gw.alicdn.com/imgextra/i3/2218119620626/O1CN01oQ1Rnc1GUktvG6gTA_!!2218119620626.jpg_240x10000Q75.jpg_.webp" alt="">
<div class="prod-introduce">
<span class="prod-intoduce-span">六核六动圈耳机有线typec入耳式高音质安卓</span>
</div>
<div class="prod-price">￥48</div>
<div class="prod-boss">丝客灵电子</div>
<div class="prod-sale">月销200+</div>
</div>
</a>
</li>
<li class="prod">
<a class="prod-href" href="https://detail.tmall.com/item.htm?id=38455975786&spm=a21bo.jianhua/a.201876.d92.5af92a897rVB7s&scm=1007.40986.387801.0&pvid=757db4d0-40dd-4316-a81d-c1a13fed0ec1&sku_properties=1627207:43543359">
<div class="prod-test-box">
<img class="prod-img" width="200px" height="200px" src="https://gw.alicdn.com/imgextra/i4/2058864678/O1CN0115EQjY1kQZiUD2NkI_!!2058864678.jpg_240x10000Q75.jpg_.webp" alt="">
<div class="prod-introduce">
<span class="prod-intoduce-span">21cake黑白巧克力慕斯生日蛋糕含酒切块纪念日动物奶油同城配送</span>
</div>
<div class="prod-price">￥268</div>
<div class="prod-boss">21cake旗舰店</div>
<div class="prod-sale">月销100+</div>
</div>
</a>
</li>
<li class="prod">
<a class="prod-href" href="https://detail.tmall.com/item.htm?id=566726345762&spm=a21bo.jianhua/a.201876.d102.5af92a897rVB7s&scm=1007.40986.387801.0&pvid=0577c319-ed28-4d95-aa22-af6d9dc2505f">
<div class="prod-test-box">
<img class="prod-img" width="200px" height="200px" src="https://gw.alicdn.com/imgextra/i3/3547947723/O1CN01eJ8ZAX26vBmbbUEvq_!!0-item_pic.jpg_240x10000Q75.jpg_.webp" alt="">
<div class="prod-introduce">
<span class="prod-intoduce-span">G7旗舰店越南进口三合一特浓速溶咖啡粉原味提神学生正品</span>
</div>
<div class="prod-price">￥79.9</div>
<div class="prod-boss">G7coffee咖啡旗舰店</div>
<div class="prod-sale">月销1000+</div>
</div>
</a>
</li>
<li class="prod">
<a class="prod-href" href="https://item.taobao.com/item.htm?spm=a21bo.jianhua/a.201876.d152.5af92a897rVB7s&id=650148801213&scm=1007.40986.387801.0&pvid=72a2f5ff-fba6-4f1b-abe3-fecb7bc469c3">
<div class="prod-test-box">
<img class="prod-img" width="200px" height="200px" src="https://gw.alicdn.com/imgextra/i1/2942555921/O1CN01tUwipT1tbrnJ2TQw4_!!2942555921.jpg_240x10000Q75.jpg_.webp" alt="">
<div class="prod-introduce">
<span class="prod-intoduce-span">现代简约按摩榻榻米大床轻奢真皮床双人床1.8米婚床</span>
</div>
<div class="prod-price">￥3287.7</div>
<div class="prod-boss">曼菲尔家具</div>
<div class="prod-sale">月销200+</div>
</div>
</a>
</li>
<li class="prod">
<a class="prod-href" href="https://item.taobao.com/item.htm?spm=a21bo.jianhua/a.201876.d203.5af92a897rVB7s&id=589196876970&scm=1007.40986.387801.0&pvid=f92db921-c377-4f75-bceb-b354ccf0c163">
<div class="prod-test-box">
<img class="prod-img" width="200px" height="200px" src="https://gw.alicdn.com/imgextra/i1/1628212298/O1CN01cmB2kV1SqWfO8CH0F_!!1628212298.jpg_240x10000Q75.jpg_.webp" alt="">
<div class="prod-introduce">
<span class="prod-intoduce-span">papr watch德国黑科技新型个性创意智能概念纸手表防水表</span>
</div>
<div class="prod-price">￥49</div>
<div class="prod-boss">欧阳正品手表店</div>
<div class="prod-sale">月销900+</div>
</div>
</a>
</li>
<li class="prod">
<a class="prod-href" href="https://detail.tmall.com/item.htm?id=740749681287&spm=a21bo.jianhua/a.201876.d273.5af92a897rVB7s&scm=1007.40986.387801.0&pvid=3dd6ae42-10cd-4331-aaa1-6c08fdff342b">
<div class="prod-test-box">
<img class="prod-img" width="200px" height="200px" src="https://gw.alicdn.com/bao/uploaded/i4/353571709/O1CN01doJbuW1OUlqdO2ls9-353571709.jpg_240x10000Q75.jpg_.webp" alt="">
<div class="prod-introduce">
<span class="prod-intoduce-span">特步氢风7丨跑鞋男鞋专业体测跑步鞋男款夏季减震透气运动鞋女鞋</span>
</div>
<div class="prod-price">￥439</div>
<div class="prod-boss">特步官方旗舰店</div>
<div class="prod-sale">月销30000+</div>
</div>
</a>
</li>
</ul>
</div>
</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>Document</title>
</head>
<style>
.topBox{
font-size: 16px;
padding: 0;
margin: 0;
outline: 0;
box-sizing: border-box;
width: 100%;
height: 100px;
background: #ba2a17;
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;
}
.head_right{
font-size: 16px;
padding: 0;
margin: 0;
outline: 0;
box-sizing: border-box;
float: right;
}
.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="head_left">
<a href=" " title="川大主题" class="logo">
<img src="https://www.scu.edu.cn/images/logo.png">
</a >
</div>
<div class="head_right">
<ul class="hr_left">
<li class="li1">
<a href="https://xxgk.scu.edu.cn/"target="_blank">信息公开</a>
</li>
<li style="margin-left: 46px;" class="li1">
<a href="https://www.scu.edu.cn/index/fw/bgfw.htm"target="_blank">办公服务</a>
</li>
<li class="li1">
<a href="https://en.scu.edu.cn/"target="_blank">ENGLISH</a>
</li>
<li class="li1">
<a href="https://id.scu.edu.cn/frontend/login#/login?sp_code=bDBhREE1WDMzK3llSzZyVFZNeE81czRDd1hESTI4NWxGaFdsTnlvcGt3eVdTb2cxSjN5a1FJTDVMWTBEQkFFd2k1bWZRMy82OXN6V21ZYzFLd2NlSDl1ekZ4bSt4Q0kzSWJYRG5UZkRzQ002ek10cUlNVGE4V2JmQXJqdnF0NFJFUHdWSmlHWDJ0NEp3Q3gyNzltcEdOUTNHUU5NUzhaYnpJV2N3Q0puNFN6Y29JMmRWS1BNMjBiV25TTzJPRUI0ek9BalRzOWp6UFZjYUpKMDhvbFJCRWtxWlJMRlRCcklBMWpidVIxbURnWHhRbXFORk40N2o3Z2prV1ErbTNXUEFldUxQOXJNUEFjVElnVDE1L0hsWnhNcjNFelk4anlodmJiTjdralNvTnc9&application_key=scdxplugin_jwt26&application_disabled=false&redirect_uri=aHR0cHM6Ly9pZC5zY3UuZWR1LmNuL2VuZHVzZXIvc3Avc3NvL3NjZHhwbHVnaW5fand0MjY%2FZW50ZXJwcmlzZUlkPXNjZHg%3D"target="_blank">网上办事大厅</a>
</li>
<li class="li1">
<a href="https://webvpn.scu.edu.cn/users/sign_in"target="_blank">WebVPN</a>
</li>
<li class="li1">
<a href="https://mail.scu.edu.cn/"target="_blank">邮件系统</a>
</li>
</ul>
</div>
</div>
</div>
<div class="navBox">
<div class="nav-menu">
<a href=" ">
<img src="https://www.scu.edu.cn/images/nav-home.png>"
</a >
<ul class="nav">
<li style="display: none;" class="li2">
<a href="https://www.scu.edu.cn/index.htm">首页</a>
</li>
<li class="li2">
<a href="https://www.scu.edu.cn/xxgknew/xxjj.htm">学校概况</a>
</li>
<li class="li2">
<a href="https://www.scu.edu.cn/xwzx.htm">新闻资讯</a>
</li>
<li class="li2">
<a href="https://www.scu.edu.cn/jyjx.htm">教育教学</a>
</li>
<li class="li2">
<a href="https://www.scu.edu.cn/kxyj.htm">科学研究</a>
</li>
<li class="li2">
<a href="https://www.scu.edu.cn/szdw.htm">师资队伍</a>
</li>
<li class="li2">
<a href="https://www.scu.edu.cn/jlhz.htm">交流合作</a>
</li>
<li class="li2">
<a href="https://www.scu.edu.cn/zsjy.htm">招生就业</a>
</li>
<li class="li2">
<a href="https://www.scu.edu.cn/zzjg/jgbc.htm">组织机构</a>
</li>
<li class="li2">
<a href="https://www.scu.edu.cn/whzy.htm">文化资源</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.scu.edu.cn/__local/A/9A/84/2C2CBE3111400A05AAFFD7F2745_05D5882E_11C7C9.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>运行结果：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
