07-CSS浮动初体验

最新推荐文章于 2024-06-19 20:40:04 发布
最新推荐文章于 2024-06-19 20:40:04 发布
阅读量371 收藏
点赞数
分类专栏： 学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38178755/article/details/78713386
版权

问题：在页面上有两个盒子，一个盒子靠着屏幕左侧显示另一个盒子靠着屏幕的右侧显示？
作用：解决一行中显示多个盒子的问题（并且这些盒子的位置是可控的）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      *{
        margin:0px;
        padding: 0px;
      }
      div{
        width: 200px;
        height:200px;
      }
      .one{

         background: red;
         float: left;
      }
      .two{
          background: blue;
          float: right;
      }

    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
</body>
</html>

浮动的代码：

float：left
float：right

浮动的特点：

标准流：就是浏览器默认摆放盒子的标准。
1. 浮动的元素会脱离标准流。
如果一个元素按照正常的标准流来显示，会在html中所属的位置占位，后面的元素会紧跟着它。但是浮动脱了标准流，将来在看到浮动的元素之后，不能以正常的标准流来进行判断。（在标准流中不占位置了，它是在标准流之上）
2. 浮动以后的元素会覆盖在标准流元素之上。
3.浮动的规则：浮动找浮动，不浮动找不浮动
不浮动就是标准流，浮动找浮动的意思 只有写在同一个结构下才会浮动找浮动。

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
        }
        .one {
            background: red;
            float: left;
        }
        .two {
            background: blue;
            float: left;
        }
        .three {
            background: pink;
            float: left;
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div style="background: yellow;"></div>
    <div style="background: deeppink;"></div>
    <div style="background: skyblue"></div>
</body>
</html>

这里写图片描述
4.浮动显示的位置和不浮动之前的位置是对应的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      *{
        margin:0px;
        padding: 0px;
      }
      div{
        width: 200px;
        height:200px;
      }
      .one{

         background: red;
         float: right;
      }
      .two{
          background: blue;
           float: right;
      }
       .three{
        background: pink;
         float: right;
       }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</body>
</html>

这里写图片描述
5.浮动的元素只会影响下面的元素不会影响上面的元素
6.浮动的元素会改变显示方式
*不管元素是行内元素还是块元素都是在一行显示。
浮动以后的元素可以设置宽高。总结就是浮动元素就像行内块级元素一样！*
浮动的元素在页面上是不占位置的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .one {
            width: 200px;
            height:200px;
            background: pink;
            float: left;
        }
        .two {
            width: 200px;
            height: 200px;
            background: red;
            float: left;
        }
    </style>
</head>
<body>
    <span class="one">今天下雨啦</span>
    <span class="two">没有</span>
</body>
</html>

这里写图片描述

浮动的案例

1利用浮动完成页面的布局
版心一般980px。无浮动。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       *{
        margin: 0px;
        padding: 0px;
       }
       /*确定版心的距离是980*/
       .nav{
        width: 980px;
        height: 50px;
        background: red;
        margin: 0 auto;
       }

       .logo{
        width: 980px;
        height: 100px;
        background: purple;
        margin: 0 auto;

       }
       .message{
        width: 980px;
        height: 150px;
        margin: 0 auto;
        background: pink;
       }
       .content{
        width: 980px;
        height: 500px;
        margin: 0 auto;
        background: blue;
       }
       .foot{
        width: 980px;
        height: 50px;
        margin: 0 auto;
        background: yellow;
       }
    </style>
</head>
<body>
    <div class="nav">导航</div>
    <div class="logo">商标</div>
    <div class="message">页面信息</div>
    <div class="content">内容区域</div>
    <div class="foot">底部</div>
</body>
</html>

这里写图片描述
加入浮动，将内容区域，变成一边导航一般内容！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       *{
        margin: 0px;
        padding: 0px;
       }
       /*确定版心的距离是980*/
       /*为了更好看每一个元素都设置一个margin-top*/
       div{
        margin-top: 3px !important;
       }
       .nav{
        width: 980px;
        height: 50px;
        background: red;
        margin: 0 auto;
       }

       .logo{
        width: 980px;
        height: 100px;
        background: purple;
        margin: 0 auto;

       }
       .message{
        width: 980px;
        height: 150px;
        margin: 0 auto;
        background: pink;
       }
       .content{
        width: 980px;
        height: 500px;
        margin: 0 auto;
        background: blue;
       }
       .foot{
        width: 980px;
        height: 50px;
        margin: 0 auto;
        background: yellow;
       }
       .left{
        width:300px; 
        height:500px;
        background: green;
        float: left;
       }
       .right{
        width: 660px;
        height: 500px;
        background:deeppink;
        float: right;
       }
    </style>
</head>
<body>
    <div class="nav">导航</div>
    <div class="logo">商标</div>
    <div class="message">页面信息</div>
    <div class="content">
       <div class="left">导航</div>
       <div class="right">内容</div>
    </div>
    <div class="foot">底部</div>
</body>
</html>

这里写图片描述
2制作导航
注意以前是使用a标签来直接制作导航是有问题的。
*1.导航和导航之间应该是列表的关系，如果想要将这些关系通过html语义化表示出来必须ul标签。
2.如果这些a标签你不用其他的标签包裹起来，那么将来浏览器会将这些a标签中的文字全部一起显示。SEO在查看页面的时候会认为这个页面进行作弊，就是进行了关键字的堆砌。*
必须要用ul的li标签将a标签的内容包裹起来。**

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin: 0px;
        padding: 0px;
    }
    li{
        list-style: none;
        float: left;

    }
    a{
        /*文本去掉下划线*/
        text-decoration: none;
        color:#CCC;
        /*给a标签设置宽高还有边框让他先变成行内块级元素*/
        display: inline-block;
        padding: 0px 10px;
        height: 50px;
        /*文本水平和垂直居中*/
        text-align: center;
        line-height: 50px;
    }
    a:hover{
        background: red;
        color: #CCC;
    }
    </style>
