美文网首页
第十节 小例子

第十节 小例子

作者: 最美下雨天 | 来源:发表于2018-06-13 17:11 被阅读5次

1、轮播效果

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            a {
                text-decoration: none;
            }
            
            .cle {
                clear: both;
            }
            /*logo 部分的div*/
            
            .header {
                width: 100%;
            }
            
            .header div {
                float: left;
                width: 33.33%;
                height: 60px;
                line-height: 50px;
            }
            
            .header a {
                padding: 15px;
            }
            /*菜单部分*/
            
            .menu {
                width: 100%;
                background-color: #000;
                height: 50px;
                padding-top: 1px
            }
            
            .menu ul li {
                list-style-type: none;
                display: inline;
            }
            
            .menu a {
                font-size: 25px;
                color: #fff;
            }
            /*轮播图*/
            
            .lunbo {
                width: 100%;
                margin-top: 10px;
                margin-bottom: 10px;
            }
            
            .lunbo img {
                width: 100%;
            }
            /*热门商品*/
            /*.left,.right{
                float:left;
            }*/
            
            .left {
                float: left;
                width: 16%;
                height: 500px;
            }
            
            .right {
                float: left;
                width: 84%;
                text-align: center;
                height: 500px;
            }
            
            .middle {
                float: left;
                width: 50%;
                height: 250px;
            }
            
            .item {
                float: left;
                width: 16.66%;
                height: 250px;
            }
            /*给广告*/
            
            .ad1 {
                width: 100%;
            }
            
            .ad1 img {
                width: 100%;
            }
            /*版权*/
            
            .foot {
                width: 100%;
            }
            
            .foot p {
                text-align: center;
            }
        </style>

        <!--
            
            实现一个定时器
        -->
        <script src="../js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            // 入口函数,等价于window.onload
            $(function() {

                setInterval("changeSrc()", 3000);
            })

            var index = 1;

            function changeSrc() {
                index++;
                $("#imgId").attr("src", "../img/" + index + ".jpg");
                if(index == 3) {
                    index = 0;
                }
            }
        </script>
    </head>

    <body>
        <!--
            一个大div中放置8个div
        -->
        <div>
            <!--logo
                嵌套三个div
            -->
            <div class="header">
                <div>
                    <img src="../img/logo2.png" height="40px" />
                </div>
                <div>
                    <img src="../img/header.jpg" />
                </div>
                <div>
                    <a href="#">登录</a>
                    <a href="#">注册</a>
                    <a href="#">购物车</a>
                </div>
            </div>

            <div class="cle"></div>

            <!--菜单-->
            <div class="menu">
                <ul>
                    <li>
                        <a href="#">首页</a>
                    </li>
                    <li>
                        <a href="#">首页</a>
                    </li>
                    <li>
                        <a href="#">首页</a>
                    </li>
                    <li>
                        <a href="#">首页</a>
                    </li>
                </ul>
            </div>

            <!--轮播图-->
            <div class="lunbo">
                <img id="imgId" src="../img/1.jpg" />
            </div>

            <!--热门
                将起划分成两个div
                    左边放图片
                    右边的放商品
                        
            -->
            <div class="hot">
                <!--存放热门商品和一张图片-->
                <div>
                    <h2 style="display: inline;">热门商品</h2>
                    <img src="../img/title2.jpg" />
                </div>
                <div>
                    <!--存放左边的图片-->
                    <div class="left">
                        <img src="../img/big01.jpg" />
                    </div>
                    <!--存放商品图片-->
                    <div class="right">
                        <div class="middle">
                            <img src="../img/middle01.jpg" />
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center">
                                <a href="#">电饭煲</a>
                            </p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center">
                                <a href="#">电饭煲</a>
                            </p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center">
                                <a href="#">电饭煲</a>
                            </p>
                            <p align="center">200</p>
                        </div>

                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center">
                                <a href="#">电饭煲</a>
                            </p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center">
                                <a href="#">电饭煲</a>
                            </p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center">
                                <a href="#">电饭煲</a>
                            </p>
                            <p align="center">200</p>
                        </div>

                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center">
                                <a href="#">电饭煲</a>
                            </p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center">
                                <a href="#">电饭煲</a>
                            </p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center">
                                <a href="#">电饭煲</a>
                            </p>
                            <p align="center">200</p>
                        </div>

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

            <div class="cle"></div>

            <!--广告-->
            <div class="ad1">
                <img src="../img/ad.jpg" />
            </div>

            <!--最新-->
            <div></div>

            <!--广告-->
            <div class="ad1">
                <img src="../img/footer.jpg" />
            </div>

            <!--版权foot-->
            <div class="foot">
                <p>
                    <a href="#">关于我们</a>
                    <a href="#">关于我们</a>
                    <a href="#">关于我们</a>
                    <a href="#">关于我们</a>
                    <a href="#">关于我们</a>
                </p>
                <p>
                    Copyright &copy; 2005-2016 传智商城 版权所有
                </p>
            </div>

        </div>
    </body>

