tml

tml

关注
发信
关注(28)粉丝(399)

html - 使用挂毯的Web响应式设计

我想用挂毯构建一个Web响应式网站，我将元数据添加到.tml文件的头部，并使用CSS进行响应式设计。但是，它根本不起作用。我用弹性的youtube视频进行了测试，该视频应与页面的宽度匹配。我在这里发布.tml文件和CSS。

.tml文件：

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd"
      xmlns:p="tapestry:parameter">
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
       <link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>
       <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
       <link href="${context:layout/normalize.css}" rel="stylesheet" type="text/css"/>
       <title>${title}</title>
    </head>
    <body>
        <!-- start header -->
        <div class="header">
            <div class="logo">
                <h1>
                    <t:pagelink page="index">com.example:tutorial1</t:pagelink>
                    &nbsp;
                    version ${appVersion}
                </h1>
            </div>
            <div class="menu">
                <ul>
                    <li t:type="loop" source="pageNames" value="pageName" class="prop:classForPageName">
                        <t:pagelink page="prop:pageName">${pageName}</t:pagelink>
                    </li>
                </ul>
            </div>
            <div class="video-container">
                <iframe width="560" height="315" src="http://www.youtube.com/embed/R800WcsFj0U" frameborder="0"></iframe>
            </div>
        </div>
        <!-- end header -->
        <!-- start page -->
        <div class="page">
            <!-- start sidebar -->
            <div class="sidebar">
                <ul>
                    <li class="search" style="background: none;">
                    </li>
                    <li>
                        <t:alerts/>
                    </li>
                    <li t:type="if" test="sidebar">
                        <h2>${sidebarTitle}</h2>

                        <div class="sidebar-content">
                            <t:delegate to="sidebar"/>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- end sidebar -->
            <!-- start content -->
            <div class="content">
                <div class="post">
                    <div class="title">
                        <h2>${title}</h2>
                    </div>
                    <div class="entry">
                        <t:body/>
                    </div>
                </div>
            </div>
            <!-- end content -->
            <br style="clear: both;"/>
        </div>
        <!-- end page -->
        <!-- start footer -->
        <div class="footer">
            <p class="legal">
                &copy;2012 com.example. All Rights Reserved.
                &nbsp;&nbsp;&bull;&nbsp;&nbsp;
                Design by
                <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>
                &nbsp;&nbsp;&bull;&nbsp;&nbsp;
                Icons by
                <a href="http://famfamfam.com/">FAMFAMFAM</a>.
            </p>
        </div>
        <!-- end footer -->
    </body>
</html>


css文件：

body {
    margin: 0;
    padding: 0;
    background: #FFFFFF url(images/img01.jpg) repeat-x;
    text-align: justify;
    font: 15px Arial, Helvetica, sans-serif;
    color: #626262;
}

form {
    margin: 0;
    padding: 0;
}

input {
    padding: 5px;
    background: #FEFEFE url(images/img13.gif) repeat-x;
    border: 1px solid #626262;
    font: normal 1em Arial, Helvetica, sans-serif;
}

h1, h1 a, h2, h2 a, h3, h3 a {
    margin: 0;
    text-decoration: none;
    font-family: Tahoma, Georgia, "Times New Roman", Times, serif;
    font-weight: normal;
    color: #444444;
}

h1 {
    letter-spacing: -1px;
    font-size: 2.2em;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

h2 {
    letter-spacing: -1px;
    font-size: 2em;
}

h3 {
    font-size: 1em;
}

p, ol, ul {
    margin-bottom: 2em;
    line-height: 200%;
}

blockquote {
    margin: 0 0 0 1.5em;
    padding-left: 1em;
    border-left: 5px solid #DDDDDD;
}

a {
    color: #1692B8;
}

a:hover {
    text-decoration: none;
}

/* Header */

div.header {
    height: 42px;
}

div.logo h1, div.logo p {
    float: left;
    text-transform: lowercase;
}

div.logo h1 {
    padding: 0px 0 0 40px;
}

div.logo p {
    margin: 0;
    padding: 14px 0 0 4px;
    line-height: normal;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
}

div.logo a {
    text-decoration: none;
    color: #D0C7A6;
}

div.menu {
    float: right;
}

div.menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

div.menu li {
    display: block;
    float: left;
    height: 42px;
}

div.menu a {
    display: block;
    padding: 8px 20px 0px 20px;
    text-decoration: none;
    text-align: center;
    text-transform: lowercase;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 14px;
    color: #CEC5A4;
}

div.menu .last {
    margin-right: 20px;
}

div.menu a:hover {
    color: #FFFFFF;
}

div.menu .current_page_item A {
    text-decoration: underline;
}

div.menu .current_page_item a {
}

/* Page */

div.page {
    padding: 40px 40px 0 40px;
}

/* Content */

div.content {
    margin-right: 340px;
}

.post {
    margin-bottom: 10px;
}

.post .title {
    border-bottom: 1px #999999 dashed;
    font-family: Tahoma, Georgia, "Times New Roman", Times, serif;
}

.post .title h2 {
    padding: 30px 30px 0 0px;
    text-transform: lowercase;
    font-weight: normal;
    font-size: 2.2em;
}

.post .title p {
    margin: 0;
    padding: 0 0 10px 0px;
    line-height: normal;
    color: #BABABA;
}

.post .title p a {
    color: #BABABA;
}

.post .entry {
    padding: 20px 0px 20px 0px;
}

.post .links {
    margin: 0;
    padding: 0 30px 30px 0px;
}

.post .links a {
    display: block;
    float: left;
    margin-right: 10px;
    margin-bottom: 5px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    color: #FFFFFF;
}

.post .links a:hover {
}

.post .links .more {
    width: 128px;
    height: 30px;
    background: url(images/img03.jpg) no-repeat left center;
}

.post .links .comments {
    width: 152px;
    height: 30px;
    background: url(images/img04.jpg) no-repeat left center;
}

/* Sidebar */

div.sidebar {
    float: right;
    width: 300px;
    margin-top: 30px;
}

div.sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

div.sidebar li {
    margin-bottom: 10px;
    background: url(images/img10.gif) no-repeat left bottom;
}

div.sidebar li ul {
    padding: 0 30px 40px 30px;
}

div.sidebar li li {
    margin: 0;
    padding-left: 20px;
}

div.sidebar h2 {
    padding: 30px 30px 5px 10px;
    background: url(images/img09.gif) no-repeat;
    text-transform: lowercase;
    font-weight: normal;
    font-size: 1.6em;
    color: #302D26;
}

div.sidebar DIV.sidebar-content {
    width: 265px;
    margin-left: 10px;
    padding-bottom: 1px;
}

div.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

div.video-container iframe,
div.video-container object,
div.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* Search */

li.search {
    padding: 20px 30px 40px 30px;
}

li.search input {
    padding: 0;
    width: 70px;
    height: 29px;
    background: #DFDFDF url(images/img14.gif) repeat-x;
    font-weight: bold;
}

li.search #s {
    padding: 5px;
    width: 150px;
    height: auto;
    background: #FEFEFE url(images/img13.gif) repeat-x;
    border: 1px solid #626262;
    font: normal 1em Arial, Helvetica, sans-serif;
}

