8.13笔记

最新推荐文章于 2024-09-16 21:30:36 发布

aaaaaaaallllll653

最新推荐文章于 2024-09-16 21:30:36 发布

阅读量187

点赞数 8

文章标签：笔记 javascript 前端

本文链接：https://blog.csdn.net/aaaaaaaallllll/article/details/141171399

版权

列表样式：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            border: 1px solid #f00;
        }
        li {
            border: 1px solid #f00; 
             list-style-type: none; 
            list-style-position: inside;
        } 
  </style>
</head>
<body>
    <ul>
        <li>小白</li>
        <li>小黑</li>
        <li>大白</li>
        <li>大黑</li>
   </ul>
</body>
</html>

表格样式：

<!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>
        table,tr,th,td {
                border: 1px solid #f00; 
                 border-bottom: 1px solid #f00; 
                 width: 400px;
                height: 100px;
            }
            table {
                table-layout: auto;
                border-collapse: collapse; 
             } 
             tr {
                text-align: center;
                vertical-align: middle;
            }
            tr:hover {
                color: #f00;
            } 
    </style>
</head>
<body>
      <table>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>小白</td>
            <td>20</td>
        </tr>
        <tr>
            <td>小黑</td>
            <td>23</td>
        </tr>
   </table>
</body>
</html>

display和overflow；

display:table-cell 转化成表格内的单元格（可进行文本的垂直方向居中）

display:none 隐藏(不占据空间)

overflow:scroll 超出添加滚动条（水平方向垂直方向都会有）

overflow：auto 滚动条（哪个方向超出就在哪个方向添加）

盒模型：

padding:文本与边框之间的间距

margin:盒子与盒子之间的间距

padding和margin后面四个值的顺序是：上-右-下-左

如果是一个值代表上下左右一样

两个值里第一个值代表上下，第二个值代表左右

三个值里第一个值代表上，第二个值代表左右，第三个值代表下

圆角border-radius

outline:去除input外边框线

box-sizing:content-box：把怪异盒子变为标准盒子

border-box:把标准盒子变为怪异盒子

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
    div {
            float: left;
        }
        .left {
            width: 150px;
            height: 300px;
            background-color: #000;
             border-top-left-radius: 150px;
            border-bottom-left-radius: 150px; 
            display: inline-block;
        }
        .right {
            width: 150px;
            height: 300px;
            background-color: #ffd;
             border-top-right-radius: 150px;
            border-bottom-right-radius: 150px; 
            display: inline-block;
        }
        .white {
            width: 75px;
            height: 150px;
            background-color: #ffd;
            border-top-left-radius: 75px;
            border-bottom-left-radius:75px;
            margin: 0 75px;
        }
        .black {
            width: 75px;
            height: 150px;
            background-color: #000;
            border-top-right-radius: 75px;
            border-bottom-right-radius:75px;
            margin: 150px 0;
        }
        .sblack {
            width: 40px;
            height: 40px;
            background-color: #000;
            border-radius: 50%;
            margin: 55px 35px;
        }
        .swhite {
            width: 40px;
            height: 40px;
            background-color: #ffd;
            border-radius: 50%;
            margin: 55px 0;
        }
    </style>
</head>
<body>
    <div class="left">
        <div class="white">
            <div class="sblack"></div>
        </div>
    </div>
    <div class="right">
        <div class="black">
            <div class="swhite"></div>
        </div>
    </div>
</body>
</html>