WEB前端第二次作业-CSDN博客

本文链接：https://blog.csdn.net/2401_88458569/article/details/145887405

作业一：完成ollama官网首页

代码如下：


<!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>
        body{
            height: 750px;
            /* background-color: antiquewhite; */
        }
    
        .nav{
            /* background-color: blue; */
            height: 10%;
            width: 98%;
            margin: auto;
        }
    
        .main{
            /* background-color: aqua; */
            height: 55%;
            width: 33%;
            margin: auto;
            margin-top: 101px;
        }
    
        .introduce{
            /* background-color: pink; */
            height: 3%;
            margin: auto;
            margin-top: 170px;
            width: 98%;
        }
    
        .nav1{
            /*高度是基于父标签的 */
            height: 100%;
            width: 22%;
            /* background-color: antiquewhite; */
            float: left;
        }
        
        .test1{
            float: left;
            height: 100%;
            width: 15%;
            /* background-color: blue; */
            margin-left: 0%;
            margin-top: 10px;
        }
        .test2,.test3,.test4{
            float: left;
            height: 100%;
            width: 22%;
            /* background-color: blue; */
            margin-left: 20px;
            text-align: center;
            margin-top: 20px;
            font-size: 22px;
        }
        
    
        .nav2{
            height:90%;
            /* background-color:antiquewhite;*/
            width:40%;
            float: left;
            /*margin: auto;脱离文档流后这个auto就不能生效了---因为没有宽度让它自适应 */
            margin-left:120px;
            margin-top:4px;
        }
    
        .nav3{
            height: 100%;
            /* background-color:antiquewhite;*/
            width:16%;
            float: left;
            margin-left:220px;
        }
    
        .search{
            width:600px;
            height:50px;
            background-color: rgba(220, 220, 220, 0.536);
            border:1px solid rgba(220, 220, 220, 0.536);
            border-radius: 9999px;
        }
    
        .nav3>.sign,.nav3>.download{
            height:100%;
            width: 45%;
            float: left;
            margin-left:10px;
            /* background-color:aquamarine; */
        }
    
        .sign>button{
            width:92px;
            height:37px;
            background-color:aliceblue;
        }
    
        .download>button{
            width: 119px;
            height:37px;
            background-color: black;
            color: white;
        }
    
        .sign>button,.download>button{
            margin-top:20px;
            border: 1px solid white;
            border-radius:9999px;
            font-size: 2_0px;
        }

        .main>div:nth-child(1){
            /* background-color: red; */
            height: 18%;
            width: 12%;
            margin: auto;
        }
        .main>div:nth-child(2){
            /* background-color: blue; */
            width: 100%;
            height: 10%;
            margin-top: 15 px;
            text-align: center;
            font-size: 25px;
        }
        .main>div:nth-child(3){
            /* background-color: blue; */
            width: 100%;
            height: 10%;
            margin-top: 5px;
            text-align: center;
            font-size: 25px;
        }
        .main>div:nth-child(4){
            /* background-color: blue; */
            width: 100%;
            height: 5%;
            margin-top: 10px;
            text-align: center;
            font-size: 15px;
        }
        .main>div:nth-child(5){
            /* background-color: blue; */
            width: 100%;
            height: 5%;
            margin-top: 5px;
            text-align: center;
            font-size: 15px;
        }
        .download1>button{
            width: 119px;
            height:37px;
            background-color: black;
            color: white;
            margin-top:20px;
            border: 1px solid white;
            border-radius:9999px;
            font-size: 2_0px;
            margin-left: 215px;
        }
        .test5{
            /* background-color: antiquewhite; */
            width: 100%;
            height: 5px;
            text-align: center;
            font-size: 10px;
        }
        .introduce>div:nth-child(1){
            width: 100%;
            height: 5px;
            margin-left: 10px;
        }
        .introduce>div:nth-child(2){
            float: left;
            width: 100%;
            height: 5px;
            margin-left: 1050px;
        }
    </style>      
</head>
<body>
    <div class="nav">
        <!--图标加按钮 -->
        <div class="nav1">
            
            <div class="test1"><img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-19 221500.png"  width="32px" height="45px" alt=""></div>
            <div class="test2">Discord</div>
            <div class="test3">GitHub</div>
            <div class="test4">Models</div>
        </div>
        <!-- 搜索框 -->
         <div class="nav2">                   
            <input type="text" class="search" placeholder="Search models">
         </div>
         <!--两个按钮 -->
         <div class="nav3">
            <div class="sign">
                <button>Sign in</button>
            </div>
            <div class="download">
                <button>Download</button>
            </div>
         </div>
    </div>
    <div class="main">
        <div><img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-19 221500.png"  width="65px" height="70px" alt=""></div>
        <div> Get up and running with large</div>
        <div>language models.</div>
        <div>Run Llama 3.3,Deepseek-R1,Phi-4,Mistral,Gemma 2</div>
        <div>and other models,locally</div>
        <div class="download1">
            <button>Download</button>
        </div>
        <div class="test5">Available for macOS,Linux,and Windows</div>
    </div>
    <div class="introduce">
        <div><img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-20 142556.png" width="100px" height="20px"></div>
        <div><img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-20 143002.png" width="600px" height="18px"></div>
    </div>
</body>
</html>

运行截图：

作业二：完成学校官网