li.search br {
    display: none;
}

/* Categories */

div.sidebar div.categories li {
    background: url(images/img12.gif) no-repeat left center;
}

/* Calendar */

div.calendar_wrap {
    padding: 0 30px 40px 30px;
}

div.calendar table {
    width: 100%;
    text-align: center;
}

div.calendar thead {
    background: #F1F1F1;
}

div.calendar tbody td {
    border: 1px solid #F1F1F1;
}

div.calendar #prev {
    text-align: left;
}

div.calendar #next {
    text-align: right;
}

div.calendar tfoot a {
    text-decoration: none;
    font-weight: bold;
}

div.calendar #today {
    background: #FFF3A7;
    border: 1px solid #EB1400;
    font-weight: bold;
    color: #EB1400
}

/* Footer */

div.footer {
    padding: 70px 0 50px 0;
    background: #757575 url(images/img08.gif) repeat-x;
}

div.footer p {
    margin-bottom: 1em;
    text-align: center;
    line-height: normal;
    font-size: .9em;
    color: #BABABA;
}

div.footer a {
    padding: 0 20px;
    text-decoration: none;
    color: #DDDDDD;
}

div.footer a:hover {
  color: #FFFFFF;
}

div.footer .rss {
    background: url(images/img18.gif) no-repeat left center;
}

div.footer .xhtml {
    background: url(images/img19.gif) no-repeat left center;
}

div.footer .css {
    background/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {
    nav {
        height: auto;
    }
    nav ul {
        width: 100%;
        display: block;
        height: auto;
    }
    nav li {
        width: 50%;
        float: left;
        position: relative;
    }
    nav li a {
        border-bottom: 1px solid #576979;
        border-right: 1px solid #576979;
    }
    nav a {
        text-align: left;
        width: 100%;
        text-indent: 25px;
    }
}

/*Styles for screen 515px and lower*/
@media only screen and (max-width : 480px) {
    nav {
        border-bottom: 0;
    }
    nav ul {
        display: none;
        height: auto;
    }
    nav a#pull {
        display: block;
        background-color: #283744;
        width: 100%;
        position: relative;
    }
    nav a#pull:after {
        content:"";
        background: url('nav-icon.png') no-repeat;
        width: 30px;
        height: 30px;
        display: inline-block;
        position: absolute;
        right: 15px;
        top: 10px;
    }
}

div.footer .legal a {
    padding: 0;
}

/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {
    nav {
        height: auto;
    }
    nav ul {
        width: 100%;
        display: block;
        height: auto;
    }
    nav li {
        width: 50%;
        float: left;
        position: relative;
    }
    nav li a {
        border-bottom: 1px solid #576979;
        border-right: 1px solid #576979;
    }
    nav a {
        text-align: left;
        width: 100%;
        text-indent: 25px;
    }
}

/*Styles for screen 515px and lower*/
@media only screen and (max-width : 480px) {
    nav {
        border-bottom: 0;
    }
    nav ul {
        display: none;
        height: auto;
    }
    nav a#pull {
        display: block;
        background-color: #283744;
        width: 100%;
        position: relative;
    }
    nav a#pull:after {
        content:"";
        background: url('nav-icon.png') no-repeat;
        width: 30px;
        height: 30px;
        display: inline-block;
        position: absolute;
        right: 15px;
        top: 10px;
    }
}

/*Smartphone*/
@media only screen and (max-width : 320px) {
    nav li {
        display: block;
        float: none;
        width: 100%;
    }
    nav li a {
        border-bottom: 1px solid #576979;
    }
}


非常感谢你。

最佳答案

您缺少右括号。它位于下面的第二行和第三行之间。

div.footer .css {
    background/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {

10-08 18:15
Powered by LMLPHP ©2024 tml 0.031804