黑马程序员技术交流社区

标题: 07 [打印本页]
作者: emmm...    时间: 2018-1-11 21:55
标题: 07
JQ入门：
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #bodyDiv {
                border: 1px solid blue;
                width: 90%;
            }
            
            .logoDiv {
                border: 1px solid blue;
                width: 33%;
                float: left;
                height: 50px;
            }
            
            .clear {
                clear: both;
            }
            
            #menuDiv {
                width: 100%;
                height: 50px;
                border: 1px solid blue;
                background-color: black;
            }
            
            #imgDiv {
                width: 100%;
                border: 1px solid blue;
            }
            
            #menuDiv a {
                font-size: 20px;
                color: white;
            }
            
            .productClass {
                width: 100%;
                border: 1px solid blue;
            }
            
            .contentClass {
                width: 100%;
                border: 1px solid blue;
            }
            
            .contentClass font {
                font-size: 30px;
                color: black;
            }
        </style>
        <script src="../js/jquery-1.11.3.min.js"></script>
        <script>// 弹广告
            var time ;
            $(function() {
                setTimeout("showAd()", 2000);
            });
            function showAd() {
                $("#adDiv").fadeIn(2000);
                setTimeout("hideAd()", 5000);
            }

            function hideAd() {
                $("#adDiv").fadeOut(2000);
                setTimeout("showAd()", 5000);
            }
        </script>
    </head>

    <body>
        <div id="bodyDiv">
            <div id="adDiv" style="width:100%;display: none;">
                <img src="../img/10.jpg" />
            </div>
            <div>
                <div class="logoDiv">
                    <img src="../img/8.jpg" height="48">
                </div>
                <div class="logoDiv">
                    <img src="../img/10.jpg" height="48">
                </div>
                <div class="logoDiv">
                    <a href="">登录</a>
                    <a href="">注册</a>
                    <a href="">购物车</a>
                </div>
                <div class="clear"></div>

            </div>
            <!-- Menu的DIV -->
            <div id="menuDiv">
                <a href="">首页</a>&nbsp;&nbsp;
                <a href="">电脑办公</a>&nbsp;&nbsp;
                <a href="">手机数码</a>&nbsp;&nbsp;
                <a href="">烟酒糖茶</a>&nbsp;&nbsp;
            </div>
            <div id="imgDiv">
                <img src="../img/2.jpg" width="100%">

            </div>
            <!-- 热门商品的DIV -->
            <div class="productClass">
                <!-- 文字部分的DIV -->
                <div class="contentClass">
                    <font>热门商品</font><img src="../img/3.png">
                </div>
                <div style="width:100%;border:1px solid blue;">
                    <div style="width:15%;height: 460px;border:1px solid blue;float:left;">
                        <img src="../img/1.jpg" width="100%" height="100%">
                    </div>

                    <div style="width:84%;height: 460px;border:1px solid blue;float:left;">
                        <div>
                            <div style="border:1px solid blue;width:48%;float:left;height:228px;">
                                <img src="../img/1.jpg" width="100%" height="100%">
                            </div>
                            <div style="border:1px solid blue;width:16%;float:left;height:228px;">
                                <img src="../img/1.jpg">
                            </div>
                            <div style="border:1px solid blue;width:16%;float:left;height:228px;">
                                <img src="../img/1.jpg">
                            </div>
                            <div style="border:1px solid blue;width:16%;float:left;height:228px;">
                                <img src="../img/1.jpg">
                            </div>
                        </div>
                        <div>
                            <div style="border:1px solid blue;width:16%;float:left;height:228px;">
                                <img src="../img/1.jpg">
                            </div>
                            <div style="border:1px solid blue;width:16%;float:left;height:228px;">
                                <img src="../img/1.jpg">
                            </div>
                            <div style="border:1px solid blue;width:16%;float:left;height:228px;">
                                <img src="../img/1.jpg">
                            </div>
                            <div style="border:1px solid blue;width:16%;float:left;height:228px;">
                                <img src="../img/1.jpg">
                            </div>
                            <div style="border:1px solid blue;width:16%;float:left;height:228px;">
                                <img src="../img/1.jpg">
                            </div>
                            <div style="border:1px solid blue;width:16%;float:left;height:228px;">
                                <img src="../img/1.jpg">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="width:100%;border:1px solid blue;">
                <img src="../img/1.jpg" width="100%" height="80">
            </div>
            <div class="productClass">
                <div class="contentClass">
                    <font>最新商品</font><img src="../img/1.jpg">
                </div>
                <div style="width:100%;border:1px solid blue;">
                    <div style="width:15%;height: 460px;border:1px solid blue;float:left;">
                        <img src="../img/1.jpg" width="100%" height="100%">
                    </div>

                    <div style="width:84%;height: 460px;border:1px solid blue;float:left;">
                        <div>
                            <div style="border:1px solid blue;width:48%;float:left;height:228px;">
                                <img src="../img/1.jpg" width="100%" height="100%">
                            </div>
                            <div style="border:1px solid blue;width:16%;float:left;height:228px;">
                                <img src="../img/1.jpg">
                            </div>
                            <div style="border:1px solid blue;width:16%;float:left;height:228px;">
                                <img src="../img/1.jpg">
                            </div>
                            <div style="border:1px solid blue;width:16%;float:left;height:228px;">
                                <img src="../img/1.jpg">
                            </div>
                        </div>
                        <div>
                            <div style="border:1px solid blue;width:16%;float:left;height:228px;">
                                <img src="../img/1.jpg">
                            </div>
                            <div style="border:1px solid blue;width:16%;float:left;height:228px;">
                                <img src="../img/1.jpg">
                            </div>
                            <div style="border:1px solid blue;width:16%;float:left;height:228px;">
                                <img src="../img/1.jpg">
                            </div>
                            <div style="border:1px solid blue;width:16%;float:left;height:228px;">
                                <img src="../img/1.jpg">
                            </div>
                            <div style="border:1px solid blue;width:16%;float:left;height:228px;">
                                <img src="../img/1.jpg">
                            </div>
                            <div style="border:1px solid blue;width:16%;float:left;height:228px;">
                                <img src="../img/2.jpg">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="width:100%;border:1px solid blue;">
                <img src="../img/1.jpg" width="100%">
            </div>
            <div style="width:100%;border:1px solid blue;">
                <center>

                    关于我们 联系我们 招贤纳士 法律声明 友情链接 支付方式 配送方式 服务声明 广告声明 <br/> Copyright © 2005-2016 传智商城 版权所有
                </center>
            </div>
        </div>
    </body>

