Css基础班笔记

最新推荐文章于 2024-05-19 13:00:49 发布

豆沙包(干饭王)

最新推荐文章于 2024-05-19 13:00:49 发布

阅读量287

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/linziwang/article/details/120379162

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、css用户节面样式
- 1.1鼠标样式
1.2表单轮廓ontline和防止拖拽文本域resize
二、vertical-align实现图片文字垂直居中对齐
三、单行文字溢出显示省略号
- - 1.1多行文字溢出显示省略号
四、常见的布局技巧
五、三角强化

前言

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

提示：以下是本篇文章正文内容，下面案例可供参考

一、css用户节面样式

所谓的界面样式，就是更改一些用户的操作样式，以便提高更好的用户体验。

1.1鼠标样式

更改用户的鼠标样式
表单轮廓
防止表单域拖拽
代码如下（示例）：

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

1.2表单轮廓ontline和防止拖拽文本域resize

表单轮廓线指得是：表单获取光标后表单的文本框会变颜色

2. .文本域拖拽指得是
在这里插入图片描述

 <style>
        input,textarea{
            /* 取消表单轮廓 */
            outline: none;
            
        }
        textarea{
            /* 防止拖拽文本域  resize:调整大小 */
            resize: none;    
        }
        /* input:focus{
             background-color: skyblue; 
            color: skyblue;
            border-color: pink;
        }  */
    </style>
<body>
    <!-- 1、取消表单轮廓 -->
    <input type="text">
    <!-- 2、防止拖拽文本域 -->
    <textarea name="" id="" cols="30" rows="10"></textarea>
</body>

二、vertical-align实现图片文字垂直居中对齐

在这里插入图片描述

<style>
        img{
            /* vertical 只能用于行 或者行内块元素 */
            /* vertical-align: bottom;    顶部对齐 */
            /* vertical-align: top;    顶部对齐 */
                vertical-align: middle;   /* 中间对齐 */
        }
    </style>
<body>
     <img src="images/tb_2.jpg" alt="">  pink老师真nice
</body>

三、单行文字溢出显示省略号

  <style>
        div{
            width: 150px;
            height: 80px;
            background-color: pink;
            margin: 100px auto;
            white-space: nowrap;   /* 强制一行显示   默认是：normal(自动换行)*/
            overflow: hidden;   /*超出的部分隐藏 */
            text-overflow: ellipsis;   /* 超出的部分用省略号代替*/
        }
    </style>
<body>
    <div>
        啥也不说了，此处省略一万字
    </div>

1.1多行文字溢出显示省略号

  <style>
        div{
            width: 150px;
            height: 45px;
            background-color: pink;
            margin: 100px auto;
            overflow: hidden;   /*超出的部分隐藏 */
            text-overflow: ellipsis;   /* 超出的部分用省略号代替*/
            display: -webkit-box; /*限制在一个块元素显示的文本行数  */
            -webkit-line-clamp:2 ;
            -webkit-box-orient: vertical;  /* 设置或检索伸缩盒对象的子元素的排列方式 */
        }
    </style>
<body>
    <div>
        啥也不说了，此处省略一万字  啥也不说了啊
    </div>
   
</body>

四、常见的布局技巧

1. margin的应用

<style>
        ul li{
            float: left;
            list-style: none;
            width: 150px;
            height: 200px;
            border: 1px solid red;
            margin-left: -1px;
        }
    </style>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>

1.1 鼠标经过边框变颜色，利用定位会压住其他盒子的原理

<style>
        ul li:hover{
          /* position: relative;  如果没有定位 添加相对定位即可 */
          z-index: 0;  
          border: 1px solid skyblue;
        }
    </style>

2.文字围绕浮动元素

<style>
        div{
            width: 300px;
            height: 70px;
            margin: 0 auto;
            background-color: pink;
        }
        .pic{
            float: left;
            margin-right: 10px;
            width: 130px;
            height: 65px;
        }
        .pic img{
            width: 100%;
        }
    </style>
<body>
    <div class="box">
        <div class="pic">
            <img src="images/tb_2.jpg" alt="">
        </div>
        <p>一定要加油鸭豆沙包  一定要加油鸭豆沙包 一定要加油鸭豆沙包</p>
    </div>
</body>

3. 行内块元素巧妙运用

只要给父盒子添加水平居中他的子盒子也会水平居中的

<style>
.box{
            text-align: center;
        }
 </style>

五、三角强化

实现类似效果

实现类似效果

<style>
        .box1{
            width: 0;
            height: 0;
            /* border-top: 100px solid transparent;  把上边框宽度调大 
             border-right: 50px solid skyblue; 
             border-bottom: 0 solid blue;      左边和下边的边框设置为0 
             border-left: 0 solid green; */
             border-color: transparent skyblue transparent transparent;  /*只保留右边的代码*/
             border-style: solid;
             border-width: 100px 50px 0 0; /* 上边边框宽度要大，右边框 宽度稍小 其余的边框为0 */
        }
    </style>

豆沙包(干饭王)

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Css基础班笔记

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、css用户节面样式1.1鼠标样式1.2表单轮廓ontline和防止拖拽文本域resize二、vertical-align实现图片文字垂直居中对齐三、单行文字溢出显示省略号1.1多行文字溢出显示省略号四、常见的布局技巧五、三角强化前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文
复制链接

扫一扫