WEB前端第二次作业

最新推荐文章于 2025-12-04 22:56:41 发布

原创最新推荐文章于 2025-12-04 22:56:41 发布 · 345 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

1.ollama官网

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ollama</title>
        <style>
            body{
                height: 800px;
                /* background-color: cornflowerblue; */
            }

            .nav{
                /* background-color: rgb(6, 77, 0); */
                height: 10%;
                width: 98%;
                margin: auto;
            }

            .main{
                /* background-color: aqua; */
                height: 55%;
                width: 33%;
                margin: auto;
                margin-top: 100px;
            }

            .introduce{
                /* background-color:brown; */
                height: 4%;
                width: 98%;
                margin: auto;
                margin-top: 265px;
            }

            .nav1{
                /*高度是基于父标签的 */
                height:100%;
                width:22%;
                /* background-color:antiquewhite; */
                float: left;
            }

            .nav2{
                height:90%;
                /* background-color:antiquewhite;*/
                width:32%;
                float: left;
                /*margin: auto;脱离文档流后这个auto就不能生效了---因为没有宽度让它自适应 */
                margin-left:180px;
                margin-top:4px;
            }

            .nav3{
                height: 100%;
                /* background-color:antiquewhite ; */
                width: 16%;
                float: left;
                margin-left: 316.99px;
            }

            .search{
                width:500.38px;
                height:36.33px;
                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:white;
                border-radius: 9999px;
                border: 1px solid rgba(224, 222, 222, 0.566);
                font-size: large;
            }

            .download>button{
                width: 119px;
                height:37px;
                background-color: black;
                color: white;
                border-radius: 9999px;
                font-size: large;
            }

            div>img{
                margin: auto;
                margin-top: 6px;
            }
            span{
                display: inline;
                padding: 5px;
                font-size: large;
                text-align: top;
            }

            .main{
                text-align: center;
                font-size:xx-large;
            }
            
            .a{
                text-align: center;
            }

            .d>button{
                width: 135px;
                height:43px;
                background-color: black;
                color: white;
                border-radius: 9999px;
                font-size: large;
                float: left;
                margin: auto;
                margin-left: 38%;
            }

            .end{
                font-size: xx-small;
                display: block;
                margin: auto;
                float: left;
                text-align: center;
                margin-left: 29%;
            }

            .c{
                font-size:smaller;
                color: grey;
            }

            .root{
                font-size:smaller;
                color: grey;
                float: right;
            }

            .ppp{
                float: right;
                padding-inline: 13.1%;
            }
           
           .a{
            text-decoration: none;
            color: black;
           }
        </style>
</head>
<body>
    <div class="nav">
        <!-- 图标加按钮 -->
        <div class="nav1">
            <div>
                <img src="https://ollama.com/public/ollama.png" width="32px" height="45px">
                <p class="ppp"><span><a href="" class="a">Disscord </a></span><span><a href="" class="a"> Github </a></span><span><a href="" class="a"> Models </a></span></p>
            </div>
        </div>
        <!-- 搜索框 -->
        <div class="nav2">
            <input type="text" class="search"  placeholder="Search models">
            <!-- <img src="./u=1343439136,2208917731&fm=253&fmt=auto&app=138&f=JPEG.png" height="35px" width="35px" alt=""> -->
        </div>
        <!-- 两个按钮 -->
        <div class="nav3">
            <div class="sign"><button type="submit">Sing in</button></div>
            <div class="download"><button type="submit">Download</button></div>
        </div>
    </div>
    <div class="main">
        <img src="https://ollama.com/public/ollama.png" width="68px" height="94px" >
        <p>Get up and running with large language models.</p>
        <div class="a">
            <p>
                <span>
                    Run <a href="" style="color: black;">Llama 3.3</a>,<a href="" style="color: black;">DeepSeek-R1</a>,<a href="" style="color: black;">Phi-4</a>,<a href="" style="color: black;">Mistral</a>,<a href="" style="color: black;">Gemma 2</a>,and other models, locally.
                </span>
            </p>
        </div>
        <div class="dt">
            <div class="d"><button type="submit">Download⬇</button></div><br>
            <div class="end">Available for macOS,Linux, and Windows</div> 
        </div>
    </div>
    <div class="introduce">
        <div class="c">&copy 2025 Ollama</div>
        <div class="root">Blog &nbsp;&nbsp; Docs &nbsp;&nbsp; Github &nbsp;&nbsp; X(Twitter) &nbsp;&nbsp; Meetups &nbsp;&nbsp; Download</div>
    </div>