</html>

作者: 1414225997    时间: 2018-1-12 13:55
沙发路过~
作者: 花开的季节    时间: 2018-1-13 14:29
继续努力，加油！
作者: 渝小妹    时间: 2018-1-13 16:08
期待继续更新哟~~~~
作者: 陈文老师    时间: 2018-1-13 16:18
希望每天都看见你在进步
作者: emmm...    时间: 2018-1-14 21:32
陈文老师 发表于 2018-1-13 16:18
希望每天都看见你在进步

。。。。退步了，我已经忘完了之前学的eclipase，只记得前端的了
作者: xiongliu    时间: 2018-1-15 10:52
电脑手机烟酒，
作者: emmm...    时间: 2018-1-15 21:39
xiongliu 发表于 2018-1-15 10:52
电脑手机烟酒，

大佬上次的图片吸烟，所以我就加上去了，怎么样，是不是很惊喜~
作者: xiongliu    时间: 2018-1-16 09:57
emmm... 发表于 2018-1-15 21:39
大佬上次的图片吸烟，所以我就加上去了，怎么样，是不是很惊喜~

作者: 陈文老师    时间: 2018-1-17 16:50
emmm... 发表于 2018-1-14 21:32
。。。。退步了，我已经忘完了之前学的eclipase，只记得前端的了

分分钟补回来
作者: xiongliu    时间: 2018-1-18 09:09
全英文版也，，，



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2