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

2021/7/1 23:53:52

编程Tag： 网页定位实例 left 思路 TB 盒子 15px promo

本文主要是介绍定位实例及网页布局思路总结，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

定位实例

网页布局总结

标准流

浮动

定位

定位实例

<!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 浮动、定位可以让每个盒子排列成为网页

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

标准流

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

浮动

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

定位

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

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

这篇关于定位实例及网页布局思路总结的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

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

定位实例

网页布局总结

标准流

浮动

定位

相关编程文章