Hello WEB！今天我们来做一个属于自己的网页叭！

最新推荐文章于 2024-07-24 23:00:08 发布

Padaz

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量1.1k

点赞数 2

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/weixin_45160152/article/details/119379954

版权

首先做一个提纲，要做一个怎么样的页面！我的想法是这个样子的@_@然后下面我们就开始大干一场叭，下面是源代码了，有一些图面文件是我自己本地的，所以可能加载不了，我已经把相关的文件和图片上传到网盘了，大家有可以从网盘中下载。下面是代码部分html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>...

摘要由CSDN通过智能技术生成

准备

首先做一个提纲，要做一个怎么样的页面！

我的想法是这个样子的@_@

然后下面我们就开始大干一场叭，下面是源代码了，有一些图面文件是我自己本地的，所以可能加载不了，我已经把相关的文件和图片上传到网盘了，大家有可以从网盘中下载。轮播图的界面拿了网易云课堂的图片（不是打广告），如有侵犯请联系我.....

网盘资料链接：https://pan.baidu.com/s/1qFRLUOS-d3Ns3_avzXRrhw
提取码：echo

下面是代码部分

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2692332_dh2oytswp9g.css">
</head>
<body>

<div class="window">

    <!--头部-->
    <div class="header">
        <div class="header-contain">
            <!--logo-->
            <a href="javascript:void(0)">
                <div class="header-logo">
                </div>
            </a>

            <!--导航栏-->
            <div class="header-guider">
                <ul>
                    <li><a href="javascript:void(0)">论坛</a></li>
                    <li><a href="javascript:void(0)">资源分享</a></li>
                    <li><a href="javascript:void(0)">商城</a></li>
                    <li><a href="javascript:void(0)">章鱼哥</a></li>
                    <li><a href="javascript:void(0)">下载</a></li>
                    <li><a href="javascript:void(0)">音乐</a></li>
                </ul>
            </div>

            <!--登录注册-->
            <div class="header-register">
                <!--登录-->
                <span><a href="3.登录.html">登录</a></span>/
                <!--注册-->
                <span><a href="2.注册.html">注册&emsp;</a></span>
                <!--头像-->
                <a href="javascript:void(0)">
                    <span class="iconfont icon-iconzhucetouxiang"></span>
                </a>
            </div>

        </div>

    </div>



    <!--身体-->
    <div class="body">
        <div class="body-content">
            <!--身体左边-->
            <div class="body-content-left">
                <!--左一：轮播图-->
                <div class="lunbotu">
                    <!--左右箭头-->
                    <ul class="jiantou">
                        <li class="lt"><span style="left:0" onclick="left()">&lt;</span></li>
                        <li class="rt"><span style="right:0" onclick="right()">&gt;</span></li>
                    </ul>
                    <!--滚轮-->
                    <ul class="gunlun">
                        <li class="y1">&emsp;&emsp;</li>
                        <li class="y1">&emsp;&emsp;</li>
                        <li class="y1">&emsp;&emsp;</li>
                        <li class="y1">&emsp;&emsp;</li>
                    </ul>
                </div>
                <!--左二:图片-->
                <div class="picture">
                    <p class="p_p">&emsp;图片放大栏 <a href="javascript:void(0)" class="gengduo">更多>>></a></p>
                    <div>
                        <div>
                            <a href="javascript:void(0)"><img src="imgs/fangda/hmbb.png" alt="出错了"></a>
                            <a href="javascript:void(0)"><p>海绵宝宝</p></a>
                        </div>
                        <div>
                            <a href="javascript:void(0)"><img src="imgs/fangda/pdx.jpg" alt="出错了"></a>
                            <a href="javascript:void(0)"><p>派大星</p></a>
                        </div>
                        <div>
                            <a href="javascript:void(0)"><img src="imgs/fangda/zyg.jpg" alt="出错了"></a>
                            <a href="javascript:void(0)"><p>章鱼哥</p></a>
                        </div>
                        <div>
                            <a href="javascript:void(0)"><img src="imgs/fangda/xlb.jpg" alt="出错了"></a>
                            <a href="javascript:void(0)"><p>蟹老板</p></a>
                        </div>
                    </div>
                </div>
                <!--左三:内容导航-->
                <div class="leader">
                    <p>&emsp;内容栏</p>
                    <ul style="margin-left: 5%">
                        <li class="leader-active">IU</li>
                        <li>NANA</li>
                        <li>GEM</li>
                        <li>YU</li>
                    </ul>
                </div>
                <!--左四:内容展示-->
                <div class="text">
                    <ul style="list-style-type: none;">
                        <!--IU-->
                        <li class="show">
                            <!--上部分-->
                            <div class="leader-top">
                                <!--上半部分-左-->
                                <div class="text-l">
                                    <img src="imgs/neirou/iu1.jpg" alt="图片出错">
                                </div>

最低0.47元/天解锁文章

Padaz

关注

2
点赞
踩
17

收藏

觉得还不错? 一键收藏
打赏
0
评论
Hello WEB！今天我们来做一个属于自己的网页叭！

首先做一个提纲，要做一个怎么样的页面！我的想法是这个样子的@_@然后下面我们就开始大干一场叭，下面是源代码了，有一些图面文件是我自己本地的，所以可能加载不了，我已经把相关的文件和图片上传到网盘了，大家有可以从网盘中下载。下面是代码部分html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>...
复制链接

扫一扫