• CSS样式的简单使用


     

    CSS样式的简单使用

    在做项目时,有时做用到一行分几列显示内容,用datalist绑定,可以实现。但有时因我们不是设计师,有的代码不利于我们在itemtemplate中绑定内容.ul +li 再加上CSS控制,就可以实现一行多列的情景,但这时不能在datalist itemtemplate中绑定 li,因为datalist生成的客户端代码是以table进行排版的,不是按html格式排版的,有人知道了,对了,用repeater控件.repeater控件是原样输出在itemtemplatehtml标记的,如下:

            <asp:Repeater ID="Repeater1" runat="server">

            <ItemTemplate>

         <li>

     <img height="46" src="<%#Eval("imgUrl") %>" width="82">

    </li>

         </li>

            </ItemTemplate>

            </asp:Repeater>

    后台绑定代码略了,我想信大家都已经早会用了,不用再重复了。当然这样生成出来的,还不能实现一行多列的效果,还得加CSS样式表,如下(添加到<head></head>中):

           <style type="text/css">

       ul

       {

        width:180px;

      

       }

       li{

        width:90px;

         float:left;

       }

        </style>

    ul的宽度是控制一行显示几个li,如上例ul 的宽度为180px, li宽度为90px,同时要把lifloat设置为left,这样,一行就显示两行了。

    最后,将用例代码放上:

    /Files/kevinlzf/css.rar

  • 相关阅读:
    codeforces 368B
    codeforces 651A
    codeforces 651B
    codeforces 732B
    codeforces 313B
    codeforces 550A
    codeforces 498B
    Linux C/C++基础——内存分区
    Linux C/C++基础——变量作用域
    Linux C/C++基础——Windows远程登录Linux
  • 原文地址:https://www.cnblogs.com/kevinlzf/p/940715.html
Copyright © 2020-2023  润新知