代码一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业2</title>
    <style>
        body{
            height: 3000px;
            width: 100%;
            /* background-color: antiquewhite; */
        }
        .item1{
            width: 100%;
            height: 100px;
            /* background-color: red; */
            margin: auto;
            box-shadow: 10ox 10px 10px gray;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-betweend;
            flex-direction: row;
        }
        .a1{
            flex-basis: 100px;
            flex-shrink: 3;
            flex-grow: 3;
            /* background-color: blue; */
            /* border: 1px solid red; */
            margin-left: 50px;
            margin-top: 15px;
        }
        .a2{
            flex-basis: 100px;
            flex-shrink: 3;
            flex-grow: 3;
            /* background-color: blue; */
            /* border: 1px solid red; */
            margin-left: 250px;
            margin-top: 15px;
        }
        .item2{
            width: 100%;
            height: 70px;
            background-color: green;
        }
        .b1{
            width: 80%;
            height:70px ;
            background-color: green;
            margin: auto;
            box-shadow: 10ox 10px 10px gray;
            display: grid;
            grid-template-rows: repeat(1,1fr);
            grid-template-columns: repeat(9,1fr);
            grid-gap: 10px;
            
        }
        /* .b1>div{
             border: 1px solid red; 
     } */
        .item3{
            width: 100%;
            height: 450px;
            /* background-color: pink; */
        }
        .item4{
            width: 100%;
            height: 400px;
            /* background-color: purple; */
        }
        .b1>div:nth-child(1),.b1>div:nth-child(2),.b1>div:nth-child(3),.b1>div:nth-child(4),.b1>div:nth-child(5),.b1>div:nth-child(6),.b1>div:nth-child(7),.b1>div:nth-child(8),.b1>div:nth-child(9){
            text-align: center;
            color: white;
            margin-top: 17px;
        }
        .item4>div:nth-child(1){
            width:300px ;
            height:350px ;
            float: left;
            /* background-color: red; */
            margin-left: 150px;
        }
        .item4>div:nth-child(2){
            width:600px ;
            height:350px ;
            float: left;
            /* background-color: red; */
            margin-left: 200px;
        }
        .c1{
            display: grid;
            grid-template-rows: repeat(5,1fr) ;
            grid-template-columns:repeat(1,1fr) ;
            grid-gap: 10px;
        }
        .c1>div{
            border: 1px solid wheat;
            text-align: center;
            background-color: gray;
            font-size: 20px;
            padding-top: 15px;
        }
        .item5{
            width: 100%;
            height: 1200px;
            /* background-color: pink; */
        }
        .item5>div{
            width: 60%;
            height: 100%;
            /* background-color: yellow; */
            float: left;
            margin-left: 400px;
            font-size: 15px;
            line-height:200%;

        }
        
        .item6{
            width: 100%;
            height: 400PX;
            /* background-color:red; */
        }
        

        a:hover{
            color: white;
        }
        a:link{
            color: black;
        }
        a:visited{
            color: black;
        }
    </style>
