一，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>

效果：

# 前端
Logo
DAMO开发者矩阵

DAMO开发者矩阵，由阿里巴巴达摩院和中国互联网协会联合发起，致力于探讨最前沿的技术趋势与应用成果，搭建高质量的交流与分享平台，推动技术创新与产业应用链接，围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐

cover

一文读懂：工业机器人 WAM 技术路线与传统方案的边界

avatar DAMO开发者矩阵

大湾区首个200亿具身智能独角兽诞生！“最像特斯拉”智平方吸金50亿，全矩阵顶级资本重仓

一个成立仅三年的企业，能够同时吸引国家战略资本、千亿产业龙头和市场化顶级机构的集体重仓——这背后是资本市场对智平方“最像特斯拉”定位的深度认同，更是对“模型×硬件×场景”三位一体能力的长期看好。：国家中小企业体系基金、中国文化产业体系基金、广东省人工智能基金、深创投、南山战新投、粤港澳大湾区系列基金等持续加码，形成从国家到地方政策与资本双重加持的格局。：多家保险公司，以及中金资本、中信建投、洪泰资

avatar DAMO开发者矩阵

信创内网IM国产化替代的痛点与选型路径

当信创替代进入倒计时阶段，内网即时通讯的国产化迁移远非“换一个聊天工具”那么简单。头部政企、金融机构和能源集团的实际推进中，三个维度的痛点正在集中暴露。是首当其冲的难题。不少大型组织过去深度依赖 Skype for Business 或 Microsoft Teams，这些系统承载了多年积累的群组架构、聊天记录、文件关联和流程机器人。迁移过程中，一旦历史数据无法完整切割、不能做到可检索的平滑导入，

avatar DAMO开发者矩阵