HTML与CSS实战-CSDN博客

本文链接：https://blog.csdn.net/XIYECODE/article/details/103733051

html组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单样式与组件</title>
    <style>
        body {
            margin: 0;
        }
        body > div {
            margin: 0 auto;
            width: 30%;
            background-color: antiquewhite;
        }

        div > label {
            margin: 0 50%;
            font-size: 30px;
        }
        table {
            width: 100%;
            text-align: center;
        }
        textarea {
            width: 100%;
            background-color: black;
            padding: 0;
            border: 0;
            resize: none;
            color: aquamarine;
        }
    </style>
</head>
<body>
    <!-- 块级元素 div p ul -->
    <div>
        <div>
            <label>list</label>
            <p>ul father</p>
            <ul>
                <li>child one</li>
                <li>child two</li>
                <li>child three</li>
                <li>often use</li>
            </ul>

            <p>ol father</p>
            <ol>
                <li>child one</li>
                <li>child two</li>
                <li>child three</li>
                <li>no use</li>
            </ol>

            <dl>
                <dt>dl father</dt>
                <dd>child one</dd>
                <dd>child two</dd>
                <dd>child three</dd>
            </dl>
        </div>

        <div>
            <label>table</label>
            <table align="center" border="1" cellspacing="0" height="300">
                <tr>
                    <th>姓名</th>
                    <th>联系</th>
                    <th colspan="2">地址</th>
                    <!--<th></th>-->
                </tr>
                <tr>
                    <td>暴龙王</td>
                    <td>110</td>
                    <td rowspan="3">传奇白凤</td>
                    <td>南天门</td>
                </tr>
                <tr>
                    <td>风晴雪</td>
                    <td>120</td>
                    <!--<td></td>-->
                    <td>白香谷</td>
                </tr>
                <tr>
                    <td>雪洛圣</td>
                    <td>119</td>
                    <!--<td></td>-->
                    <td>冰封域</td>
                </tr>
            </table>
        </div>

        <div>
            <label>form</label>
            <form action="#">
                <p>
                    <label for="username">username:</label>
                    <input type="text" id="username" name="un">
                </p>
                <p>
                    <label for="password">password:</label>
                    <input type="password" id="password" name="pwd">
                </p>
                <p>
                    <label for="sex">sex:</label>
                    <input type="radio" id="sex" name="sex" >man &nbsp;&nbsp;
                    <input type="radio" name="sex">woman
                </p>
                <p>
                    <label for="checkbox">checkbox:</label>
                    <input type="checkbox" id="checkbox" name="cb">
                </p>
                <p>
                    <label for="file">file:</label>
                    <input type="file" id="file" name="f">
                </p>
                <p>
                    <label for="textarea">textarea:</label>
                    <textarea name="ta" id="textarea"  rows="10"></textarea>
                </p>
                <p>
                    <input type="button" value="btn"> &nbsp;&nbsp;
                    <input type="reset" value="reset"> &nbsp;&nbsp;
                    <input type="submit" value="submit">
                </p>
            </form>
        </div>


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

CSS选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
    <style>
        /*
          交集选择器
            由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格
        */
        p.blue {
            color: blue;
        }

        /*
          并集选择器
            （CSS选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类 选择器id选择器等），都可以作为并集选择器的一部分
        */
        #fc {
            font-size: 30px;
        }

        .orange, #fc {
            color: orange;
        }

        /*
          后代选择器
            又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后 面，中间用空格分隔
        */
        .f p {
            color: pink;
            font-size: 20px;
        }
        /*
          子元素选择器
            只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一 个 > 进行连接
        */
        .f > p {
            font-family: 楷体;
        }

        /*
          属性选择器
            选取标签带有某些特殊属性的选择器 标签名[class^=]
        */
        .font20 {
            font-size: 20px;
        }
        .font30 {
            font-size: 30px;
        }
        div[class^=font] {
            color: blueviolet;
        }

        div[class*=middle] {
            text-align: center;
        }
        span[class$=end] {
            color: brown;
        }
        /*
          伪元素选择器
            1. E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
            2. E::first-line 文本第一行；
            3. E::selection 可改变 选中文本 的样式；
            4、E::before和E::after。在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。
            注：:" 与 "::" 区别在于区分伪类和伪元素。在高版本浏览器下 E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理
        */
        .w::first-letter {
            font-size: 10px;
            color: red;
        }
        .w::first-line {
            font-style: italic;
        }
        .w::selection {
            color: green;
        }
        .w p::before {
            content: '段落';
        }
        .w p::after {
            content: '结束';
        }
        /*
            链接伪类选择器
                :link  只对a标签有效 // 未访问的链接
                :visited  只对a标签有效 // 已访问的链接
                :hover  几乎对所有标签有效 // 鼠标移动到链接上
                :active  几乎对所有标签有效 // 选定的链接
            结构(位置)伪类选择器
                :first-child :选取属于其父元素的首个子元素的指定选择器
                :last-child :选取属于其父元素的最后一个子元素的指定选择器
                :nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型
                :nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元 素开始计数。 n 可以是数字、关键词或公式
        */
        p:hover {
            background-color: bisque;
        }
    </style>
