Html 如何使用导航和图像库创建简单的响应性布局？_Html_Css_Responsive Design

Html 如何使用导航和图像库创建简单的响应性布局？

html css responsive-design

Html 如何使用导航和图像库创建简单的响应性布局？,html,css,responsive-design,Html,Css,Responsive Design,我的代码有问题。我的任务是创建一个快速响应的图像库。我的CSS不够好。我搜索其他教程，并将其与代码一起应用。我正在创建一个4栏的产品图片库。画廊旁边是一个简单的导航菜单。所以我有两个专栏。一个是侧边栏，第二个是画廊。这是我的示例代码在我的CSS中，我有这个 .menu_navigation { position: relative; float: left; width: 20%; height: 100%; border-style: solid;

我的代码有问题。我的任务是创建一个快速响应的图像库。我的CSS不够好。我搜索其他教程，并将其与代码一起应用。我正在创建一个4栏的产品图片库。画廊旁边是一个简单的导航菜单。所以我有两个专栏。一个是侧边栏，第二个是画廊。这是我的示例代码

在我的CSS中，我有这个

.menu_navigation {

    position: relative;
    float: left;
    width: 20%;
    height: 100%;
    border-style: solid;
    border-color: red;
    border-width: 2px;
}

.product_selection: {

    position: absolute;
    left: 1px;
    right: 1px;
    top: 1px;
    bottom: 1px;
    padding: 10px;
    color: #000000;

} 

.product_image {
    height: 100;
    width: 100;
}

#wrap {
    overflow: hidden;
    margin: 10px;
}

.box {
    width: 20%;
    padding-left: 10%;
    padding-bottom: 30%;
    color: #FFF;
    position: relative;
    float: left;
}

.innerContent {
    position: absolute;
    left: 1px;
    right: 1px;
    top: 1px;
    bottom: 1px;
    background: #FFF;
    padding: 5px;

}

<div class="page" id="wrap">

<!-- navigation categories -->
<div class="menu_navigation">

    <ul class="menu" style="padding: 10px">
        <li>
            <a href="">DISPLAY FORMAT</a>
            <ul class="sub_category">
                <li><a><input type="checkbox" />USUAL</a></li>
                <li><a><input type="checkbox" />SMALL</a></li>
                <li><a><input type="checkbox" />SHADED</a></li>
                <li><a><input type="checkbox" />SHIRT</a></li>
            </ul>
        </li>
        <li>
            <a href="">COLOR</a>
            <ul class="sub_category">
                <li><a><input type="checkbox" />BLACK</a></li>
                <li><a><input type="checkbox" />WHITE</a></li>
                <li><a><input type="checkbox" />BLUE</a></li>
                <li><a><input type="checkbox" />BROWN</a></li>
                <li><a><input type="checkbox" />GREEN</a></li>
                <li><a><input type="checkbox" />RED</a></li>
             </ul>
        </li>
        <li>
            <a href="">PATTERN</a>
            <ul class="sub_category">
                <li><a><input type="checkbox" />USUAL</a></li>
                <li><a><input type="checkbox" />SMALL</a></li>
                <li><a><input type="checkbox" />SHADED</a></li>
                <li><a><input type="checkbox" />SHIRT</a></li>
            </ul>
        </li>
        <li>
            <a href="">PRICE</a>
            <ul class="sub_category">
                <li><a><input type="checkbox" />$49</a></li>
                <li><a><input type="checkbox" />$59</a></li>
                <li><a><input type="checkbox" />$69</a></li>
                <li><a><input type="checkbox" />$79</a></li>
                <li><a><input type="checkbox" />$89</a></li>
            </ul>
        </li>
        <li>
            <a href="">BRAND</a>
            <ul class="sub_category">
                <li><a><input type="checkbox" />CANCLINI</a></li>
                <li><a><input type="checkbox" />FINEST ORIGINAL FABRICS</a></li>
                <li><a><input type="checkbox" />T. MASON</a></li>
            </ul>
        </li>
        <li>
            <a href="">TYPE OF PATTERN</a>
            <ul class="sub_category">
                <li><a><input type="checkbox" />OXFORD</a></li>
                <li><a><input type="checkbox" />DOBBY</a></li>
                <li><a><input type="checkbox" />DOBBY STRIPE</a></li>
                <li><a><input type="checkbox" />PINPOINT OX</a></li>
                <li><a><input type="checkbox" />OTHERS</a></li>
            </ul>
        </li>
    </ul>

</div>

<!-- /navigation categories -->

<!-- product -->

<div class="product_selection">

    <div class="box">
        <div class="innerContent">
            <img src="./images/website_sample2_04.jpg" class="product_image" />
            <div class="item_label">#</div>
            <div class="item_value">1-KK00</div>
        </div>
    </div>

    <div class="box">
        <div class="innerContent">
            <img src="./images/website_sample2_04.jpg" class="product_image" />
        </div>
    </div>

    <div class="box">
        <div class="innerContent">
            <img src="./images/website_sample2_04.jpg" class="product_image" />
        </div>
    </div>

    <div class="box">
        <div class="innerContent">
            <img src="./images/website_sample2_04.jpg" class="product_image" />
        </div>
    </div>

    <div class="box">
        <div class="innerContent">
            <img src="./images/website_sample2_04.jpg" class="product_image" />
        </div>
    </div>

    <div class="box">
        <div class="innerContent">
            <img src="./images/website_sample2_04.jpg" class="product_image" />
        </div>
    </div>

    <div class="box">
        <div class="innerContent">
            <img src="./images/website_sample2_04.jpg" class="product_image" /> 
        </div>
    </div>

    <div class="box">
        <div class="innerContent">
            <img src="./images/website_sample2_04.jpg" class="product_image" />
        </div>
    </div>

    <div class="box">
        <div class="innerContent">
            <img src="./images/website_sample2_04.jpg" class="product_image" />
        </div>
    </div>

    <div class="box">
        <div class="innerContent">
            <img src="./images/website_sample2_04.jpg" class="product_image" />
        </div>
    </div>

