JavaScript-全部页面展示

作者: 测试探索 | 来源:发表于2022-06-28 22:21 被阅读0次

JavaScript-全部页面展示
Django 实现分页功能
javascript-事件流
38.自定义组件
iOS开发-导航栏统计需求
【Axure10】页面区域
vue+element-ui操作删除（单行和批量删除）
购物车功能
【Axure10】样式区域-元件样式（快照）
一分钟包装设计图-APP页面卡片banner设计合集

比前两篇文章多了页脚

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商城</title>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <script type="text/javascript" src="js/js1.js"></script>
</head>
<body>
<!--页眉-->
    <div class = "header">
        <div class="logo">
            <img src="image/logo.png">
        </div>
        <!--onmouseleave 控制鼠标离开事件-->
        <div class="menu" onclick="show_menu()" onmouseleave="show_menu1()">

            <div class = "menu_title" >
            <!--  一个#号，代表当前页面，但是不刷新页面-->
            <a href="###">内容分类</a></div>
            <ul id = "menu1" >
                <li>现实主义</li>
                <li>抽象主义</li>

            </ul>
        </div>

        <div class="auth">
            <ul>
                <li><a href = "#">登录</a></li>
                <li><a href = "#">注册</a></li>

            </ul>
        </div>
    </div>
<!--正文-->
    <div class = "content">
        <div class = "banner">
            <img src = "image/welcome.png" class="banner-img">
        </div>

        <div class = "img-content">
            <ul>
                <li>
                    <img src = "image/wumingnvlang.jpg" class="img-li">
                    <div class = "info">
                        <h3>无名女郎</h3>
                        <p>
                            图片描述可以分为多种，一种是单一说明，就比如直接的告诉看图者这篇文 章是要介绍什么样子的内容，一些配图可以分为含蓄类型的，这样的配图一般会 图片描述可以分为多种.
                        </p>
                        <div class="img-btn">
                            <div class = "price"> ￥5800</div>
                            <a href="#" class = "cart">
                                <div class="btn">
                                        <img src="image/cart.svg">
                                </div>
                            </a>

                        </div>
                    </div>
                </li>

                <li>
                    <img src = "image/wumingnvlang.jpg" class="img-li">
                    <div class = "info">
                        <h3>无名女郎</h3>
                        <p>
                            图片描述可以分为多种，一种是单一说明，就比如直接的告诉看图者这篇文 章是要介绍什么样子的内容，一些配图可以分为含蓄类型的，这样的配图一般会 图片描述可以分为多种.
                        </p>
                        <div class="img-btn">
                            <div class = "price"> ￥5800</div>
                            <a href="#" class = "cart">
                                <div class="btn">
                                        <img src="image/cart.svg">
                                </div>
                            </a>
                        </div>
                    </div>
                </li>

                <li>
                    <img src = "image/wumingnvlang.jpg" class="img-li">
                    <div class = "info">
                        <h3>无名女郎</h3>
                        <p>
                            图片描述可以分为多种，一种是单一说明，就比如直接的告诉看图者这篇文 章是要介绍什么样子的内容，一些配图可以分为含蓄类型的，这样的配图一般会 图片描述可以分为多种.
                        </p>
                        <div class="img-btn">
                            <div class = "price"> ￥5800</div>
                            <a href="#" class = "cart">
                                <div class="btn">
                                        <img src="image/cart.svg">
                                </div>
                            </a>
                        </div>
                    </div>
                </li>

                <li>
                    <img src = "image/wumingnvlang.jpg" class="img-li">
                    <div class = "info">
                        <h3>无名女郎</h3>
                        <p>
                            图片描述可以分为多种，一种是单一说明，就比如直接的告诉看图者这篇文 章是要介绍什么样子的内容，一些配图可以分为含蓄类型的，这样的配图一般会 图片描述可以分为多种.
                        </p>
                        <div class="img-btn">
                            <div class = "price"> ￥5800</div>
                            <a href="#" class = "cart">
                                <div class="btn">
                                        <img src="image/cart.svg">
                                </div>
                            </a>
                        </div>
                    </div>
                </li>

                <li>
                    <img src = "image/wumingnvlang.jpg" class="img-li">
                    <div class = "info">
                        <h3>无名女郎</h3>
                        <p>
                            图片描述可以分为多种，一种是单一说明，就比如直接的告诉看图者这篇文 章是要介绍什么样子的内容，一些配图可以分为含蓄类型的，这样的配图一般会 图片描述可以分为多种.
                        </p>
                        <div class="img-btn">
                            <div class = "price"> ￥5800</div>
                            <a href="#" class = "cart">
                                <div class="btn">
                                        <img src="image/cart.svg">
                                </div>
                            </a>
                        </div>
                    </div>
                </li>

                <li>
                    <img src = "image/wumingnvlang.jpg" class="img-li">
                    <div class = "info">
                        <h3>无名女郎</h3>
                        <p>
                            图片描述可以分为多种，一种是单一说明，就比如直接的告诉看图者这篇文 章是要介绍什么样子的内容，一些配图可以分为含蓄类型的，这样的配图一般会 图片描述可以分为多种.
                        </p>
                        <div class="img-btn">
                            <div class = "price"> ￥5800</div>
                            <a href="#" class = "cart">
                                <div class="btn">
                                        <img src="image/cart.svg">
                                </div>
                            </a>
                        </div>
                    </div>
                </li>
            </ul>
        </div>

        <div class="page-nav">
            <ul>
                <li><a href="#">首页</a> </li>
                <li><a href="#">上一页</a> </li>
                <li><span class="first-page">1</span> </li>
                <li><a href="#">2</a> </li>
                <li><a href="#">3</a> </li>
                <li><a href="#">4</a> </li>
                <li><a href="#">5</a> </li>
                <li><a href="#">...</a> </li>
                <li><a href="#">98</a> </li>
                <li><a href="#">99</a> </li>
                <li><a href="#">下一页</a> </li>
                <li><a href="#">尾页</a> </li>

            </ul>
        </div>
    </div>