</html>

2、弹出广告

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            a {
                text-decoration: none;
            }
            
            .cle {
                clear: both;
            }
            /*logo 部分的div*/
            
            .header {
                width: 100%;
            }
            
            .header div {
                float: left;
                width: 33.33%;
                height: 60px;
                line-height: 50px;
            }
            
            .header a {
                padding: 15px;
            }
            /*菜单部分*/
            
            .menu {
                width: 100%;
                background-color: #000;
                height: 50px;
                padding-top: 1px
            }
            
            .menu ul li {
                list-style-type: none;
                display: inline;
            }
            
            .menu a {
                font-size: 25px;
                color: #fff;
            }
            /*轮播图*/
            
            .lunbo {
                width: 100%;
                margin-top: 10px;
                margin-bottom: 10px;
            }
            
            .lunbo img {
                width: 100%;
            }
            /*热门商品*/
            /*.left,.right{
                float:left;
            }*/
            
            .left {
                float: left;
                width: 16%;
                height: 500px;
            }
            
            .right {
                float: left;
                width: 84%;
                text-align: center;
                height: 500px;
            }
            
            .middle {
                float: left;
                width: 50%;
                height: 250px;
            }
            
            .item {
                float: left;
                width: 16.66%;
                height: 250px;
            }
            /*给广告*/
            
            .ad1 {
                width: 100%;
            }
            
            .ad1 img {
                width: 100%;
            }
            /*版权*/
            
            .foot {
                width: 100%;
            }
            
            .foot p {
                text-align: center;
            }
        </style>

        <!--
            页面打开2秒之后,显示广告,广告显示2秒钟,然后广告消失
        -->

        <script src="../js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function() {
                setTimeout("showAd()", 2000)
            })

            function showAd() {
                $("#ad").slideDown(1000, function() {
                    setTimeout("hideAd()", 2000)
                })

            }

            function hideAd() {
                $("#ad").slideUp(1000)

            }
        </script>

    </head>

    <body>
        <div id="ad" style="width:100%;display: none;">
            <img src="../img/ad_.jpg" width="100%" />
        </div>
        <!--
            一个大div中放置8个div
        -->
        <div>
            <!--logo
                嵌套三个div
            -->
            <div class="header">
                <div>
                    <img src="../img/logo2.png" height="40px" />
                </div>
                <div>
                    <img src="../img/header.jpg" />
                </div>
                <div>
                    <a href="#">登录</a>
                    <a href="#">注册</a>
                    <a href="#">购物车</a>
                </div>
            </div>

            <div class="cle"></div>

            <!--菜单-->
            <div class="menu">
                <ul>
                    <li>
                        <a href="#">首页</a>
                    </li>
                    <li>
                        <a href="#">首页</a>
                    </li>
                    <li>
                        <a href="#">首页</a>
                    </li>
                    <li>
                        <a href="#">首页</a>
                    </li>
                </ul>
            </div>

            <!--轮播图-->
            <div class="lunbo">
                <img src="../img/1.jpg" />
            </div>

            <!--热门
                将起划分成两个div
                    左边放图片
                    右边的放商品
                        
            -->
            <div class="hot">
                <!--存放热门商品和一张图片-->
                <div>
                    <h2 style="display: inline;">热门商品</h2>
                    <img src="../img/title2.jpg" />
                </div>
                <div>
                    <!--存放左边的图片-->
                    <div class="left">
                        <img src="../img/big01.jpg" />
                    </div>
                    <!--存放商品图片-->
                    <div class="right">
                        <div class="middle">
                            <img src="../img/middle01.jpg" />
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center">
                                <a href="#">电饭煲</a>
                            </p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center">
                                <a href="#">电饭煲</a>
                            </p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center">
                                <a href="#">电饭煲</a>
                            </p>
                            <p align="center">200</p>
                        </div>

                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center">
                                <a href="#">电饭煲</a>
                            </p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center">
                                <a href="#">电饭煲</a>
                            </p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center">
                                <a href="#">电饭煲</a>
                            </p>
                            <p align="center">200</p>
                        </div>

                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center">
                                <a href="#">电饭煲</a>
                            </p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center">
                                <a href="#">电饭煲</a>
                            </p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center">
                                <a href="#">电饭煲</a>
                            </p>
                            <p align="center">200</p>
                        </div>

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

            <div class="cle"></div>

            <!--广告-->
            <div class="ad1">
                <img src="../img/ad.jpg" />
            </div>

            <!--最新-->
            <div></div>

            <!--广告-->
            <div class="ad1">
                <img src="../img/footer.jpg" />
            </div>

            <!--版权foot-->
            <div class="foot">
                <p>
                    <a href="#">关于我们</a>
                    <a href="#">关于我们</a>
                    <a href="#">关于我们</a>
                    <a href="#">关于我们</a>
                    <a href="#">关于我们</a>
                </p>
                <p>
                    Copyright &copy; 2005-2016 传智商城 版权所有
                </p>
            </div>

        </div>
    </body>

