精华内容
下载资源
问答
  • 下面以常见的左固定右自适应例,因为div块状元素,默认情况下占据一的空间,要想让下面的div跑到右侧,就需要做助css的浮动来实现。首先创建html代码如下: 此处显示 id "side" 的内容 此处显示 id "main...

    一、两列自适应宽度

    下面以常见的左列固定右列自适应为例,因为div为块状元素,默认情况下占据一行的空间,要想让下面的div跑到右侧,就需要做助css的浮动来实现。首先创建html代码如下:

    <div id="side">此处显示 id "side" 的内容</div>
    <div id="main">此处显示 id "main" 的内容</div>

    按照如图所示的创建方法,把两个div都创建出来,或手工写出代码。div创建完成后,开始创建css样式表,代码如下:

    #side { background: #99FF99; height: 300px; width: 120px; float: left; }
    #main { background: #99FFFF; height: 300px; width: 70%; margin-left: 120px; }

    先创建#side的样式,为了便于查看,设置了背景色。注意,side的浮动设置为向左浮动;

    然后创建#main样式,注意这里设置#main的左边距为120px。预览结果如下:

    当我们拖动浏览器窗口变大变小时,#main的宽度也会跟着改变。这里设置margin-left:120px;正好让出#side占去的120px宽度,如果这里设置为122px的话,中间将出现2px的空隙,大家可以试一下。

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <style>
    #side { background: #99FF99; height: 300px; width: 120px; float: left; }
    #main { background: #99FFFF; height: 300px; width: 70%; margin-left: 120px; }
    </style>
    </head>
    <body>
    <div id="side">此处显示 id "side" 的内容</div>
    <div id="main">此处显示 id "main" 的内容</div>
    </body>
    </html>

    二、两列固定宽度

    有了前面的基础,两列固定宽度就容易多了,只需要把#main的宽度由百分比改为固定值,如下图:

    三、两列固定宽度居中

    两列固定宽度居中,需要在两列固定宽度的基础上改进,在学一列固定宽度居中时,我们知道让它居中的方法,所以这里需要在这两个div之外再加一个父div:

    <div id="content">
    <div id="side">此处显示 id "side" 的内容</div>
    <div id="main">此处显示 id "main" 的内容</div>
    </div>

    操作方法:在源代码里选中这两个div的代码后,点击工具栏上插入div按钮,填写id后确定,得到如上的代码

    下面就需要设置#content的样式了,我们知道,#side的宽度为120px,#main宽度为350px,那么#content的宽度应该为这两者之和,然后设置#content居中,那么整体就居中了:

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <style>
    #content { width:470px; margin:0 auto;}
    #side { background: #99FF99; height: 300px; width: 120px; float: left; }
    #main { background: #99FFFF; height: 300px; width: 350px; margin-left: 120px; }
    </style>
    </head>
    <body>
    <div id="content">
      <div id="side">此处显示 id "side" 的内容</div>
      <div id="main">此处显示 id "main" 的内容</div>
    </div>
    </body>
    </html>

    四、xhtml的块级元素(div)和内联元素(span)

    块级元素:就是一个方块,像段落一样,默认占据一行出现;

    内联元素:又叫行内元素,顾名思义,只能放在行内,就像一个单词,不会造成前后换行,起辅助作用。

    一般的块级元素诸如段落<p>、标题<h1><h2>...、列表,<ul><ol><li> 、表格<table>、表单<form>、DIV<div>和BODY<body>等元素。而内联元素则如: 表单元素<input>、超级链接<a>、图像<img>、<span> ........ 块级无素的显著特点是:每个块级元素都是从一个新行开始显示,而且其后的无素也需另起一行进行显示。

    从上图的例子可以看出,块级元素默认占据一行,相当于在它之前和之后各插入了一个换行;而内联元素span没对显示效果造成任何影响,事实也是如此;em只是让字体变成了斜体,也没有单独占据一行。这就是块级元素和内联元素,正因为有了这些元素,才使我们的网页变得丰富多彩。

    如果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排。而有了css以后,我们可以改变这种html的默认布局模式,把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。也就是说,可以用css的display:inline将块级元素改变为内联元素,也可以用display:block将内联元素改变为块元素。

    五、float属性

    回到我们的例子当中,理解了块级元素和内联元素,对理解浮动就容易多了。float是个重点,希望大家都能理解。上例中用float让元素向左浮动,在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素;且要指明一个宽度,否则它会尽可能地窄;另外当可供浮动的空间小于浮动元素时,它会跑到下一行,直到拥有足够放下它的空间。

    想必大家都用过word排过版,当中有个图文混排功能,如下图:

    这个功能非常类似于css中的浮动,下面我们用css来实现这一功能:

    <div id="side"><img src="http://www.aa25.cn/uploadfile/taobao0903/20090212165039036721.gif" width="192" height="142" /></div>
    <div id="main"> 标准之路[www.aa25.cn]提供DIV+CSS教程,DIV+CSS视频教程,web2.0标准,DIV+CSS布局入门教程,网页布局实例,css布局实例,div+css模板,div+css实例解析,网站重构,网页代码,水晶图标,幻灯广告图片.教程适合初学者循序渐进学习!</div>

    创建完以上代码后,在浏览器中预览会显示如下结果:

    下面用css让side浮动,再看看效果

    body { font-size:18px; line-height:200%; }
    #side { float:left;}

    大家看看,是不是和word的效果已经很像相了,但这里的文字和图片右侧贴的很近,怎么办呢?刚才已经说了,当元素浮动过之后,需要指定一个宽度,否则它会尽可能窄。那么把side的宽度设置为大于图片的宽度,它们中间应该就有空隙了。图片的宽度是192px,设置side为202px,中间将会有10px的空隙了。

    body { font-size:18px; line-height:200%; }
    #side { float:left; width:202px;}

    细心的朋友已经发现,上例中#main的div还定义了margin-left:120px;而这里没有定义,但它多出的文字却跑到了图片(#side)的下方,是不是设置margin-left:后,它就不会跑到#side的正文呢?如果你能想到这一点,你的确是太聪明了,事实确实是这样,在css样式表中加上下面一行

    #main { margin-left:202px;}

    这就是如何应用浮动实现两列布局的原理。那么三列呢?

    六、三列自适应宽度

    三列自适应宽度,一般常用的结构是左列和右列固定,中间列根据浏览器宽度自适应。下面在二列自适应宽度基础上修改一下

    <div id="side">此处显示 id "side" 的内容</div>
    <div id="side1">此处显示 id "side1" 的内容</div>
    <div id="main">此处显示 id "main" 的内容</div>

    增加以下css样式:

    #side1 { background: #99FF99; height: 300px; width: 120px; float: right; }

    把原来#main样式的width:70%去掉,然后设置左右外边距各120px,让出左右列的宽度

    #main { background: #99FFFF; height: 300px; margin:0 120px; }

    预览一下效果如下:

    也许预览出来的效果和我的不一样,别急,还有一项设置,默认body是有外边距的,所以这里还得设置body的外边距为0;点击css面板上的新建按钮,然后在新建面板中选择:标签(重定义标签外观),然后选择body,设置body的边界为0即可。

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <style>
    body { margin:0;}
    #side { background: #99FF99; height: 300px; width: 120px; float: left; }
    #side1 { background: #99FF99; height: 300px; width: 120px; float: right; }
    #main { background: #99FFFF; height: 300px; margin:0 120px; }
    </style>
    </head>
    <body>
    <div id="side">此处显示 id "side" 的内容</div>
    <div id="side1">此处显示 id "side1" 的内容</div>
    <div id="main">此处显示 id "main" 的内容</div>
    </body>
    </html>

    七、三列固定宽度

    三列固定宽度可以在三列自适应基础上添加一个父div,并设置这个div的宽度即可,如下,添加一个id为content的父容器。

    在源代码里选中这三个div,然后点击工具栏上的“插入div标签”按钮,这时弹出的窗口插入项会默认为:在选定的内容旁换行,输入id为content,然后给这个div定义个宽度

    三列固定宽度出来了,要想实现三列固定宽度居中就更方便了,只需设置#content {margin:0 auto;}即可

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <style>
    body { margin:0;}
    #content { width:470px; margin:0 auto;}
    #side { background: #99FF99; height: 300px; width: 120px; float: left; }
    #side1 { background: #99FF99; height: 300px; width: 120px; float: right; }
    #main { background: #99FFFF; height: 300px; margin:0 120px; }
    </style>
    </head>
    <body>
    <div id="content">
      <div id="side">此处显示 id "side" 的内容</div>
      <div id="side1">此处显示 id "side1" 的内容</div>
      <div id="main">此处显示 id "main" 的内容</div>
    </div>
    </body>
    </html>

    八、IE6的3像素bug

    3像素bug是IE6的一个著名的bug,当浮动元素与非浮动元素相邻时,这个3像素的Bug就会出现。看下面这个左列固定,右列液态的例子,css代码如下:

    body { margin:0;}
    #side { float: left; background:#99FF99; height: 300px; width: 120px;}
    #main { background: #99FFFF; height: 300px;}

    html代码如下:

    <div id="side">此处显示 id "side" 的内容</div>
    <div id="main">此处显示 id "main" 的内容</div>

    下面看看IE6和IE7中的显示效果:

    从截图中明显看出,IE6会在两个div中间加上3px的空隙,那么要解决这个问题,请在#side上加上_margin-right:-3px;记住,前边加上一下划线,这样这个样式专门针对IE6生效。IE7和FF下还会正常显示。

    body { margin:0;}
    #side { float: left; background:#99FF99; height: 300px; width: 120px; _margin-right:-3px;}
    #main { background: #99FFFF; height: 300px; }

    看看,是不是问题已经解决了。但它不能通过W3C验证。当两列固定宽度时,最好把#main也固定宽度且向右浮动,这样就可以避免IE6的3像素bug了。

    原文链接:http://www.51itstudy.com/doc/div-css/div_css/904.shtml.htm

    展开全文
  • 这一种方式的缺点:应浮动,所以当右面盒子的子元素中样式含有:clear:both:会影响到左侧的盒子的浮动,高度会被撑起来,既不会到一了~~~(所以采用该方式实现两列布局时,注意不要用该属性哦) .box:first-...

    两列布局:(一边定宽,一边自适应的布局)

     

    • 第一种:(左边定宽加浮动,右面margin-left:左面盒子宽度)

    这一种方式的缺点:应为浮动,所以当右面盒子的子元素中样式含有:clear:both:会影响到左侧的盒子的浮动,高度会被撑起来,既不会到一行了~~~(所以采用该方式实现两列布局时,注意不要用该属性哦)

     .box:first-child {
            float: left;
            width: 200px;
            background-color: #00ff40;
          }
    
          .box:nth-child(2) {
            background-color: #ffff80;
            margin-left: 200px;
          }
    
      <div class="box"></div>
        <div class="box"></div>
    • 第二种:(左边定宽加浮动,右面overflow:hidden)

    这一种的话:采用overflow:hidden,当文本内容溢出的话,会被隐藏掉。

     .box:first-child {
            float: left;
            width: 200px;
            background-color: #00ff40;
          }
    
          .box:nth-child(2) {
            background-color: #ffff80;
            /* margin-left: 200px; */
            /* 开启BFC模式,使得内部结构与外部完全隔离 */
            overflow: hidden;
          }
    
    
     <div class="box"></div>
        <div class="box">kkaljflasjd</div>
    • 第三种:table,table-cell,table-layout布局

     .parent {
            display: table;
            table-layout: fixed;
          }
    
          .left,
          .right {
            height: 200px;
            display: table-cell;
          }
    
          .parent .left {
            width: 200px;
            background-color: #00ff40;
          }
    
          .parent .right {
            background-color: #ffff80;
          }
    
    
     <div class="parent">
          <div class="left"></div>
          <div class="right">232432432424</div>
        </div>
    • 第四种:flex布局的方式()
    .parent{
      height:500px;
      border:1px solid #222;
      display:flex;/*设为伸缩容器*/
      flex-flow:row;/*伸缩项目单行排列*/
    }
    .stable{
      width:200px;/*固定宽度*/
      border:1px solid  #ccc;
      margin:20px;
    }
    .change{
      flex:1;/*这里设置为占比1,填充满剩余空间*/
      border:1px solid #ff4400;
      margin:20px;
    }
    
      <div class="parent">  
        <div class="stable">stable 固定宽度200px</div>  
        <div class="change">changeable 可变宽度</div>  
      </div>  

    三列布局:(左边两列定宽,右边的自适应)

     

     

    • 第一种:采用左边float,右边自适应
    .center,
          .left,
          .right {
            height: 300px
          }
    
          .left {
            float: left;
            width: 200px;
            background-color: #00ff40;
    
          }
    
          .center {
            float: left;
            width: 200px;
            background-color: #1637ce;
          }
    
          .right {
            margin-left: 400px;
            background-color: #ffff80;
          }
    
    
    <div class="parent">
          <div class="left"></div>
          <div class="center"></div>
          <div class="right"></div>
        </div>
    •  第二种:采用flex布局实现三列布局
     .parent_1 {
            display: flex;
          }
    
          .center_1,
          .left_1,
          .right_1 {
            height: 300px
          }
    
          .left_1 {
            flex: 0 0 200px;
            width: 200px;
            /* 这里写两个宽度,主要有些时候可能flex写法会无效,即不兼容时, */
            background-color: #00ff40;
    
          }
    
          .center_1 {
            flex: 0 0 200px;
            width: 200px;
            background-color: #1637ce;
            text-align: center;
          }
    
          .right_1 {
            flex: 1;
            background-color: #ffff80;
          }
    
    
     <div class="parent_1">
          <div class="left_1"></div>
          <div class="center_1">flex实现三列布局</div>
          <div class="right_1"></div>
        </div>
    展开全文
  • 文章目录一、栅格系统1、栅格系统展示2、栅格系统参数3、栅格系统的实现(1)基本实现(2)流式布局容器(3)实现响应式布局、排版1、页面主体2、中心内容3、内联文本元素(1)Marked text(2)被删除的文本(3)...

    下面是小凰凰的简介,看下吧!
    💗人生态度:珍惜时间,渴望学习,热爱音乐,把握命运,享受生活
    💗学习技能:网络 -> 云计算运维 -> python全栈( 当前正在学习中)
    💗您的点赞、收藏、关注是对博主创作的最大鼓励,在此谢过!
    有相关技能问题可以写在下方评论区,我们一起学习,一起进步。
    后期会不断更新python全栈学习笔记,秉着质量博文为原则,写好每一篇博文。


    我们强烈建议你对这些实例按照自己的需求进行修改,而不要简单的复制、粘贴。

    一、栅格系统

    1、栅格系统展示

    一般常用的栅格系统为12列和16列!下面展示的皆是12列栅格系统!
    先看下栅格系统成品:
    在这里插入图片描述
    三个格子,一个格子四列!我们再拿bootstrap官网看下网页缩小的变化:

    在这里插入图片描述它可以根据窗口大小调整每一行的格子数!这就是栅格系统!

    2、栅格系统参数

    在这里插入图片描述

    3、栅格系统的实现

    (1)基本实现

    记得导入bootstrap、jq!

    <div class="container"> //就是给左右加个padding让子div往中间收缩一下
    	<div class="row"> // 表示此div里的每个元素在一个行里
    	    <div class="col-lg-3"> // 在屏幕大于1200的时候,此格子占三列
    	        点赞、评论、关注三连,感谢各位小伙伴的支持,博文质量我会始终如一
    	    </div>
    	    <div class="col-lg-3">
    	        点赞、评论、关注三连,感谢各位小伙伴的支持,博文质量我会始终如一
    	    </div>
    	    <div class="col-lg-3">
    	        点赞、评论、关注三连,感谢各位小伙伴的支持,博文质量我会始终如一
    	    </div>
    	    <div class="col-lg-3">
    	        点赞、评论、关注三连,感谢各位小伙伴的支持,博文质量我会始终如一
    	    </div>
    	</div>
    </div>
    

    效果:
    在这里插入图片描述

    (2)流式布局容器

    将最外面的布局元素 .container 修改为 .container-fluid,就可以将固定宽度的栅格布局转换为 100% 宽度的布局。

    <div class="container-fluid">
      <div class="row">
        ...
      </div>
    </div>
    

    在这里插入图片描述

    (3)实现响应式布局

    在看下面的时候顺便注意一下,最外层div的class的值,并看下流式布局和容器布局的区别!
    在这里插入图片描述我们可以看到网页窗口一变小就会造成恢复原样!下面代码可以解决:

    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                点赞、评论、关注三连,感谢各位小伙伴的支持,博文质量我会始终如一
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                点赞、评论、关注三连,感谢各位小伙伴的支持,博文质量我会始终如一
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                点赞、评论、关注三连,感谢各位小伙伴的支持,博文质量我会始终如一
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                点赞、评论、关注三连,感谢各位小伙伴的支持,博文质量我会始终如一
            </div>
        </div>
    </div>
    

    效果如下:
    在这里插入图片描述但是我们这个内容外面木有小框框,不好看为此我为代码加上thumbnail:

    <div class="container">
        <div class="row">
        // 注意:不要再下面这个div的class里面加thumbnail,这样框框之间就没有30px间距
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <div class="thumbnail">
                    点赞、评论、关注三连,感谢各位小伙伴的支持,博文质量我会始终如一
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <div class="thumbnail">
                    点赞、评论、关注三连,感谢各位小伙伴的支持,博文质量我会始终如一
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <div class="thumbnail">
                    点赞、评论、关注三连,感谢各位小伙伴的支持,博文质量我会始终如一
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <div class="thumbnail">
                    点赞、评论、关注三连,感谢各位小伙伴的支持,博文质量我会始终如一
                </div>
            </div>
        </div>
    </div>
    

    效果如下:
    在这里插入图片描述

    二、排版

    1、页面主体

    Bootstrap 将全局 font-size 设置为 14px,line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外,<p> (段落)元素还被设置了等于 1/2 行高(即 10px)的底部外边距(margin)。

    2、中心内容

    通过添加 .lead 类可以让段落突出显示。

    <p class="lead">点赞、评论、关注三连,感谢各位小伙伴的支持,博文质量我会始终如一</p>
    

    在这里插入图片描述

    3、内联文本元素

    (1)Marked text
    <mark>点赞、评论、关注三连</mark>,感谢各位小伙伴的支持,博文质量我会始终如一
    

    在这里插入图片描述

    (2)被删除的文本

    对于被删除的文本使用 <del> 标签。

    <del>点赞、评论、关注三连,感谢各位小伙伴的支持,博文质量我会始终如一</del>
    

    在这里插入图片描述

    (3)带下划线的文本

    为文本添加下划线,使用 <u> 标签。

    <u>点赞、评论、关注三连</u>,感谢各位小伙伴的支持,博文质量我会始终如一
    

    在这里插入图片描述

    (4)小号文本

    对于不需要强调的inline或block类型的文本,使用 <small> 标签包裹,其内的文本将被设置为父容器字体大小的 85%

    点赞、评论、关注三连,<small>感谢各位小伙伴的支持,博文质量我会始终如一</small>
    

    在这里插入图片描述

    (5)加粗
    <strong>点赞、评论、关注三连</strong>,感谢各位小伙伴的支持,博文质量我会始终如一
    

    在这里插入图片描述

    (6)斜体
    <em>点赞、评论、关注三连</em>,感谢各位小伙伴的支持,博文质量我会始终如一
    

    在这里插入图片描述(7)文本对齐

    <p class="text-left">Left aligned text.</p>
    <p class="text-center">Center aligned text.</p>
    <p class="text-right">Right aligned text.</p>
    

    在这里插入图片描述

    (8)引用
    <div class="thumbnail">
        <blockquote>点赞、评论、关注三连</blockquote>
        感谢各位小伙伴的支持,博文质量我会始终如一
    </div>
    

    在这里插入图片描述

    三、表格

    1、基本实例

    为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补(padding)和 水平方向的分隔线

    <table class="table">
        <tr>
            <th>姓名</th>  <!--th表示thead-->
            <th>用户名</th>
            <th>密码</th>
        </tr>
        <tr>
            <td>吴晋丞</td>
            <td>时间定义青春</td>
            <td>88888888</td>
        </tr>
        <tr>
            <td>华晨宇</td>
            <td>歌星</td>
            <td>666666</td>
        </tr>
    </table>
    

    在这里插入图片描述

    2、条纹状表格

    通过 .table-striped 类可以给 之内的每一行增加斑马条纹样式。

    <table class="table table-striped">
      ...
    </table>
    

    在这里插入图片描述

    3、带边框的表格

    添加 .table-bordered 类为表格和其中的每个单元格增加边框。

    <table class="table table-striped table-bordered">
      ...
    </table>
    

    在这里插入图片描述

    4、鼠标悬停

    通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。

    <table class="table table-hover">
      ...
    </table>
    

    这个一般不与.table-striped一起用,为什么?看下效果就晓得了:
    在这里插入图片描述

    5、紧缩表格

    通过添加 .table-condensed 类可以让表格更加紧凑,单元格中的内补(padding)均会减半。

    <table class="table table-condensed">
      ...
    </table>
    

    在这里插入图片描述

    6、表格颜色类

    (1)为行设置颜色
    <tr class="active">...</tr>
    <tr class="success">...</tr>
    <tr class="info">...</tr>
    <tr class="warning">...</tr>
    <tr class="danger">...</tr>
    

    在这里插入图片描述

    (2)为单元格设置颜色
    <tr>
      <td class="active">...</td>
      <td class="success">...</td>
      <td class="warning">...</td>
      <td class="danger">...</td>
      <td class="info">...</td>
    </tr>
    

    注意此处图片和代码并不一致!看看效果即可!
    在这里插入图片描述

    展开全文
  • BootStrap中常用样式

    2018-08-09 08:10:00
    网格选项 row: col--:(第一个可以xs[超小]/sm[小型]/md[中型]/lg[大型];...col---:排序(第一个同上,第个可以push[向右]/pull[向左],第个范围是1~11【数】) 排版 small:内联...

    网格选项
    row:行
    col--:列(第一个可以为xs[超小]/sm[小型]/md[中型]/lg[大型];第二个必须为12以内的【列数】)
    col--offset-:列偏移(第一个同上,第二个范围为1~11,表示把该列的左外边距(margin-left)增加列)
    col-
    --:列排序(第一个同上,第二个可以为push[向右]/pull[向左],第三个范围是1~11【列数】)
    排版
    small:内联子标题
    lead:引导主体副本
    text-
    :文本样式(可以为left[左对齐]/center[居中对齐]/right[右对齐]/muted[减弱文本]
    /primary/success/info/warning/danger
    /justify[自动换行]/nowrap[不换行]
    /lowercase[小写]/uppercase[大写]/capitalize[首字母大写]

    list-inline:列表置于同一行
    表格
    table:基本样式,只有横向分割线
    table-
    :表格样式(*可以为triped[添加条纹]/bordered[添加边框]/hover[启用悬停]/condensed[更加紧凑])
    tr/th/td:由active/success/info/warning/danger来改变背景颜色
    table-responsive:将任意table放在table-responsive内,实现响应式表格

    表单
    创建基本表单(垂直表单)的步骤
    向父

    元素添加role="form";
    把标签和控件放在一个带有class .form-group的
    中,这是获得最佳间距所必须的;
    向所有的文本元素、和添加.form-control.

    创建水平表单的步骤
    向父

    元素添加class .form-horizontal;
    把标签和控件放在一个带有class .form-group的
    中;
    向标签添加class .control-label
    常用的表单控件主要有:
    input:声明type有text

    按钮

    图片

    辅助类

    字体图标

    下拉菜单

    按钮组

    输入框组

    导航元素

    导航栏

    面包屑导航

    分页

    标签

    徽章

    超大屏幕

    页面标题

    缩略图

    警告

    进度条

    多媒体对象

    列表组

    面板

    posted @ 2018-08-09 08:10 南华秋水 阅读(...) 评论(...) 编辑 收藏

    转载于:https://www.cnblogs.com/nanhuaqiushui/p/9446718.html

    展开全文
  • 文章目录一.项目概述.WXML文件编写.WXSS文件编写四.JS页面设计四总结 一.项目概述 功能: ...计算器分为五,最外面纵向布局,里面横向布局。布局通过样式表操作, 代码如下: <...
  • 集值功能大大增强了用户的数据交互体验和视图样式,它可以用于筛选器、标记、作为维度加入或者、在计算字段中使用; 集值赋予用户决定哪些数值在集中的能力,这有助于提高分析的灵活性和交互体验; 集值可以让...
  • RGB通道彩色图存放形式不同,每并列存放通道数量的子列(注意通道数量反转为了BGR): 通常情况下Mat的每一是连续存放的,也就是在内存上图像的所有数据存放成一,在用指针访问时可以提供很大方便。可以用 ...
  • (TODO:为行较大的数组实现C样式的版本)。 还有许多用于并行运行插值方案的辅助函数,并且使用的线程数由NUM_THREADS宏确定。 要使用不同数量的线程,请在splinterp.h编辑此值并重新编译,或者可以使用g ++的
  • table 开启显示统计,设置autoCounttrue,则该可以自动统计,默认false。 fixed fixed设置true,该滚动到最左边时,可以自动固定住。 基本方法介绍 Column类常用方法 1. 是否自动排序 ...
  • CSS布局:三行两列、两行三 2.定义 CSS指层叠样式表(Cascading Style Sheets) 1.CSS的重要作用是在不同的浏览器中显示相同的样式 2.解决html内容与表现分离的问题 第2章 CSS的声明、内外联样式以及CSS的优先级别...
  • 首先我们看一个需求 在11 * 11 的五子棋的棋盘中 我们使用0代表十字交叉...稀疏数组有一定会有三行是随有效数据的个数而变化的,先看一个稀疏数组的大概样子 维数组转换稀疏数组的思路 第一部 需要遍历稀疏数
  • 今天练习的表格目标是这样的 元数据不变哦【原数据1】 我们开始操作 ~ ↓↓↓↓↓ ...这么多“金额”,我们需要修改【值汇总依据】,依次个单元格设置平均值 - 最大值 - 最小值 高亮标红,负...
  • CSS网站布局实录 (第版)PDF版

    热门讨论 2012-12-10 18:46:01
    2.8.1 样式表 2.8.2 内部样式表 2.8.3 外部样式表 2.9 样式优先权问题 2.9.1 写法优先权 2.9.2 选择符优先权 2.9.3 样式继承 2.9.4 !important语法 2.10 代码注释 2.11 CSS开发环境与调试环境 第3章 CSS网页布局...
  • 如我要给第三行排序,tempCellIndex属性即3 3.获取与设置状态(参看tableSort.class.js中的注释) 4.改变头的css样式 5.初始化开始排序 (第一部和第部不包含在用户接口之内,创建对象时的操作) (其中第...
  • Cytoscape作图,边和节点的颜色设置

    万次阅读 2018-04-21 14:08:06
    在同一中表示第一列和第二列相互作用,而且权值列的数据,如下图,第一列选source 第二列选target,第列选edge attribute。step2:导入进来后自动画出图如下step3:将上图进行美化style选项卡里选择自己...
  • 网页布局代码.pptx

    2020-03-14 01:02:41
    任务思路任务一一行三布局布局 要求:根据设计稿完成网页布局要设计三个层一思路 此网页为三行结构先设计HTML部分再根据各层次高度设计样式二HTML部分<div id="main> <div id="top> </div> <div id="middle> ...
  • 希望的效果【第一列 第二列列】,但实际效果却分成了3,变成了下面的样子 第一列 第二列列 虽然知道struts标签有内置样式,但无论怎么设置css,怎么加DIV,都没有出现我想要的效果 后来查看...
  • 步:插入一个三行的表格,并创建CSS样式表“menucss"。第三步:将样式表应用于第一行中。第四步:创建样式“submenucss".第五步:将鼠标移动第行,插入一个三行的表格。第六步:选中第一个表格中...
  •  实例011 项目添加第方控件 12 实例012 项目添加已有窗体 13 第2章 C#语言基础应用 15 2.1 代码的注释 16  实例013 对单行代码进行注释 16  实例014 快速对多行代码进行注释 17  实例015 使用...
  • 第3章 CSS样式与JavaScript脚本应用 27 3.1 控件样式 28 实例017 普通控件样式 28 实例018 数据控件样式 29 3.2 链接控件样式 30 实例019 鼠标单击链接样式 30 实例020 鼠标指针滑过链接样式 31 3.3 ...
  • *,300,200,一行三列,第列宽300,第列宽200,第一列宽:总宽-300-200 *[className1],*:第一添加样式className1,包括标签和内容,当内容在默认input中时,颜色不受className1影响 labelAlign:标签是否居中...
  • col

    2016-11-30 21:42:50
    一、实例 ISBN Title Price ...、浏览器支持 ...、定义和用法 ...表格中一个或者多个定义属性值 ...如需对全部应用样式,标签很有用,这样就不需要对各个单元和各重复应用样式了。 你只能在table或者c
  • MIS金质打印王

    2008-04-16 14:38:48
    以在开发中参照 可以指定打印边框,分单边框,加粗单边框、双边框、加粗双边框等等 分页处理 背景颜色 打印对象提供: 主标题 副标题 页顶(简单的一行三列打印样式,第一居左,第三列居右,中间居中) 网格头(任意...
  • 水平滑动时,表格第一列和第二列固定不动; 铅直滑动时,表格第一固定不动; 一、设计思路 (1)样式绘制:将表格划分四块; 左下两列,绘制成一个表格,只可上下滑动; 左上两列,绘制成固定表格,不可滑动;...
  • 随意选择 打印有效区域矩阵,以在开发中参照 可以指定打印边框,分单边框,加粗单边框、双边框、加粗双边框等等 分页处理 背景颜色打印对象提供: 主标题 副标题 页顶(简单的一行三列打印样式,第一居左,第三列居右...
  • vb.net DataGridView控件用法合集

    千次下载 热门讨论 2008-10-26 20:09:14
    4. DataGridView判断当前选中是否新追加的 5. DataGridView删除可否设定 6. DataGridView行列不表示和删除 DataGridView控件用法合集() 7. DataGridView行列宽度高度设置不能编辑 8. DataGridView...
  • C#打印源码

    2007-10-20 10:39:00
    MIS金质打印王 版本: V1.0源码版 概述: 本程序通用打印程序,单据、会计凭证、发票清单、报表、任意复杂表格、合并表格如 <br>...页底(简单的一行三列打印样式,第一居左,第三列居右,中间 <br>居中)
  • AspxGridView使用手记

    2013-09-18 08:28:58
    十四、 样式 59 1.GridViewStyles重要属性 59 2. GridViewAlternatingRowStyle重要属性 59 十五、 AspxGridView服务器端重要属性 60 十六、 AspxGridView服务器端重要方法 60 十七、 ...

空空如也

空空如也

1 2 3 4 5 ... 13
收藏数 244
精华内容 97
关键字:

样式为三行二列