zoukankan      html  css  js  c++  java
  • 前端自学笔记06

    前端自学笔记06

    1、学习目标
    能写出全部清除浮动的方式
    能简述定位的使用场景
    能说出3种定位的特点
    能写出绝对定位的盒子居中的代码
    能够说出子绝父相的使用目的
    为什么没有清除定位却有清除浮动?
    因为定位有子绝父相,父盒子 会把位置占好。
    2、定位模式转换
    这里写图片描述
    3、CSS高级技巧
    这里写图片描述

    display:none;/*隐藏对象*/
    display:block;/*显示某个元素*/

    这里写图片描述
    这里写图片描述
    这里写图片描述
    这里写图片描述
    这里写图片描述
    这里写图片描述
    这里写图片描述
    这里写图片描述
    这里写图片描述
    这里写图片描述
    注意:一定要首先强制在一行内显示,再次和overflow属性搭配使用

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;

    这里写图片描述
    这里写图片描述
    这里写图片描述
    利用fireworks工具测量好所需盒子的大小以及所需图片在精灵图内的坐标,设置好相应的盒子后对精灵图进行位移即可

    .aa{
    108px;
    height:110px;
    }
    
    background:url(...) no-repeat 0 -350px;

    滑动门
    制作导航栏时,我们发现导航栏文字长度不一,但背景却能够根据内容进行合适地拉伸,这是应用了滑动门的技术。先截取长图片的左侧少部分固定住,再将长图片进行右对齐,这样在其中输入文字就能自动把图片进行拉长。
    这里写图片描述

    <head>
    <style>
    a{//不能活动的推拉门左边
    margin:100px;
    height:33px;
    display:inline-block;
    background:url(...) no-repeat;
    color:#fff;
    text-decoration:none;
    line-height:33px;
    padding-left:15px;
    }
    span{//可以活动的推拉门右边
    display:inline-block;
    height:33px;
    background:url(...) right;
    padding-right:15px;
    }
    </style>
    </head>
    /*设置特效两个门都要设置*/
    <body>
    <a href="#">
    <span>首页</span>
    </a>
    </body>
  • 相关阅读:
    gym101350 c h m
    Gym
    poj 1511 Invitation Cards(最短路中等题)
    POJ 1062 昂贵的聘礼(最短路中等题)
    POJ 1125 Stockbroker Grapevine(最短路基础题)
    【Linux】buffer cache free 理解
    python 绘图 工具
    【Linux】时间跟时区的校正
    python conda、pip区别,python 下 faiss 安装
    celery-demo
  • 原文地址:https://www.cnblogs.com/Tanqurey/p/10485304.html
Copyright © 2011-2022 走看看