</head>
<body>
    <div>
        <p class="blue">交集选择器</p>
    </div>
    <div>
        <p class="orange">颜色</p>
        <span id="fc">颜色字体</span>
    </div>
    <div class="f">
        <div>
            <p>后代子类</p>
        </div>
        <p>直接子类</p>
    </div>
    <div>
        <div class="font20">字体20</div>
        <div class="font30">字体30</div>
        <div class="text-middle-content">文字居中</div>
        <span class="f-end">识别end结尾</span>
        <span class="t-end">分分分</span>
        <div  class="text-middle-footer">底部文字居中</div>
    </div>
    <div class="w">
        <p>第一行</p>
        <p>第二行</p>
        普通文本，选中的颜色为绿色
    </div>
</body>
</html>

CSS背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS背景</title>
    <style>
        div {
            text-align: center;
            font-size: 30px;
            font-family: 隶书;
        }
        div:first-child {
            text-shadow: 140px 36px 0px #050, -223px 108px 1px #FE1;
        }
        div:last-child {
            text-shadow: -188px -44px 2px #F5E, 149px 71px 3px #008;
        }
        /*
          复合写法
            background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
          抽离写法：
            background-color: rgba(0, 0, 0, 0.5);
            background-image: url("");
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: center;
        */
        /*
            background-size
                cover：自适应宽度和高度，布满全屏为止
                contain：只是赢比例，直到宽度或高度之一布满
                注意：background-size要位于background之后，否则无效
        */
        p {

        }
    </style>
</head>
<body>
    <!-- 行内元素(标签)无法设置长宽，可以将其变成块（或者行内块）就可以设置 -->
    <!--
        CSS三大特性
            层叠性：读取css样式遵循从上而下，后面覆盖前面相同的样式
            继承性：继承父元素的样式（注：仅继承部分基本样式：text‐，font‐，line‐这些元素 开头的和color属性都可以继承）
            优先级（特殊性）：无穷大（!important） > 内联样式 > id选择器样式 > 类选择器样式 > 标签选择器样式
    -->
    <div>凸型字</div>
    <div>凹形字</div>

</body>
</html>

CSS定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS定位</title>
    <style>
        * {
            margin: 0;
            height: 0;
        }
        div {
            margin: 10px auto;
            background-color: mediumpurple;
        }
        /*
          背景图片布满指定盒子
        */
        .logo {
            width: 35%;
            height: 600px;
            border: 1px solid red;
            background: url("img/xq.jpg") no-repeat;
            /*background-size位于background之后才生效*/
            background-size: 100% 100%;
        }
        .logo:hover {
            background: url("img/q.jpg") no-repeat;
            /*background-size位于background之后才生效*/
            background-size: 100% 100%;
        }
        /*
          盒子模型box‐sizing：
            content-box(默认)：盒子大小可以内部元素被撑开。即盒内元素变大，当盒子无法容纳时，盒子就会扩大
            border-box：盒子大小固定，改变盒子内的元素大小。比如盒内元素增大，当盒子无法容纳时，河内元素反而被缩小
        */
        .box {
            overflow: hidden;
            width: 900px;
            height: 250px;
            background-color: bisque;
        }
        .content-box {
            width: 300px;
            height: 200px;
            box-sizing: content-box;
            padding: 100px;
            float: left;

            background-color: pink;
        }
        .border-box {
            width: 300px;
            height: 200px;
            box-sizing: border-box;
            padding: 100px;
            float: left;

            background-color: orange;
        }
        .inner-box {
            width: 200px;
            height: 100px;
            margin: 0 auto;
        }

        /*
          box‐shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影;
        */
        .shadow {
            width: 100px;
            height: 100px;
            /*background-color: mediumpurple;*/
            box-shadow: 30px 30px 10px 10px rgba(128, 123, 214, 0.3);
        }

        /*
          标准流（文档流）：就是按照从上到下、从左到右的顺序
        */

        /*
          浮动float
            子元素浮动，偏离父元素，可以设置父元素“overflow: hidden;”，使子元素回归“原来轨道”
            BFC：https://blog.csdn.net/bangbanggangan/article/details/81088547、https://www.jianshu.com/p/580b28878630
        */
        .f-float {
            overflow: hidden;

            width: 60%;
            height: 300px;
            background: none;
        }
        .left {
            width: 20%;
            float: left;
            height: 300px;
        }
        .right {
            width: 78%;
            float: right;
            height: 300px;
        }
        /*
          定位
            静态定位（默认）偏移量怎么修改都无效
            相对定位：以自身的原来位置进行偏移
            绝对定位：脱离标准流。相对与浏览器或者最近的父元素（父元素是相对定位），即“子绝父相”
            固定定位：脱离标准流。以浏览器为参考点
        */
    </style>
</head>
<body>
    <div class="logo"></div>
    <div class="box">
        <div class="content-box">
            <div class="inner-box"></div>
        </div>
        <div class="border-box">
            <div class="inner-box"></div>
        </div>
    </div>
    <div class="shadow"></div>
    <br>
    <div class="f-float">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

bootstrap用例