</head>
<body>
    <div class="flex-container item1">
        <div class="flex-item a1"><img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-20 220004.png" width="400px" height="50px"></div>
        <div class="flex-item a2"><img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-20 220013.png"width="400px" height="50px" alt=""></div>
    </div>
    <div class="item2">
        <div class="b1">
            <div>首页</div>
            <div>学校简介</div>
            <div>办学特色</div>
            <div>招生特色</div>
            <div>招生就业</div>
            <div>信息查询</div>
            <div>校园风光</div>
            <div>学院新闻</div>
            <div>联系我们</div>
        </div>
    </div>
    
    <div class="item3">
        <img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-21 223740.png" width="100%" height="400px">
    </div>
    <div class="item4">
        <div class="c1">
            <div><a href="./作业2.html">学校简介</a></div>
            <div><a href="./作业2页面二.html">校长寄语</a></div>
            <div><a href="http://www.scauzj-cec.cn/about/qrzzk0d3.html">学生风采</a></div>
            <div><a href="./作业2页面三.html">就业发展</a></div>
            <div><a href="./作业2页面四.html">华珠荣誉</a></div>
        </div>
        <div><img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-21 225151.png"width="600px" height="350px"></div>
    </div>
    <div class="item5">
        <div>
            <pre>
                    华南农业大学珠江学院于2006年4月经教育部批准设立，实施全日制本科层次教育的独立学院。2011年，获得学士学位授予权。学校目前有两个校区，分别是温泉之
                都的广州从化和翡翠之乡的肇庆四会，现有全日制在校生12500余人。学校现设有传媒学院、设计学院、商学院、信息工程学院、人文学院、马克思主义学院、体育与美育
                教学部、国际教育学院、继续教育学院、乡村振兴学院、大湾区公益学院等11个二级学院（部），开设有播音与主持艺术、表演、产品设计、人力资源管理等38个本科专
                业（其中艺术学16个专业、管理学6个专业、文学6个专业、工学5个专业、经济学4个专业、教育学1个专业，艺术学专业占本科专业总数的42.1%），是一所以艺术学科为
                优势，现代传媒艺术为特色，艺、文、管、经、工等多学科协调发展的高水平应用型本科高校。
                    学校办学近20年来，坚持社会主义办学方向，为国家培养了4万余名优秀毕业生，广泛分布在传媒、设计、商贸、金融、信工、文化教育等众多领域，为我国文化事业
                和地方经济社会发展做出了重要贡献。
                    2022年以来学校确立了高质量发展思路，始终坚持创新强校，围绕“十个一流”建设发展目标，坚持内涵建设，已有《产品设计》1个省重点建设学科，《环境设计》
                《人力资源管理》2个省一流本科专业建设点，《统计学》《ERP沙盘实训》《电子书籍设计》3门省一流本科课程，《国际物流》等4个省级课程思政示范项目；还建设有
                《居住空间设计》等3门省级在线开放课程，省级高校优秀课程思政案例3门（《纪录片创作》、《国际物流》《计算机网络基础》，其中《纪录片创作》等5门课程在全国
                高校课程思政教学资源服务平台（新华网“新华思政”）上展播。2023年，学校获批广东省高等学校教学管理学会2023年度教育教学优秀案例4个。为学校品牌课程思政
                的深入实施做好示范，助力学校良好育人格局的形成。
                    学校还成立了科学技术协会，组建了粤港澳大湾区非遗影像传播研究中心、交通与文旅融合发展研究中心、岭南漆艺文创设计研究院等10多个研究机构和学科平台,不
                断强化科教融合,提升学科专业建设水平和科学研究能力，形成“产业—专业—教学”的校企融合人才培养特色。
                    学校重视实践能力培养，强化教学科研保障条件建设。目前拥有国内先进的融媒演播厅、影视摄影棚、多功能报告厅、智慧教室、影视工作坊、大商科综合实训室等各
                类实验、实训室119个；有省级实验教学示范中心5个、省级智能家居产业学院1个、省级大学生校外实践教学基地10个，建有中国网粤港澳大湾区频道华南农业大学珠江
                学院融媒体中心、“数字经济产业学院”等校内外110多个实习实训基地。学校还成立乡村振兴学院，主动作为，与社会各界整合校内外资源，推动产学研一体化建设。
                    学校近年来坚持以“强师工程”战略为导向，坚持引育并举，强化师资队伍建设。现有专兼职教师662人，其中专任教师529人，具有副高级及以上专业技术职称者99
                人，其中二级教授4名、三级教授12名。学校建有省级教师教学发展中心，支持优秀教师到国内外深造，攻读硕士博士学位。鼓励学校教师争做“四有”好老师，先后有1
                名教师荣获广东省五一劳动奖章、5名教师荣获南粤优秀教师荣誉称号。
                    近五年以来，我校验收通过教、科研项目共307个，在研教研、科研项目共225个。2022年国家社会科学基金后期资助项目“数字人文视域下红色档案资源的抢救、整
                理与保护研究”和2023年国家社会科学基金重点项目“中国式现代化进程中农村土地制度优势研究”“人文湾区视域下非遗影像创作与传播研究”课题入选第二届粤港澳
                大湾区文艺创新论坛重点文艺研究课题，非遗纪录电影《行花街行大运》完成拍摄，标志着学院产教融合、科教融汇取得新突破；学校教师发表学术论文456篇，其中北大
                核心、SCI、SSCI、EI等高水平论文116篇，出版学术专著24部，发表艺术作品86部，师生申请知识产权共16项。学校每年定期对全校优秀教师及优秀成果进行表彰。 
                    学校鼓励支持教师指导学生参加创新创业项目和学科各类竞赛项目。近年来，立项国家级、省级大学生创新创业训练计划项目共209个，投入支持经费290万，学生获
                得各类学科竞赛奖443项，其中“挑战杯”广东大学生课外学生科技作品竞赛获二等奖2项、三等奖11项；“挑战杯”广东大学生创业计划竞赛获金奖2项、银奖1项、铜奖
                7项；中国国际大学生创新大赛获国赛银奖1项、省赛银奖1项、铜奖1项；学生发表论文数共计89篇、成果作品38个，申请专利（著作权）数共计10个。学生参加学科竞赛
                类获奖共计220多项。
                    学校坚持以国际化办学作为发展战略之一，携手国外知名高校共同开展“海外升硕培养计划”，目前已帮助近千名学子实现直通国际名校的梦想。
                    面向未来，学校秉持“知行合一、笃行致远”的校训，贯彻“国际视野、创新赋能、特色发展、服务社会、追求卓越”的办学理念，立足“粤港澳”大湾区，着力培养
                思想品德优良、专业基础扎实、实践能力突出，具有创新精神、国际视野和社会责任感，适应文化产业和地方经济社会发展的高素质应用型人才。
            </pre>
        </div>    
    </div>
    <div class="item6">
        <img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-21 232836.png" width="100%" height="90%">
    </div>
    
</body>
</html>

代码二

