web作业网页设计--静态网页（仿写喜马拉雅主页）

最新推荐文章于 2024-05-26 10:53:52 发布

huhuls

最新推荐文章于 2024-05-26 10:53:52 发布

阅读量514

点赞数 12

分类专栏： web静态网页文章标签：前端 html

本文链接：https://blog.csdn.net/huhuls/article/details/135506735

版权

web静态网页专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、网站介绍

📘适合人群：适合刚入门想自己研究的小伙伴；

📓网站素材：收集好看的图片素材；

📒网站文件：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑：本作品代码简单，可使用任意HTML编辑软件(如：Dreamweaver、HBuilder、Vscode 等任意html编辑软件进行运行及修改编辑等操作)；

二、🔗网站效果

三、 🌎代码展示

🏅HTML部分代码展示

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>喜马拉雅,有声小说</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/font.css">
</head>

<body>
    <div class="xmly">
        <!-- 顶部开始 -->
        <header>
            <div class="head">
                <a href="#"><img class="logo" src="imgs/logo.png" alt="图消失啦" width="120px" height="47px"></a>
                <div class="head-left">
                    <a href="#"><span class="sp1">发现</span><span>我的</span><span>APP下载</span></a>
                </div>
                <div class="head-middle"><input class="search" type="text" placeholder="专辑/声音/用户"></div>
                <div class="head-right">
                    <a href="#" class="head-right-nav"><span><i class="iconfont icon-kafei"></i>上 传</span><span><i class="iconfont icon-guozhi"></i>创作中心</span><span><i class="iconfont icon-hanbao"></i>有声出版</span><span><i class="iconfont icon-huadian-penzai"></i>小雅音箱</span></a>
                    <a href="#" class="img1"><img src="imgs/head-left.png" alt=""></a>
                </div>
            </div>
        </header>
        <!-- 顶部结束 -->
        <!-- 右边固定栏开始 -->
        <div class="right-bg">
            <img src="imgs/ting.png" height="70px" alt="">
            <p>听书、听课、听段子 6亿用户的选择！</p>
            <button>下载客户端</button>
        </div>
        <!-- 右边固定栏结束 -->
        <!-- 内容部分开始 -->
        <div class="content">
            <!-- 轮播图部分开始 -->
            <div class="loop">
                <!-- 轮播图部分 -->
                <img src="imgs/lb.png" alt="">
            </div>
            <!-- 轮播图部分结束 -->
            <!-- 导航菜单开始 -->
            <div class="content-nav">
                <div class="nav1">
                    <a href="#"> <img src="imgs/菜单.png" width="20px" alt=""> 全部分类</a><span><a href="#">排行榜 </a> · <a href="#"> 看小说</a></span></div>

                <div class="nav2">
                    <h4>
                        <a href="#"> <img src="imgs/书.png" width="20px" alt=""> 有声书</a>
                    </h4>
                    <span><a href="">文 学</a>|<a href="#">言情</a>|<a href="#">商业</a></span>
                    <span><a href="#">悬 疑</a>|<a href="#">武侠</a>|<a href="#">历史小说</a></span>
                </div>
                <div class="nav3">
                    <h4>
                        <a href="#"><img src="imgs/音乐.png" width="22px" alt="">音乐</a>
                    </h4>
                    <span><a href="">相声</a>|<a href="#">评书</a>|<a href="#">小品</a></span>
                    <span><a href="#">流行</a>|<a href="#">民谣</a>|<a href="#">轻音乐</a></span>
                </div>
                <div class="nav4">
                    <h4>
                        <a href="#"><img src="imgs/教育-58.png" width="23px" alt="">教育</a>
                    </h4>
                    <span><a href="">英语</a>|<a href="#">历史</a>|<a href="#">人文</a></span>
                    <span><a href="#">听两会</a>|<a href="#">科技</a>|<a href="#">外文</a></span>
                </div>
                <div class="nav5">
                    <h4>
                        <a href="#"><img src="imgs/儿童.png" width="23px" alt="">儿童</a>
                    </h4>
                    <span><a href="">学前英语</a>|<a href="#">科普 </a>|<a href="#"> 绘本</a></span>
                    <span><a href="#">少儿音乐</a>|<a href="#">文学</a>|<a href="#">卡通</a></span>
                </div>
                <div class="nav6">
                    <h4>
                        <a href="#"><img src="imgs/知识.png" width="23px" alt="">知识</a>
                    </h4>
                    <span><a href="">财经</a>|<a href="#">IT科技</a>|<a href="#">新媒体</a></span>
                    <span><a href="#">创业</a></span>
                </div>

            </div>
            <!-- 导航菜单结束 -->
        </div>
    </div>
</body>

</html>

🧩CSS部分代码展示

a {
    text-decoration: none;
    color: gray;
}

header {
    position: fixed;
    z-index: 10;
    top: 0;
    width: 100%;
    height: 60px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 3px 2px rgba(128, 128, 128, 0.205);
}

.head {
    width: 1080px;
    margin: 0 auto;
    display: flex;
}

.logo {
    padding-top: 10px;
    flex: 1 0 auto;
}

.head-left {
    flex: 2 0 auto;
    height: 60px;
}

.head-left a {
    line-height: 35px;
    padding-top: 14px;
    display: inline-block;
}

.head-left a>.sp1 {
    color: rgb(0, 0, 0);
    font-size: 18px;
}

.head-left span {
    padding-left: 20px;
    font-size: 16px;
}

.head-middle {
    height: 60px;
    line-height: 60px;
    flex: 3 0 auto;
    text-align: center;
}

.search {
    width: 270px;
    padding-left: 10px;
    height: 40px;
    border-radius: 5px;
    border: 1px solid rgba(205, 92, 92, 0.376);
}

.head-right {
    flex: 3 0 auto;
    height: 60px;
    position: relative;
}

.head-right span {
    padding-right: 15px;
    font-size: 14px;
    padding-top: 30px;
    position: relative;
}

.head-right>.head-right-nav {
    display: inline-block;
    line-height: 60px;
}

.head-right>.head-right-nav i {
    font-size: 22px;
    position: absolute;
    top: -15px;
    left: 11px;
}

四、结语

1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。

huhuls

关注

12
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
web作业网页设计--静态网页（仿写喜马拉雅主页）

📘适合人群：适合刚入门想自己研究的小伙伴；📓网站素材：收集好看的图片素材；📒网站文件：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；📙网页编辑：本作品代码简单，可使用任意HTML编辑软件(如：Dreamweaver、HBuilder、Vscode 等任意html编辑软件进行运行及修改编辑等操作)；1.看到这里了就。
复制链接

扫一扫