2015-10-25 50 views
1

我想提出一个XML网页,但我需要它来响应。我不知道我在编码中缺少什么,因为它似乎都在那里。XML响应网页

不过,我需要在一行中的多个元素(除了当大小重新调整到更小)。

我怎么去呢?

<?xml version="1.0" encoding="utf-8"?> 
    <?xml-stylesheet href="CISStyle43.css"?> 


     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
     <style> 
      <body> 
      <MYcourses> 

       <course> 
    <div class="w3-third"> 
        <div class="class"> 
        <row1> 
         <number>THIS ONE 1532 </number> 
         <name> Timing to Clock </name> 
         <credit> To Me </credit> 
        </row1> 
        <row2> 
         <description> Lovely day lovely day </description> 
        </row2> 
        </div> 
    </div> 
       </course> 
      <div class="class"> 
        <row1> 
         <number>THIS ONE 1653 </number> 
         <name> Timing to Clock </name> 
         <credit> To Me </credit> 
        </row1> 
        <row2> 
         <description> Lovely day lovely day </description> 
        </row2> 
        </div> 
    </div> 
       </course> 
<div class="class"> 
        <row1> 
         <number>THIS ONE 11344444 </number> 
         <name> Timing to Clock </name> 
         <credit> To Me </credit> 
        </row1> 
        <row2> 
         <description> Lovely day lovely day </description> 
        </row2> 
        </div> 
    </div> 
       </course> 
<div class="class"> 
        <row1> 
         <number>THIS ONE 142233 </number> 
         <name> Timing to Clock </name> 
         <credit> To Me </credit> 
        </row1> 
        <row2> 
         <description> Lovely day lovely day </description> 
        </row2> 
        </div> 
    </div> 
       </course> 
<div class="class"> 
        <row1> 
         <number>THIS ONE 1314541 </number> 
         <name> Timing to Clock </name> 
         <credit> To Me </credit> 
        </row1> 
        <row2> 
         <description> Lovely day lovely day </description> 
        </row2> 
        </div> 
    </div> 
       </course> 
<div class="class"> 
        <row1> 
         <number>THIS ONE 1432 </number> 
         <name> Timing to Clock </name> 
         <credit> To Me </credit> 
        </row1> 
        <row2> 
         <description> Lovely day lovely day </description> 
        </row2> 
        </div> 
    </div> 
       </course> 
<div class="class"> 
        <row1> 
         <number>THIS ONE 145 </number> 
         <name> Timing to Clock </name> 
         <credit> To Me </credit> 
        </row1> 
        <row2> 
         <description> Lovely day lovely day </description> 
        </row2> 
        </div> 
    </div> 
       </course> 
<div class="class"> 
        <row1> 
         <number>THIS ONE 1222</number> 
         <name> Timing to Clock </name> 
         <credit> To Me </credit> 
        </row1> 
        <row2> 
         <description> Lovely day lovely day </description> 
        </row2> 
        </div> 
    </div> 
       </course> 
      </MYcourses> 

     </body> 
    </style> 
    </link> 

</meta> 


.class { 
    float: left; 
    margin: 5px; 
    padding: 15px; 
    width: 600px; 
    height: 300px; 
    border: 1px solid black; 
} 


body { 
    display: block; 
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 
} 


row1 { 

    display: block; 
    font-weight: bold; 
    border: inset; 
    background-color: gray; 
    color: white; 
} 

row2 { 

    display: block; 
    border: inset; 
    background-color: lightgray; 
    color: black; 
} 

number { 
    color: blue; 
} 
+0

我希望它能够响应(在PC,手机等上工作)并且在一行上有多个元素(课程)当有空间时。 – CodedMe

+0

不,只是XML和CSS ... – CodedMe

+0

我已经学会了HTML,使用了很多。 XML我刚刚开始。 CSS是在它自己的文件中,我只是复制粘贴它在这里放松。 – CodedMe

回答

0

为响应式设计一个很好的例子是使用@media:

例如,用于设备与最大宽度小于1000像素:

@media only screen and (max-width: 1000px) { 
YOUR CSS HERE 
} 

还重要的事情要添加到HTML head:

<meta name="viewport" content="width=device-width, initial-scale=1">