自适应布局与锚点随笔

三栏自适应布局：

    <style>
        .a{
            width: 200px;
            height: 300px;
            background-color: #f00;
            float: left;
        }
        .c{
            width: 200px;
            height: 300px;
            float: right;
            background-color: #ff0;
        }
        .b{
            height: 500px;
            background-color: #000;

            /* calc可以接受表达式 */
            width: calc(100% - 400px);
            float: left;
        }
    </style>
</head>
<body>
    <div class="a"></div>
    <div class="c"></div>
    <div class="b"></div>
</body>

块a与块b会在网页中固定大小（网页放大或缩小不会受到影响），块b会随着网页大小而自适应缩放；

块b的宽度除了用"calc"来实现自适应以外还能用

"width:100%;

overflow: hidden;"
 
 
锚点： 
    <a href="#chifan">我的爱好</a>
    <a href="#jingli">我的经历</a>
    <img src="../images/banner.jpg" alt="">
    <img src="../images/banner.jpg" alt="">
    <div id="chifan">吃饭</div>
    <img src="../images/banner.jpg" alt="">
    <img src="../images/banner.jpg" alt="">
    <div id="jingli">经历</div>
    <img src="../images/banner.jpg" alt="">
    <img src="../images/banner.jpg" alt="">
    <a href="#top">返回顶部</a>
网页中的快速定位器，实际上就是本页面内的跳转
语法 a标签的href指向#id
posted @ 2020-08-06 19:16  .sana  阅读(189)  评论(0)    收藏  举报
……