移动端基础(Bootstrap)

最新推荐文章于 2024-07-25 10:45:42 发布

今晚月亮也睡了

最新推荐文章于 2024-07-25 10:45:42 发布

阅读量1.4k

点赞数

文章标签： bootstrap css css3

本文链接：https://blog.csdn.net/weixin_45756606/article/details/125355142

版权

字体图标

1.阿里巴巴字体图标库找到要用的下载

2.整个文件拖到根目录

3.使用link引入iconfont.css

4.打开demo 把图标下的后缀复制到class里

 <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        /* .iconfont {
            font-size: 60px;
        } */

        i {
     
            font-size: 60px;
        }
    </style>
</head>
<body>
    <i class="iconfont icon-favorites-fill"></i>
</body>

百分比布局

百分比布局，也叫流失布局

效果：宽度自适应（100%），高度固定（指定height）

 <style>
        * {
     
            margin: 0;
            padding: 0;
        }
        
        li {
     
            list-style: none;
        }
        
        .toolbar {
     
            position: fixed;  /* 此处是固定定位 */
            left: 0;
            bottom: 0;
            /* 百分比布局  流式布局 */
            width: 100%;
            height: 50px;
            background-color: pink;
            border-top: 1px solid #ccc;
        }
        
        .toolbar li img {
     
            height: 100%;
        }

        .toolbar li {
     
            float: left;    /* 此处让li左浮动，且宽为父盒子的20%，高为父盒子的高 */
            width: 20%;  
            height: 50px;
        }
    </style>
</head>

<body>
    <div class="toolbar"