CSS学习记录

最新推荐文章于 2023-12-27 10:11:11 发布

我会蒸馒头

最新推荐文章于 2023-12-27 10:11:11 发布

阅读量137

点赞数

分类专栏：前端文章标签： css 学习 html

本文链接：https://blog.csdn.net/GIAAKK/article/details/127447099

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、基础

1.1、引入图片

<img src="1.webp" alt="美丽的小姐姐" height="100px" title="小姐姐">

1.2、引入链接

<a href="https://www.baidu.com">百度地址</a>

1.3、有序列表/无序列表

<p>列表标签之有序列表</p>
<ol type="I">
    <li>苹果</li>
    <li>橘子</li>
    <li>香蕉</li>
    <li>菠萝</li>
</ol>

<ol>
    <li>水果
        <ol type="A">
            <li>苹果</li>
            <li>橘子</li>
            <li>香蕉</li>
            <li>菠萝</li>
        </ol>
    </li >
    <li>蔬菜</li >
    <li>肉类</li >

</ol>

<p>列表标签之无序列表</p>
<ul>
    <li>嘿嘿</li>
    <li>哈哈 </li>
</ul>
<ul type="square">
    <li>嘿嘿</li>
    <li>哈哈 </li>
</ul>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

1.4、表格

<table border="2px" width="400px">
        <tr>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
</table>

<span>合并单元格6+7(水平合并colspan) 15+20(竖直合并rowspan)  </span>
    <table border="1px" height="400px">
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
            <td>单元格4</td>
            <td>单元格5</td>
        </tr>
        <tr>
            <td colspan="2">单元格6+7</td>
<!--
            <td>单元格7</td>
-->
            <td>单元格8</td>
            <td>单元格9</td>
            <td>单元格10 </td>
        </tr>
        <tr>
            <td>单元格11</td>
            <td>单元格12</td>
            <td>单元格13</td>
            <td>单元格14</td>
            <td rowspan="2">单元格15+20</td>
        </tr>
        <tr>
            <td>单元格16</td>
            <td>单元格17</td>
            <td>单元格18</td>
            <td>单元格19</td>
            <!--<td>单元格20 </td>-->
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table>

1.5、表单

<form>
        <input type="text">
        <input type="submit">
</form>
<form>
    用户名 :<input type="text" name="username">
    <br>
    密码 :<input type="password" name="password">
    <input type="submit" value="登录">
</form>

1.6、选择器

1.6.1、总体

<style>
    *{
      color: brown;
    }
</style>

<body>
    <p>hello</p>
    <h3>你好</h3>
</body>

1.6.2、元素

<style>
    p{
      color: #007612 ;
    }
</style>

<body>
    <p>zish bfadhbaha</p>
</body>

表格

<style>
    table,td{
      border: 1px solid;
      width:300px;
      height: 100px;
    }

    table{
      border-collapse: collapse;
    }

    td{
      text-align: center;
      vertical-align: bottom;
      background-color: #001167;
      color: #00ffff;
    }
</style>

<table>
  <tr>
    <td>单元格</td>
    <td>单元格</td>
    <td>单元格</td>
  </tr>
  <tr>
    <td>单元格</td>
    <td>单元格</td>
    <td>单元格</td>
  </tr>
  <tr>
    <td>单元格</td>
    <td>单元格</td>
    <td>单元格</td>
  </tr>
</table>

1.6.3、四类选择器

<style>
      /*ul 下的所有li标签*/
      ul li{
        color: brown;   //红色
      }

      /*div下的p标签 就一层 在下面的不算了 */
      div>p{
        color: cyan;        //青色
      }

      /*h3相邻的p标签*/
      h3+p{
        color: chartreuse;        //绿色
      }

      /*h3下面的所有子元素*/
      h3~p{
        text-align: center;
      }
</style>

    <ul>
      <li>列表1</li>
      <li>列表2</li>
      <div>
        <ol>
          <li>列表4</li>
          <li>列表5</li>
        </ol>
      </div>
    </ul>


    <div>
      <p>div-p</p>
      <ul>
        <li>
          <p>div-ul-li-p</p>
        </li>
      </ul>
    </div>

    <h3>h3</h3>
    <p>h3+p</p>
    <p>h3+p+p</p>

1.7、盒子模型

<style>
    div{
      width: 100px;
      height: 100px;
      background-color: #007612; /*绿色*/
      padding: 20px 10px;/*内边距 第一个值代表上下 第二个值代表左右*/
      border: 5px solid brown;    /*红色*/
      margin: 10px;/*是透明的*/
    }
</style>

<div>内容</div>

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</div>

<style>
    .container{
      width: 500px;
      height: 500px;
      background-color: #555;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .box1{
      width: 100px;
      height: 100px;
      background-color: red;
      flex:2;  /*设置了这个属性宽度或者高度都不在生效*/
    }
/*flex 是占了总高度 的2份*/
    .box2{
      width: 100px;
      height: 100px;
      background-color: green;
      flex: 2;
    }
    .box3{
      width: 100px;
      height: 100px;
      background-color: blue;
      flex: 1;
    }
  </style>

1.8、文件流

float浮动--增加一个浮层来放置内容--浮动以后使文件脱离了文档流--浮动只有左右浮动--没有上下浮动

<style>
        .box {
            width: 200px;
            height: 200px;
            background-color: cyan;
            float: right; /*浮动*/
        }

        .container {
            width: 400px;
            height: 400px;
            background-color: #555555;
        }

        img {
            width: 300px;
            float: left; /*去除了图片的空隙*/
        }
</style>



<div>
    <div class="box"></div>
    <div class="container"></div>
</div>

<div>
    <img src="../1.webp" alt="">
    <img src="../4.webp" alt="">
</div>

        .row-box1, .row-box2, .row-box3 {
            width: 300px;
            height: 300px;
            float: left;
        }

        .row-box1 {
            background-color: cyan;
        }

        .row-box2 {
            background-color: green;
        }

        .row-box3 {
            background-color: brown;
        }


<div class="row-box1"></div>
<div class="row-box2"></div>
<div class="row-box3"></div>

<ul>
  <li>导航1</li>
  <li>导航2</li>
  <li>导航3</li>
</ul>

原样式

加入浮动

        ul > li {
            float: left;
            margin: 0px 40px;
        }

清楚浮动的副作用

  <!--清除浮动的副作用-->
<div class="container">

  <div class="box1"></div>
  <div class="box1"></div>
  <div class="box1"></div>
  <div class="text"></div>

</div>

<style>
    .container{
      width: 500px;
     /* height: 500px;*/
      background-color: #888;
      /*overflow: hidden;
      clear: both;*/
    }
    .container::after{
      content: "";
      display: block;
      clear: both;
    }
    .box1{
      width: 100px;
      height: 100px;
      background-color: cyan;
      margin: 5px;
      float: left;
    }
    .text{
      width: 100px;
      height: 100px;
      background-color: rebeccapurple;
      clear: both;
    }
 </style>