</div>

</div>

在我的HTML中，我有这个

.menu_navigation {

    position: relative;
    float: left;
    width: 20%;
    height: 100%;
    border-style: solid;
    border-color: red;
    border-width: 2px;
}

.product_selection: {

    position: absolute;
    left: 1px;
    right: 1px;
    top: 1px;
    bottom: 1px;
    padding: 10px;
    color: #000000;

} 

.product_image {
    height: 100;
    width: 100;
}

#wrap {
    overflow: hidden;
    margin: 10px;
}

.box {
    width: 20%;
    padding-left: 10%;
    padding-bottom: 30%;
    color: #FFF;
    position: relative;
    float: left;
}

.innerContent {
    position: absolute;
    left: 1px;
    right: 1px;
    top: 1px;
    bottom: 1px;
    background: #FFF;
    padding: 5px;

}

<div class="page" id="wrap">

<!-- navigation categories -->
<div class="menu_navigation">

    <ul class="menu" style="padding: 10px">
        <li>
            <a href="">DISPLAY FORMAT</a>
            <ul class="sub_category">
                <li><a><input type="checkbox" />USUAL</a></li>
                <li><a><input type="checkbox" />SMALL</a></li>
                <li><a><input type="checkbox" />SHADED</a></li>
                <li><a><input type="checkbox" />SHIRT</a></li>
            </ul>
        </li>
        <li>
            <a href="">COLOR</a>
            <ul class="sub_category">
                <li><a><input type="checkbox" />BLACK</a></li>
                <li><a><input type="checkbox" />WHITE</a></li>
                <li><a><input type="checkbox" />BLUE</a></li>
                <li><a><input type="checkbox" />BROWN</a></li>
                <li><a><input type="checkbox" />GREEN</a></li>
                <li><a><input type="checkbox" />RED</a></li>
             </ul>
        </li>
        <li>
            <a href="">PATTERN</a>
            <ul class="sub_category">
                <li><a><input type="checkbox" />USUAL</a></li>
                <li><a><input type="checkbox" />SMALL</a></li>
                <li><a><input type="checkbox" />SHADED</a></li>
                <li><a><input type="checkbox" />SHIRT</a></li>
            </ul>
        </li>
        <li>
            <a href="">PRICE</a>
            <ul class="sub_category">
                <li><a><input type="checkbox" />$49</a></li>
                <li><a><input type="checkbox" />$59</a></li>
                <li><a><input type="checkbox" />$69</a></li>
                <li><a><input type="checkbox" />$79</a></li>
                <li><a><input type="checkbox" />$89</a></li>
            </ul>
        </li>
        <li>
            <a href="">BRAND</a>
            <ul class="sub_category">
                <li><a><input type="checkbox" />CANCLINI</a></li>
                <li><a><input type="checkbox" />FINEST ORIGINAL FABRICS</a></li>
                <li><a><input type="checkbox" />T. MASON</a></li>
            </ul>
        </li>
        <li>
            <a href="">TYPE OF PATTERN</a>
            <ul class="sub_category">
                <li><a><input type="checkbox" />OXFORD</a></li>
                <li><a><input type="checkbox" />DOBBY</a></li>
                <li><a><input type="checkbox" />DOBBY STRIPE</a></li>
                <li><a><input type="checkbox" />PINPOINT OX</a></li>
                <li><a><input type="checkbox" />OTHERS</a></li>
            </ul>
        </li>
    </ul>

</div>

<!-- /navigation categories -->

<!-- product -->

<div class="product_selection">

    <div class="box">
        <div class="innerContent">
            <img src="./images/website_sample2_04.jpg" class="product_image" />
            <div class="item_label">#</div>
            <div class="item_value">1-KK00</div>
        </div>
    </div>

    <div class="box">
        <div class="innerContent">
            <img src="./images/website_sample2_04.jpg" class="product_image" />
        </div>
    </div>

    <div class="box">
        <div class="innerContent">
            <img src="./images/website_sample2_04.jpg" class="product_image" />
        </div>
    </div>

    <div class="box">
        <div class="innerContent">
            <img src="./images/website_sample2_04.jpg" class="product_image" />
        </div>
    </div>

    <div class="box">
        <div class="innerContent">
            <img src="./images/website_sample2_04.jpg" class="product_image" />
        </div>
    </div>

    <div class="box">
        <div class="innerContent">
            <img src="./images/website_sample2_04.jpg" class="product_image" />
        </div>
    </div>

    <div class="box">
        <div class="innerContent">
            <img src="./images/website_sample2_04.jpg" class="product_image" /> 
        </div>
    </div>

    <div class="box">
        <div class="innerContent">
            <img src="./images/website_sample2_04.jpg" class="product_image" />
        </div>
    </div>

    <div class="box">
        <div class="innerContent">
            <img src="./images/website_sample2_04.jpg" class="product_image" />
        </div>
    </div>

    <div class="box">
        <div class="innerContent">
            <img src="./images/website_sample2_04.jpg" class="product_image" />
        </div>
    </div>

</div>

</div>
















这是小提琴

图像库应仅为4列。这就是我希望你们能帮助我的所有人。
@Jerielle，这里你们可以使用CSS3中引入的媒体查询
请浏览以下链接，从中您可以了解在CSS文件中应用CSS的基本想法