pink前端--小知识点汇总 练手小案例

最新推荐文章于 2024-04-17 06:45:52 发布
最新推荐文章于 2024-04-17 06:45:52 发布
阅读量326 收藏 3
点赞数 5
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64882756/article/details/137200823
版权

一  用子绝夫相定位模式 ： 当鼠标经过时 出现遮罩层

1.1

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .tudou {
            /* 相对定位 */
            position: relative;
            width: 402px;
            height: 220px;
            margin: 30px auto;
        }
        .tudou img {
            width: 100%;
            height: 100%;
        }
        .mask {
            /* 隐藏遮罩层 */
            display: none;
            /* 绝对定位 */
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,.3) url(/前端小案例总和/img/title_sprite.png) no-repeat center;
        }
/* 当我们鼠标经过父盒子时 让里面遮罩层显示 */
      .tudou:hover .mask{
        display: block;
      }

      
    </style>
</head>
<body>
    
    <div class="tudou">
    <div class="mask"></div>
    <img src="img/tudou.png" alt="">
    </div>
</body>
</html>

效果

 

二  精灵图的用法

将多个小背景图片整合到一个大照片中 使用backgroung -position :x,y;来实现定位不同图片位置

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 60px;
            height: 60px;
            background-color: pink;
            margin: 100px auto;
            background: url(img/sprites.png) no-repeat -182px 0 ;
        }

        .box2 {
            width: 27px;
            height: 25px;
            margin: 200px auto;
             background: url(img/sprites.png) no-repeat -155px -106px;
        }

    </style>
</head>
<body>
    <div class="box1">

    </div>
    <div class="box2"></div>
</body>
</html>
<!-- 将多个小背景图片整合到一个大照片中
     使用backgroung -position :x,y;来实现定位
     不同图片位置
    字体图标 轻量级 -->

三  css三角形制作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            
            width: 0;
            height: 0;
          
            border-top: 20px solid #b9d8ab;
            border-right:20px solid #d3d8ab;
            border-left: 20px solid palegoldenrod;
            border-bottom: 20px solid paleturquoise;

        }
        .box2 {
            width: 0;
            height: 0;
            margin: 100px auto;
            border: 10px solid transparent;
            border-bottom-color: red;
        }
        .box {
           position: relative;
            width: 120px;
            height: 249px;
            background-color: pink;

        }
        .box span {
            position: absolute;
            right: 15px;
            top: -9px;
            height: 0;
            width: 0;
            line-height: 0;
            font-size: 0;
            border: 5px solid transparent;
            border-bottom-color: pink;

        }
        .box3 {
            position: relative;
            height: 200px;
            width: 400px;
            background-color: #d3d8ab;
        }
        .box3 span{
            position: absolute;
            top: 90px;
            right: -40px;
            height: 0;
            width: 0;
            line-height: 0;
            font-size: 0;
            border: 20px solid transparent;
            border-left-color:#d3d8ab;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box">
        <span></span>
    </div>
    <div class="box3">
        <span></span>
    </div>
</body>
</html>

效果

 

四  解决图片底侧空白缝隙问题 vertical-align: middle;

行内块元素会和文字的基线对齐 

  使行内或行内块元素垂直居中 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 400px;
            height: 300px;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <!-- 行内块元素会和文字的基线对齐 -->
    <!-- 使行内或行内块元素垂直居中 -->
    <img src="img/erji.jpg" alt="">耳机耳机
    <!-- 解决图片底侧空白缝隙 问题-->
    
</body>
</html>

效果：使文字 居于图片中间

 

五  省略号代替未显示文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 150px;
            height: 80px;
            background-color: pink;
            margin: 100px auto;
            /* white-space默认值是normal 表示文字显示不开自动换行 */
            /* 1.强制文字在同一行 */
            white-space: nowrap;
            /* 2.隐藏溢出文字 */
            overflow: hidden;
            /* 3.溢出文字用省略号代替 */
            text-overflow: ellipsis;
        }
        .box1 {
            width: 150px;
            height: 65px;
            background-color: pink;
            margin: 200px auto;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }
    </style>
