当前位置： 首页 > article >正文

web 第二次作业

article 2025/2/7 5:38:43

小鹅通首页

html 代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小鹅通-首页</title>
    <!-- 引入页面样式 -->
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>


    <!-- 页头banner图 -->
    <div class="bg header">
        <!-- 页头导航 -->
        <div class="nav">
            <div class="content">
                <!-- 左侧菜单 -->
                <div class="nav-menus">
                    <div class="logo"></div>
                    <ul>
                        <li><a href="#">首页</a></li>
                        <li><a href="#">解决方案</a></li>
                        <li><a href="#">产品服务</a></li>
                        <li><a href="#">价格</a></li>
                        <li><a href="#">活动</a></li>
                        <li><a href="#">案例</a></li>
                        <li><a href="#">渠道合作</a></li>
                        <li><a href="#">下载与帮助</a></li>
                        <li><a href="#">关于我们</a></li>
                    </ul>
                </div>
                <!-- 右侧登录 -->
                <div class="nav-login">
                    <div>我是学员</div>
                    <div>商家登录</div>
                    <div>免费试用</div>
                </div>
            </div>
        </div>
        <!-- banner图 -->
        <div class="banner"></div>
    </div>

    <!-- 产品介绍 -->
    <div class="bg intro">
        <h1>我们的产品能力</h1>
        <img src="./images/m3moa2m10v5k.webp" alt="">
        <div class="info">
            <div>
                <h3 class="title active">知识店铺</h3>
                <p>1分钟搭建您的知识商城<br>
                    助力高效知识变现</p>
                <a href="#">免费试用 - &rightarrow;</a>
            </div>
            <div>
                <h3 class="title">私域直播</h3>
                <p>企业级专属私域直播平台<br>
                    实现私域流量高效运营</p>
                <a href="#">免费试用 - &rightarrow;</a>
            </div>
            <div>
                <h3 class="title">企微SCRM</h3>
                <p>企业微信私域运营神器<br>
                    数据洞察驱动业绩增长</p>
                <a href="#">免费试用 - &rightarrow;</a>
            </div>
        </div>
    </div>

    <!-- sence -->
    <div class="bg sence">
        <h1>我们的场景解决方案</h1>
        <ul class="list">
            <li>公域获客</li>
            <li>私域运营</li>
            <li>直播带货</li>
            <li>内容交付</li>
            <li>数据化运营</li>
        </ul>
        <div class="info">
            <img src="./images/m10c72vn0zzo.webp" alt="">
            <div class="msg">
                <h2>公域获客</h2>
                <h3>多渠道获客，沉淀私域流量池</h3>
                <ul>
                    <li>打通抖音/快手/小红书/视频号/公众号，支持直播间/短视频/账号主页等多种课程挂载方式，快速开启知识变现</li>
                    <li>多种公域转私域工具，支持添加企微/引流加群加人/渠道活码/分配引擎等工具，客户可批量导流到私域流量池</li>
                    <li>丰富的广告获客能力，落地页支持表单/支付类/0元领取/添加企微等多场景，提升广告ROI</li>
                </ul>
                <div class="btns">
                    <div>免费试用</div>
                    <div>了解详情</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 行业解决方案 -->
    <div class="bg industry"></div>

    <!-- 技术优势 -->
    <div class="bg tech"></div>

    <!-- 运营服务 -->
    <div class="bg service"></div>

    <!-- 小鹅通 -->
    <div class="bg xiaoet"></div>

    <!-- 咨询 -->
    <div class="bg advisory"></div>

    <!-- 友情链接、公司信息 -->
    <div class="bg message"></div>

    <footer>
        <p>© 2023 小鹅通 版权所有</p>
        <p>粤ICP备12345678号</p>
    </footer>
</body>

</html>

css 代码：

.bg{
    width:100%;
}

.header{
    background-image: url(../images/m28mek5n0yyx.webp);
    background-size:cover;
    background-position:center;
}

.nav{
    height: 72px;
    /* background-color:aqua; */
    background-color:transparent;
    display:flex;
    justify-content: center;
}
.nav:hover{
    background-color:white;
    /* css3样式：过渡动画，让样式过渡持续指定时间 */
    transition: .2s all;
}

.nav .content{
    width:1600px;
    /* background-color:antiquewhite; */

    display: flex;
    justify-content: space-between;
}
.logo{
    height:72px;
    width:120px;
    background-image:url(../images/logo.png);
    background-size: 115px 35px;
    background-repeat: no-repeat;
    background-position: 0 20px;
}
.nav-menus{
    width:900px;
    display:flex;
    justify-content: space-between;
}
.nav-menus ul{
    list-style:none;
    display:flex;
}
.nav-menus li{
    line-height: 76px;
    padding: 0 15px;
}
.nav-menus li a{
    color:#333;
    text-decoration: none;
    cursor:pointer;
}
.nav-menus li a:hover{
    color:blue;
}