</head>
<body>
    <ul>
      <li><a href="#">糯米</a></li>
      <li><a href="#">新闻</a></li>
      <li><a href="#">hao123</a></li>
      <li><a href="#">地图</a></li>
      <li><a href="#">视频</a></li>
      <li><a href="#">贴吧</a></li>
      <li><a href="#">登陆</a></li>
      <li><a href="#">设置</a></li>

    </ul>
</body>
</html>

这里写图片描述

案例应用：

1 网站的头部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这只是一个网站的头部</title>
    <style>
       *{
        margin: 0px;
        padding:0px;
       }

       .top{
        width: 760px;
        height: 150px;
            margin: 0 auto;
            /*图片的大小小于div的宽度所以要先设置一个平铺的纯色背景图片*/
        background: url(img1/banner_bg.jpg);
       }
       .down{

        width: 760px;
            /*背景图片决定*/
        height: 32px;
            margin: 0 auto;
        background: url(img1/button1_bg.jpg);

       }
       li{
        list-style: none;
        float: left;
       }
       a{
        text-decoration: none;
        color:red;
        font-size: 12px;
        display: inline-block;
            /*根据背景图片设置宽高*/
            width: 80px;
        height: 32px;
            text-align: center;
        line-height: 32px;
            /*导航之间的间距*/
            background: url(img1/button1.jpg);
       }
       a:hover{
            background: url(img/button2.jpg);
       }

    </style>
</head>
<body>
    <div class="top">
      <!-- 插入背景图片 -->
           <img src="img/banner1.jpg" alt="">
           </div>
    <div class="down">
      <ul>
             <li><a href="#">导航</a></li>
             <li><a href="#">返回首页</a></li>
             <li><a href="#">网站介绍</a></li>
             <li><a href="#">想起来了</a></li>
      </ul>


    </div>
</body>
</html>

这里写图片描述
3文字环绕图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字环绕</title>
    <style>
     div{
         border:1px solid black;
         /*高度大于图片*/
         height: 250px；
     }
     img{
        width: 200px;
        height: 200px;
        float: left;
     }

    </style>
</head>