<!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: 3000px;
            width: 100%;
            /* background-color: antiquewhite; */
        }
        .item1{
            width: 100%;
            height: 100px;
            /* background-color: red; */
            margin: auto;
            box-shadow: 10ox 10px 10px gray;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-betweend;
            flex-direction: row;
        }
        .a1{
            flex-basis: 100px;
            flex-shrink: 3;
            flex-grow: 3;
            /* background-color: blue; */
            /* border: 1px solid red; */
            margin-left: 50px;
            margin-top: 15px;
        }
        .a2{
            flex-basis: 100px;
            flex-shrink: 3;
            flex-grow: 3;
            /* background-color: blue; */
            /* border: 1px solid red; */
            margin-left: 250px;
            margin-top: 15px;
        }
        .item2{
            width: 100%;
            height: 70px;
            background-color: green;
        }
        .b1{
            width: 80%;
            height:70px ;
            background-color: green;
            margin: auto;
            box-shadow: 10ox 10px 10px gray;
            display: grid;
            grid-template-rows: repeat(1,1fr);
            grid-template-columns: repeat(9,1fr);
            grid-gap: 10px;
            
        }
        /* .b1>div{
            border: 1px solid red;
        } */
        .item3{
            width: 100%;
            height: 450px;
            /* background-color: pink; */
        }
        .item4{
            width: 100%;
            height: 400px;
            /* background-color: purple; */
        }
        .b1>div:nth-child(1),.b1>div:nth-child(2),.b1>div:nth-child(3),.b1>div:nth-child(4),.b1>div:nth-child(5),.b1>div:nth-child(6),.b1>div:nth-child(7),.b1>div:nth-child(8),.b1>div:nth-child(9){
            text-align: center;
            color: white;
            margin-top: 17px;
        }
        .item4>div:nth-child(1){
            width:300px ;
            height:350px ;
            float: left;
            /* background-color: red; */
            margin-left: 150px;
        }
        .item4>div:nth-child(2){
            width:600px ;
            height:350px ;
            float: left;
            /* background-color: red; */
            margin-left: 200px;
            margin-top: 50px;
            padding-left: 200px;
        }
        .c1{
            display: grid;
            grid-template-rows: repeat(5,1fr) ;
            grid-template-columns:repeat(1,1fr) ;
            grid-gap: 10px;
        }
        .c1>div{
            border: 1px solid wheat;
            text-align: center;
            background-color: gray;
            font-size: 20px;
            padding-top: 15px;
        }
        .item5{
            width: 100%;
            height: 700px;
            /* background-color: pink; */
        }
        .item5>div{
            width: 60%;
            height: 100%;
            /* background-color: yellow; */
            float: left;
            margin-left: 400px;
            font-size: 15px;
            line-height:200%;

        }
        
        .item6{
            width: 100%;
            height: 400PX;
            /* background-color:red; */
        }

        a:hover{
            color: white;
        }
        a:link{
            color: black;
        }
        a:visited{
            color: black;
        }
    </style>
</head>
<body>
    <div class="flex-container item1">
        <div class="flex-item a1"><img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-20 220004.png" width="400px" height="50px"></div>
        <div class="flex-item a2"><img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-20 220013.png"width="400px" height="50px" alt=""></div>
    </div>
    <div class="item2">
        <div class="b1">
            <div>首页</div>
            <div>学校简介</div>
            <div>办学特色</div>
            <div>招生特色</div>
            <div>招生就业</div>
            <div>信息查询</div>
            <div>校园风光</div>
            <div>学院新闻</div>
            <div>联系我们</div>
        </div>
    </div>
    
    <div class="item3">
        <img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-21 223740.png" width="100%" height="400px">
    </div>
    <div class="item4">
        <div class="c1">
            <div><a href="./作业2.html">学校简介</a></div>
            <div><a href="./作业2页面二.html">校长寄语</a></div>
            <div><a href="http://www.scauzj-cec.cn/about/qrzzk0d3.html">学生风采</a></div>
            <div><a href="./作业2页面三.html">就业发展</a></div>
            <div><a href="./作业2页面四.html">华珠荣誉</a></div>
        </div>
        <div><img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-22 124227.png"width="200px" height="350px"></div>
    </div>
    <div class="item5">
        <div>
            <pre>
                                                                    校长 蒋恩臣
                    蒋恩臣，华南农业大学珠江学院校长，博士、教授（二级）、博士生导师。获首届全国百篇优秀博士学位论文奖、黑龙江省教育系统优秀共产
                党员、南粤优秀教师等荣誉称号。曾任华南农业大学材料与能源学院院长、东北农业大学工程学院院长（兼任），长期担任《农业工程学报》、
                《农业机械学报》编委，曾任中国农业机械学会常务理事。
                    长期从事可再生能源和农业工程领域研究，主持科技部课题、教育部专项课题、国家自然科学基金面上项目、省部级重点专项和重点攻关等课
                题20余项。应邀在国际会议、国内外大学做学术报告多场。高教出版社出版研究成果专著1部，主编国家级规划教材3部，其中获全国高等农业院校
                优秀教材1部，在国内外学术期刊发表论文200余篇。获批中国授权发明专利47项、国际发明专利（PCT）1项，获省部级科技、教学成果奖多项。
                    同学们：学习使人进步，学习使人永葆青春活力，要做一个与时俱进并有所作为的人，唯有在学习中下真功夫、苦功夫，才会出真成绩。
                    千里之行，始于足下，能力培养的重要途径是实践，只说不练、止步不前，唯有勤勉实践方能获取真知。做好未来四年的职业生涯规划，明确
                目标，奋发作为。
                    做一个胸怀家国责任、坚定理想信念、锤炼品德修为、练就过硬本领的人，把自身发展融入中华民族伟大复兴和构建人类命运共同体的伟大事
                业中去，从自身做起，从现在做起，拾起梦想，征程启航！
                    高山景行，行远自迩。未来有梦，让我们一起开拓！

 
            </pre>
        </div>    
    </div>
    <div class="item6">
        <img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-21 232836.png" width="100%" height="90%">
    </div>
</body>
</html>

代码三

