妙味课堂 - 前端初窥 -

最新推荐文章于 2020-12-21 14:36:25 发布

赵羽珩

最新推荐文章于 2020-12-21 14:36:25 发布

阅读量691

点赞数

本文链接：https://blog.csdn.net/weixin_41170223/article/details/78757755

版权

Ps技术 - 切图测量

测量：F8、信息面板

切图（抠图）

command + c 复制
command + n 新建同等大小纸张
command + d 粘贴
command + s 保存

css样式 - background背景

css允许应用纯色作为背景、也允许使用背景图片创建相当复杂的效果

body {
            background-attachment: fixed;/* 背景图片固定 */
            background-color: red;
            background-image: url(WechatIMG194.jpeg);
            background-repeat: no-repeat;
            background-position: center top;
            background-size: 1000px 1000px;
            background: linear-gradient(to bottom, rgba(0,0,0,0) , rgba(0, 0, 0, 0.8) 80%);
            /* 最后一个是颜色渐变 */
}

”background”の颜色渐变

复合属性的写法

默认值
background: transparent none repeat scroll 0% 0%;

默认值(中文意思)
background: 透明/ 无背景图片 / 平铺 / 背景图片随文本滚动或者固定/ 位于元素左上角

举个栗子：
background:rgba(11, 10, 9, 1) url(../img/dot2.main.bg.png) no-repeat scroll center top /cover;
/* cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。 */

css样式 - border边框

用 border 边框写一个三角形

        #wrap {
            border: 9px solid;
            border-color: transparent #00c0ff transparent transparent;
        }

css样式 - font字体

        div{
            font-weight: bold;         /* 文字加粗 */
            font-style: italic;        /* 文字倾斜 */
            font-size: 26px;           /* 文字大小、字体偶数 */
            font-family: "微软雅黑";    /* 字体 */
            line-height: 48px;         /* 行高 */

            /* 复合写法 */
            font: bold italic 26px/48px "微软雅黑";
        }

        p {
            font-size: 12px;
            transform: scale(0.75);
        }

css样式 - text文本

p {
        color: blue;
        text-align: right; /* 把文本排列到右边 */
        text-indent: 2em;  /* 2字符 = 2个文字 */
        text-decoration: underline;  /* '下划线' の文本修饰 */

        letter-spacing: 10px;   /* 字母间距 10px  */
        word-spacing: 20px;     /* 单词间距 20px  （以空格为解析单位） */

        word-break: break-all;   /* 自动换行 */

        text-shadow: 10px 10px 3px red; /* 向文本添加阴影 水平阴影 垂直阴影 模糊的距离 阴影的颜色  */
}

省略号…

<!DOCTYPE html>
<html lang="en">
<head>
    <style media="screen">
        div{
            width: 100px;
            text-overflow: ellipsis;     /* 显示省略号 */
            white-space: nowrap;         /* 文本不换行 */
            overflow: hidden;           /* 超出隐藏 */
        }
    </style>
</head>
<body>
    <div>
        欢迎大家来到妙味课堂
    </div>
</body>
</html>

css样式 - a:hover链接

链接的四种状态：

a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻

css样式 -列表

li {
        list-style-type:square;  /* 表项标记类型 取值：disc 点 | circle 圆圈 | square方块 |  */
        list-style-image: url(WechatIMG194.jpeg);  /* 图像来替换列表项标记 */
}