<body>
    <div>
      <img src="img/1.jpg" alt="">
      hello！这是一个文字环绕图一片的案例感觉很难得样子
      这是一个文字环绕图一片的案例感觉很难得样子
      这是一个文字环绕图一片的案例感觉很难得样子
      这是一个文字环绕图一片的案例感觉很难得样子
      这是一个文字环绕图一片的案例感觉很难得样子
      这是一个文字环绕图一片的案例感觉很难得样子
      这是一个文字环绕图一片的案例感觉很难得样子
      这是一个文字环绕图一片的案例感觉很难得样子
      这是一个文字环绕图一片的案例感觉很难得样子
      这是一个文字环绕图一片的案例感觉很难得样子
      这是一个文字环绕图一片的案例感觉很难得样子
      这是一个文字环绕图一片的案例感觉很难得样子
      这是一个文字环绕图一片的案例感觉很难得样子
      这是一个文字环绕图一片的案例感觉很难得样子
      这是一个文字环绕图一片的案例感觉很难得样子
      这是一个文字环绕图一片的案例感觉很难得样子
      这是一个文字环绕图一片的案例感觉很难得样子
      这是一个文字环绕图一片的案例感觉很难得样子
      这是一个文字环绕图一片的案例感觉很难得样子
    </div>
</body>
</html>

这里写图片描述

浮动练习：

标准：

通栏：给个div就好了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            height: 1500px;
        }
        * {
            margin: 0;
            padding: 0;
        }
        a {
            text-decoration: none;
        }
        li {
            list-style: none;
        }
        /*logo B*/
        .logo {
            height: 62px;
            background: #FFFFFF;
            border-bottom: 1px solid #E1E1E1;
        }
        .logo .banxin {
            width: 980px;
            height: 62px;
            margin: 0 auto;
        }
        .logo_l {
            width: 180px;
            height: 24px;
            background: url(img/logo.png);
            margin-top: 19px;
            float: left;
        }
        .logo_r {
            width: 200px;
            height: 30px;
            background: url(img/search.png);
            float: right;
            margin: 19px 8px 0 0;
        }
        /*logo E*/
        /* nav B*/
        .nav {
            height: 55px;
            background: url(img/nav_bg.png) repeat-x;
        }
        .nav .banxin {
            width: 980px;
            height: 55px;
            margin: 0 auto;
        }
        .nav .banxin li {
            float: left;
            line-height: 55px;
        }
        .nav li a {
            display: inline-block;
            height: 55px;
            width: 128px;
            text-align: center;
            border-left: 1px solid #DFDFDF;
            border-right: 1px solid #CDCDCD;
            font: bold 14px/55px "黑体";
            color: #00004B;
        }
        /* nav E*/
        .banner {
            margin: 0 auto;
            margin-top: 1px;
            width: 980px;
            height: 666px;
            background: url(img/banner.png);
        }
        .ad {
            height: 29px;
            border-top: 1px solid #EFEFEF;
            border-bottom: 1px solid #EFEFEF;
            background: #FBFBFB;
        }
        .ad .banxin {
            width: 980px;
            height: 29px;
            margin: 0 auto;
            line-height: 29px;
            font-size: 12px;
            font-family: "微软雅黑";
        }
        .word {
            float: left;
        }
        .ad .banxin .iimg {
            width: 86px;
            height: 16px;
            background: url(img/share.png);
            float: right;
            margin: 6px 6px 0 0 ;
        }
    </style>
</head>
<body>
    <!-- logo B -->
    <div class="logo">
        <div class="banxin">
            <div class="logo_l"></div>
            <div class="logo_r"></div>
        </div>
    </div>
    <!-- logo E -->
    <!-- nav B -->
    <div class="nav">
        <div class="banxin">
            <ul>
                <li><a href="#">首 页</a></li>
                <li><a href="#">智能手机</a></li>
                <li><a href="#">平板电脑</a></li>
                <li><a href="#">配件</a></li>
                <li><a href="#">服务支持</a></li>
                <li><a href="#">关于尚合</a></li>
            </ul>
        </div>
    </div>
    <!-- nav E -->
    <div class="banner"></div>
    <div class="ad">
        <div class="banxin">
            <div class="word"><span style="font-weight: 900;">最新公告：</span>
&nbsp;&nbsp;尚合Aone智能手机入网证已经获工信部门审批下发。尚合官方</div>
            <div class="iimg"></div>
        </div>
    </div>
</body>
</html>