</html>

3、隔行换色

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--
            隔行换色,标题行不换色
            tr
        -->

        <script src="../js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
        <script>
            $(function() {
                $("tr:gt(0):odd").css("background-color", "red")
                $("tr:gt(0):even").css("background-color", "blue")
            })
        </script>
    </head>

    <body>
        <table id="tab1" border="1" width="800" align="center">

            <tr style="background-color: #999999;">
                <th>分类ID</th>
                <th>分类名称</th>
                <th>分类描述</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>1</td>
                <td>手机数码</td>
                <td>手机数码类商品</td>
                <td>
                    <a href="">修改</a>|
                    <a href="">删除</a>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>电脑办公</td>
                <td>电脑办公类商品</td>
                <td>
                    <a href="">修改</a>|
                    <a href="">删除</a>
                </td>
            </tr>
            <tr>
                <td>3</td>
                <td>鞋靴箱包</td>
                <td>鞋靴箱包类商品</td>
                <td>
                    <a href="">修改</a>|
                    <a href="">删除</a>
                </td>
            </tr>
            <tr>
                <td>4</td>
                <td>家居饰品</td>
                <td>家居饰品类商品</td>
                <td>
                    <a href="">修改</a>|
                    <a href="">删除</a>
                </td>
            </tr>
        </table>
    </body>

</html>

4、全选、取消全选

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>

        <script src="../js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function() {

                // 绑定点击事件
                $("#input_all").click(function() {
                    // 当前复选框的状态
                    var status = $(this).prop("checked")
                    
                    $(".itemSelect").prop("checked",status)
                })
            })
        </script>

    </head>

    <body>
        <table id="tab1" border="1" width="800" align="center">
            <tr>
                <td colspan="5"><input type="button" value="添加" /> <input type="button" value="删除"></td>
            </tr>
            <tr>
                <th><input type="checkbox" id="input_all"></th>
                <th>分类ID</th>
                <th>分类名称</th>
                <th>分类描述</th>
                <th>操作</th>
            </tr>
            <tr>
                <td><input type="checkbox" class="itemSelect"></td>
                <td>1</td>
                <td>手机数码</td>
                <td>手机数码类商品</td>
                <td>
                    <a href="">修改</a>|
                    <a href="">删除</a>
                </td>
            </tr>
            <tr>
                <td><input type="checkbox" class="itemSelect"></td>
                <td>2</td>
                <td>电脑办公</td>
                <td>电脑办公类商品</td>
                <td>
                    <a href="">修改</a>|
                    <a href="">删除</a>
                </td>
            </tr>
            <tr>
                <td><input type="checkbox" class="itemSelect"></td>
                <td>3</td>
                <td>鞋靴箱包</td>
                <td>鞋靴箱包类商品</td>
                <td>
                    <a href="">修改</a>|
                    <a href="">删除</a>
                </td>
            </tr>
            <tr>
                <td><input type="checkbox" class="itemSelect"></td>
                <td>4</td>
                <td>家居饰品</td>
                <td>家居饰品类商品</td>
                <td>
                    <a href="">修改</a>|
                    <a href="">删除</a>
                </td>
            </tr>
        </table>
    </body>

</html>

