yp秋水伊人

导航

非表格展示信息（布局） 

 <title></title>
    <link href="css/css1.css" rel="stylesheet" />  导入css样式表
</head>
<body>
    <form id="form1" runat="server">


        <div id="top"></div>
        <div id="main">

            <asp:Repeater ID="Repeater1" runat="server">
                <ItemTemplate>
                    <div class="item">
                        <%#Eval("UserName") %>>
                         <%#Eval("Password") %>>
                         <%#Eval("NickName") %>>

                    </div>
                </ItemTemplate>
            </asp:Repeater>

            <div class="item"></div>
           
        </div>
        <div id="bottom"></div>


    <script type="text/javascript">  有序展示
        var items = document.getElementsByClassName("item");
        var hei = items[0].offsetHeight;
        document.getElementById("main").style.height = (hei + 10) * Math.ceil(items.length / 4) + 'px';

    </script>

 css样式表中：

* {
    padding:0px;
    margin:0px;
}
#top {
position:relative;
width:100%;
height:70px;
background-color:#ff00dc;
}
#main {
position:relative;
width:80%;
left:10%;

height:auto;


}
.item {
position:relative;
width:23%;
margin:5px 1%;
height:200px;
background-color:red;
float:left;

}
#bottom {

position:relative;
width:100%;
height:70px;
background-color:#b200ff;
}
View Code

 

aspx代码：

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Repeater1.DataSource = new UsersDA().Select();
Repeater1.DataBind();
}
}

posted on 2016-09-22 23:01  yp秋水伊人  阅读(244)  评论(0)    收藏  举报