自己的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      *{
        margin: 0px;
        padding:0px;
      }
      a {
        text-decoration: none;
        font-size: 15px;
        color: black;
      }

      li{
        list-style: none;
        float: left;
      }
       .top{
        width: 980px;
        height: 63px;
        border-bottom:1px solid #C4C4C4;
        margin:0 auto;

       } 
       .logo{
        width: 182px;
        height: 25px;
        /*解决了margin的塌陷问题*/
        float: left;
        line-height: 25px;
        margin:18px 0;

       }
       .input{
        width: 200px;
        height: 30px;
        float: right;
        margin:18px 8px 0 0;

       }
       .dao{
        height: 56px;
        background: url(img/nav_bg.png) repeat-x;
       }
       .dao .banxin{
        width: 980px;
        margin:0 auto;

       }

        .dao .banxin a{
            /*margin:0px 10px;自己的想法*/
            display: inline-block;
            width: 128px;
            height:56px;
            text-align: center;
            border-left: 1px solid #DFDFDF;
            border-right: 1px solid #CDCDCD;
            font: bold 14px/56px "黑体";
            color: #00004B;
        }
       .content{
        width: 980px;
        height: 597px;
        margin:2px 0;
        margin:0 auto;
       }
       .yuan{
        width: 980px;
        height:69px;
        text-align: center; 
        margin:0 auto;
       }
       .down{
        width: 980px;
        margin:0 auto;
       }
       .gao{
        width: 980px;
        height: 30px;
        border: 1px solid #C4C4C4;
        background: #C4C4C4;
        margin:0 auto;
       }
       .share{
        width: 86px;
        height: 16px;
        float:right;

       }

    </style>
</head>
<body>
    <div class="top">
        <div class="logo"><img src="img\s2.png" alt=""></div>
        <div class="input"><img src="img\search.png" alt=""></div>
    </div>
    <div class="dao">
         <div class="banxin">
       <ul>
         <li><a href="#">首页</a></li>
         <li><a href="#">智能手机</a></li>
         <li><a href="#">平板电脑</a></li>
         <li><a href="#">配件</a></li>
         <li><a href="#">服务支持</a></li>
         <li><a href="#">关于尚可</a></li>
       </ul>
       </div>
    </div>
    <div class="content">
    <img src="s1.jpg" alt="">
    </div>
    <div class="yuan"><img src="img\5.png" alt=""></div>
    <div  class="down">
    <span class="gao">最新公告：尚合Aone智能手机入网证已经获工信部门审批下发。尚合官方</span>
    <img class="share" src="img\share.png" alt="">
    </div>
</body>
</html>

这里写图片描述

清楚浮动

**

1浮动的影响

**
浮动对页面的影响：
如果一个父盒子中有一个子盒子，并且父盒子没有设置高，子盒子在父盒子中进行了浮动，那么将来父盒子的高度为0.由于父盒子的高度为0，下面的元素会自动补位，所以这个时候要进行浮动的清除。

float: left;float: right;

清除浮动：clear:both;
清楚浮动的方法：
1.使用额外标签法：就是在浮动的盒子上面加一个新的标签，在这个标签里面加上clear：both，来清楚浮动对页面的影响。但是缺点就是父元素的高度还是没有撑开。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       .father{
        width: 500px;

        /*height: 300px;*/
        border: 1px solid black;

       }
       .clear{
        /*清楚浮动的影响*/
        clear: both;
       }
        .son{
            width: 200px;
            height: 200px;
            background: red;
            float:right;
        }
        .one{
            width: 500px;
            height: 300px;
            border: 10px solid pink;    
        }

    </style>
</head>
<body>
    <div class="father">
          <div class="son"></div>
     </div>
     <div class="clear"></div>
     <div class="one"></div>
</body>
</html>

这里写图片描述
2.使用内部标签法：
就是把新的标签放在浮动盒子的父亲盒子里面这样就把父亲盒子高度撑开了。

<body>
    <div class="father">
        <div class="son"></div>
        <div class="clearfix"></div>
    </div>
    <div class="one"></div>
</body>
</html>

这里写图片描述
注意：但是一般不使用这种方式来清楚浮动的影响，因为会增加额外的标签，破坏原来的页面结构。
2可以使用overflow属性来清楚浮动
找到浮动元素的父节点，然后添加属性：

overflow: hidden;

就是清除这个父元素中的子元素浮动对页面的影响。

.father {
            width: 500px;
            /*height: 300px;*/
            border: 10px solid #000;
            overflow: hidden;
        }

注意：一般情况下也不会使用这种方式，因为overflow:hidden有一个特点，离开了这个元素所在的区域以后会被隐藏（等学完overflow以后）。

使用伪元素来清楚浮动：

