第二阶段打卡第一天

今天代码：2小时

0-12岁首页的布局和排版

<!--A Design by W3layouts
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html>
<head>
    <title>溺水安全教育平台</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <link href="./css/style1.css" rel="stylesheet" type="text/css" media="all" />
    <script src='./js/jquery-1.8.1.min.js' type='text/javascript'></script>
    <script src='./js/jquery.kwicks.js' type='text/javascript'></script>
    <script type='text/javascript'>
        $(function() {
            $('.kwicks').kwicks({
                maxSize : 250,
                spacing : 5,
                behavior: 'menu'
            });
        });

    </script>

    <link rel='stylesheet' id='camera-css'  href='./css/camera.css' type='text/css' media='all'>
    <!-- Scripts-->
    <script type='text/javascript' src='./js/jquery.min1.js'></script>
    <script type='text/javascript' src='./js/jquery.mobile.customized.min.js'></script>
    <script type='text/javascript' src='./js/jquery.easing.1.3.js'></script>
    <script type='text/javascript' src='./js/camera.min.js'></script>
    <script>
        jQuery(function(){

            jQuery('#camera_wrap_1').camera({
                thumbnails: true
            });

            jQuery('#camera_wrap_2').camera({
                height: '400px',
                loader: 'bar',
                pagination: false,
                thumbnails: true
            });
        });
    </script>
</head>
<body>
<div class="header-bg">
    <div class="wrap">
        <div class="header">
            <div class="logo">

                    <button type="button"
                            onclick="document.getElementById('demo').innerHTML = Date()">
                        单击我以显示日期和时间</button>

                    <p id="demo"></p>
            </div>
            <div class="menu">
                <ul class='kwicks kwicks-horizontal'>
                    <li class="active"><a href="index1.html">首页</a></li>
                    <li><a href="login.html">登录/注册</a></li>
                    <li><a href="knowledge.html">学习天地</a></li>
                    <li><a href="compete.html">答题天地</a></li>
                    <li><a href="relax.html">娱乐天地</a></li>
                    <li><a href="add.html">投稿</a></li>
                </ul>

            <div class="clear"></div>
        </div>
    </div>
</div>
<div class="fluid_container">
    <div class="camera_wrap camera_azure_skin" id="camera_wrap_1">

        <div  data-src="./images/21.gif">
        </div>
        <div data-src="./images/22.jpg">
        </div>
        <div  data-src="./images/25.jpg">
        </div>
    </div><!-- #camera_wrap_1 -->
</div><!-- .fluid_container -->
<div class="footer-bg">
    <div class="wrap">
        <div class="footer">
            <div class="f_grid">
                <div class="social">

                </div>
            </div>
            <div class="f_grid1">
                <ul class="f_nav">
                    <li class="active"><a href="index1.html">首页</a></li>
                    <li><a href="login.html">登录</a></li>
                    <li><a href="knowledge.html">学习</a></li>
                    <li><a href="compete.html">竞答</a></li>
                    <li><a href="relax.html">游戏</a></li>
                    <li><a href="add.html">投稿</a></li>

                </ul>
                <div class="copy">
                    <p class="w3-link"> 版权 © 石家庄铁道大学软件工程系从零开始团队&nbsp; <a href="https://www.cnblogs.com/conglingkaishi012/"> 关于我们</a></p>
                </div>
                <div class="clear"></div>
            </div>
            <div class="f_logo">
            </div>
            <div class="clear"></div>
        </div>
    </div>
</div>
</body>
</html>

 

 

 

 

 关于代码部分

 

posted @ 2022-04-30 15:31  从零开始01  阅读(10)  评论(0)    收藏  举报