<!--页脚-->
    <div class="footer">
        <p><span>M-GALLARY</span>©2017 POWERED BY IMOOC.INC</p>
    </div>

</body>
</html>

common.css

*{
    margin: 0px;
    padding: 0px;
}

.header{
    margin: 25px auto;
    width: 1200px;
}

.header .menu ul{
    display: none;
    list-style: none;
    position: absolute;
    width: 80px;
    opacity: 0.5;
    background-color:white;
}

.header .logo{
    float: left;
    position: relative;
}

.header .menu {
    float: left;
    position: relative;
    margin-top: 12px;
    margin-left: 16px;
}

.header .menu ul li{
    margin-top: 20px;
    text-align: center;
}

.header .menu .menu_title{
    border-bottom: 1px solid black;
    padding-bottom: 20px;
    width: 80px;
    text-align: center;
}

a{
    text-decoration: none;
}

.header .auth{
    float: right;
}

.header .auth ul li {
    float: left;
    margin-right:70px;
    margin-top: 12px;
    list-style:none;
}

.content{
    width: 1200px;
    margin: 25px auto;
}

.content .banner .banner-img {
    margin-top: 20px;
}
.content .img-content ul {
    width: 1280px;
}

.content .img-content ul li{
    width: 360px;
    float: left;
    margin: 0px 60px 60px 0;
    list-style: none;
    /*设置边框格式*/
    margin-top: 20px;
    height: 500px;
    box-shadow: 0 0 5px 3px #ccc;
    background-color: white;

}

.img-content .info .img-btn{
    width: 300px;
}

.img-content .info .img-btn .btn{
    width: 60px;
    height: 30px;
    background-color: red;
    text-align: center;
    border-radius: 5px;
    float: right;
}

.img-content .info .img-btn .cart  img{
    width: 25px;
    height: 20px;
    margin-top: 5px;
}

.img-content .info .img-btn .price{
    float: left;
    color: red;
    font-size: 20px;
}

.img-content .info h3{
    font-size: 25px;
    color: red;
    margin-top: 20px;
    margin-bottom: 20px;
}

.img-content .info p{
    line-height: 25px;
    margin-bottom: 10px;
}

.img-content .info{
    margin-left: 30px;
    margin-right: 20px;

}

body{
    background-color: #f5f5f5;
    font-size: 14px;
}
.page-nav ul li{
    float: left;
    margin-right: 20px;
    list-style: none;
}

.page-nav{
    width: 100%;
    height: 60px;
    line-height: 60px;
    /*border: 1px solid black;*/
    overflow: hidden;
}

.page-nav ul{
    margin: auto;
    overflow: hidden;
    width: 500px;

}
.first-page{
    border-radius: 50%;
    background-color: #c5c5c5;
    padding: 3px 9px;
}

.footer{
    width: 1200px;
    height: 100px;
    margin: 60px auto;
    border-top: 1px solid #ccc;
    overflow: hidden;

}

.footer p{
    text-align: center;
    line-height: 50px;
}

.footer p span{
    color: red;
}

js1.js

var flag = true;
function show_menu() {
    var menu1 = document.getElementById("menu1");
    if(flag){
        menu1.style.display = "block";
        flag = false;
    }else{
        menu1.style.display = "none";
        flag = true;

    }
}

function show_menu1() {
    var menu1 = document.getElementById("menu1");
    menu1.style.display = "none";
    flag = true;
}

在前篇文章基础上，多了页脚

JavaScript-全部页面展示
比前两篇文章多了页脚 index.html common.css js1.js
Django 实现分页功能
当页面因需要展示的数据条目过多，导致无法在一个页面全部显示。这时，页面经常会采用分页形式进行展示，然后每页显示 2...
javascript-事件流
javascript-事件流当页面元素触发事件的时候，该元素的容器以及整个页面都会按照特定顺序(如由下往上)响应...
38.自定义组件
1.自定义组件 1.确定样式是否全部一致，元素种类和个数是否全部一致1.1页面传入参数list（页面展示数据由后台...
iOS开发-导航栏统计需求
统计需求页面展示次数页面展示时间页面来源解决方案利用ViewController的AppealAppea...
【Axure10】页面区域
页面功能区域，主要用于管理Axure原型中的页面展示逻辑与数量，通常创建多少页面，生成的原型就展示多少页面。页面...
vue+element-ui操作删除（单行和批量删除）
页面展示： .
购物车功能
页面展示
【Axure10】样式区域-元件样式（快照）
样式区域-元件样式（快照）快照可以快速引用原型页面或母版作为进行展示。同时支持对应的页面内容局部展示（需设置展示...
一分钟包装设计图-APP页面卡片banner设计合集
APP页面的特点就是宽度小，页面长。长页面在做卡片banner的时候，要么套进手机框架里展示，要么排列倾斜展示，短...