5、省市联动

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            // 定义二维数组:
            var arr = new Array(4);
            arr[0] = new Array("哈尔滨", "齐齐哈尔", "大庆", "佳木斯");
            arr[1] = new Array("长春市", "吉林市", "四平市", "通化市");
            arr[2] = new Array("沈阳市", "锦州市", "大连市", "铁岭市");
            arr[3] = new Array("郑州市", "洛阳市", "安阳市", "南阳市");
        </script>

        <script src="../js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
        <script>
            $(function() {
                $('[name="pro"]').change(function() {
                    // this 代表的是省的下拉列表
                    var cityArr = arr[this.value];
                    // 清空的操作
                    $('[name="city"]').html("<option>-请选择-</option>")
                    $.each(cityArr, function() {
                        // this 代表的是二维数组中每一个城市

                        // 新建的option节点
                        $('[name="city"]').append($("<option>").html(this))
                    });
                })

            })
        </script>
    </head>

    <body>
        <form action="#" method="get">
            <input type="hidden" name="id" value="007" /> 姓名:
            <input name="username" value="xuduoduo" /><br> 密码:
            <input type="password" name="password" value="123"><br> 性别:
            <input type="radio" name="sex" value="1" checked="checked">男
            <input type="radio" name="sex" value="0">女
            <br> 爱好:
            <input type="checkbox" name="hobby" value="eat">吃
            <input type="checkbox" name="hobby" value="drink" checked="checked">喝
            <input type="checkbox" name="hobby" value="sleep" checked="checked">睡
            <br> 头像:
            <input type="file" name="photo"><br> 籍贯:
            <select name="pro">
                <option>-请选择-</option>
                <option value="0">黑龙江</option>
                <option value="1">吉林</option>
                <option value="2">辽宁</option>
                <option value="3">河南</option>
            </select>
            <select name="city">
                <option>-请选择-</option>
            </select>
            <br> 自我介绍:
            <textarea name="intr" cols="40" rows="4">good!</textarea>
            <br>
            <input type="submit" value="保存" />
            <input type="reset" />
            <input type="button" value="普通按钮" />
        </form>
    </body>

</html>
<!--
    
-->

6、左右选中

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

    <head>
        <title>左右选中.html</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
        <script type="text/javascript">
        </script>
        <style>
            input[type='button'] {
                width: 50px;
            }
        </style>

        <script src="../js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
        <script>
            $(function() {

                // 把选中的数据中第一条数据添加到右侧
                $("#toRight1").click(function() {
                    $("#right").append($("#left option:selected:first"))
                })

                // 把选中的数据添加到右侧
                $("#toRight2").click(function() {
                    $("#right").append($("#left option:selected"))
                })

                // 把左侧所有的数据添加到右侧
                $("#toRight3").click(function() {
                    $("#right").append($("#left option"))
                })

            })
        </script>
    </head>

    <body>
        <table>
            <tr>
                <td>
                    <!--
                        multiple : 能否多选
                        size: 一次可以展示多少条数据
                    -->
                    <select id="left" multiple="true" style="width:100px" size="10">
                        <option>環</option>
                        <option>芈</option>
                        <option>琅</option>
                        <option>琊</option>
                        <option>爨</option>
                        <option>甄</option>
                        <option>槑</option>
                        <option>夔</option>
                    </select>
                </td>
                <td>
                    <input type="button" value=">" id="toRight1"><br>
                    <input type="button" value=">>" id="toRight2"><br>
                    <input type="button" value=">>>" id="toRight3"><br><br>
                    <input type="button" value="<" id="toLeft1"><br>
                    <input type="button" value="<<" id="toLeft2"><br>
                    <input type="button" value="<<<" id="toLeft3">
                </td>
                <td>
                    <select id="right" multiple="true" style="width:100px" size="10">

                    </select>
                </td>
            </tr>
        </table>
    </body>

</html>

相关文章

  • 第十节 小例子

    1、轮播效果 2、弹出广告 3、隔行换色 4、全选、取消全选 5、省市联动 6、左右选中

  • Selenium小例子

    爬取腾讯动漫 爬取某网站漫画 爬取拉勾网

  • mybatis小例子

    什么是Mybatis MyBatis 是一款优秀的持久层框架，它支持定制化 SQL、存储过程以及高级映射。MyBa...

  • ROR 小例子

    toy_app ROR 小例子 1. 前期准备 创建工程： 修改 gemfile 文件，增加 Heroku 生产环...

  • javaScript小例子

    搜索框效果 上移下移 截取文件名称

  • AJAX小例子

    用ajax实现web前端与后台数据的一个交互 html部分 请在下面的输入框中键入字母（A - Z）： 姓氏： ...

  • CLLocation小例子

    话不多说直接看代码吧?

  • Asymptotic bounds of functions a

    函数的渐近的界 大符号 例子 大符号 例子 小符号 例子 小符号 例子 符号 有关函数渐近的界的定理 定理一 例子...

  • JS创建并设置标签样式的小案例

    面向过程例子： ——————————————————————————————————————— 函数封装小例子 —...

  • for循环几个小例子

    public class Try { publicstaticvoidmain(String[]args) { /...

网友评论

      本文标题：第十节 小例子

      本文链接：https://www.haomeiwen.com/subject/fvbjeftx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|第十节 小例子|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！