HTML与CSS实战-优快云博客

本文链接：https://blog.youkuaiyun.com/wuwei_19981001/article/details/127303808

一、列表a标签的使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: 黑体;
            text-decoration: none;
            margin: 0 auto;
        }

        #box {
            width: 410px;
            height: 492px;
        }

        .box1 {
            width: 410px;
            height: 50px;
            background-color: rgb(233, 24, 90);
            padding: 16px;
        }

        h2 {
            line-height: 50px;
            color: #fff;
        }

        #box>p {
            width: 410px;
            height: 46px;
            line-height: 46px;
            border-bottom: 1px dashed rgb(169, 166, 166);
            padding: 8px;
        }

        a>span {
            display: inline-block;
            width: 30px;
            height: 30px;
            line-height: 30px;
            border-radius: 50%;
            background-color: rgb(55, 59, 60);
            vertical-align: middle;
            color: #fff;
            text-align: center;
        }

        p>a {
            color: rgb(118, 118, 118);
        }

        a:hover>span {
            background-color: rgb(235, 47, 106);
        }

        a:hover {
            color: rgb(235, 47, 106);
        }
    </style>
</head>

<body>
    <div id="box">
        <div class="box1">
            <h2>大家都喜欢买的美容品</h2>
        </div>
        <p><a href="#"><span>1</span> 雅诗兰黛即时修护眼部精华霜15ml</a> </p>
        <p><a href="#"><span>2</span> 伊丽莎白雅顿显效复合活肤霜 75ml</a> </p>
        <p><a href="#"><span>3</span> OLAY玉兰油多效修护霜 50g</a> </p>
        <p><a href="#"><span>4</span> 巨型一号丝瓜水320ML</a></p>
        <p><a href="#"><span>5</span> 倩碧保湿洁肤水2号 200ml</a> </p>
        <p><a href="#"><span>6</span> 比度克细肤淡印霜 30g</a> </p>
        <p><a href="#"><span>7</span> 兰芝 (LANEIGE)夜间修护锁水面膜 80ml</a> </p>
        <p><a href="#"><span>8</span> SK-II护肤精华露 215ml</a></p>
        <p><a href="#"><span>9</span> 欧莱雅青春密码活颜精华肌底液</a> </p>
    </div>
</body>

</html>

利用p标签包裹起来，放a span标签。在style里面设置a:hover 当鼠标经过时就会变成红色。

效果如图所示：

大家喜欢买的美容品在写style内容时要格式化文档，这样别人会看的很清晰。

二、box-shadow ,bold,a:hover的标签使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #wrap>img {
            width: 130px;
            border-radius: 10px;
            margin-top: 10px;
        }

        #wrap {
            width: 348px;
            height: 150px;
            border:1px solid transparent;
            padding-left: 10px;
        }

        #wrap:hover {
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
            border-radius: 20px;
            border: 1px solid orange;
        }

        /* 外部大盒子+hover浮动+图片 */
        #neirong {
            display: inline-block;
            width: 186px;
            vertical-align: top;
        }
        .p1{
            margin: 10px 0px;
            font-size: 16px;
            color: #333;
        }
        .p2{
            margin-bottom: 30px;
            font-size: 12px;
            border: 1px solid orange;
            width: 70px;
            border-radius: 5px;
            text-align: center;
            padding: 3px 0;
        }
        .p3{
            font-size: 22px;
            color: orange;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <img src="./07.淘宝卡片/img.png" alt="">
        <div id="neirong">
            <p class="p1">接孔但流韩韩井如找快吾衣乐才,韩如贤土。</p>
            <p class="p2">送运费险</p>
            <p class="p3">¥910</p>
        </div>
    </div>
</body>

</html>

设置边框圆角：border-radius

在盒子wrap设置border 以防hover伪元素在鼠标经过时移动

三、行内元素、块元素、行内块元素

行内元素：span、strong、em等

块元素：h1~h6 最常用的是h1~h3 一个网页只有一个h1

行内元素：不会独占一行，不能设置宽高

行内元素可以转换为行内块元素，可以设置宽高

块元素独占一行，因此在某些页面中，独占一行，一般使用行元素转换为行内块元素。

四、ul与li标签

ul/li*n
<ul>
    <li></li>
    <li></li>
    <li></li>...
    <li></li>
</ul>

五、注释按键与取消注释按键

注释按键
CTRL+/
style:/* */
html: <!--  -->
取消注释按键
CTRL+K+U

六、一键生成HTML框架

英文状态下：shift+! 按住enter键生成

七、id与class一键生成

.box enter

#box enter