webBasic_day04_CSS_overflow_display_float_position(absolute, relative)

最新推荐文章于 2019-12-25 21:28:41 发布

CXZ___deboke

最新推荐文章于 2019-12-25 21:28:41 发布

阅读量224

点赞数

分类专栏： webBasic 文章标签： webBasic_day04_CSS_overflow_di

本文链接：https://blog.csdn.net/CXZ___deboke/article/details/79591686

版权

webBasic 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

day04

案例:二级菜单的样式

    <body>
        <div id="leftsidebar_box">
            <ul>
                <!--与li同级的ul是二级菜单  -->
                <li class="cmenu1 menu">我的订单
                    <img alt="" src="../images/myOrder/myOrder1.png">
                </li>
                <ul class="submenu">
                    <li>全部订单</li>
                    <li>待付款</li>
                    <li>待收货</li>
                    <li>待评价</li>
                    <li>退货退款</li>
                </ul>

                <li class="cmenu2 menu">我的优惠券
                    <img alt="" src="../images/myOrder/myOrder1.png">
                </li>
                <ul class="submenu">
                    <li>我的优惠券</li>
                </ul>

                <li class="cmenu3 menu">收货地址
                    <img alt="" src="../images/myOrder/myOrder1.png">
                </li>
                <ul class="submenu">
                    <li>地址管理</li>
                </ul>

                <li class="cmenu4 menu">账号管理
                    <img alt="" src="../images/myOrder/myOrder1.png">
                </li>
                <ul class="submenu">
                    <li>我的信息</li>
                    <li>安全管理</li>
                </ul>
            </ul>
        </div>
    </body>


    <style type="text/css">
    * {
        margin: 0px;
        padding: 0px;
    }
    li{
    /* 去掉li前面的黑点 */
        list-style: none;
    }
    a{
        text-decoration: none;
        color: #808080;
    }
    #leftsidebar_box {
        width: 160px;
    }

    .cmenu1{
        background-image: url("../images/myOrder/myOrder.png");
    }
    .cmenu2{
        background-image: url("../images/myOrder/pcenter_icon1.png");
    }
    .cmenu3{
        background-image: url(../images/myOrder/pcenter_icon2.png);
    }
    .cmenu4{
        background-image: url(../images/myOrder/pcenter_icon3.png);
    }
    .menu{
        background-color: rgb(10,161,237);
        height: 36px;
        color: #f5f5f5;
        font-size: 14px;
        font-weight: bold;
        font-family: "黑体";
        background-repeat: no-repeat;
        padding-left: 40px;
        /* 文本垂直居中 */
        line-height: 36px;
        background-position: 10px center;
        margin-bottom: 10px;
    }
    .submenu{
        background-color: #fff;
        padding-left: 40px;
        margin-bottom: 10px;
    }
    .submenu>li{
        line-height: 30px;
        font-size: 14px;
        font-family: "黑体";
        color:#808080;
    }

    </style>

5. 边框属性 border

    border:1px solid #006699;
    border-width:1px;
    border-style:solid;
    border-color:#006699;

    border-top:上边框
    border-right:
    border-bottom:
    border-left:

    border-top-width:
    ...

溢出属性

overflow:溢出
- hidden 溢出部分隐藏
- visiable 溢出部分显示
- scroll 溢出部分显示滚动条

复杂属性

display 控制元素的显示方式

display:none 隐藏标签,可以写在内联样式中
display:block;按块级标签进行显示
display:inline;按照行级标签显示,基本不用!

浮动,把块级元素在一行中显示

float:left ,把元素浮动起来之后往左排列

float:right,把元素浮动起来之后往右排列

clear:both,清除浮动

总结

一旦元素设置了浮动属性,

当前元素将会脱离默认文档流

在默认文档流之上(上一层)进行渲染绘制

同时,此元素先前的位置将会被其它元素占用

clear:both,是让本元素不去占用浮动元素原来的位置

或者说不让本元素被浮动的元素覆盖

定位

position:absolute;绝对定位

position:relative;相对定位

使用定位的要点

一个元素想使用定位,父级元素必须有position:relative;如果没有,那么子元素会逐层向外寻找有position:relative;的包裹元素.并以这个包裹元素为参照物,使用top left等属性.如果都没有,以body为参照物
postion:absolute原位置会被下面的元素占用
position:relative;原位置被保留,不会被下面的元素占用
top left right bottom

总结

使用定位,一定要选好参照物,多个定位相互覆盖,需要考虑z-index属性(可以理解为楼层)

postion:absolute是完全脱离默认文档流,原位置会被其他元素占用

position:relative;不是完全脱离默认文档流,原位置不会被其他元素占用

position:fixed;相对浏览器窗口定位

CXZ___deboke

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webBasic_day04_CSS_overflow_display_float_position(absolute, relative)

day04案例:二级菜单的样式 &lt;body&gt; &lt;div id="leftsidebar_box"&gt; &lt;ul&gt; &lt;!--与li同级的ul是二级菜单 --&gt; &lt;li class="cmenu1 menu"&gt;我的订单
复制链接

扫一扫