精华内容
下载资源
问答
  • 在设计响应式布局时,我们经常会根据屏幕的大小来调整样式已适应不同窗口大小的所带来的不同视觉效果,比如说我们常见的导航栏设计,当我们在点击对应的标题时让其背景色切换成深绿色,这样在视觉上更用户能第一眼就...

        在设计响应式布局时,我们经常会根据屏幕的大小来调整样式已适应不同窗口大小的所带来的不同视觉效果,比如说我们常见的导航栏设计,当我们在点击对应的标题时让其背景色切换成深绿色,这样在视觉上更用户能第一眼就能知道自己正点击在哪个选项上了,而在样式上,通常我们会在PC端时显示到顶部位置,而换到移动端时则显示到左边来,如下图所示:

    处理当前的点击样式 ,最简单的方法就是直接使用:hover事件来实现该方法,我们给li标签添加:hover样式并给其添加背景色,这样当我们将鼠标点击到对应的标题上时就可以实现背景选中效果。

    #HTML
    <div class="menu">
        <i class="fa fa-align-justify" @click="open" ></i>
        <ul v-if="flag">
          <li v-for="(menu,index) in menus" :key="index" >{{menu}}</li>
        </ul>
    </div>
    #css
    .menu ul{
      overflow: hidden;
      white-space: nowrap;
    }
    .menu ul li {
      display: inline-block;
      font-size: 1.1rem;
      padding: 0 20px;
      color: #fff;
      line-height: 50px;
      cursor: pointer;
    }
    .menu ul li:hover{
      background-color: #045f56;
    } 

    使用Chrome浏览器模拟移动端屏幕测试点击效果,通过response菜单我们可以随意的变化浏览窗口大小来模拟不同屏幕大小进行测试,这里我们可以可以看到同样可以实现该点击效果,所以:hover实现起来还是相当的简单方便快捷。

    修改下我们的配置,打开package.json文件,将本机IP地址添加到serve后面(这里我的IP是192.168.31.224):"serve": "vue-cli-service serve--192.168.31.224",然后用手机链接WIFI保证在同一网络,访问192.168.31.224:8080即可查看当前项目,这里测试了好几遍效果一样可行(网上有人说移动端没有:hover事件,该方法无效,这里我验证是可行的哦)。

     如果你还是不放心,那么就用Vue提供的@click事件来实现吧,虽然相对麻烦点,但是一样可以实现相同的效果,这里我们需要设定一个active样式,然后通过click点击事件来切换当前选项的active样式,定义一个空的id,点击时把index附上,将index赋值给id,这样就可以触发绑定样式了。

    #HTML
    <div class="menu">
      <i class="fa fa-align-justify" @click="open" ></i>
      <ul v-if="flag">
        <li v-for="(menu,index) in menus" :key="index" 
        @click="chiose(index)" :class="{'active':id===index}">{{menu}}</li>
      </ul>
    </div>
    #CSS
    .active{
      background-color: #045f56;
    } 
    #SCRIPT
     chiose(index){
        this.id=index   
    },

    问题来了:这里hover() 方法是当鼠标指针悬停在被选元素上时执行样式修改(:hover 选择器可用于所有元素),也就是说鼠标放上去就应该改变了样式才对,这里为啥是点击之后才生效呢(按理说移动设备是没有鼠标的,只能通过手指和网页直接接触,自然也就不存在悬浮事件了,那么现在是什么状况)。

     

    经过反复的测试,原来hover() 方法在PC端显示时的确是鼠标悬停事件,只要鼠标移到哪里状态就切换到哪里,而当我们切换到移动端时,移动设备是没有鼠标事件,此时的hover() 方法则为点击事件,手指点击相应的选项状态随着切换,这个不错,下面是手机端的现实效果。

    展开全文
  • CSS响应式布局问题

    2021-02-25 21:58:33
    明明已经设置了响应式布局,调整浏览器页面没有反应。 <code><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css&...
  • CSS响应式布局实例

    2017-04-22 19:47:17
    body{ margin:0 auto; min-width:1366px; } a{ text-decoration:none; color:black; } a:hover{ color:orange; } 
    <style type="text/css">
            body{
                margin:0 auto;
                min-width:1366px;
            }
            a{
                text-decoration:none;
                color:black;
            }
            a:hover{
                color:orange;
            }
            a:visited{
                color:black;
            }
            #main{
                 background-image:url(img/bg.jpg);
                 background-position:contain;
                 background-size:100%100%;
                 height:826px;
            }

            @media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */
                #main{
                     background-image:url(img/bg1.jpg);
                     height:1080px;
                }
                #iptDown{
                    position:relative;
                    left:180px;
                    top:950px;
                    width:50%;
                }
            }
    @media only screen and (max-device-width :480px){
        #main{
                 background-image:url(img/bg1.jpg);
                 height:1880px;
            }
            #iptDown{
                    position:relative;
                    left:180px;
                    top:950px;
                    width:50%;
                }
        }

    /*6*/
    @media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
        #main{
                background-image:url(img/bg1.jpg);
                 height:1880px;
            }
            #iptDown{
                    position:relative;
                    left:180px;
                    top:950px;
                    width:50%;
                }
        }

    /*6+*/
    @media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){
        #main{
                 background-image:url(img/bg1.jpg);
                 height:1880px;
            }
            #iptDown{
                    position:relative;
                    left:180px;
                    top:950px;
                    width:50%;
                }
        }

    /*魅族*/
    @media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 2.5){
        #main{
                 background-image:url(img/bg1.jpg);
                 height:1880px;
            }
            #iptDown{
                    position:relative;
                    left:180px;
                    top:950px;
                    width:50%;
                }
        }

    /*mate7*/
    @media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 3){
        #main{
                 background-image:url(img/bg1.jpg);
                 height:1880px;
            }
            #iptDown{
                    position:relative;
                    left:180px;
                    top:950px;
                    width:50%;
                }
        }

    /*4 4s*/
    @media only screen and (device-height :480px) and (-webkit-device-pixel-ratio:2){
        #main{
                 background-image:url(img/bg1.jpg);
                 height:1880px;
            }
            #iptDown{
                    position:relative;
                    left:180px;
                    top:950px;
                    width:50%;
                }
        }
            #topnav{
                float:right;
                margin-right:146px;
                margin-top:10px;
            }
            li{
                display:inline;
                border-right:1px solid #736e6e;
                margin-left:8px;
                font-size:22px;
            }
        </style>

    联系我:renhanlinbsl@163.com

    2016-7-25

    14:05

    展开全文
  • 结合媒体查询判断页面宽度设置区块的响应式展示。并添加了一些hover属性的动画过度效果。熟悉transform: scale(1.1); /*鼠标经过放大1.1倍*/,与transition: all 1s ease 0s; /* 所有动画效果执行时间为1秒,默认...

    主要使用CSS3的box-sizing:border-box;属性来设置按照百分比布局的样式。结合媒体查询判断页面宽度设置区块的响应式展示。并添加了一些hover属性的动画过度效果。熟悉transform: scale(1.1); /*鼠标经过放大1.1倍*/,与transition: all 1s ease 0s;  /* 所有动画效果执行时间为1秒,默认动画曲线,从0秒开始执行*/。变形动画和过度执行的细节设置。想要执行改变后使用动画过度效果要懂得transition: all 1s ease 0s; 属性的使用。添加该属性才会产生动画效果。

    页面结构:

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>响应式图片展示</title>
        <link rel="stylesheet" href="style/res.css">
    </head>
    <body>
        <h2>响应式图片相册</h2>
        <div class="responsive">
            <div class="img">
                <a href="#"><img src="images/photos/a.jpg" alt=""></a>
                <div class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, maxime, eaque, quas ullam ea optio alias aliquid dolorem vero eum totam dignissimos est. Asperiores, quia eligendi earum possimus modi consequuntur.</div>
            </div>
        </div>
            <div class="responsive">
            <div class="img">
                <a href="#"><img src="images/photos/a.jpg" alt=""></a>
                <div class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, maxime, eaque, quas ullam ea optio alias aliquid dolorem vero eum totam dignissimos est. Asperiores, quia eligendi earum possimus modi consequuntur.</div>
            </div>
        </div>
            <div class="responsive">
            <div class="img">
                <a href="#"><img src="images/photos/a.jpg" alt=""></a>
                <div class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, maxime, eaque, quas ullam ea optio alias aliquid dolorem vero eum totam dignissimos est. Asperiores, quia eligendi earum possimus modi consequuntur.</div>
            </div>
        </div>
            <div class="responsive">
            <div class="img">
                <a href="#"><img src="images/photos/a.jpg" alt=""></a>
                <div class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, maxime, eaque, quas ullam ea optio alias aliquid dolorem vero eum totam dignissimos est. Asperiores, quia eligendi earum possimus modi consequuntur.</div>
            </div>
        </div>
        <div class="clearfix"></div>
    </body>
    </html>


    CSS样式:

    body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
    	padding: 0;
    	margin: 0;
    } /*清除默认边距*/
    
    .img{
      border:1px solid #ccc;
    /*    建立单个区域外边框*/
        transition:border 1s;
    }
    .img:hover{
      border:1px solid #777;
    /*    建立鼠标经过边框变色*/
    }
    .img img{
      width:100%;
        height:auto;
    /*    控制图片自适应宽度和高度*/
    }
    .desc{
      padding:15px;
        text-align:center;
    /*    文字部分添加内边距文字居中*/
        background:#fff;
    }
    *{
      box-sizing:border-box;
    /*    定义所有元素适应区域内容*/
    }
    .responsive{
      padding:0 6px;
        float:left;
        width:24.99999%;
        transition: all 1s ease 0s;/* 所有动画效果执行时间为1秒,默认动画曲线,从0秒开始执行*/
        -webkit-transform: all 1s ease 0s;/* 所有动画效果执行时间为1秒,默认动画曲线,从0秒开始执行*/
    /*
        让区块元素分离开间距并设置横排排列,宽度每个设置成24.99999%,自适应排列。
        添加transition属性方便鼠标经过后返回的动画也能执行过度效果
    */
       
        }
    
    .responsive:hover{
        transform: scale(1.1); /*鼠标经过放大1.1倍*/
       transition: all 1s ease 0s;  /* 所有动画效果执行时间为1秒,默认动画曲线,从0秒开始执行*/
        -webkit-transform: scale(1.1);
        -webkit-transform: all 1s ease 0s;
        
    }
    
    @media only screen and (max-width:700px){
      .responsive{
          width:49.99999%;
            margin:6px 0;
        }
    /*    媒体查询,如果屏幕宽度小于700px则改变区块的宽度为49.99999%,变成两列显示。*/
    }
    @media only screen and (max-width:500px){
      .responsive{
          width:100%;
        }
    /*    屏幕宽度小于500px则改变区块responsive的宽度为100%,全屏幕宽度显示为一列。*/
    }
    .clearfix:after{
      content:"";
        display:table;
        clear:both;
    /*    如果外层div没有清除浮动,则内部元素添加float属性之后需要在内部循环的最后面添加一个清除内部浮动,否则无法撑开外部的div层。*/
    }
    


    效果:





    展开全文
  • 今天给大家带来的是:印刷行业HTML5响应式织梦企业整站模板(修正版v1.0) 印刷行业HTML5响应式织梦模板,带全站测试数据。理论上来说他可以做任何性质的;看您的需求和改动吧! 网站目前完成99%,因为很多地方要因您...
  • Bootstrap CSS布局之表格

    2020-11-26 15:32:52
    1种支持响应式布局的.table-responsive table样式 //源码 table { background-color: transparent; } caption { padding-top: 8px; padding-bottom: 8px; color: #777; text-align: left; } th { text-align:...
  • BootStrap--CSS布局--表格

    2016-12-15 14:28:03
    表格组件中,BootStrap提供了 1种基础.table样式 4种附加样式(.table-striped/.table-bordered/....1种支持响应式布局的.table-responsivetable样式//源码 table { background-color: transparent; } caption { pad

    表格组件中,BootStrap提供了
    1种基础.table样式
    4种附加样式(.table-striped/.table-bordered/.table-hover/.table-condensed)
    1种支持响应式布局的.table-responsive

    table样式

    //源码
    table {
      background-color: transparent;
    }
    caption {
      padding-top: 8px;
      padding-bottom: 8px;
      color: #777;
      text-align: left;
    }
    th {
      text-align: left;
    }
    .table {
      width: 100%;
      max-width: 100%;
      margin-bottom: 20px;
    }
    .table > thead > tr > th,
    .table > tbody > tr > th,
    .table > tfoot > tr > th,
    .table > thead > tr > td,
    .table > tbody > tr > td,
    .table > tfoot > tr > td {
      padding: 8px;
      line-height: 1.42857143;
      vertical-align: top;
      border-top: 1px solid #ddd;
    }
    .table > thead > tr > th {
      vertical-align: bottom;
      border-bottom: 2px solid #ddd;
    }
    .table > caption + thead > tr:first-child > th,
    .table > colgroup + thead > tr:first-child > th,
    .table > thead:first-child > tr:first-child > th,
    .table > caption + thead > tr:first-child > td,
    .table > colgroup + thead > tr:first-child > td,
    .table > thead:first-child > tr:first-child > td {
      border-top: 0;
    }
    .table > tbody + tbody {
      border-top: 2px solid #ddd;
    }
    .table .table {
      background-color: #fff;
    }

    table.striped样式–带背景条纹的表格

    //源码
    .table-striped > tbody > tr:nth-of-type(odd) {
      background-color: #f9f9f9;
    }

    table.bordered样式–带边框的表格

    为表格所有的单元格提供1条1像素宽的边框

    //源码
    .table-bordered {
      border: 1px solid #ddd;
    }
    .table-bordered > thead > tr > th,
    .table-bordered > tbody > tr > th,
    .table-bordered > tfoot > tr > th,
    .table-bordered > thead > tr > td,
    .table-bordered > tbody > tr > td,
    .table-bordered > tfoot > tr > td {
      border: 1px solid #ddd;
    }
    .table-bordered > thead > tr > th,
    .table-bordered > thead > tr > td {
      border-bottom-width: 2px;
    }

    table.hover样式–鼠标悬停高亮的表格

    table.condensed样式–紧凑型的表格

    //源码
    .table-condensed > thead > tr > th,
    .table-condensed > tbody > tr > th,
    .table-condensed > tfoot > tr > th,
    .table-condensed > thead > tr > td,
    .table-condensed > tbody > tr > td,
    .table-condensed > tfoot > tr > td {
      padding: 5px;
    }

    行级元素样式

    Bootstrap为表格的tr元素提供了5种额外的样式,用于控制tr的背景颜色。active、success、info、warning、danger

    //源码
    .table > thead > tr > td.active,
    .table > tbody > tr > td.active,
    .table > tfoot > tr > td.active,
    .table > thead > tr > th.active,
    .table > tbody > tr > th.active,
    .table > tfoot > tr > th.active,
    .table > thead > tr.active > td,
    .table > tbody > tr.active > td,
    .table > tfoot > tr.active > td,
    .table > thead > tr.active > th,
    .table > tbody > tr.active > th,
    .table > tfoot > tr.active > th {
      background-color: #f5f5f5;
    }
    .table-hover > tbody > tr > td.active:hover,
    .table-hover > tbody > tr > th.active:hover,
    .table-hover > tbody > tr.active:hover > td,
    .table-hover > tbody > tr:hover > .active,
    .table-hover > tbody > tr.active:hover > th {
      background-color: #e8e8e8;
    }
    .table > thead > tr > td.success,
    .table > tbody > tr > td.success,
    .table > tfoot > tr > td.success,
    .table > thead > tr > th.success,
    .table > tbody > tr > th.success,
    .table > tfoot > tr > th.success,
    .table > thead > tr.success > td,
    .table > tbody > tr.success > td,
    .table > tfoot > tr.success > td,
    .table > thead > tr.success > th,
    .table > tbody > tr.success > th,
    .table > tfoot > tr.success > th {
      background-color: #dff0d8;
    }
    .table-hover > tbody > tr > td.success:hover,
    .table-hover > tbody > tr > th.success:hover,
    .table-hover > tbody > tr.success:hover > td,
    .table-hover > tbody > tr:hover > .success,
    .table-hover > tbody > tr.success:hover > th {
      background-color: #d0e9c6;
    }
    .table > thead > tr > td.info,
    .table > tbody > tr > td.info,
    .table > tfoot > tr > td.info,
    .table > thead > tr > th.info,
    .table > tbody > tr > th.info,
    .table > tfoot > tr > th.info,
    .table > thead > tr.info > td,
    .table > tbody > tr.info > td,
    .table > tfoot > tr.info > td,
    .table > thead > tr.info > th,
    .table > tbody > tr.info > th,
    .table > tfoot > tr.info > th {
      background-color: #d9edf7;
    }
    .table-hover > tbody > tr > td.info:hover,
    .table-hover > tbody > tr > th.info:hover,
    .table-hover > tbody > tr.info:hover > td,
    .table-hover > tbody > tr:hover > .info,
    .table-hover > tbody > tr.info:hover > th {
      background-color: #c4e3f3;
    }
    .table > thead > tr > td.warning,
    .table > tbody > tr > td.warning,
    .table > tfoot > tr > td.warning,
    .table > thead > tr > th.warning,
    .table > tbody > tr > th.warning,
    .table > tfoot > tr > th.warning,
    .table > thead > tr.warning > td,
    .table > tbody > tr.warning > td,
    .table > tfoot > tr.warning > td,
    .table > thead > tr.warning > th,
    .table > tbody > tr.warning > th,
    .table > tfoot > tr.warning > th {
      background-color: #fcf8e3;
    }
    .table-hover > tbody > tr > td.warning:hover,
    .table-hover > tbody > tr > th.warning:hover,
    .table-hover > tbody > tr.warning:hover > td,
    .table-hover > tbody > tr:hover > .warning,
    .table-hover > tbody > tr.warning:hover > th {
      background-color: #faf2cc;
    }
    .table > thead > tr > td.danger,
    .table > tbody > tr > td.danger,
    .table > tfoot > tr > td.danger,
    .table > thead > tr > th.danger,
    .table > tbody > tr > th.danger,
    .table > tfoot > tr > th.danger,
    .table > thead > tr.danger > td,
    .table > tbody > tr.danger > td,
    .table > tfoot > tr.danger > td,
    .table > thead > tr.danger > th,
    .table > tbody > tr.danger > th,
    .table > tfoot > tr.danger > th {
      background-color: #f2dede;
    }
    .table-hover > tbody > tr > td.danger:hover,
    .table-hover > tbody > tr > th.danger:hover,
    .table-hover > tbody > tr.danger:hover > td,
    .table-hover > tbody > tr:hover > .danger,
    .table-hover > tbody > tr.danger:hover > th {
      background-color: #ebcccc;
    }

    响应式表格

    随着响应式设计的大量需求,Bootstrap为表格提供了一个响应式设计的容器(.table-responsive),将.table-responsive样式包装在.table样式外部即可创建响应式表格
    在小屏幕(<768px)水平滚动,大屏幕上水平滚动条消失

    <div class="table-responsive">
        <table class="table">
        </table>
    </div>
    //源码
    .table-responsive {
      min-height: .01%;
      overflow-x: auto;
    }
    //把原有.table样式得底部外边距margin-bottom从20px改成了0px,目的是消除滚动条带来的上下高度差
    //并在.table-responsive样式上设置了一个margin-bottom:15px,避免和容器外部的下一个元素重叠
    @media screen and (max-width: 767px) {
      .table-responsive {
        width: 100%;
        margin-bottom: 15px;
        overflow-y: hidden;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        border: 1px solid #ddd;
      }
      .table-responsive > .table {
        margin-bottom: 0;
      }
      .table-responsive > .table > thead > tr > th,
      .table-responsive > .table > tbody > tr > th,
      .table-responsive > .table > tfoot > tr > th,
      .table-responsive > .table > thead > tr > td,
      .table-responsive > .table > tbody > tr > td,
      .table-responsive > .table > tfoot > tr > td {
        white-space: nowrap;
      }
      .table-responsive > .table-bordered {
        border: 0;
      }
      //可以看到table-responsive给自己加了一个1px的外边框,如果在table上在使用table-bordered样式得话,就会和表格的外边框重合,就会变粗,所以进行了以下代码的编写
      .table-responsive > .table-bordered > thead > tr > th:first-child,
      .table-responsive > .table-bordered > tbody > tr > th:first-child,
      .table-responsive > .table-bordered > tfoot > tr > th:first-child,
      .table-responsive > .table-bordered > thead > tr > td:first-child,
      .table-responsive > .table-bordered > tbody > tr > td:first-child,
      .table-responsive > .table-bordered > tfoot > tr > td:first-child {
        border-left: 0;//所有tr的第一个单元格(最左边的一列)的左边框设置为0px
      }
      .table-responsive > .table-bordered > thead > tr > th:last-child,
      .table-responsive > .table-bordered > tbody > tr > th:last-child,
      .table-responsive > .table-bordered > tfoot > tr > th:last-child,
      .table-responsive > .table-bordered > thead > tr > td:last-child,
      .table-responsive > .table-bordered > tbody > tr > td:last-child,
      .table-responsive > .table-bordered > tfoot > tr > td:last-child {
        border-right: 0;//所有tr的最后一个单元格(最右边的一列)的左边框设置为0px
      }
      .table-responsive > .table-bordered > tbody > tr:last-child > th,
      .table-responsive > .table-bordered > tfoot > tr:last-child > th,
      .table-responsive > .table-bordered > tbody > tr:last-child > td,
      .table-responsive > .table-bordered > tfoot > tr:last-child > td {
        border-bottom: 0;//最后一行tr里的单元格的底部边框设置为0px
      }
    }

    这里写图片描述
    这里写图片描述

    展开全文
  • 【Bootstrap】表格的CSS布局

    千次阅读 2017-06-14 15:53:30
    Bootstrap提供了表格组件,其中包括1种基础.table样式,4种附加样式(.table-striped,.table-bordered,.table-hover,.table-condensed)以及一个支持响应式布局的.table-responsive容器样式。需要注意的是每种...
  • jquery九宫格布局图片鼠标经过遮罩显示文字效果 jQuery图片九宫格布局鼠标悬停显示文字效果代码 ...jQuery响应式图片九宫格布局点击图片查看大图效果代码 jquery hover事件鼠标悬停九宫格图片高...
  • Python web相关的一些题

    2020-03-02 11:40:47
    写出常用的bootstrap的样式。 table table-bordered table-striped table-hover active danger info ...什么是响应式布局? 一个网站能够兼容多个终端,而不是为了每一个终端做一个特定的版本 请通过jQuery发...
  • Bootstrap指令集合

    2018-06-14 20:44:45
    table.container .container-fluid.table-responsive 响应式布局.text-left .text-justify 两端对齐.list-unstyled 无符号 .list-inline 行内块,table 表格 无边框 少量padding .table-striped 隔行变色表格.table...
  • bootstrap学习笔记之一

    2019-09-27 19:08:40
     bootstrap是最受欢迎的HTML、css和js框架,用于开发响应式布局,移动设备优先的WEB项目。 二、CSS部分  1、bootstrap已经设定了基本的全局样式,如font-family,font-size,line-height,为链接设定了基本的...
  • PC端常用布局固定宽度980px居中,移动端屏幕的大小和分辨率不同,多用响应式布局,使用em(以父元素为基础)、rem(以根元素为基础)。 3、JS动画 移动端没有hover事件、增加了touch和touchSlide事件,需要处理...
  • PC端常用布局固定宽度980px居中,移动端屏幕的大小和分辨率不同,多用响应式布局,使用em(以父元素为基础)、rem(以根元素为基础)。 3、JS动画 移动端没有hover事件、增加了touch和touchSlide事件,需要处理键盘...
  • Bootstrap 表格

    2016-03-14 19:20:55
    Bootstrap表格一个基础样式:.table(必须),四种附加样式(可选):.table-striped、.table-bordered、.table-hover、.table-condensed,一个响应式布局容器类:.table-responsive。 一、基础样式: col1col2col...
  • 深入Bootscrap

    2020-11-02 20:32:19
    响应式网页 1、响应式网页概述:一个页面,可以在各种不同的设备下浏览,都有不错的浏览体验。 三个特征:(1)流式布局(2)可伸缩的图片和字体(3)CSS3 Media Query 表格 .table:基础表格 .table-striped:斑马...
  • 给多行文本做一个鼠标移动上去,加一...使用 CSS Grid(网格) 布局来创建一个超酷的图像网格,它会根据屏幕的宽度改变列的数量,以实现响应式布局。&lt;/span&gt; &lt;/h1&gt; 复制代码css .title{ ...
  • 一 目录 不折腾的前端,和咸鱼有什么区别目录一 目录二 前言三 DIV + CSS 布局的优缺点四 如何解决 a 标点击后 hover 事件失效的问题?五 响应式六 脱离文档流七 块级格...
  • 如影随形黑色个人博客HTML5模板,HTML5响应式两栏布局,LOGO重点突出,首页推荐文章列表以Logo中轴线为时间轴,鼠标Hover触发时间轴左侧栏显示文章发布时间,文字banner动画均以CSS3代码来实现效果。全套模板,包括...
  • Web-resume-源码

    2021-03-05 11:31:41
    网络简历 Web简历(PC)项目描述: ... 1.共有5个div组成5个页面 2.第一个页面,中间有个开头自我介绍板,只要鼠标移至上方,就会出现立体视觉效果。...采用的是响应式布局,可以PC端和手机端显示。 2.使用了HTM
  • 哎呀呀,做了接近一个月的答辩作品终于答辩完啦,心里很开心就是...布局,结合boostrap的网格系统做的响应式,用了一些boostrap和jq里面的框架;使用了一些hover和动画效果,加了一些好玩的js特效。这是第一次自己从...

空空如也

空空如也

1 2
收藏数 23
精华内容 9
关键字:

响应式布局hover