提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  工具

当前栏目

CSS笔记(17)

笔记CSS 17
2023-06-13 09:12:59 时间

CSS三角的做法

有时候我们会看到网页中盒子边边有一些小三角,这种小三角是可以直接用CSS写出来的.

这个的方法特别神奇...如果设置一个没有宽度和高度的盒子,只设置边框,然后为每个边框设置不同的颜色,就会得到这样的图形

所以我们要想得到某一个三角形,只要将所有的边框都设置为透明的,只给我们想要的三角形所在的边框一个颜色. 

<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>CSS三角</title>
    <style>
        .box {
            width: 0;
            height: 0;
            line-height: 0;
            font-size: 0;
            border: 10px solid transparent;
            border-bottom-color: blue;
            margin: 100px auto;
        }
</style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

得到的就是这样的图形:

现在做一个案例 

<!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>CSS三角</title>
    <style>
        .jd {
            background-color: pink;
        }
        .jd {
            position: relative;
            width: 100px;
            height: 200px;
        }
        .tran {
            position: absolute;
            top: 10px;
            left: 99px;
            width: 0;
            height: 0;
            line-height: 0;
            font-size: 0;
            border: 10px solid transparent;
            border-left-color: pink;
        }
</style>
</head>
<body>
    <div class="box"></div>
    <div class="jd">
        <div class="tran"></div>
    </div>
</body>
</html>

CSS用户界面样式

什么是界面样式:所谓的界面样式,就是更改一些用户操作样式,以便提高更好的用户体验.

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

鼠标样式

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

属性值

描述

default

小白 默认

pointer

小手

move

移动

text

文本

not-allowed

禁止

不同效果如下:

pointer

轮廓线

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

input { outline: none; }

原本点击文本框后是这样的效果:

去掉轮廓后是这样的效果:

防止拖拽文本域

像我们的留言板,评论的地方,一般都是textarea文本域做的,但是默认的是可以拖拽改变大小的,但在实际中是不可能这么做的,所以我们要防止文本域的拖拽.

语法:

textarea { resize : none ;}

加上以后的效果:

vertical-align

CSS的 vertical-align属性使用场景: 经常用于设置图片或者表单(行内块元素)和文字垂直对齐.

官方解释: 用于设置一个元素的垂直对齐方式,但是它只针对行内元素或者行内块元素有效.

语法

vertical-align: baseline | top | middle | bottom

值

描述

baseline

默认.元素防止在父元素的基线上

top

把元素的顶端与行中最高元素的顶端对齐

middle

把元素放置在父元素的中部

bottom

把元素的顶端与行中最低的元素的顶端对齐

消除图片下的缝隙

我们会发现,在一个盒子里放一张图片,给盒子一个边框,按道理来说应该和图片一样大小,但是图片的下面总是有一条缝隙.

原因: 图片是和文字基线对齐的,所以下面的缝隙是给超出的文字留的位置,想要解决,只要让他们底线对齐就可以了

以下是解决方案:

学的好累啊,需要休息了...晚上去打打羽毛球

相关文章