自定义Joomla模板的CSS样式表未显示

时间:2015-04-24 00:32:01

标签: css templates joomla

所以我目前使用基本的html和css编码为客户创建一个网站。模板上传到扩展管理器,但是当我去预览时,页面看起来没有像它应该的那样。我的css样式表中的样式都没有显示出来。我是Joomla的新手,所以对这位新手的一些帮助将不胜感激。如果您需要更多信息,我将很乐意给予。不幸的是我无法提供链接,因为该网站尚未生效,但会给你们链接到一些屏幕截图。

编辑:

        <?php
defined('_JEXEC') or die;


?>

<!Doctype html>
    <html>
        <head>
            <meta charset="utf-8">
            <title> Deda's Couture</title>
            <link rel="stylesheet" href="css/normalize.css">
            <link rel="stylesheet" href="css/main.css">
            <link rel="stylesheet" href="css/responsive.css">
            <link rel="stylesheet" href="css/component.css">
            <meta="viewport" content="width=device-width, initial-scale=1.0">
            <jdoc:include type="head" />
            <!--[if lt IE 9]>
        <script src="<?php echo $this->baseurl ?>/media/jui/js/html5.js"></script>
    <![endif]-->



        </head>
            <body class="content">




                <header>

                        <div id="topbar">
                        <a href="#"><img width="40" height="30" src="images/drupal.svg" alt="" id="drupal"></a>
                        <a href="#"><img width="40" height="30" src="images/facebook-square.svg" alt="" id="facebook"></a>
                        <a href="#"><img width="40" height="30" src="images/instagram.svg" alt="" id="instagram"></a>
                        <a href="#"><img width="40" height="30" src="images/twitter.svg" alt="" id="twitter"></a>
                            <p>1-800-555-5252</p>
                                            </div>

                    <input type="checkbox" id="menuToggle">
                    <label for="menuToggle" class="menu-icon">&#9776</label>            




            <center><img src="images/logo.jpg"></center>
                <div id="nav">
                    <div id="nav_wrapper">
                        <!-- <ul>
                            <li><a href="#">HOME</a></li>
                            <li><a href="#">NEW ARRIVALS</a></li><li>
                            <a href="#">APPAREL<img src="images/dropdownarrow.jpg"></a>
                                    <ul>
                                    <li><a href="#">MENS</a></li>
                                    <li><a href="#">WOMENS</a></li>
                                    <li><a href="#">CHILDREN</a></li>
                                    </ul></li>
                            <li><a href="#">ACCESSORIES</a></li>
                            <li><a href="#">SHOES</a></li>
                            <li><a href="#">SPECIALS</a></li>
                            <li><a href="#">CONTACT US</a></li>

                        </ul> -->
                        <jdoc:include type="modules" name="mainnav" style="html5" />
                    </div>
                </div>

                <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right menu">
            <h3 class="cbp-spmenu-open">Menu</h3>
            <!-- <a href="#">HOME</a>
            <a href="#">NEW ARRIVALS</a>
            <a href="#">APPAREL</a>
            <a href="#">ACCESSORIES</a>
            <a href="#">SHOES</a>
            <a href="#">SPECIALS</a>
            <a href="#">CONTACT US</a> -->
            <jdoc:include type="modules" name="mobilenav" style="html5" />
        </nav>



        <!-- <button id="showLeftPush">Show/Hide Left Push Menu</button><img id="menu-icon" src="images/menu-icon.svg"></button>
 -->


            <!-- <img src="images/topbanner.jpg" width="100%"> -->
            <section class="banner">
                <jdoc:include type="modules" name="banner" style="html5" /></section>



        </header>

        <div id="wrapper">
            <section>
                <p class="locate"><!-- HOME // APPAREL // WOMEN'S APPAREL -->
                <jdoc:include type="modules" name="breadcrumbs" style="html5"</p>
                <!-- <ul id="gallery">
                    <li>
                    <img src="images/productbox.jpg">
                    <p> LOREM IPSA DIPA </p>
                    <p>179.00</p></li>
                    <li>
                    <img src="images/productbox.jpg">
                    <p> LOREM IPSA DIPA </p>
                    <p>179.00</p></li>
                    <li>
                    <img src="images/productbox.jpg">
                    <p> LOREM IPSA DIPA </p>
                    <p>179.00</p></li>
                    <li>
                    <img src="images/productbox.jpg">
                    <p> LOREM IPSA DIPA </p>
                    <p>179.00</p></li>
                </ul> -->

                <jdoc:include type="modules" name="gallery" style="html5" />



<!--                <h2>HEADLINE</h2>

        <p class="primarycontent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin laoreet faucibus commodo. Cras consectetur ligula et leo rutrum, ac porttitor ipsum lacinia. Nulla volutpat nisl ante, id consequat diam faucibus efficitur. Duis quis placerat tortor. Aenean pharetra maximus bibendum. Donec posuere mauris at est efficitur hendrerit. In sodales nisi nec lorem sollicitudin aliquam.

Suspendisse vel blandit nulla. Vivamus fringilla tortor condimentum convallis vehicula. Suspendisse potenti. Aliquam tempor quam sit amet auctor interdum. Vivamus condimentum mauris a odio scelerisque elementum. Etiam fermentum lorem id commodo placerat. Ut scelerisque nibh eu feugiat euismod.</p> -->
                <jdoc:include type="message" />
                <jdoc:include type="component" />

</section>
</div>



    <footer>

        <!-- <div id="bottom-nav">
            <nav>
            <a href="index.html">HOME</a>
            <a href="newarrival.html">NEW ARRIVALS</a>
            <a href="apparel.html">APPAREL</a>
            <a href="access.html">ACCESSORIES</a>
            <a href="shoes.html">SHOES</a>
            <a href="specials.html">SPECIALS</a>
            <a href="contact.html">CONTACT US</a>
        </nav> -->
        <jdoc:include type="modules" name="submenu" style="html5" />


            <img src="images/bottomlogo.jpg" alt="">
        </div>



            <p><span class="copyright">COPYRIGHT &copy 2015 DEDA'S COUTURE BY 3 | ALL RIGHTS RESERVED</span> <span class="credits">
        RESPONSIVE WEBSITE DESIGNED BY FREEDOM CREATIVE SOLUTIONS</span><p>
        </footer>

        <script>
            var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
                menuRight = document.getElementById( 'cbp-spmenu-s2' ),
                menuTop = document.getElementById( 'cbp-spmenu-s3' ),
                menuBottom = document.getElementById( 'cbp-spmenu-s4' ),
                showLeft = document.getElementById( 'showLeft' ),
                showRight = document.getElementById( 'showRight' ),
                showTop = document.getElementById( 'showTop' ),
                showBottom = document.getElementById( 'showBottom' ),
                showLeftPush = document.getElementById( 'showLeftPush' ),
                showRightPush = document.getElementById( 'showRightPush' ),
                body = document.body;

        showLeft.onclick = function() {
                classie.toggle( this, 'active' );
                classie.toggle( menuLeft, 'cbp-spmenu-open' );
                disableOther( 'showLeft' );
            };

            function disableOther( button ) {
                if( button !== 'showLeft' ) {
                    classie.toggle( showLeft, 'disabled' );
                }


        </script>


        </body>

    </html>

0 个答案:

没有答案