<!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: 3000px;
            width: 100%;
            /* background-color: antiquewhite; */
        }
        .item1{
            width: 100%;
            height: 100px;
            /* background-color: red; */
            margin: auto;
            box-shadow: 10ox 10px 10px gray;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-betweend;
            flex-direction: row;
        }
        .a1{
            flex-basis: 100px;
            flex-shrink: 3;
            flex-grow: 3;
            /* background-color: blue; */
            /* border: 1px solid red; */
            margin-left: 50px;
            margin-top: 15px;
        }
        .a2{
            flex-basis: 100px;
            flex-shrink: 3;
            flex-grow: 3;
            /* background-color: blue; */
            /* border: 1px solid red; */
            margin-left: 250px;
            margin-top: 15px;
        }
        .item2{
            width: 100%;
            height: 70px;
            background-color: green;
        }
        .b1{
            width: 80%;
            height:70px ;
            background-color: green;
            margin: auto;
            box-shadow: 10ox 10px 10px gray;
            display: grid;
            grid-template-rows: repeat(1,1fr);
            grid-template-columns: repeat(9,1fr);
            grid-gap: 10px;
            
        }
        /* .b1>div{
            border: 1px solid red;
        } */
        .item3{
            width: 100%;
            height: 450px;
            /* background-color: pink; */
        }
        .item4{
            width: 100%;
            height: 400px;
            /* background-color: purple; */
        }
        .b1>div:nth-child(1),.b1>div:nth-child(2),.b1>div:nth-child(3),.b1>div:nth-child(4),.b1>div:nth-child(5),.b1>div:nth-child(6),.b1>div:nth-child(7),.b1>div:nth-child(8),.b1>div:nth-child(9){
            text-align: center;
            color: white;
            margin-top: 17px;
        }
        .item4>div:nth-child(1){
            width:300px ;
            height:350px ;
            float: left;
            /* background-color: red; */
            margin-left: 150px;
        }
        .item4>div:nth-child(2){
            width:600px ;
            height:350px ;
            float: left;
            /* background-color: red; */
            margin-left: 200px;
        }
        .c1{
            display: grid;
            grid-template-rows: repeat(5,1fr) ;
            grid-template-columns:repeat(1,1fr) ;
            grid-gap: 10px;
        }
        .c1>div{
            border: 1px solid wheat;
            text-align: center;
            background-color: gray;
            font-size: 20px;
            padding-top: 15px;
        }
        .item5{
            width: 100%;
            height: 2000px;
            /* background-color: pink; */
        }
        .item5>div{
            width: 60%;
            height: 100%;
            /* background-color: yellow; */
            float: left;
            margin-left: 400px;
            font-size: 15px;
            line-height:200%;

        }
        
        .item6{
            width: 100%;
            height: 400PX;
            /* background-color:red; */
        }
        

        a:hover{
            color: white;
        }
        a:link{
            color: black;
        }
        a:visited{
            color: black;
        }
    </style>
</head>
<body>
    <div class="flex-container item1">
        <div class="flex-item a1"><img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-20 220004.png" width="400px" height="50px"></div>
        <div class="flex-item a2"><img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-20 220013.png"width="400px" height="50px" alt=""></div>
    </div>
    <div class="item2">
        <div class="b1">
            <div>首页</div>
            <div>学校简介</div>
            <div>办学特色</div>
            <div>招生特色</div>
            <div>招生就业</div>
            <div>信息查询</div>
            <div>校园风光</div>
            <div>学院新闻</div>
            <div>联系我们</div>
        </div>
    </div>
    
    <div class="item3">
        <img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-21 223740.png" width="100%" height="400px">
    </div>
    <div class="item4">
        <div class="c1">
            <div><a href="./作业2.html">学校简介</a></div>
            <div><a href="./作业2页面二.html">校长寄语</a></div>
            <div><a href="http://www.scauzj-cec.cn/about/qrzzk0d3.html">学生风采</a></div>
            <div><a href="./作业2页面三.html">就业发展</a></div>
            <div><a href="./作业2页面四.html">华珠荣誉</a></div>
        </div>
        <div><img src="C:\Users\ROG\Pictures\屏幕截图 2025-02-22 153811.png"width="850px" height="2200px"></div>
    </div>
    <div class="item5">    
    </div>
    <div class="item6">
        <img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-21 232836.png" width="100%" height="90%">
    </div>
    
</body>
</html>

代码四

<!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: 3000px;
            width: 100%;
            /* background-color: antiquewhite; */
        }
        .item1{
            width: 100%;
            height: 100px;
            /* background-color: red; */
            margin: auto;
            box-shadow: 10ox 10px 10px gray;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-betweend;
            flex-direction: row;
        }
        .a1{
            flex-basis: 100px;
            flex-shrink: 3;
            flex-grow: 3;
            /* background-color: blue; */
            /* border: 1px solid red; */
            margin-left: 50px;
            margin-top: 15px;
        }
        .a2{
            flex-basis: 100px;
            flex-shrink: 3;
            flex-grow: 3;
            /* background-color: blue; */
            /* border: 1px solid red; */
            margin-left: 250px;
            margin-top: 15px;
        }
        .item2{
            width: 100%;
            height: 70px;
            background-color: green;
        }
        .b1{
            width: 80%;
            height:70px ;
            background-color: green;
            margin: auto;
            box-shadow: 10ox 10px 10px gray;
            display: grid;
            grid-template-rows: repeat(1,1fr);
            grid-template-columns: repeat(9,1fr);
            grid-gap: 10px;
            
        }
        /* .b1>div{
            border: 1px solid red;
        } */
        .item3{
            width: 100%;
            height: 450px;
            /* background-color: pink; */
        }
        .item4{
            width: 100%;
            height: 400px;
            /* background-color: purple; */
        }
        .b1>div:nth-child(1),.b1>div:nth-child(2),.b1>div:nth-child(3),.b1>div:nth-child(4),.b1>div:nth-child(5),.b1>div:nth-child(6),.b1>div:nth-child(7),.b1>div:nth-child(8),.b1>div:nth-child(9){
            text-align: center;
            color: white;
            margin-top: 17px;
        }
        .item4>div:nth-child(1){
            width:300px ;
            height:350px ;
            float: left;
            /* background-color: red; */
            margin-left: 150px;
        }
        .item4>div:nth-child(2){
            width:600px ;
            height:350px ;
            float: left;
            /* background-color: red; */
            margin-left: 200px;
        }
        .c1{
            display: grid;
            grid-template-rows: repeat(5,1fr) ;
            grid-template-columns:repeat(1,1fr) ;
            grid-gap: 10px;
        }
        .c1>div{
            border: 1px solid wheat;
            text-align: center;
            background-color: gray;
            font-size: 20px;
            padding-top: 15px;
        }
        .item5{
            width: 100%;
            height: 2800px;
            /* background-color: pink; */
        }
        .item5>div{
            width: 60%;
            height: 100%;
            /* background-color: yellow; */
            float: left;
            margin-left: 400px;
            font-size: 15px;
            line-height:200%;

        }
        
        .item6{
            width: 100%;
            height: 400PX;
            /* background-color:red; */
        }
        

        a:hover{
            color: white;
        }
        a:link{
            color: black;
        }
        a:visited{
            color: black;
        }
    </style>
