云计算web前端第二次作业

2401_88965414

252人浏览 · 2025-02-27 09:10:25

2401_88965414 · 2025-02-27 09:10:25 发布

一，ollama网页

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局</title>
  
        <style>
            body{
                height:750px;
                font-family:  ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
            }
            .nav{
                /* background-color: brown; */
                height: 7%;
                width:99%;
                margin: auto;
            }
            .main{
                /* background-color: aqua; */
                height: 55%;
                width: 33%;
                margin: auto;
                margin-top: 142px;
            }
            .introduce{
                /* background-color: pink; */
                height: 5%;
                width: 98%;
                margin: auto; 
                margin-top: 165px;

            }

            .nav1{
                height: 100%;
                width: 22%;
                /* background-color: antiquewhite;  */
                float: left;
            }
            .nav2{
                height: 90%;
                width: 30%;
                /* background-color: antiquewhite; */
                float: left;
                margin-left: 270px;
                margin-top: 4px;
            }
            .nav3{
                height: 100%;
                /* background-color: antiquewhite; */
                width: 16%;
                float: left;
                margin-left: 260px;
            }
            .nav1>img{
                float: left;
                margin-top: 3px;
            }
            .nav1>button{
                float: left;
                width: 65px;
                margin-left: 15px;
                margin-top: 15px;
                border: 1px solid white;
                font-size: 1.125rem;
            }
            .nav1>button:hover{
                text-decoration: underline;
            }
            .search{
                width: 450px;
                height: 43px;
                border-radius: 9999px;
                border: 1px solid white;
                margin-top: 3px;
                font-size: .875rem;
                line-height: 1.25rem;
            }
            .nav3>button{
                width: 92px;
                height: 37px;
                border-radius: 9999px;
                font-size: 1.125rem;
                margin-top: 12px;
            }
            .nav3>.sign{
                border:1px solid rgb(229, 229, 229);
                margin-left: 26px;
            }
            .nav3>.download,.main>button{
                width: 120px;
                background-color: #262626;
                color: white;
                border: 0 solid #e5e7eb;
                margin-left: 5px;
                border-radius: 9999px;
            }
            .nav3>.download:hover{
                background-color: black;
            }
            .main>img{
                margin-left: 238px;
            }
            .main>.text1,.main>.text2{
                font-size: 30px;
                line-height: 36px;
            }
            .main>.text1{
                margin-top: 32px;
                margin-left: 63px ;
            }
            .main>.text2{
                margin-top: 1px ;
                margin-left: 149px;
            }
            .main>.text3{
                font-size: 1.125rem; 
                margin-top: 29px;
                margin-left: 80px;

            }
            .text3>button,.text4>button{
                font-size: 1.125rem;
                border: 0 solid white; 
                text-decoration: underline;
            }
            .text4{
                font-size: 1.125rem;
            }
            .text4>button{
                margin-left: 110px;
                margin-top: 5px;
            }
            .main>button{
                height: 44px;
                width: 167.510px;
                font-size: 20px;
                margin-left: 185px;
                margin-top: 40px;
            }
            .main>button:hover{
                background-color: black;
            }
            .main>.text5{
                font-size: 12px;
                margin-left: 210px;
                margin-top: 8px;
            }
            .main>.text6{
                font-size: 12px;
                margin-left: 213px;
            }
            .introduce>.copy{
                width: 100px;
                font-size: 12px;
                color: rgb(115, 115, 115);
            }
            .introduce>.text{
                font-size: 12px;
                margin-left: 1180px; 
                word-spacing: 5px; 

            }
            .text>button{
                border: 1px solid white;
                color: rgb(115, 115, 115);
            }
            .text>button:hover{
                text-decoration: underline;
            }
        </style> 
