HTML5+CSS3基础（day16）

最新推荐文章于 2024-08-30 15:33:13 发布

澈如冬雪^

最新推荐文章于 2024-08-30 15:33:13 发布

阅读量67

点赞数

文章标签： css3 html5 css

本文链接：https://blog.csdn.net/m0_52372037/article/details/128738821

版权

文章详细介绍了CSS中的三角形制作方法，包括京东效果的实现；用户界面样式如鼠标样式、去除表单轮廓和防止文本域拖拽；vertical-align属性的应用，如图片和文字的垂直居中对齐；以及文字溢出时的省略号显示，包括单行和多行的情况。此外，还探讨了布局技巧，如margin负值的运用和文字围绕浮动元素的布局方法。

摘要由CSDN通过智能技术生成

一、CSS三角

1.CSS三角的做法

2.CSS三角应用-京东效果

示例

<title>CSS三角制作</title>
    <style>
        .box1 {
            width: 0;
            height: 0;
            /* border: 10px solid pink; */
            border-top: 10px solid pink;
            border-right: 10px solid red;
            border-bottom: 10px solid blue;
            border-left: 10px solid green;
        }

        .box2 {
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-left-color: pink;
            margin: 100px auto;
        }

        .jd {
            position: relative;
            width: 120px;
            height: 249px;
            background-color: pink;
        }

        .jd span {
            position: absolute;
            right: 15px;
            /* border 5px */
            top: -10px;
            width: 0;
            height: 0;
            /* 为了照顾兼容性 */
            line-height: 0;
            font-size: 0;
            border: 5px solid transparent;
            border-bottom-color: pink;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="jd">
        <span></span>
    </div>
</body>

二、CSS用户界面样式

1.用户界面-鼠标样式

示例

<title>用户界面样式-鼠标样式</title>
</head>

<body>
    <ul>
        <li style="cursor: default;">我是默认的小白鼠标样式</li>
        <li style="cursor: pointer;">我是鼠标小手样式</li>
        <li style="cursor: move;">我是鼠标移动样式</li>
        <li style="cursor: text;">我是鼠标文本样式</li>
        <li style="cursor: not-allowed;">我是鼠标禁止样式</li>
    </ul>
</body>

2.用户界面-取消表单轮廓和防止拖拽文本域

在这里插入图片描述

示例

<title>用户界面样式-表单轮廓和防止拖拽文本域</title>
    <style>
        input,
        textarea {
            /* 取消表单轮廓 */
            outline: none;
        }

        textarea {
            /* 防止拖拽文本域 */
            resize: none;
        }
    </style>
</head>

<body>
    <!-- 1. 取消表单轮廓 -->
    <input type="text">
    <!-- 2. 防止拖拽文本域 -->
    <!-- 文本域分行写会有一片空白区域 -->
    <textarea name="" id="" cols="30" rows="10"></textarea>
</body>

三、vertical-align属性应用

1.vertical-align实现行内块和文字垂直居中对齐

示例

<title>利用vertical-align实现图片文字垂直居中对齐</title>
    <style>
        img {
            /* vertical-align: bottom; */
            /* 最常用的： 让图片和文字垂直居中 */
            vertical-align: middle;
            /* vertical-align: top; */
        }

        textarea {
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <!-- 图片和文字默认是基线对齐 -->
    <img src="imgs/111.jpg" alt=""> yellow peach全新口感，精心秘制
    <br>
    <textarea name="" id="" cols="30" rows="10"></textarea> 请您留言
</body>

2.图片底侧空白缝隙解决方案

示例

 <title>图片底侧空白缝隙解决方案</title>
    <style>
        div {
            border: 2px solid red;
        }

        img {
            /* vertical-align: middle; */
            /* vertical-align: bottom; */
            /* 因为它是块级元素 独占一行 所以我们把文字删掉就能看出没有缝隙 */
            display: block;
        }
    </style>
</head>

<body>
    <div>
        <!-- 图片有空白缝隙 因为图片默认与文字基线对齐 -->
        <img src="imgs/111.jpg" alt="">yelow peach
    </div>
</body>

四、溢出的文字省略号显示

1.单行文字溢出省略号显示

示例

<title>单行文本溢出显示省略号</title>
    <style>
        div {
            width: 150px;
            height: 80px;
            background-color: pink;
            margin: 100px auto;
            /* 这个单词的意思是如果文字显示不开自动换行 */
            /* white-space: normal; */
            /* 1. 这个单词的意思是如果文字显示不开也必须强制一行内显示 */
            white-space: nowrap;
            /* 2. 溢出的部分隐藏起来 */
            overflow: hidden;
            /* 3. 文字溢出的时候用省略号来显示 */
            text-overflow: ellipsis;
        }
    </style>
</head>

<body>
    <div>
        啥也不说，此处省略一万字
    </div>
</body>

2.多行文字溢出省略号显示

在这里插入图片描述

示例

<title>多行文本溢出显示省略号</title>
    <style>
        div {
            width: 150px;
            /* height: 80px; */
            height: 45px;
            background-color: pink;
            margin: 100px auto;
            overflow: hidden;
            text-overflow: ellipsis;
            /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 限制在一个块元素显示的文本的行数 */
            /* -webkit-line-clamp: 3; */
            -webkit-line-clamp: 2;
            /* 设置或检索伸缩盒对象的子元素的排列方式 */
            -webkit-box-orient: vertical;
        }
    </style>
</head>

<body>
    <div>
        啥也不说，此处省略一万字，啥也不说，此处省略一万字
    </div>
</body>

五、常见布局技巧

1.布局技巧-margin负值巧妙运用

在这里插入图片描述

示例

（1）

<title>margin负值的巧妙运用（上）</title>
    <style>
        ul li {
            float: left;
            list-style: none;
            width: 150px;
            height: 200px;
            border: 1px solid red;
            margin-left: -1px;
        }
    </style>
</head>

<body>
    <!-- ul>li{$}*5 -->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>

（2）

<title>margin负值的巧妙运行（下）</title>
    <style>
        ul li {
            /* 2. 如果盒子有定位 */
            position: relative;
            float: left;
            list-style: none;
            width: 150px;
            height: 200px;
            border: 1px solid red;
            margin-left: -1px;
        }

        /* ul li:hover {
            1. 如果盒子没有定位，则鼠标经过添加相对定位即可
            绝对定位固定定位不行 绝对定位不占有位置
            相对定位会压住其他的标准流和浮动的盒子
            position: relative;
            border: 1px solid blue;
        } */
        ul li:hover {
            /* 2. 如果li都有定位，则利用 z-index提高层级 */
            /* 别的小li都没有z-index 默认是auto  */
            z-index: 1;
            border: 1px solid blue;
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>

2.布局技巧-文字围绕浮动元素巧妙运用

示例

  <title>文字围绕浮动元素的妙用</title>
    <style>
        /* 清除p的内外边距 */
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 300px;
            height: 70px;
            background-color: pink;
            margin: 0 auto;
            padding: 5px;
        }

        .pic {
            float: left;
            width: 120px;
            height: 70px;
            margin-right: 5px;
        }

        .pic img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="pic">
            <img src="imgs/111.jpg" alt="">
        </div>
        <p>大马丁在卡塔尔世界杯上力压布努等人拿到了金手套奖</p>
    </div>
</body>

3.布局技巧-行内块的巧妙运用

示例

 <title>行内块的巧妙运用</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            text-align: center;
        }

        /* 权重 11 */
        .box a {
            display: inline-block;
            width: 36px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 36px;
            text-decoration: none;
            color: #333;
            font-size: 14px;
        }

        /* 权重 10 */
        /* .prev,
        .next {
            width: 85px;
        } */
        .box .prev,
        .box .next {
            width: 85px;
        }

        .box .current,
        .box .elp {
            background-color: #fff;
            border: none;
        }

        .box input {
            height: 36px;
            width: 45px;
            border: 1px solid #ccc;
            outline: none;
        }

        .box button {
            width: 60px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- a{$}*8 -->
        <a href="#" class="prev">&lt;&lt;上一页</a>
        <a href="#" class="current">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#" class="elp">...</a>
        <a href="#" class="next">&gt;&gt;下一页</a>
        到第
        <input type="text">
        页
        <button>确定</button>
    </div>
</body>

4.布局技巧-CSS三角巧妙运用

示例

<title>CSS三角强化的巧妙运用</title>
    <style>
        .box1 {
            width: 0;
            height: 0;
            /* border-top: 50px solid pink; */
            /* 把上边框宽度调大 */
            /* border-top: 100px solid transparent;
            border-right: 50px solid skyblue; */
            /* border-bottom: 50px solid blue; */
            /* 左边和下边的边框宽度设置为0 */
            /* border-bottom: 0 solid blue; */
            /* border-left: 50px solid green; */
            /* border-left: 0 solid green; */
            /* 1. 只保留右边的边框有颜色 */
            border-color: transparent red transparent transparent;
            /* 2. 样式都是solid */
            border-style: solid;
            /* 3. 上边框宽度要大， 右边框 宽度稍小， 其余的边框该为 0 */
            border-width: 100px 50px 0 0;
        }

        .price {
            width: 160px;
            height: 24px;
            line-height: 24px;
            border: 1px solid red;
            margin: 0 auto;
        }

        .miaosha {
            position: relative;
            float: left;
            width: 90px;
            height: 100%;
            background-color: red;
            text-align: center;
            color: #fff;
            font-weight: 700;
            margin-right: 8px;

        }

        .miaosha i {
            position: absolute;
            right: 0;
            top: 0;
            width: 0;
            height: 0;
            border-color: transparent #fff transparent transparent;
            border-style: solid;
            border-width: 24px 10px 0 0;
        }

        .origin {
            font-size: 12px;
            color: gray;
            text-decoration: line-through;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="price">
        <span class="miaosha">
            ￥1650
            <i></i>
        </span>
        <span class="origin">￥5650</span>
    </div>
</body>

澈如冬雪^

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5+CSS3基础（day16）

height;;;;.box2width;height;border;;margin;width;height;;right;top;width;height;/* 为了照顾兼容性 */;font-size;border;;
复制链接

扫一扫