这个是使用最多的方法。
4 伪元素：在页面上不存在的元素，但是可以通过CSS添加上去。
*class类
伪类：是不存在的类满足某一条件才存在*
伪元素属性：：after ：before
每个元素都有自己的伪元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>微元素</title>
    <style>
      p:before {
                content: "h";
      }
     p:after{
                content: "d";
     }


    </style>
</head>
<body>
    <p>ello worl</p>
</body>
</html>

这里写图片描述

用伪元素来清楚浮动

默认伪元素是行内元素但是可以用display来改变他。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p:before {
            content: "h";
        }
        p:after {
            content: "d";
            display: block;
            height: 200px;
            width: 200px;
            background: red;
        }
    </style>
</head>
<body>
    <p>ello worl</p>
</body>
</html>

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       .father{
        width: 500px;

        /*height: 300px;*/
        border: 1px solid black;

       }

        .son{
            width: 200px;
            height: 200px;
            background: red;
            float:right;
        }
        .one{
            width: 500px;
            height: 300px;
            border: 10px solid pink;    
        }
        .clearfix:after{
            content: "";
            height: 0;
            line-height: 0;
            display: block;
            clear: both;
            visibility: hidden;/*将元素隐藏起来*/
            /*在页面的clearfix元素后面加了一个空的块级元素（这个元素高是0行高也是0并且这个元素清楚了浮动）*/
        }
        .clearfix{
            zoom:1;/*为了兼容ie*/
        }


    </style>
</head>
<body>
    <div class="father clearfix">
          <div class="son"></div>
     </div>

     <div class="one"></div>
</body>
</html>

这里写图片描述

