首页 > 其他分享> > 定位实例及网页布局思路总结

定位实例及网页布局思路总结

2021-07-01 23:30:07 作者：互联网

定位实例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="tb-promo">
            <img src="images/tb.jpg" alt="">
            <a href="#" class="prev"> &lt; </a>
            <a href="#" class="next"> &gt; </a>
            <ul class="promo-nav">
                <li class="selected"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </body>
</html>

* {
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
}
.tb-promo {
    position: relative;
    width: 520px;
    height: 280px;
    background-color: #ff5b00;
    margin: 100px auto;
}
.tb-promo img {
    width: 100%;
}
/*并集选择器可以集体声明相同的样式*/
.tb-promo .prev,
.next {
    position: absolute;
    top: 50%;
    margin-top: -15px;
    width: 20px;
    height: 30px;
    background: rgba(0,0,0,.3);
    text-align: center;
    line-height: 30px;
    color: #fff;
    text-decoration: none;
}
.tb-promo .prev {
    left: 0;
    border-radius: 15px 0 0 15px;
}
/*如果一个盒子既有left属性，又有right属性，则默认执行left;同理，top和bottom,默认执行top*/
.tb-promo .next {
    right: 0;
    border-radius: 0 15px 15px 0;
}
.tb-promo .promo-nav {
    position: absolute;
    left: 50%;
    margin-left: -35px;
    bottom: 15px;
    width: 70px;
    height: 14px;
    background: rgba(255,255,255,.3);
    border-radius: 7px;
}
.tb-promo .promo-nav li {
    float: left;
    width: 8px;
    height: 8px;
    background-color: #fff;
    border-radius: 50%;
    margin: 3px;
}
.tb-promo .promo-nav .selected {
    background-color: #ff5000;
}

效果图

网页布局总结

通过盒子模型，了解大部分 HTML 标签就是一个一个的盒子

通过 CSS 浮动、定位可以让每个盒子排列成为网页

一个完整的网页，是标准流、浮动、定位一起完成布局的，每一个都有自己的专门用法

标准流

可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局

浮动

可以让多个块级元素一行显示或者左右对齐，多个块级盒子水平显示就用浮动布局

定位

定位最大的特点是有层叠的概念，可以让多个盒子前后叠压来显示

如果想让元素在某个盒子内自由移动或者固定在浏览器可视化窗口的某个位置就用定位布局

标签：定位,网页,promo,实例,盒子,思路,tb,15px,left
来源： https://blog.csdn.net/weixin_41909678/article/details/118400221