</head>
<body>
    <div class="flex-container item1">
        <div class="flex-item a1"><img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-20 220004.png" width="400px" height="50px"></div>
        <div class="flex-item a2"><img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-20 220013.png"width="400px" height="50px" alt=""></div>
    </div>
    <div class="item2">
        <div class="b1">
            <div>首页</div>
            <div>学校简介</div>
            <div>办学特色</div>
            <div>招生特色</div>
            <div>招生就业</div>
            <div>信息查询</div>
            <div>校园风光</div>
            <div>学院新闻</div>
            <div>联系我们</div>
        </div>
    </div>
    
    <div class="item3">
        <img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-21 223740.png" width="100%" height="400px">
    </div>
    <div class="item4">
        <div class="c1">
            <div><a href="./作业2.html">学校简介</a></div>
            <div><a href="./作业2页面二.html">校长寄语</a></div>
            <div><a href="http://www.scauzj-cec.cn/about/qrzzk0d3.html">学生风采</a></div>
            <div><a href="./作业2页面三.html">就业发展</a></div>
            <div><a href="./作业2页面四.html">华珠荣誉</a></div>
        </div>
        <div><img src="C:\Users\ROG\Pictures\屏幕截图 2025-02-22 155013.png"width="850px" height="3000px"></div>
    </div>
    <div class="item5">    
    </div>
    <div class="item6">
        <img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-21 232836.png" width="100%" height="90%">
    </div>
    
</body>
</html>

运行截图一

运行截图二

运行截图三

运行截图四

运行截图五

作业三：完成电商页面

代码一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>电商页面</title>
    <style>
        body{
            width: 80%;
            height: 3000px;
            /* background-color: antiquewhite; */
            margin-left: 180px;
        }
        .item{
            width: 40%;
            height:40px;
            /* background-color: green; */
            display: grid;
            grid-template-rows: repeat(1,1fr);
            grid-template-columns: repeat(3,1fr);
        }

        .item>div{
            /* border:1px solid red; */
            color: black;
            margin-left:70px ;
            padding-top: 8px;
        }
        .item1{
            width: 100%;
            height: 150px;
            /* background-color: pink; */
            text-align: center;
            padding-top: 100px;
           
        }
        .item2{
            width: 100%;
            height: 400px;
            /* background-color: yellow */

        }

        .item3{
            width: 100%;
            height: 100px;
            /* background-color: green */
        }
        
        .flex-container{
            height: 2000px;
            margin: auto;
            /* background-color:purple; */
            box-shadow: 10ox 10px 10px gray;
            display: flex;
            flex-flow: row wrap;
            justify-content: space-around;
        }
        .flex-item{
            width: 275px;
            height: 355px;
            background-color: white;
            box-shadow: 10px 10px 10px gray;
            border-radius: 10%;
            border: 2px solid white;
            font-size: 40px;
            text-align: center;
            align-items: space-around;
        }
        input{
            width: 800px;
            height: 40px;
            border: 1px solid red;
            border-radius: 9999px;
        }
        .item2>div:nth-child(1){
            float: left;
            padding-left: 150px;
        }
        .item2>div:nth-child(2){
            float: left;
            margin-left: 100px;
            padding-top: 25px;
        }
        .item2>div:nth-child(3){
            float: left;
           margin-left: 50px;
            padding-top: 25px;
        }
    </style>
</head>
<body>
    <div class="item">
        <div>购物车</div>
        <div>我的订单</div>
        <div>我的</div>
    </div>
    <div class="item1"> <p><input type="search" name="search" id="" >  搜索</p></div>
    <div class="item2">
        <div><img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-26 135242.png" alt=""></div>
        <div><img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-26 135342.png" alt=""></div>
        <div><img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-26 140001.png" alt=""></div>