</body>
</html>

2.学校官网

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>
        .header{
            height: 150px;
        }
        .main{
            height: 309.99px;
            background-color: rgba(217, 217, 217, 0.628);
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            align-items: center;
        }
        .rooter{
            height: 350px;
        }
        .main input{
            border: 1px solid #e0e0e0;
        }
        .img{
            height:"309.99px";
            width:600px;
            position: absolute;
            left: 270.99px;
        }
        .ppp{
            position: absolute;
            right: 500px;
        }
        .main input{
            width: 180.99px;
        }
        p{
            margin-top: 40px;
            margin-bottom: 40px;
        }
        .h-1 img{
            position: absolute;
            left: 263.99px;
        }
        .rooter p{
            margin-top: 10px;
        }
        .p2 a,.p2{
            text-decoration: none;
            color: gainsboro;
        }
        .s1{
            position: absolute;
            left: 270.99px;           
        }
        .s2{
            position: absolute;
            right: 546.99px;
        }
        .s2 a{
            text-decoration: none;
            color: #e0e0e0;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="h-1">
            <img style="padding-top:80px"  src="http://scauzhujiangjw.yinghuaonline.com/hnnydxzjxy_jsxsd/framework/images/index/index_02.png"  alt="">
        </div>
    </div>
    <div class="main">
            <img class="img" height="309.99px" src="./111.png" alt="">
            <div class="ppp">
                <p><span style="font-size: x-large;">用户登录</span></p>
                <p><span>用户名：<input type="text"></span></p>
                <p><span>密码：&nbsp;&nbsp;&nbsp;<input type="text"></span></p>
                <p style="margin-left: 200px;"><a href="#"><img src="./向右png.png" height="50px" width="50px" alt=""></a>
                    <a href="#"><img src="./？.png" height="50px" width="50px" alt=""></a></p>
            </div>
    </div>
    <div class="rooter">
        <span class="s1">湖南强智科技发展有限公司 版权所有 <a href="#">找回密码</a></span>
        <span class="s2"><a href="">隐私声明</a><span style="color: #e0e0e0;">|</span><a href="">设为首页</a></span>
    </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>
    <style>
        *{
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style: none;
        }
        
        .container{
            height: 930px;
            width: 1705.9px;
            background-image: url(./小北_20250225181530.jpg);
            background-repeat: no-repeat
        }
        h2{
            font-size: xx-large;
            color: dodgerblue;
            position: absolute;
            top: 200px;
            left: 40%;
        }
        .test{
            accent-color: dodgerblue;
        }
        .loging{
            width: 335px;
            height: 29.99px;
            border-radius: 9999px;
            border: 1px solid dodgerblue;
            color: white;
            background-color: dodgerblue;
            cursor: pointer;
        }
        .nav1 p:nth-child(2) input,.nav1 p:nth-child(3) input {
            width: 335px;
            height: 29.99px;
            border-radius: 9999px;
            border: 1px solid  gray;
            color: grey;
            background-color: white;
        }
        p{
            margin-top: 20px;
            margin-bottom: 20px;
        }
        .nav1{
            position: absolute;
            top: 400px;
            left: 450px;
        }
        span img{
            position: absolute;
            top: 320px;
            right: 350px;
        }
        .rooter button{
            border: 1px solid green;
            width: 150px;
            height: auto;
            color: green;
            background-color: white;
            padding: 10px;
            margin-top: 45px;
            border-radius: 8px;
            cursor: pointer;
        }
        .nav1 p:nth-child(1) strong{
            font-size: x-large;
        }
    </style>
</head>
<body>
    <div class="container">
        <div><h2>小北学生综合服务平台</h2></div>
        <div>
            <div class="nav1">
                <p><strong>欢迎您 ~</strong></p>
                <p><input type="text" placeholder="账号"></p>
                <p><input type="text" placeholder="密码"></p>
                <p><label><input type="checkbox" class="test">忘记密码</label></p>
                <p><input type="button" value="登录" class="loging"></p>
                <p class="rooter"><button>学生APP安卓版下载</button></p>
            </div>
            <span><img src="https://xiaobei.yinghuaonline.com/static/img/loginRightBg.9977875f.png" alt=""></span>
        </div>
    </div>
</body>
</html>

2.3

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华南农业大学珠江学院学校官网</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style: none;
        }

       .container {
            height: 5388px;
            width: 2888px;
        }

       .top-text {
            height: 90.1px;
            width: 100%;
            background-color: rgb(54, 49, 199);
            margin: 0;
        }

       .top-text-conten {
            text-align: right;
            font-size: x-large;
            color: white;
            padding-top: 28.99px;
            margin-right: 275.99px;
        }

       .top-text-conten span {
            margin-right: 75px;
        }

       .img img {
            width: 100%;
            height: 1400px;
            margin-top: 0;
            position: absolute;
            top: 88.888px;
            animation: change 15s infinite;
            z-index: 0
        }

       .a1 {
            z-index: 1;
            position: absolute;
            top: 170.9px;
            left: 465px;
        }

        a {
            margin-left: 20px;
            font-size: x-large;
            color: white;
            text-shadow: 0 1px #e0e0e0;
        }

       .inputarea {
            position: absolute;
            right: 1px;
            top: 1px;
        }

       .search-e {
            position: absolute;
            right: 50px;
            top: 12px;
        }

        @keyframes change {
            0%,
            20% {
                content: url('https://www.scauzj.edu.cn/wp-content/uploads/sites/20/2024/11/%E5%A4%A7%E9%A6%96%E9%A1%B5.png');
            }

            25%,
            45% {
                content: url('https://www.scauzj.edu.cn/wp-content/uploads/sites/20/2022/11/0ac45c435dec1666bd28b13afc6c36e.jpg');
            }

            50%,
            70% {
                content: url('https://www.scauzj.edu.cn/wp-content/uploads/sites/20/2024/04/2%E3%80%81%E3%80%8A%E5%8D%8E%E7%8F%A0%E6%A0%A1%E9%97%A8%E3%80%8B_%E5%89%AF%E6%9C%AC-scaled.jpg');
            }

            75%,
            100% {
                content: url('https://www.scauzj.edu.cn/wp-content/uploads/sites/20/2024/04/XBR65178_%E5%89%AF%E6%9C%AC-scaled.jpg');
            }
        }

       .inputarea {
            width: 450.88px;
            height: 65.99px;
            border-radius: 9999px;
            border: 1px solid gray;
            color: grey;
            background-color: white;
            padding: 0 30px;
            font-size: large;
        }

       .nav1 {
            height: 888px;
            width: 2888px;
            z-index: 1;
            margin-top: 1700px;
        }

       .nnn {
            height: 131px;
            width: 83.99px;
            background-color: blue;
            border: 1px solid blue;
            color: white;
            text-align: center;
            margin-top: 50.88px;
            position: relative;
            left: 1500px;
            padding: 10px;
        }

       .text1 {
            font-size: xx-large;
            padding-top: 25px;
        }

       .nav1-img {
            position: absolute;
            left: 300px;
            top: 1900px;
        }

       .text2 {
            font-size: x-large;
            position: absolute;
            right: 450px;
            text-align: start;
        }

       .title {
            font-size: xx-large;
            position: absolute;
            right: 500px;
            top: 1700px;
        }

       .nav2 {
            height: 1444px;
            width: 2888px;
            background-color: rgb(137, 134, 201);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

       .n123 {
            color: gray;
            font-size: 230%;
        }

       .n456 {
            color: black;
            font-size: 230%;
        }

       .nav3 {
            background-color: #F2F3F5;
            width: 2888px;
            height: 560.16px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
        }

       .nav3-1 {
            font-size: 50px;
        }

       .nav3-2 {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            margin-left: 30px;
        }


       .nav3-2 div {
            width: 183.22px;
            height: 125.88px;
            background-color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            margin: 3px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        }

       .nav3-2 img {
            width: 44px;
            height: 42px;
        }
        .nav4{
            height: 624px;
            width: 2888px;
            background-color: rgb(88, 88, 190);
        }
        .nav5{
            height: 104px;
            width: 2888px;
            background-color: rgb(54, 54, 144);
        }
        .nav4{
            background-color: #3D3BB8;
            width: 2888px;
            height: 844px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .nav4-1{
            width: 488px;
            height: 320px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
        }
        .nav4-1-2{
            display: flex;
            justify-content: space-around;
            color: white;
        }
        .nav4-1-2 div{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            margin-left: 15px;
            margin-right: 15px;
        }
        .img1{
            height:139px;
            width: 699px;
        }
        .img2{
            height: 160px;
            width: 160px;
        }
        .nav4-text{
            width: 320px;
            height: 315px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-left: 150px;
            color: white;

        }
        .nav4-text1{
            font-size: 50px;
            margin-bottom: 30px;
        }
        .nav4-text2{
            font-size: 20px;
            margin-bottom: 10px;
        }
        .nav5 span{
            color: white;
            font-size: x-large;
        }
        .nav5-1{
            position: relative;
            top: 35px;
            left: 844px;
        }
    </style>
</head>

<body>
    <!-- 总容器 -->
    <div class="container" style="zoom: 0.591146;">
        <div class="top">
            <!-- 最顶部右侧文字 -->
            <div class="top-text">
                <div class="top-text-conten">
                    <span>学院代码：12623</span>
                    <span>招生批次：本科批</span>
                </div>
                <div class="img">
                    <img src="#" alt="">
                </div>
            </div>
            <div class="main">
                <div class="a1">
                    <img width="800px" height="150px" src="https://www.scauzj.edu.cn/wp-content/uploads/sites/20/2022/11/%E4%B8%BB%E9%A1%B5logo.png"
                        alt="">
                    <a href="">首页</a>
                    <a href="">学校概况</a>
                    <a href="">信息公开</a>
                    <a href="">机构设置</a>
                    <a href="">党建工作</a>
                    <a href="">教务管理</a>
                    <a href="">招生就业</a>
                    <a href="">OA管理</a>
                    <a href="">招标采购</a>
                    <a href="">快捷通道</a>
                    <a href="">加入我们</a>
                    <div>
                        <input type="text" placeholder="请输入搜索内容" class="inputarea">
                        <span style="font-size: xx-large;" class="search-e">🔍</span>
                    </div>
                </div>
            </div>
            <div class="nav1">
                <img class="nav1-img" src="https://www.scauzj.edu.cn/wp-content/uploads/sites/20/2025/02/640.png" alt="">
                <div class="news">
                    <div>
                        <div class="nnn">
                            <p class="text1">25</p>
                            <p>2025.02</p>
                        </div>
                        <span class="text2">铛铛铛~请签收这份华珠2024-2025学年第二学期校历</span>
                    </div>
                    <div>
                        <div class="nnn">
                            <p class="text1">24</p>
                            <p>2025.02</p>
                        </div>
                        <span class="text2">新学期来啦!哪吒接你回华珠 家校共育赴新程</span>
                    </div>
                    <div>
                        <div class="nnn">
                            <p class="text1">23</p>
                            <p>2025.02</p>
                        </div>
                        <span class="text2">家校共育，携手前行--华南农业大学珠江学院举办国际化人才培育论坛</span>
                    </div>
                    <div>
                        <div class="nnn">
                            <p class="text1">21</p>
                            <p>2025.02</p>
                        </div>
                        <span class="text2">护航返校季 筑牢安全线|华珠开展2025年春季开学前安全卫生大检查</span>
                    </div>
                </div>
            </div>
            <div class="title"><span>新闻头条</span>&nbsp;&nbsp;<span style="color: gray;">部门动态</span>&nbsp;&nbsp;<span
                    style="color: gray;">学院通告</span></div>
            <div class="nav2">
                <div>
                    <h1 class="n123">VIDEO SHOW</h1>
                    <p class="n456">视频展播</p>
                </div>
                <div>
                    <video controls muted width="1700px" height="1200px"
                        src="https://www.scauzj.edu.cn/wp-content/uploads/sites/20/2024/04/0331-%E6%B4%BB%E5%8A%A8%E6%B7%B7%E5%89%AA.mp4"></video>
                </div>
            </div>
            <div class="nav3">
                <div class="nav3-1">公共服务</div>
                <div class="nav3-2">
                    <div>
                        <img src="https://dm.yinghuaonline.com/yhzx/tubiao/ico_index_9_1.png" width="44.16px" height="42.52px">
                        <span>在线教学MOOC平台</span>
                    </div>
                    <div>
                        <img src="https://dm.yinghuaonline.com/yhzx/tubiao/ico_index_9_2.png" width="44.16px" height="42.52px" alt="">
                        <span>数字化实习实训课程平台</span>
                    </div>
                    <div>
                        <img src="https://dm.yinghuaonline.com/yhzx/tubiao/gy-black.png" width="44.16px" height="42.52px" alt="">
                        <span>公益课程平台</v>
                    </div>
                    <div>
                        <img src="https://dm.yinghuaonline.com/yhzx/tubiao/ico_index_9_3.png" width="44.16px" height="42.52px" alt="">
                        <span>模拟仿真实训系统</span>
                    </div>
                    <div>
                        <img src="https://dm.yinghuaonline.com/yhzx/tubiao/hnny-1.png" width="44.16px" height="42.52px" alt="">
                        <span>高校科研系统</span>
                    </div>
                    <div>
                        <img src="https://dm.yinghuaonline.com/yhzx/tubiao/hnny-2.png" width="44.16px" height="42.52px" alt="">
                        <span>WEB内容安全审核智能管理系统</span>
                    </div>
                    <div>
                        <img src="https://dm.yinghuaonline.com/yhzx/tubiao/hnny-3.png" width="44.16px" height="42.52px" alt="">
                        <span>篡改发现预警系统项目</span>
                    </div>
                    <div>
                        <img src="https://dm.yinghuaonline.com/yhzx/tubiao/hnny-4.png" width="44.16px" height="42.52px" alt="">
                        <span>集中运维工单管理平台</span>
                    </div>
                    <div>
                        <img src="https://dm.yinghuaonline.com/yhzx/tubiao/ico_index_9_6.png" width="44.16px" height="42.52px" alt="">
                        <span>数字图书资源</span>
                    </div>
                    <div>
                        <img src="https://dm.yinghuaonline.com/yhzx/tubiao/ico_index_9_4.png" width="44.16px" height="42.52px" alt="">
                        <span>图书系统</span>
                    </div>
                    <div>
                        <img src="https://dm.yinghuaonline.com/yhzx/tubiao/ico_index_9_5.png" width="44.16px" height="42.52px" alt="">
                        <span>图书搜索</span>
                    </div>
                    <div>
                        <img src="https://dm.yinghuaonline.com/yhzx/tubiao/ico_index_9_6.png" width="44.16px" height="42.52px" alt="">
                        <span>资产系统</span>
                    </div>
                    <div>
                        <img src="https://dm.yinghuaonline.com/yhzx/tubiao/ico_index_9_7.png" width="44.16px" height="42.52px" alt="">
                        <span>京广图书</span>
                    </div>
                    <div>
                        <img src="https://dm.yinghuaonline.com/yhzx/tubiao/ico_index_9_8.png" width="44.16px" height="42.52px" alt="">
                        <span>五车图书</span>
                    </div>
                    <div>
                        <img src="https://dm.yinghuaonline.com/yhzx/tubiao/ico_index_9_9.png" width="44.16px" height="42.52px" alt="">
                        <span>学工管理</span>
                    </div>
                    <div>
                        <img src="https://dm.yinghuaonline.com/yhzx/tubiao/ico_index_9_10.png" width="44.16px" height="42.52px" alt="">
                        <span>校友系统</span>
                    </div>
                    <div>
                        <img src="https://dm.yinghuaonline.com/yhzx/tubiao/ico_index_9_1.png" width="44.16px" height="42.52px" alt="">
                        <span>心理测评</span>
                    </div>
                </div>
            </div>
            <div class="nav4">
                <div class="nav4-1">
                    <div class="nav4-1-1">
                        <img class="img1" src="https://www.scauzj.edu.cn/wp-content/uploads/sites/20/2022/11/%E5%BA%95-logo.png" width="488.91px" height="87.4px" alt="">
                    </div>
                    <div class="nav4-1-2">
                        <div>
                            <img class="img2" src="https://www.scauzj.edu.cn/wp-content/uploads/sites/20/2021/11/wx.png" width="98.94px" height="98.94px">
                            <div>官方微信</div>
                        </div>
                        <div>
                            <img class="img2" src="https://www.scauzj.edu.cn/wp-content/uploads/sites/20/2021/11/wb.png" width="98.94px" height="98.94px">
                            <div>官方微博</div>
                        </div>
                        <div>
                            <img class="img2" src="https://www.scauzj.edu.cn/wp-content/uploads/sites/20/2021/11/wb.png" width="98.94px" height="98.94px">
                            <div>官方抖音</div>
                        </div>
                        <div>
                            <img class="img2" src="https://www.scauzj.edu.cn/wp-content/uploads/sites/20/2021/11/sp.png" width="98.94px" height="98.94px">
                            <div>视频号</div>
                        </div>
                        
                    </div>
                </div>
                <div class="nav4-text">
                    <div class="nav4-text1">联系方式</div>
                    <div class="nav4-text2">党政办公室：020-87979913</div>
                    <div class="nav4-text2">教务处办公室：020-81193560；020-37931025</div>
                    <div class="nav4-text2">学工处办公室：020-87982606</div>
                    <div class="nav4-text2">招生办公室：020-87983820；020-87979603；</div>
                    <div class="nav4-text2">020-87975122； 020-37983879；020-87976783</div>
                    <div class="nav4-text2">后勤保卫处办公室：020-87978122</div>
                    <div class="nav4-text2">武装部征兵咨询电话：020-87982606</div>
                    <div class="nav4-text2">传真: 020-87979913</div>
                    <div class="nav4-text2">投诉咨询方式: 020-87979913</div>
                    <div class="nav4-text2">邮箱: zjxybgs@scauzj.edu.cn</div>
                </div>
            </div>
            <div class="nav5"><div class="nav5-1"><span>版权所有：华南农业大学珠江学院粤ICP备11088286号-3 <img src="https://www.scauzj.edu.cn/wp-content/uploads/sites/20/2021/11/gongan.png" alt=""> 粤公网安备 44011702000705号EN</span></div></div>
        </div>
    </div>
</body>

</html>