</head>
<body>
    <!-- 强制转化单行文字 -->
    <div class="box">
  啥也不说，但是此处省略一万字呀
    </div>
    <div class="box1">
啥也不说，但是此处省略一万字呀啥也不说，但是此处省略一万字呀啥也不说，
但是此处省略一万啥也不说，
    </div>
</body>
</html>

效果

 

六  margin负值巧妙应用 

当鼠标经过盒子时 边框均匀变色

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      ul li {
        position: relative;
        float: left;
        list-style: none;
        width: 150px;
        height: 200px;
        border: 1px solid red;
        margin-left: -1px;
      }
      /* 盒子没定位 鼠标经过添加相对定位 */
      /* ul li:hover {
            position: relative;
            border: 1px solid blue;
        }*/
      /* 盒子一般是有定位的 */
      ul li:hover {
        z-index: 1;
        border: 1px solid blue;
      }
    </style>
  </head>
  <body>
    <div>
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </body>
</html>

效果 鼠标经过在后一个盒子 盒子变色

 

七 行内块元素应用 写页码

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        /* 使盒子整体居中 */
        text-align: center;
        margin: 20px auto;
      }
      .box a {
        display: inline-block;
        width: 36px;
        height: 36px;
        text-align: center;
        line-height: 36px;
        background-color: #f7f7f7;
        border: 1px solid #ccc;
        color: #333;
        text-decoration: none;
      }

      .box .prev {
        width: 80px;
      }
      .box .courrent {
        background-color: #fff;
        border: #fff;
      }
      .box .text {
        height: 32px;
        width: 34px;
        border: 1px solid #ccc;
      }
      .box .anniu {
        width: 45px;
        height: 36px;
        border: 1px solid #ccc;
        font-size: 14px;
        color: #333;
        outline: none;
      }
    </style>
  </head>
  <body>
    <!-- 对于行内块元素 给父盒子text-align:center;
        就可以给里面的所有子盒子水平居中 -->
    <div class="box">
      <a href="#" class="prev">&lt;&lt;上一页</a>
      <a href="#">1</a>
      <a href="#" class="courrent">2</a>
      <a href="#">3</a>
      <a href="#">4</a>
      <a href="#">5</a>
      <a href="#" class="courrent">...</a>
      <a href="#" class="prev">下一页>></a>
      到第
      <input type="text" class="text" />
      页
      <button class="anniu">确定</button>
    </div>
  </body>
</html>

效果

 