</div>
    <div class="item3"></div>
    <div class="item4 flex-container">
        <div class="flex-item a1"><img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-26 000601.png" alt=""></div>
        <div class="flex-item a2"><img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-26 000629.png" alt=""></div>
        <div class="flex-item a3"><img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-26 124630.png" alt=""></div>
        <div class="flex-item a4"><img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-26 001510.png" alt=""></div>
        <div class="flex-item a5"><img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-26 001542.png" alt=""></div>
        <div class="flex-item a6"><img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-26 001605.png" alt=""></div>
        <div class="flex-item a7"><img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-26 001644.png" alt=""></div>
        <div class="flex-item a8"><img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-26 001709.png" alt=""></div>
        <div class="flex-item a9"><img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-26 001722.png" alt=""></div>
        <div class="flex-item a10"><img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-26 001818.png" alt=""></div>
        <div class="flex-item a11"><img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-26 123009.png" alt=""></div>
        <div class="flex-item a12"><img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-26 124235.png" alt=""></div>
        <div class="flex-item a13"><img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-26 123243.png" alt=""></div>
        <div class="flex-item a14"><img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-26 123306.png" alt=""></div>
        <div class="flex-item a15"><img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-26 123321.png" alt=""></div>
        <div class="flex-item a16"><img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-26 123336.png" alt=""></div>
        <div class="flex-item a17"><img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-26 123358.png" alt=""></div>
        <div class="flex-item a18"><img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-26 123520.png" alt=""></div>
        <div class="flex-item a19"><img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-26 123422.png" alt=""></div>
        <div class="flex-item a20"><img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-26 123549.png" alt=""></div>
        <div class="flex-item a21"><img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-26 124415.png" alt=""></div>
        <div class="flex-item a22"><img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-26 124357.png" alt=""></div>
        <div class="flex-item a23"><img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-26 124339.png" alt=""></div>
        <div class="flex-item a24"><img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-26 124325.png" alt=""></div>
        <div class="flex-item a25"><img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-26 124306.png" alt=""></div>
        
        
    </div>
</body>
</html>

代码二：

<!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{
            width: 100%;
            height: 800px;
            /* background-color: antiquewhite; */
        }

        .item{
            width: 65%;
            height: 60%;
            /* background-color: pink; */
            margin-top: 250px;
            margin-left: 280px;
        }
        .item1{
            width: 40%;
            height: 70%;
            /* background-color: blueviolet; */
            float: left;
            margin-top: 70px;
            margin-left: 80px;
            
        }
        
        .item2{
            width: 30%;
            height: 70%;
            /* background-color: blueviolet; */
            float: left;
            margin-top: 70px;
            margin-left: 60px;
            padding-top: 30px;
            padding-left: 100px;
        }

        .item1>div:nth-child(1){
            width: 60%;
            height: 30px;
            /* background-color: yellow; */
            margin-top: 40px;
            margin-left: 85px;
        }

        .a1{
            height: 100%;
            width: 45%;
            background-color: green; 
            float: left;
            margin-left: 8px;
            text-align: center;
        }
        .a2{
            height: 100%;
            width: 45%;
            background-color: green; 
            float: left;
            margin-left: 10px;
            text-align: center;
        }

        .item1>div:nth-child(2){
            width: 80%;
            height: 40px;
            /* background-color: gray; */
            margin-top: 10px;
            margin-left: 42px;
        }

        .item1>div:nth-child(3){
            width: 80%;
            height: 40px;
            /* background-color: gray; */
            margin-top: 10px;
            margin-left: 42px;
        }

        .item1>div:nth-child(4){
            width: 80%;
            height: 40px;
            /* background-color: rgb(255, 34, 0); */
            margin-top: 10px;
            margin-left: 42px;
            text-align: center;
            padding-top: 5px;
            color: white;
            border-radius: 5%;
        }

        .item1>div:nth-child(5){
            width: 80%;
            height: 40px;
            /* background-color: gray; */
            margin-top: 10px;
            margin-left: 42px;
        }
        button{
            width: 100%;
            height: 30px;
            padding-top: 0%;
            color: white;
            background-color:rgb(255, 34, 0); ;
            border: 1px solid rgb(255, 34, 0);;
        }
        #username{
            width: 100%;
            height: 30px;
            background-color:white;
            color: black;
        }

        #password{
            width: 100%;
            height: 30px;
            background-color: white;
            color: black;
        }

        a:hover{
            color: red;
        }
        a:link{
            color: white;
        }
        a:visited{
            color: white;
        }
    </style>
    
</head>
<body>
    <div class="item">
        <div class="item1">
            <div>
                <div class="a1"><a href="./作业3登录页.html">密码登录</a></div>
                <div class="a2"><a href="./作业页3登录页2.html">短信登录</a></div>
            </div>
            <div><p><input type="text" name="username" id="username" placeholder="账号名/手机号/邮箱"autofocus></p></div>
            <div><p><input type="text" name="password" id="password" placeholder="密码"autofocus></p></div>
            <div><p><button type="submit"><a href="./作业3电商页面.html">登录</a></button></p></div>
            <div><img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-22 215949.png"width="350px"height="18px" alt=""></div>
        </div>
        <div class="item2">
            <img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-22 220204.png"width="230px" height="270px" alt="">
        </div>
    </div>
</body>
</html>
 <script>

代码三