</head>
<body>
    <div class="nav">
        <div class="nav1">
            <img src="./ollama.png" width="32px"  height="45.25px" alt="">
            <button>Discord</button>
            <button>GiHub</button>
            <button>Models</button>
        </div>
        <div class="nav2">
            <img src="./image2.png" height="22px" width="18px" alt="">
            <input type="text" class="search" placeholder="Search models">
        </div>
        <div class="nav3">
            <button class="sign">Sign in</button>
            <button class="download">Download</button>
        </div>
    </div>
    <div class="main">
        <img src="./ollama.png" width="64px" height="90.51px" alt="">
        <div class="text1">Get up and running with large</div>
        <div class="text2">language models.</div>
        <div class="text3">Run
            <button>Llama 3.3,</button>
            <button>DeepSeek-R1,</button>
            <button>Phi-4,</button>
            <button>Mistral,</button>
        </div>
        <div class="text4">
            <button>Gemma 2,</button>
            and other models, locally.
        </div>
        <button class="Download">Download   ↓</button>
        <div class="text5">Available for macOS,</div>
        <div class="text6">Linux, and Windows </div>
    </div>
    <div class="introduce">
        <div class="copy">&copy 2025 Ollama</div>
        <div class="text">
           <button>Blog</button> 
           <button>Docs</button> 
           <button>GitHub</button> 
           <button>Discord</button> 
           <button>X (Twitter)</button> 
           <button> Meetups</button>
            <button>Download</button>
        </div>
    </div>
</body>
</html>

效果：

