响应式列表视图产品列表

时间:2018-09-23 22:03:16

标签: listview responsive-design responsive

我无法对产品列表进行响应mylistview,请您帮我,您可以在下面找到我的代码,如果可以帮助我,我将非常高兴.............. ................................................... ................................................... ................................................... ................................................... ................................................... .......................

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Products.aspx.cs" Inherits="user_Products" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">

<style type="text/css">

    .table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
}
.img {
    width: 100%;
    height: auto;
}
.th, .td {
    text-align: left;
    padding: 8px;
}

.tr:nth-child(even){background-color: #f2f2f2}
.column {
    box-sizing: border-box;
}

/* Create three equal columns that floats next to each other */
.column {
    float: left;
    width: 33.33%;
    padding: 10px;
    height: 300px; 
}
/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}
.footer 
{

 position:fixed;
  text-align: center;
   bottom: 0; 
  left: 0;
  right: 0;

}



/* Mobile Styles */
@media only screen and (max-width: 200px) {
    .column {
        width: 100%;
    }
     body {
    background-color: #F09A9D; /* Red */
  }
    <%--  span {
            width: 100%;
            }
            .img 
            {
                width: 100%;
                }--%>
 }

/* Tablet Styles */
@media only screen and (min-width: 401px) and (max-width: 960px) {
   .column {
        width: 100%;
    }
    .body {
       background-color: #F5CF8E; /* Yellow */
           }
      .span {
            width: 100%;
            }


    }


/* Desktop Styles */
@media only screen and (min-width: 961px) {
   .column {
        width: 100%;
    }
     .body {
    background-color: #B2D6FF; /* Blue */
  }
      .footer {
        width: 100%;
    }
                .span {
            width: 100%;
            }

    }
</style>
 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 </head>

<body>
    <form id="form1" runat="server">
<%--    <div >
       <b>Display Columns: </b> 
        <asp:DropDownList ID="ColumnCount" runat="server" AutoPostBack="True" onselectedindexchanged="ColumnCount_SelectedIndexChanged">

            <asp:ListItem>1</asp:ListItem>
            <asp:ListItem>2</asp:ListItem>
            <asp:ListItem Selected="True">3</asp:ListItem>
            <asp:ListItem>4</asp:ListItem>
            <asp:ListItem>5</asp:ListItem>
        </asp:DropDownList>
    &nbsp;&nbsp;&nbsp;&nbsp;
        <asp:Button ID="btnShoppingChart" runat="server"  onclick="btnShoppingChart_Click" Text="Sepet" />
    </div>--%>
    <div align="center" class="row">
     <asp:ListView ID="ProductDataList2" runat="server" class="column" GroupItemCount="3" onitemcommand="ProductDataList2_ItemCommand"> 
        <LayoutTemplate>
            <table>
                <tr>
                    <td>
                        <table border="0" cellpadding="5">
                            <asp:PlaceHolder runat="server" ID="groupPlaceHolder"></asp:PlaceHolder>
                        </table>
                    </td>
                </tr>
            </table>
        </LayoutTemplate>

        <GroupTemplate>
            <tr>
                <asp:PlaceHolder runat="server" ID="itemPlaceHolder"></asp:PlaceHolder>
            </tr>
        </GroupTemplate>

        <ItemTemplate>
        <div id="column" class="column">
            <td>

                <h5><%# Eval("name") %></h5>

                <%--Price: <%#Eval("UnitPrice", "{0:c}")%><br />--%> 
                Category: <%# Eval("productdetail") %><br />

        <asp:Image ID="Image1" runat="server" style="height:220px;width:200px; border-width:0px;" ImageUrl='<%# Eval("destination", "{0}") %>' /><br /><br />
         <asp:TextBox ID="txtQuantity" runat="server" AutoPostBack="False" Width="120" Text="0"></asp:TextBox>
          <%--<asp:Button ID="btnAddToList" AutoPostBack="True" runat="server" Text="Sepete Ekle"  CommandName="AddToList"  />--%>

            </td>
            </div>

        </ItemTemplate>
    </asp:ListView>
        <%# Eval("name") %>

   </form> 
</body>

0 个答案:

没有答案