八 京东css三角样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 0;
            height: 0;
            border-top: 100px solid #fff;
            border-right: 50px solid #eb1313;
            border-bottom: 0 solid #d4bcaa;
            border-left: 0px solid #dabae6;
        }
        .box2 {
            width: 0;
            height: 0;
            border-color: transparent red transparent transparent;
            border-style: solid;
            border-width: 22px 10px 0 0;
        }

        .box3 {
            
            width: 160px;
            height: 24px;
            text-align: center;
            line-height: 24px;
            border: 1px solid red;
            margin: 100px auto;
            
        }
        .low {
            position: relative;
            float: left;
            width: 90px;
            height: 100%;
            font-weight: 700;
            color: #fff;
            background-color: red;
        }

        .low 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;

        }
        .high {

            font-size: 12px;
            color: gray;
            
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
    <div class="box2"></div>
    <div class="box3">
        <span class="low">$1190
            <i></i>
        </span>
        <span class="high">$2990</span>
    </div>
</body>
</html>

效果

 

九 淘宝焦点图

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .tb-promo {
        position: relative;
        width: 600px;
        height: 250px;
        margin: 100px auto;
      }
      .tb-promo img {
        width: 100%;
        height: 100%;
      }
      .right {
        right: 0;
      }
      .left {
        left: 0;
      }
      /* 也可以用并集选择器 减少代码 */
      /* 如果一个盒子既有left也有right 只会执行左侧按钮 */
      .left,
      .right {
        position: absolute;
        height: 20px;
        width: 20px;
        text-decoration: none;
        line-height: 20px;
        top: 50%;
        margin-top: -15px;
        background: rgba(0, 0, 0, 0.3);
        text-align: center;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="tb-promo">
      <img src="img/taobao.png" alt="" />
      <a href="#" class="left"><</a>
      <a href="#" class="right">></a>
    </div>
  </body>
</html>

效果

 

十 过度  进度条效果

 谁改变给谁加 是让子盒子变化 所有给子盒子加 。时间后面一定要加上时间单位s 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        height: 20px;
        width: 250px;
        border: 2px solid red;
        border-radius: 9px;
        padding: 0.5px;
      }
      .du {
        height: 100%;
        width: 50%;
        background-color: red;
        transition: all 0.8s;
        /* 谁改变给谁加 是让子盒子变化 所有给子盒子加 */
        /* 时间后面一定要加上时间单位s */
      }
      /* 让鼠标经过父盒子使 子盒子进度变化 */
      .box:hover .du {
        width: 100%;
        transition: all 0.8;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="du"></div>
    </div>
  </body>
</html>

效果 鼠标在盒子上 进度条逐渐增加

 

白柳的信徒
关注
微信小程序-pinkDiary
03-29
wechat-pinkDiary微信小程序-以粉粉日记APP为参考做的一个日记本。首先，开发微信小程序你需要准备好这些工具：下载微信开发者工具，附上地址：https://mp.weixin.qq.com/debu...下载好后就可以进行开发了，不过呢，...
前端Javascript第一天理论：初识 JavaScript
m0_46597922的博客
04-20 478
1. 初识 JavaScript 1.1 JavaScript 是什么 布兰登·艾奇（Brendan Eich，1961年～）。 神奇的大哥用10天完成 JavaScript 设计。 最初命名为 LiveScript，后来在与 Sun 合作之后将其改名为 JavaScript。 JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语...
【整理+总结】pink老师前端三件套之JavaScript 基础（三）对象与内置对象
weixin_42771853的博客
02-22 600
变量：单独声明赋值，单独存在对象里面的变量称为属性，不需要声明，用来描述该对象的特征函数：单独存在的，通过==“函数名()”==的方式就可以调用对象里面的函数称为方法，方法不需要声明，使用==“对象.方法名()”==的方式就可以调用，方法用来描述该对象的行为和功能。
跟着pink老师前端入门教程-day06
zyx210603的博客
01-19 1156
十二、CSS 的三大特性CSS有三个非常重要的三个特性：层叠性、继承性、优先级12.1 层叠性相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式，层叠主要解决样式冲突层叠性原则：样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式样式不冲突，不会层叠CSS层叠性口诀：长江后浪推前浪，前浪死在沙滩上12.2 继承性CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号，简单理解：子承父业恰当地使用继承可以简化代码，降低CSS样式的复杂性。
pink老师前端
xwjjdedkdjcjej的博客
03-26 140
.
JavaScript 学习笔记 超详细（b站pink老师）_pink老师最新版js笔记
最新发布
2401_84140442的博客
04-17 1978
文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API。即DOM是浏览器提供的一套专门用来操作网页内容的功能。**DOM作用：**开发网页内容特效和实现用户交互标签天生自带的属性，比如class、id、title等, 可以直接使用点语法操作。比如： disabled、checked、 selected在html5中推出来了专门的data-自定义属性，在标签上一律以data-开头，在DOM对象上一律以dataset对象方式获取。
品优购实战案例-pink老师版
01-02
在这个项目中，我们将探讨以下几个关键知识点： 1. **前端技术栈**：电商网站的前端界面是用户与平台交互的窗口，通常会涉及到HTML、CSS和JavaScript等基础技术。在此案例中，可能会使用React或Vue.js这样的现代...
Apink-LUV.mp4
04-20
Apink-LUV.mp4
pinknoise_pink-noise百度_粉红噪声_色噪声
09-11
标题中的"pinknoise_pink-noise百度"可能是指这个压缩包包含了与粉红噪声相关的资源或工具，可能是用于生成、分析或者研究粉红噪声的软件或数据文件。"粉红噪声_色噪声"进一步强调了主题，色噪声通常指的是除了粉红...
pink老师htmlcss学习 - 学成在线案例
03-26
"pink老师htmlcss学习 - 学成在线案例"这个资源包显然是一份用于教学或自我提升的学习材料，其中包含了一系列实例，帮助用户深入理解并掌握HTML和CSS的应用。 首先，`style.css`是CSS（层叠样式表）文件，它是用来...
跟着pink老师前端入门教程-day10
zyx210603的博客
01-26 821
通过盒子模型，清楚知道大部分html标签是一个盒子通过CSS浮动、定位，可以让每个盒子排列成网页一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己专门的用法1. 标准流可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局2. 浮动可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局3. 定位定位最大的特点是由层叠的概念，就是可以让多个盒子前后叠压来显示，如果元素自由在某个盒子内移动就用定位布局二十四、元素的显示与隐藏。
跟着pink老师前端入门教程-day11
zyx210603的博客
01-27 1233
界面样式：更改一些用户操作样式，以便提高更好的用户体验（更改用户的鼠标样式、表单轮廓、防止表单域拖拽）
【前端基础-Pink老师】
weixin_62958408的博客
01-06 343
o target指定页面的打开方式，_self为默认值，_blank为在新窗口中打开方式。o 下载链接：地址链接的是文件.EXE或者是.ZIP文件，会下载这个文件。o cellpadding：像素值，单元格边沿与内容的空白，默认1px。表单控件：定义各种表单元素，允许用户在表单中输入或者选择的内容控件。o cellspacing：像素值，单元格之间的空白，默认2px。• checked首次加载时，选中按钮，单选按钮和复选框可以设置。o href是必须写的，用于指定链接的url地址，必须属性。
【笔记整理】pink老师JavaScript前端课程---JS进阶
Pluto_nb的博客
08-16 480
【笔记整理】pink老师JavaScript前端课程---JS进阶
跟着pink老师前端入门教程（JavaScript）-day05
zyx210603的博客
02-21 1313
while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到。某些情况，也可以把表达式理解为表述语句，因为他是在计算结果，但不是必须的成分（例如continue语句）语句：语句不一定有值，所以比如alert()、for 和 break 等语句就不能被用于赋值。循环的本质就是以某个变量为起始值，然后不断产生变化量，慢慢靠近终止条件的过程。若不满足则向下判断条件2，满足条件2执行代码2，其他不执行。
跟着pink老师前端入门教程-day12
zyx210603的博客
01-28 951
1. 音频标签和视频标签使用方式基本一致2. 浏览器支持情况不同3. 谷歌浏览器把音频和视频自动播放禁止了4.可以把视频标签添加muted属性来静音播放视频，音频不可以（可以通过JavaScript解决）5. 视频标签是重点，经常设置自动播放，不使用controls控件、循环和设置大小属性。
Pink老师前端笔记-第四天
w1404273025的博客
04-16 504
Pink老师前端笔记-第四天 css第二天 一、emmet语法 1、简介 ​ Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法。 ​ 快速生成HTML结构语法 ​ 快速生成CSS样式语法 2、快速生成HTML结构语法 生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成 如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div 如果有父子级关系
【整理+总结】pink老师前端三件套之CSS笔记（四）HTML和CSS补充知识
weixin_42771853的博客
12-20 2700
随着技术的发展进步，为适应不断增长的网页设计需求，HTML5和CSS3新增了一些特性。此文介绍CSS的一些高阶特性，以及HTML5和CSS3的新增特性
HTML的第一天，介绍下网页组成及相关知识，大家一起学习
weixin_51612633的博客
10-30 570
HTML第一天 我们接下来是进行的网页开发网页的相关概念: 什么是网页? 什么是HTML? 网页的形成? 什么是网页： 1.网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。 2.网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。 网页的组成： 1.网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。 [外链图片转存
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值