二，学校官网

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <style>
        *{
            margin: 0px;
        }
        body{
            font-family: 'siyuan_Normal', sans-serif;
        }
        .head{
            height: 50px;
            background-color:#3D3BB8 ;
        }
        .head>.headText{ 
            
            font-size: 14px;
            margin: auto;
            color: white;
            width: 900px;
            height: 14px;
            position: absolute;
            top: 14px;
            left: 1250px;
            word-spacing: 20px;
        } 
        .navigationBar{
            height: 138px;
            background-image:linear-gradient(to bottom,#3D3BB8 0, transparent 100%) ; 
            float: left;
        }
        .navigationBar>img{
            position: absolute;
            top: 83px;
            left: 196px;
        }
        .navigationBar>.button{
            position: absolute;
            top: 137px;
            left: 634px;  
            word-spacing: 7px;
        }
        .button>button{
            background-color: rgb(197,196,232);
            color: white; 
            border: 0 solid white;
            font-size: 15px;
        }
        .search{
            width: 200px;
            height: 11px;
            padding: 16px 70px 16px 40px;
            border-radius: 9999px;
            border: 0 solid white;
            position: absolute;
            top:70px;
            left: 1200px;
        }
        .image{
           
            float: left;
        }
        .main{
            height: 700px;
            width: 1691px;
            background-color: white;
            float: left;
        }
        .main>ul{
            display: flex;
            padding-left: 1110px;
            list-style-type:none;
            margin-top: 100px;
        }
        ul>li{
            margin-left: 29px;
            font-size: 24px;
            color: #999999;
            font-family: pf_Medium;
        }
        .main>img{
            position: relative;
            top: 36px;
            left: 220px;
        }
        .flex-container{
            height: 400px;
            width: 60px;
            background-color: white;
            position: relative;
            left: 800px;
            bottom: 320px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .flex-container>.flex-item{
            height: 80px;
            background-color: #3D3BB8;
            text-align: center;
            font-size: 30px;
            color: aliceblue;
        }
        .flex-container2{
            height: 400px;
            width: 600px;
            background-color: white;
            position: relative;
            left: 890px;
            bottom: 720px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .flex-container2>.flex-item2{
            height: 80px;
            overflow: hidden;
            font-size: 20px;
        }
        .foot{
            height: 500px;
            width: 1691px;
            background-color: #3D3BB8;
            float: left;
        }
        .foot>img{
            position:relative;
            top: 60px;
            left: 360px;
        }
        .img2>.wx{
            position: relative;
            left: 360px;
            top: 85px; 
        }
        .img2>.wb{
            position: relative;
            left: 380px;
            top: 85px; 
        }
        .img2>.dy{
            position: relative;
            left: 400px;
            top: 85px; 
        }
        .img2>.sp{
            position: relative;
            left: 420px;
            top: 85px; 
        }
        .flex-container3{
            height: 50px;
            width: 550px;
            background-color: #3D3BB8;
            position: relative;
            left: 355px;
            top: 100px; 
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            color: white;
        }
        .foot>.text2{
            position: relative;
            left: 1035px;
            bottom: 220px;
            font-size: 17px;
            font-weight: bold;
            color: white;
        }
        .foot>.text3{
            position: relative;
            bottom: 190px;
            left: 1034px;
            list-style-type: none;
            color: white;
        }
        .text3>li{
            margin-top: 7px;
        }
    </style>
</head>
<body> 
    <div class="head">
        <div class="headText">
            <span>学院代码：12623 </span>
            <span>招生批次：本科批</span>
        </div>  
    </div>
    <div class="navigationBar">
        <img src="./logo.png" width="406px" height="72px">
        <div class="button">
            <button>首页</button>
            <button>学校概况</button>
            <button>信息公开</button>
            <button>机构设置</button>
            <button>党建工作</button>
            <button>教务管理</button>
            <button>招生就业</button>
            <button>OA管理</button>
            <button>招标采购</button>
            <button>快捷通道</button>
            <button>加入我们</button>
        </div>
        <input type="text" class="search" placeholder="请输入搜索内容">
    </div> 
    <img src="./华珠校门.jpg" width="1691px" height="900px" class="image"> 
    <div class="main">
        <ul>
            <li>新闻头条</li>
            <li>部门动态</li>
            <li>学院通告</li>
        </ul>
        <img src="./优秀.jpeg" width="520px" height="350px">
        <div class="flex-container">
            <div class="flex-item">1</div>
            <div class="flex-item">2</div>
            <div class="flex-item">3</div>
            <div class="flex-item">4</div>
        </div>
        <div class="flex-container2">
            <div class="flex-item2">护航返校季 筑牢安全线|华珠开展2025春季开学前卫生大检查</div>
            <div class="flex-item2">再启新章 共绘辉煌|华珠召开2025春季工作会议，共谋高质量发展新篇</div>
            <div class="flex-item2">惊喜！华珠2025限定月历上新啦~</div>
            <div class="flex-item2">“新物种”滇西野外地标科考营开启，华南农业大学珠江学院联合主办并深度参与</div>
        </div>
    </div> 
    <div class="foot">
       <img src="./logo.png" width="525px" height="95px">
        
       <div class="img2">
            <img src="./wx.png" class="wx" > 
            <img src="./wb.png" class="wb">
            <img src="./dy.png" class="dy">
            <img src="./sp.png" class="sp">
        </div>
        <div class="flex-container3">
            <div class="flex-text">官方微信</div>
            <div class="flex-text">官方微博</div>
            <div class="flex-text">官方抖音</div>
            <div class="flex-text">视频号</div>
        </div>
        <div class="text2">联系方式</div>
        <div class="text3">
            <li>党政办公室：020-87979913</li>
            <li>学工处办公室：020-87982606</li>
            <li>招生办公室：020-87983820；020-87979603；</li>
            <li>020-87975122； 020-37983879；020-87976783</li>
            <li>后勤保卫处办公室：020-87978122</li>
            <li>武装部征兵咨询电话：020-87982606</li>
            <li>传真: 020-87979913</li>
            <li>投诉咨询方式: 020-87979913</li>
            <li>邮箱: zjxybgs@scauzj.edu.cn</li>
        </div>
    </div>
</body>
</html>

效果：

腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

Elasticsearch复杂数据类型终极指南：从入门到精通

Elasticsearch作为功能强大的搜索引擎，支持多种复杂数据类型，让开发者能够灵活处理各种结构化和非结构化数据。本文将带你全面了解Elasticsearch中的复杂数据类型，从基础概念到实际应用，助你轻松掌握数据建模的核心技巧。## 内部对象：构建层级化数据结构在Elasticsearch中，对象类型（Object）是最基础的复杂数据类型之一，用于表示具有嵌套关系的数据。例如，我们可

腾讯云开发者社区

终极指南：Flink SQL连接器版本管理从混乱到有序的升级之路

Apache Flink作为流处理领域的佼佼者，其SQL连接器的版本管理一直是开发者面临的核心挑战。本文将系统讲解Flink SQL连接器版本管理的最佳实践，帮助你轻松应对版本兼容性问题，实现从混乱到有序的升级之旅。## 连接器版本管理的常见痛点 😫在Flink应用开发中，连接器版本管理常常让开发者头疼不已。不同版本的连接器可能导致各种兼容性问题，例如API变更、功能差异甚至运行时错误。

腾讯云开发者社区

如何快速搭建Neon无服务器PostgreSQL：面向初学者的完整指南

Neon是一款革命性的无服务器PostgreSQL解决方案，它通过分离存储和计算层，实现了自动扩缩容、类代码式数据库分支以及零级扩展能力。本指南将帮助你从零开始搭建Neon开发环境，体验这款创新数据库的强大功能。## 准备工作：环境要求与依赖项在开始搭建Neon环境前，请确保你的系统满足以下要求：- Linux操作系统（推荐Ubuntu 20.04+或Debian 11+）- Git