桌面的移动友好替代品?

时间:2014-07-17 02:50:25

标签: html css mobile

我正在学习HTML / CSS,我想将下面列出的网站(目前用Windows Excel制作)重写为我自定义的内容。问题是使用表格是一种艰难的移动友好。我还没有(很快)进入Javascript但是有一种CSS方式可以解决这个问题吗?

网站我想更改:http://libertyresourcedirectory.com/d/home.html

对于这个网站:http://eglove.github.io/我只使用@media屏幕max-width 1024px和728px来提供自动“平板电脑”和“移动”版本。使用LRD站点执行此操作不会正确分解表。

提前感谢您的任何答案! :)

1 个答案:

答案 0 :(得分:2)

您可以这样做:http://jsfiddle.net/sGJW5/1/ HTML

<div class="container">
    <ul>
       <li>
           Computers
        </li>
        <li>
            <a href="">Editing</a>
        </li>
        <li>
            <a href="">Internet/Privacy </a>
        </li>
    </ul>
</div>
<div class="container">
    <ul>
       <li>
           Computers
        </li>
        <li>
            <a href="">Editing</a>
        </li>
        <li>
            <a href="">Internet/Privacy </a>
        </li>
    </ul>
</div>

CSS

.container
{
    display:inline-block;
}

.container ul
{
    list-style:none;
}

.container ul li:first-child
{
    background-color:red;
}