zoukankan      html  css  js  c++  java
  • 05-背景图与浮动的练习

    2020-08-08

    1. 通过无序列表属性与伪类选择器完成。
     li:hover{
                color: brown;
        }

    例图

      2.背景图

    background :背景图的颜色 背景图的路径 背景图的重复方式 背景图位置

      3.

    背景图的固定 background-attachment:
    源码
    ···
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            *{
                margin: 0 ;
                padding: 0;
            }
            .box1{
                height: 800px;
                text-align: center;
                background: purple url(img/jn.jpg) no-repeat center;
                background-size: 100%;
                background-attachment: fixed;
                color: white;
            }
            .box2{
                height: 800px;
                text-align: center;
                background: palegreen url(img/hzy.jpg) no-repeat center;
                background-size: 100%;
                background-attachment: fixed;
                color: white;
            }
            .box3{
                height: 800px;
                text-align: center;
                background: forestgreen url(img/mdx.jpg) no-repeat center;
                background-size: 100% 100%;
                background-attachment: fixed;
                color: white;
            }
        </style>
    </head>
    <body>
        <div class="box1">第一张图:基努里维斯</div>
        <div class="box2">第二张图:河正宇</div>
        <div class="box3">第三张图:马东锡</div>
    </body>
    </html>
    ···

      fixed;固定

      scoll;滚动 

      3.  浮动

         从父元素的边缘开始挨着排列 
        - 父元素宽度不够的时候,浮动元素会掉下来,掉到浮动所设置的位置,比如左浮动,元素会掉到做百年
        - 元素设置浮动后会脱离文档流,没有设置浮动的元素会占据浮动元素的位置,文字不会被遮挡
        - 浮动元素不会超过没有设置浮动的元素
      * **浮动的应用场景**
        - 将纵向排列的元素横向排列,给每一个需要横向的排列的元素都添加浮动   
  • 相关阅读:
    处理了一个“服务器能ping得通,但telnet连接失败”导致数据库登录不了的问题
    解决了一个oracle登录缓慢的问题
    今天解决了一个mysql远程登录和本机ip登录都失败的问题
    c++笔记
    c语言笔记
    常见并发与系统设计
    linux网络IO笔记
    linux文件IO全景解析
    linux网络协议笔记
    长大后才懂的蜡笔小新 ​​​​
  • 原文地址:https://www.cnblogs.com/qdbj2020/p/13457682.html
Copyright © 2011-2022 走看看