CSS 用户界面样式及布局技巧

最新推荐文章于 2023-12-13 09:15:32 发布

少年张狂

最新推荐文章于 2023-12-13 09:15:32 发布

阅读量747

点赞数

本文链接：https://blog.csdn.net/weixin_41909678/article/details/118434569

版权

界面样式

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

更改用户的鼠标样式
表单轮廓
防止表单域拖拽

鼠标样式 cursor

li {
    cursor: pointer;
}

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状

属性值	描述
default	小白默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

配合 js 使用

轮廓线 outline

给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框

input {
    outline: none;
}

防止拖拽文本域 resize

textarea {
    outline: none;
    resize: none;
}

/*文本域最好写在一行，要不文本域内容会有缩进*/
<textarea name="" id="" cols="30" rows="10"></textarea>

vertical-align 属性应用

使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐

官方解释：用于设置一个元素的垂直对齐方式，但是这只对行内元素或者行内块元素有效

img {
    vertical-align: baseline;
}

值	描述
baseline	默认。元素放置在父元素的基线上
top	把元素的顶端与行中最高元素的顶端对齐
middle	把此元素放置在父元素的中部
bottom	把元素的顶端与行中最低的元素的顶端对齐

<div class="user">\
    <!--让图片和文字垂直居中-->
    <img src="images/user.png" alt="" style="vertical-align: middle">
    qq-lilei
</div>

解决图片底部默认空白缝隙的问题

bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐

主要解决方法有两种：

给图片添加 vertical-align: middle | top | bottom 等（只要不是 baseline 即可）。提倡使用
将 img 转换为块级元素 display: block;

溢出的文字省略号显示

单行文本溢出显示省略号

必须满足三个条件：

div {
    width: 200px;
    height: 100px;
    border: 3px solid darkcyan;
    /*1. 先强制一行内显示文本*/
    white-space: nowrap;  /*默认 normal 自动换行*/
    /*2. 超出的部分隐藏*/
    overflow: hidden;
    /*3. 文字用省略号替代超出的部分*/
    text-overflow: ellipsis;
}

多行文本溢出显示省略号

多行文本溢出显示省略号，有较大的兼容性问题，适合于 webKit 浏览器或移动端（移动端大部分是 webKit 内核）

.duohangslh {
    overflow: hidden;
    text-overflow: ellipsis;
    /*弹性伸缩盒子模型显示*/
    display: -webkit-box;
    /*限制在一个块元素显示的文本的行数*/
    -webkit-line-clamp: 2;
    /*设置或检索伸缩盒对象的子元素的排列方式*/
    -webkit-box-orient: vertical;
}

<div class="duohangslh">别后音杳魂梦茫，未悔相识，纵天各一方。</div>

更推荐后端人员实现，后端人员可以设置显示多少字，操作更简单

常见布局技巧

margin 负值的运用
文字围绕浮动元素
行内块的巧妙运用
CSS 三角强化

margin 负值的运用

li {
    float: left;
    list-style: none;
    width: 100px;
    height: 100px;
    border: 2px solid darkcyan;
    margin-left: -1px;
}

1. 让每个盒子 margin 往左侧移动 -1px 正好压住相邻盒子的边框

2. 鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位，则加相对定位（保留位置）；如果有定位，则加 z-index ）

ul li:hover {
    position: relative;
    border: 2px solid orange;
}

文字围绕浮动元素

巧妙运用浮动元素不会压住文字的特性

        <div class="box">
            <div class="box1">
                <img src="images/huojian.jpg" alt="">
                <p>美媒推荐火箭关注三小将,两大3D侧翼入围,16+5双能卫又上榜</p>
            </div>
            <div class="box2">
                <img src="images/huren.jpg" alt="">
                <p>太阳保罗双喜临门，联盟重罚贝弗利，湖人交易19+5控卫方案出炉</p>
            </div>
        </div>

* {
    margin: 0;
    padding: 0;
}
.box {
    margin: 0 auto;
    width: 628px;
    height: 220px;
}
.box1,
.box2 {
    width: 628px;
    height: 105px;
    padding: 10px;
}
.box img {
    float: left;
    margin-right: 10px;

}
.box p {
    font: 800 25px '黑体';
}

效果图