zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    世界排名第二的web前端框架bulma与Bootstrap框架的选择
    Bootstrap5中文手册翻译完毕
    RabbitMQ 学习一 了解+点对点模式
    仿京东搜索
    ES集成SpringBoot
    ElasticSearch
    权限管理整合springsecurity代码执行过程
    权限管理
    Gateway网关
    canal数据同步 客户端代码实现
  • 原文地址:https://www.cnblogs.com/kevinlzf/p/940715.html
Copyright © 2011-2022 走看看