<!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{
            width: 100%;
            height: 800px;
            /* background-color: antiquewhite; */
        }

        .item{
            width: 65%;
            height: 60%;
            /* background-color: pink; */
            margin-top: 250px;
            margin-left: 280px;
        }
        .item1{
            width: 40%;
            height: 70%;
            /* background-color: blueviolet; */
            float: left;
            margin-top: 70px;
            margin-left: 80px;
            
        }
        
        .item2{
            width: 30%;
            height: 70%;
            /* background-color: blueviolet;*/
            float: left;
            margin-top: 70px;
            margin-left: 60px;
            padding-top: 30px;
            padding-left: 100px;
        }

        .item1>div:nth-child(1){
            width: 60%;
            height: 30px;
            /* background-color: yellow; */
            margin-top: 40px;
            margin-left: 85px;
        }

        .a1{
            height: 100%;
            width: 45%;
            background-color: green;
            float: left;
            margin-left: 8px;
            text-align: center;
        }
        .a2{
            height: 100%;
            width: 45%;
            background-color: green;
            float: left;
            margin-left: 10px;
            text-align: center;
        }

        .item1>div:nth-child(2){
            width: 80%;
            height: 40px;
            /* background-color: gray; */
            margin-top: 10px;
            margin-left: 42px;
        }

        .item1>div:nth-child(3){
            width: 80%;
            height: 40px;
            /* background-color: gray; */
            margin-top: 10px;
            margin-left: 42px;
        }

        .item1>div:nth-child(4){
            width: 80%;
            height: 40px;
            background-color: rgb(255, 34, 0);
            margin-top: 10px;
            margin-left: 42px;
            text-align: center;
            padding-top: 5px;
            color: white;
            border-radius: 5%;
        }

        .item1>div:nth-child(5){
            width: 80%;
            height: 40px;
            /* background-color: gray; */
            margin-top: 10px;
            margin-left: 42px;
        }
        button{
            width: 100%;
            height: 30px;
            padding-top: 0%;
            color: white;
            background-color:rgb(255, 34, 0); ;
            border: 1px solid rgb(255, 34, 0);;
        }
        #number{
            width: 100%;
            height: 30px;
            background-color:white;
            color: black;
        }

        #password{
            width: 100%;
            height: 30px;
            background-color: white;
            color: black;
        }

        a:hover{
            color: red;
        }
        a:link{
            color: white;
        }
        a:visited{
            color: white;
        }
    </style>
    
</head>
<body>
    <div class="item">
        <div class="item1">
            <div>
                <div class="a1"><a href="./作业3登录页.html">密码登录</a></div>
                <div class="a2"><a href="./作业页3登录页2.html">短信登录</a></div>
            </div>
            <div><p><input type="text" name="number" id="number" placeholder="请输入手机号"autofocus></p></div>
            <div><p><input type="text" name="password" id="password" placeholder="请输入验证码"autofocus></p></div>
            <div><p><button type="submit" ><a href="./作业3电商页面.html">登录</a></button></p></div>
            <div><img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-22 215949.png"width="350px"height="18px" alt=""></div>
        </div>
        <div class="item2">
            <img src="C:\Users\ROG\Pictures\Screenshots\屏幕截图 2025-02-22 220204.png"width="230px" height="270px" alt="">
        </div>
    </div>
</body>
</html>

<!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{
            width: 80%;
            height: 3000px;
            background-color: white;
            margin-left: 180px;
        }
        .item1{
            width: 100%;
            height: 50px;
            background-color: grey;
            margin-top:150px ;
        }
        .item2{
            height: 2000px;
            margin: auto;
            background-color:gray;
            box-shadow: 10ox 10px 10px gray;
            display: flex;
            flex-flow: row wrap;
            justify-content: space-around;
        }
        .flex-item{
            width: 100%;
            height: 180px;
            background-color: white;
            box-shadow: 10px 10px 10px gray;
            border: 2px solid white;
            font-size: 40px;
            text-align: center;
            align-items: space-around;
        }
        .a1{
            height: 100%;
            width: 400px;
            /* background-color: white; */
            float: left;
            margin-left: 80px;
            display: grid;
            grid-template-rows: repeat(1,1fr);
            grid-template-columns: repeat(2,1fr);
        }
        .b1{
            /* background-color: white; */
            height: 50px;
            width: 600px;
            float: left;
            margin-left: 400px;
            display: grid;
            grid-template-rows: repeat(1,1fr);
            grid-template-columns: repeat(3,1fr);
        }
        .a1>div{
            border: 1px solid black;
            text-align: center;
            padding-top: 13px;
        }
        .b1>div{
            border: 1px solid black;
            text-align: center;
            padding-top: 13px;
        }
         .item{
            width: 100%;
            height: 200px;
            /* background-color: pink; */
            padding-left:1050px ;
            padding-top: 500px;
        }
        #search{
            width: 350px;
            height: 30px;
            border: 1px solid red;
           
            
        } 
    </style>
</head>
<body>
    <div class="item"><p><input type="search" name="search" id="search" >  搜索</p></div>
    <div class="item1">
        <div class="a1">
            <div><input type="radio" name="sex" value="man" checked>全选</div>
            <div>商品</div>
        </div>
        <div class="b1">
            <div>单价</div>
            <div>数量</div>
            <div>操作</div>
        </div>
    </div>
    <div class="item2 flex-container">
        <div class="flex-item"></div>
        <div class="flex-item"></div>
        <div class="flex-item"></div>
        <div class="flex-item"></div>
        <div class="flex-item"></div>
        <div class="flex-item"></div>
        <div class="flex-item"></div>
        <div class="flex-item"></div>
        <div class="flex-item"></div>
        <div class="flex-item"></div>
       
       
        
    </div>
</body>
</html>

运行截图

作业四：完成渐变背景反转

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业四</title>
    <style>
        .item{
            height: 800px;
            background-image: linear-gradient(to right bottom,red,yellow,blue,pink);
        }
        .item1{
            height: 800px;
            background-image: linear-gradient(to left bottom,red,yellow,blue,pink);
        }
    </style>
</head>
<body>
    <div class="item"></div>
    
</body>
</html>
<script>
    var item=document.getElementsByClassName("item")[0]
   
    

    item.addEventListener("click",function (){
        if(item.getAttribute("class") == "item"){
            item.setAttribute("class","item1")
        }else{
            item.setAttribute("class","item")
        }
    },true)
</script>

运行截图