.nav-login{
    display:flex;
    align-items: center;
    gap:20px;
}
.nav-login div:nth-of-type(2),
.nav-login div:nth-of-type(3),
.info .msg .btns div:nth-of-type(1),
.info .msg .btns div:nth-of-type(2){
    cursor:pointer;
    width:100px;
    height:40px;
    line-height: 45px;
    text-align:center;
    border:solid 1px #4872f6;
    border-radius:5px;
    background-color:white;
    color:#4872f6;
}
.info .msg .btns div:nth-of-type(1),
.info .msg .btns div:nth-of-type(2):hover,
.nav-login div:nth-of-type(3),
.nav-login div:nth-of-type(2):hover{
    color:white;
    background-color:#4872f6;
    translate: .5 all;
}
.info .msg .btns div:nth-of-type(1):hover,
.nav-login div:nth-of-type(3):hover{
    background-color:#819cf8;
}

.banner{
    height:454px;
    /* background-color:bisque; */
}
.intro{
    padding: 90px;
    height:995px;
    background-color:#f5faff;

    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
.intro h1,
.sence h1{
    font-size:43px;
}
.intro img{
    width:1263px;
    height:490px;
}
.intro .info{
    width:1263px;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
}
.info > div{
    width: 407px;
    height: 194px;
    background-color:white;
    border-radius:12px;
    padding:28px;

    display:flex;
    flex-direction: column;
    justify-content: space-between;
}
.info .title{
    color:#333;
    font-size:28px;
    font-weight: 400;
}
.intro .info div:nth-of-type(1){
    border-top: solid 5px #4872f6;
}
.info .active{
    color:#4872f6;
}
.info p{
    color:gray;
}
.info a{
    color:#4872f6;
    text-decoration: none;
}

.sence{
    padding: 90px;
    height:889px;
    background: linear-gradient(0deg, #ffffff, #edf1f9);

    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
.sence .list{
    list-style:none;
    background-color:white;
    width:725px;
    height:42px;
    border-radius:21px;

    display:flex;
    justify-content: space-evenly;
}
.list li{
    height:42px;
    width:145px;
    border-radius:21px;
    text-align:center;
    line-height: 42px;
    font-size:14px;
    font-weight:400;
}
.list li:nth-of-type(1){
    background-color:#4872f6;
    color:white;
}
.sence .info{
    background-color:#f5f8fc;
    width:1265px;
    height:537px;
    display: flex;
    flex-direction: row;
    border-radius:12px;
    overflow:hidden;
    border:solid 5px white;
}
.sence .info img{
    width:650px;
    height:527px;
}
.sence .info .msg{
    width:100%;
    height:100%;
    padding: 50px;
}
.sence .msg h2{
    font-size:32px;
}
.sence .msg h3{
    font-size:26px;
    font-family: "黑体";
    font-weight:400;
}
.sence .msg ul{
    list-style:none;
    /* list-style-image: url(../images/ul.png); */
    /* list-style-position: inside; */
    color:gray;
    height:200px;
    /* background-color:#819cf8; */

    display:flex;
    flex-direction: column;
    justify-content: space-between;
}
.sence .msg ul li{
    background-image:url("../images/ul.png");
    background-repeat: no-repeat;
    background-position: 0 10px;
    padding-left:25px;
}
.msg .btns{
    display:flex;
    gap: 20px;
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 20px 0;
    margin-top: 50px;
}

 效果图：

 

简书首页设计：

html代码：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简书主页</title>

    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>

<body>
    <header>
        <div class="logo">
            <img src="images\logo.jpg" alt="简书logo">
        </div>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">下载APP</a></li>
                <li><a href="#">会员</a></li>
                <li><a href="#">IT技术</a></li>
                <li><a href="#">我的</a></li>
            </ul>
        </nav>
        <div class="search">
            <input type="text" placeholder="搜索">
            <button>搜索</button>
        </div>
    </header>

    <main>
        <section class="articles">
            <article>
                <h2>冬日花枝：雅趣</h2>
                <p>在寂静的冬日，何不添一枝花，为生活注入生机？于平淡日常中，让花的芬芳与姿影，为静谧时光增添几分灵动与诗意。</p>
                <div class="article-footer">
                    <span class="author">远山的淡影</span>
                    <span class="likes"><i class="fas fa-heart"></i> 1</span>
                </div>
                <a href="#"></a>
            </article>
            <article>
                <h2>逆光而行：低视力青年的奋斗之路</h2>
                <p>在生活的舞台上，每个人都有属于自己的角色与剧本。而李明，这位低视力青年，却在命运的暗影中，用坚韧与汗水书写了一部励志的传奇。</p>
                <div class="article-footer">
                    <span class="author">孤勇者5556</span>
                    <span class="likes"><i class="fas fa-heart"></i> 18</span>
                </div>
                <a href="#"></a>
            </article>
            <article>
                <h2>再读《悉达多》</h2>
                <p>《悉达多》是黑塞探寻的一个结果，一个人静静面对自己的内心，满世界寻找自己，最终发现，世界是自己的，与他人无关。</p>
                <div class="article-footer">
                    <span class="author">启帆赢</span>
                    <span class="likes"><i class="fas fa-heart"></i> 8989</span>
                </div>
                <a href="#"></a>
            </article>
        </section>

        <aside class="sidebar">
            <h3>推荐作者</h3>
            <ul>
                <li><a href="#">王小麦</a></li>
                <li><a href="#">穿着prada挤地铁</a></li>
                <li><a href="#">无限猴子</a></li>
            </ul>
        </aside>
    </main>

    <footer>
        <p>© 2025 简书 版权所有</p>
        <p>粤ICP备12345678号</p>
    </footer>
</body>

</html>

 css代码：

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
}

header {
    background-color: #fff;
    padding: 10px 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: flex-start; /* 导航栏左对齐 */
    align-items: center;
}

.logo img {
    height: 40px;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    margin-left: 20px; /* 导航栏与logo的间距 */
}

nav ul li {
    margin-right: 20px;
}

nav ul li a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
}

.search {
    margin-left: auto; /* 搜索栏靠右 */
}

.search input {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.search button {
    padding: 5px 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

main {
    display: flex;
    margin: 20px;
}

.articles {
    flex: 3;
    margin-right: 20px;
}

.articles article {
    background-color: #fff;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.articles article h2 {
    margin-top: 0;
}

.articles article p {
    margin: 10px 0;
}

.articles article .article-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    font-size: 14px;
    color: #666;
}

.articles article .article-footer .author {
    font-weight: bold;
}

.articles article .article-footer .likes {
    color: #ff4757;
}

.articles article .article-footer .likes i {
    margin-right: 5px;
}

.articles article a {
    color: #007bff;
    text-decoration: none;
    display: inline-block;
    margin-top: 10px;
}

.sidebar {
    flex: 1;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.sidebar h3 {
    margin-top: 0;
}

.sidebar ul {
    list-style: none;
    padding: 0;
}

.sidebar ul li {
    margin-bottom: 10px;
}

.sidebar ul li a {
    text-decoration: none;
    color: #333;
}

footer {
    text-align: center;
    padding: 20px;
    background-color: #4c4747;
    box-shadow: 0 -2px 4px rgba(127, 102, 102, 0.1);
    margin-top: 20px;
}

效果展示：


http://www.kler.cn/a/534631.html

相关文章：

  • 生产环境的 MySQL事务隔离级别
  • Python-基于PyQt5,Pillow,pathilb,imageio,moviepy,sys的GIF(动图)制作工具
  • LeetCode 0922.按奇偶排序数组 II：O(1)空间复杂度-一次遍历双指针
  • FinRobot：一个使用大型语言模型的金融应用开源AI代理平台
  • 解读“大语言模型（LLM）安全性测评基准”
  • 人类心智逆向工程：AGI的认知科学基础
  • 关于Vue.js组件开发
  • 基于keepalived+GTID半同步主从复制的高可用MySQL集群
  • python学opencv|读取图像（五十七）使用cv2.bilateralFilter()函数实现图像像素双边滤波处理
  • 报错解决方案笔记01
  • 为什么使用nohup 和 启动的python脚本，日志没有在nohup.out中
  • 迅为RK3568开发板篇OpenHarmony实操HDF驱动控制LED-编写应用APP
  • 【ROS视频推流】使用web_video_server完成视频推流
  • LLMs之data：synthetic-data-generator的简介、安装和使用方法、案例应用之详细攻略
  • Ubuntu24登录PostgreSql数据库的一般方法
  • 常用的TS类型工具
  • lambda表达式写java比较器
  • deepseek技术细节1
  • 线程池如何知道一个线程的任务已经执行完成
  • 调用腾讯云批量文本翻译API翻译srt字幕
  • Text2Sql：开启自然语言与数据库交互新时代（3030）
  • postgresql-COALESCE函数、NULLIF函数、NVL函数使用
  • 腾讯云 TI 平台部署与调用DeepSeek-R1大模型的实战指南
  • docker常用基础
  • 【极简模式】deepseek文案+剪映图文成片
  • 使用媒体查询确保网页能够在手机、平板和电脑上正常浏览