Sarrykiss
关注
专栏目录
响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 第1章 HTML5+CSS3初体验 课后练习
m0_73657966的博客
01-09 1855
文章目录。
前端初学之CSS初体验
qq_64133626的博客
11-16 277
一、从什么是CSS开始（百度一下，你也知道） CSS：Cascading Style Sheet 层叠样式表。是一组样式设置的规则，用于控制页面的外观样式。 1、特点： 实现内容与样式的分离，便于团队开发； 样式复用，便于网站的后期维护； 页面的精确控制，让页面更精美 2、CSS引用方式： 1.内嵌样式 写在标签属性的位置，style="color:red"引号内写css属性和值 形式也是键值对，通过：连接，通过；分隔 需要尽量避免代码重复 优点：精准，明确.
CSS初体验
uvyou的博客
03-23 246
CSS初体验一、何为CSS二、选择器id选择器class选择器三、CSS的应用外部样式表四、常用的美化颜色尺寸对齐五、盒子模型六、定位staticrelativefixedabsolute七、溢出八、浮动九、不透明度十、组合选择器后代选择器：子选择器总结 一、何为CSS CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。 因此CSS能够将页面的内容进行美化，给浏览者更好的视觉感受和体验 二、选择器 选择器中分
前端-css语法，选择器
敦煌壁画的博客
11-04 105
day04 css初体验 CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮， 让页面布局更简单。 01-css语法规范与体验 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
前端初体验-day5
dai2905304084的博客
06-18 688
4.1相邻块元素垂直外边距的合并当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin.top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS初体验2
weixin_42551920的博客
07-08 557
css中元素分类 块状元素： div、ul、ol、p、h、table、form 特点：独占一行 可以设置宽高、如果不设置宽度、默认是父标签的100%宽度 行内元素： a、span、em、strong、label 特点：在一行内显示 不能设置宽高、默认的宽高为文本内容占据的宽高 行内块元素： input、img 特点：在一行内显示 可以设置宽高 display 1、块级元素：display：bloc...
前端初体验-day6
最新发布
dai2905304084的博客
06-19 694
如果上一个元素有浮动，则元素顶部会和上一个元素的顶部对齐:如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，不占位置。position-fixed:固定定位的元素会固定在页面的某个位置，不会随着页面的滚动而移动(脱离文档流)绝对定位是将元素依据最近的已经定位(绝对、固定或相对定位)的父元素(祖先)进行定位。浮动脱离标准流，不占位置，会影标准流。
CSS基础「四」浮动 \ 常见网页布局
imByte的博客
08-13 715
文章目录1. 浮动1.1 传统网页布局三种方式1.2 浮动用法初体验1.3 浮动语法格式1.4 浮动特性 1. 浮动 1.1 传统网页布局三种方式 网页布局的本质——用 CSS 来摆放盒子，把盒子摆放到相应位置。CSS 提供了三种传统布局方式（盒子的排列顺序） 普通流（标准流） 浮动 定位 标准流（普通流 / 文档流） 标准流是最基本的布局方式，就是标签按照规定好默认方式排列。我们前面学习的就是标准流，如下 块级元素会独占一行，从上向下顺序排列，如 <div>、<hr>
H5学习笔记 —— 一、响应式 和html5+css3初体验
乐乐呀的博客
03-25 6437
1.浏览器私有前缀 2.html5语义化标签 3.常用的css选择器 4.盒子模型 5.css定位
html-css-spotifyweb
03-25
6. **浮动和定位**：根据需要使用浮动和绝对定位来调整元素的位置，创建复杂的布局效果。 7. **阴影和边框**：应用阴影和边框效果，增加元素的立体感和层次感。 8. **过渡和动画**：添加过渡和动画效果，增强用户...
html-css-js-portfolio
05-04
同时，浮动（float）和定位（positioning）机制是布局设计中的关键概念，用于实现复杂的布局效果。 【JavaScript核心概念】 JavaScript是一种解释型的、动态类型的客户端脚本语言，常用于网页交互和动态内容的生成...
拼图(pintuer.com)-国产跨屏响应式前端框架-CSS框架
07-08
拼图前端框架在传统CSS框架的基本上，增加了HTML5、CSS3、JS等技术组合应用，应用于最新的浏览器技术，同时兼容较早的浏览器，新旧结合，承前启后，开发者只需把框架文件引入到项目中，就可以初现快速的共同开发，...
01css-homework：使用CSS进行的首次作业分配
02-13
在本项目"01css-homework"中，我们初次接触并应用了CSS（层叠样式表）这一关键的Web设计技术。CSS是用于描述HTML或XML（包括如SVG...这个初体验是构建强大CSS技能的基础，持续实践和探索，你将在Web设计领域游刃有余。
06-作业练习盒子模型
Sarrykiss学术天地
12-04 1551
表格的练习！有关padding与border很重要 第一个金牌练习 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>金牌top5</title> <style> *{ margin: 0px; padding: 0px; } t
17-CSS3 高级技巧 精灵图 字体图标 滑动门
Sarrykiss学术天地
12-13 975
CSS高级技巧CSS用户界面样式所谓的界面样式， 就是更改一些用户操作样式， 比如 更改用户的鼠标样式， 表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制，因此我们就放弃了。 防止表单域拖拽鼠标样式cursor设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。 cursor : default 小白 | pointer 小手 | move 移动 | text 文
16-CSS3重点定位和display
Sarrykiss学术天地
12-13 893
定位(position)如果，说浮动， 关键在一个 “浮” 字上面， 那么 我们的定位，关键在于一个 “位” 上。PS: 定位是我们CSS算是数一数二难点的了，但是，你务必要学好它，我们CSS离不开定位，特别是后面的js特效，天天和定位打交道。不要抵触它，反而要爱上它，它可以让我们工作更加轻松哦！
14-CSS3提高 重点部分 盒模型 浮动
Sarrykiss学术天地
12-11 482
CSS 三大特性层叠 继承 优先级 是我们学习CSS 必须掌握的三个特性。CSS层叠性所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。一般情况下，如果出现样式冲突，则会按
13-CSS3提高
Sarrykiss学术天地
12-11 476
1 font-weight:字体加粗 取值可以是：normal bold bolder lighter 100-900的整百值 字体连写：font： font-style font-weight font-size/line-height font-family注意：必须按照上面的顺序来写 ，前面两项可以省略。size 和family必须要有。 字体的颜色就是：color 2 选择器：
09-CSS定位补充 z-index，精灵图
Sarrykiss学术天地
12-06 409
一. 定位： 定位中的z-index:用的比较少 作用：设置页面中元素的层级关系。 取值： 正整数。 二标签的嵌套关系 元素分为：行内元素 块级元素 标签之间是不能随意嵌套的，如果一定要嵌套就要满足下面几条。 *1 行内元素只能包含行内元素。 2 块级元素可以包含行内元素，部分块级元素。 3 p，h都不能包含块级元素。* 精灵图 什么是精灵图呢？ 页面上较小
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值