跟着pink老师学习第二天的学习总结（1）

news2024/11/21 2:21:16

1.CSS初始化

<style>
    /* 清除浏览器默认格式 */
    *{margin:0;padding:0}
    /* 斜体文字不倾斜 */
    em,i{font-style:normal}
    /* 去掉li的小圆点 */
    li{list-style:none}

    img{
        /* 照顾低版本浏览器,如果图片外面包含链接,会出现边框 */
        border:0;
        /* 取消图片底部与边框产生的缝隙 */
        vertical-align:middle}
        /* 鼠标样式,小手 */
    button{cursor:pointer}
    /* 取消下划线更改默认颜色 */
    a{color:#666;text-decoration:none}
    /* 鼠标经过变颜色 */
    a:hover{color:#c81623}
    button,input{font-family:Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif}
    body{
        /* 文字放大会产生锯齿,这个是抗锯齿的 */
        -webkit-font-smoothing:antialiased;
        background-color:#fff;font:12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
        color:#666}
    .hide,.none{display:none}
    /* 清除浮动 */
    .clearfix:after{visibility:hidden;clear:both;display:block;content:".";height:0;}
    .clearfix{*zoom:1}
</style>

上面的只是京东的初始化，全部的有位博主总结的很好：
CSS初始化

2.文字环绕浮动

在这里插入图片描述
类似这种的，一般来写估计就是左右两个div，加上左浮动，右边还得多写一个span，单独更改一下最下面文字格式。
但是文字环绕浮动，就是用图片直接把文字“挤”到别的空白区域，可以少些几行代码：

<style>
    div{
        width: 200px;
        height: 100px;
        border:1px solid pink;
        margin:auto;
    }
   div img{
        float: left;
        width: 100px;
        margin-right:15px;
    }
    div span{
        display: block;
        margin:15px;
    }
</style>
<body>
    <!-- 注意,文字的做左间距只能通过图片的右间距去调节 -->
    <div><img src="img/1 (5).jpg"><span>(猫猫) 这是一张可爱的猫猫头图片</span></div>
</body>

在这里插入图片描述
3.三角强化应用 — 案例：京东价格标签
在这里插入图片描述
视频比较早了，京东网站这个标签一时间我还找不到了

就是这个小三角比较难搞：

<style>
    .box1{
        width: 0;
        height: 0;
        /* border-top:100px solid transparent;
        border-right:50px solid skyblue ;
        border-bottom: 0 solid blue;
        border-left:0 solid green; */

        /* 简写： */
        border-color: transparent red transparent transparent;
        border-style:solid;
        border-width:100px 50px 0 0;
    }
    .price{
        width: 160px;
        height: 24px;
        border:1px solid red;
        margin:0 auto;
    }
    .ms{
        position: relative;
        width: 90px;height: 100%;
        float: left;
    text-align: center;
        background-color: red;
        color:#fff;
        font-weight: 700;
       margin-right: 10px;
    }
.ms 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;
}
.os{
    font-size: 12px;
    color:gray;
    text-decoration: line-through;
}
</style>
<body>
    <div class="box1"></div>
        <div class="price">
            <span class="ms">1650
                <i></i>
            </span>
            <span class="os">￥6666</span>

    </div>

</body>

4.H5新增的属性选择器
在这里插入图片描述
在这里插入图片描述
上面这五种比较常用
举个例子哦：

    <p>属性选择：</p>
    <input type="text" value="请输入用户名"> <br/>
    <input type="text"><br/>
    <input type="text"><br/>
    <input type="text" value="请输入用户名"> <br/>

/* 如果属性唯一,可快速选出 */
input[value]{
    color:red;
    font-size: 14px;
}

在这里插入图片描述

  <p>属性值选择：</p>
    <input type="text"><br/>
    <input type="password">

/* 注意,这种选择器必须前后紧挨着input[ */
input[type=text]{
    color:pink;
}

在这里插入图片描述

 <P>属性值开头相同选择ico：</P>
    <div class="icon1">小图标1</div>
    <div class="icon2">小图标2</div>
    <div class="icon3">小图标3</div>
    <div class="icon4">小图标4</div>
    <div class="ifcon4">打酱油的小图标</div>

    <p>属性值结尾相同选择find：</p>
    <div class="_find">结尾</div>
    <div class="_find">结尾</div>
    <div class="_find">结尾</div>
    <div class="_find">结尾</div>
    <div class="_finding">我不是</div>

    <p>属性值任意部分相同选择ad:</p>
    <div class="fad_">相同</div>
    <div class="ad_g">相同</div>
    <div class="had_">相同</div>
    <div class="ad_j">相同</div>
    <div class="akd_">不相同</div>

div[class^=icon]{
    color:rgb(233, 195, 6);
}
div[class$=find]{
    color:aqua;
}
div[class*=ad]{
    color:yellow;
}

在这里插入图片描述
5.nth-child和nth-of-type的区别
全网最详细的nth-child和:nth-of-type的区别(特别是nth-of-type)
下面的看不懂，可以去上面的链接去看，那个博主写的更清晰


<p>我来了</p>
        <input type="text" value="1快来啊"><br/>
        <input type="text" value="2快来啊"><br/>
        <input type="text" value="3快来啊"><br/>
        <input type="text" value="4快来啊"><br/>
        <input type="text" value="5快来啊"><br/>
<p>你来啊</p>

  p:nth-child(1){
        color:yellow;
    }
    input:nth-of-type(5){
        color:aqua
    }

在这里插入图片描述
现在这种是正常的。

  p:nth-child(2){
        color:yellow;
    }
    p:nth-of-type(2){
        font-size: 40px;
    }

尝试同时选中第二个p标签，但是，很明显，child失败了：
在这里插入图片描述

然后，我尝试选中第二个input，但是实际上选中的是第一个：

  input:nth-child(2){
        color:yellow;
    }

在这里插入图片描述
再次尝试：

 input:nth-child(2){
        color:yellow;
    }
    input:nth-child(3){
        color:yellow;
    } 
    input:nth-child(4){
        color:yellow;
    }

这次选中了234，但是只有12被改变：
在这里插入图片描述
通过f12，我搞明白了，child(4)对应的是第2个，chid(2)对应的是第一个。

在这里插入图片描述
因为p标签对应的是chid(1) br标签对应的是child(3)
chid会把不同标签一起排序，按照序列去找：
在这里插入图片描述
然后再看前面限制的范围：input，因此，只有12变颜色
相对来说，nth-of-type要更加精确，更加好用一点：

 input:nth-of-type(5){
        color:aqua
    }
    p:nth-of-type(1){
        color:aqua;
    }

在这里插入图片描述
对比：实现相同效果，用nth-chid会更麻烦：

 p:nth-child(1){
        color:yellow;
    }
 input:nth-child(10){
        color:yellow;
    }

在这里插入图片描述

nth-child(n) : 匹配父元素中的第 n 个子元素，元素类型没有限制。
nth-of-type(n) : 匹配同类型中的第n个同级兄弟元素。
n可以是一个数字，一个关键字，或者一个公式，比如：nth-child(odd) 奇数 ,nth-child(even) 偶数。
nth-child和nth-of-type的不同之处就是查找元素的方式不同。前者是查找兄弟元素中某个绝对位置的元素，后者是查找同类型元素中某个绝对位置的元素。相同之处是，两者都是找到元素之后再与前面的选择符进行匹配，这里的匹配方式是一样的。

:nth-child和:nth-of-type都是找对应元素父元素内子元素(仅包含当前父元素子元素不包含子元素的子元素),然后区别在于:nth-child是找出包含对应元素父元素内所有的子元素然后再去找到对应位置的元素后再去匹配选择器,nth-of-type是找出包含对应元素父元素内的子元素,然后根据样式选择器找到的元素的tag,把父元素内子元素所有对应tag种类分别取出排列后,分别比对对应的位置然后匹配选择器

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/110264.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

element plus + vue3表单第一次数据未清空的bug问题解决

element plus + vue3表单第一次数据未清空的bug问题解决

使用框架&#xff1a;element Plus vue3 场景描述&#xff1a; 场景一&#xff1a; 表单的添加和修改功能&#xff0c;公用同一个弹框&#xff0c;点击修改后&#xff0c;点击添加表单显示的是上次修改的数据。 场景二&#xff1a; 点击修改&#xff0c;数据回显到表单&…
阅读更多...
谁能主宰智能驾驶赛道？「芯片+感知」是第一主角

谁能主宰智能驾驶赛道？「芯片+感知」是第一主角

得「感知」者&#xff0c;得天下。 这句话依然适用于当今的自动驾驶赛道&#xff0c;实际上从Mobileye开始&#xff0c;到特斯拉&#xff0c;都是如此。尤其是智能化变革的快速演进&#xff0c;对于下游车企来说&#xff0c;具备规控的自研能力&#xff08;更多考虑到系统的体验…
阅读更多...
【栈与队列】——栈的实现及应用

【栈与队列】——栈的实现及应用

目录概念栈的实现初始化栈入栈出栈获取栈顶元素获取栈中有效元素个数判断栈是否为空栈的销毁栈的应用概念 栈 栈是一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈顶&#xff0c;另一端称为栈底栈中的数据元素遵…
阅读更多...
python+pyqt5+mysql设计图书管理系统（5）- 普通用户图书管理界面

python+pyqt5+mysql设计图书管理系统（5）- 普通用户图书管理界面

前面已经实现了图书管理系统中的一部分功能，今天就在完整最后一点内容，使用pyqt5设计出detail_stu.ui文档，然后使用PyUIC转为detail_stu.py文档，就得到了设计好的界面文档的代码。然后再逐一实现界面上对应的功能。 设计的界面如下: 1.菜单栏选项功能实现 菜单栏-登录选…
阅读更多...
物流批量查询，如何筛选出物流发往时间大于12小时的单号

物流批量查询，如何筛选出物流发往时间大于12小时的单号

小编分享一个方法批量查询物流信息&#xff0c;并分析揽收到发往的时间差大于12小时的单号&#xff0c;有需要的朋友可以接着往下看&#xff0c;希望能给大家带来帮助。 第一步&#xff0c;运行【快递批量查询高手】在主界面中的任意空白处【右键】选择添加单号。 第二步&#…
阅读更多...
box-shadow阴影的妙用-笔记

box-shadow阴影的妙用-笔记

box-shadow: 0 0 4px 0 #ff0000; 注意阴影的这个颜色要和边框的颜色一致&#xff0c;就能出这种效果
阅读更多...
【车载开发系列】UDS诊断---链接控制服务（$0x87）

【车载开发系列】UDS诊断---链接控制服务（$0x87）

【车载开发系列】UDS诊断—链接控制服务&#xff08;$0x87&#xff09; 诊断---链接控制服务&#xff08;$0x87&#xff09;【车载开发系列】UDS诊断---链接控制服务&#xff08;$0x87&#xff09;一.概念定义二.应用场景三.报文格式1&#xff09;报文请求2&#xff09;肯定响应…
阅读更多...
【LeetCode每日一题】——152.乘积最大子数组

【LeetCode每日一题】——152.乘积最大子数组

文章目录一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【解题思路】七【题目提示】八【时间频度】九【代码实现】十【提交结果】一【题目类别】 动态规划 二【题目难度】 中等 三【题目编号】 152.乘积最大子数组 四【题目描述】 给你一个…
阅读更多...
文件操作：文件的使用打开关闭与读写（顺序读写）

文件操作：文件的使用打开关闭与读写（顺序读写）

1.为什么使用文件 我们前面学习结构体时&#xff0c;写了通讯录的程序&#xff0c;当通讯录运行起来的时候&#xff0c;可以给通讯录中增加、删除数据&#xff0c;此时数据是存放在内存中&#xff0c;当程序退出的时候&#xff0c;通讯录中的数据自然就不存在了&#xff0c;等下…
阅读更多...
软件测试：sql注入·依赖基本sql语句

软件测试：sql注入·依赖基本sql语句

查询语句 目的&#xff1a;回顾数据库查询条件语句&#xff08;手工sql注入操作基础知识&#xff09; 语句&#xff1a; 1. 查询所有字段&#xff1a;select * from users; 2. 查询指定字段&#xff1a; select user,password from users; 3. 条件查询&#xff1a;…
阅读更多...
Pytorch~ONNX

Pytorch~ONNX

pytorch转onnx其实也就是python转的 ,之前有个帖子了讲的怎么操作,这个就是在说说为什么这么做~~~ &#xff08;1&#xff09;Pytorch转ONNX的意义 一般来说转ONNX只是一个手段&#xff0c;在之后得到ONNX模型后还需要再将它做转换&#xff0c;比如转换到TensorRT上完成部署&…
阅读更多...
韩顺平java-枚举和注解异常包装类

韩顺平java-枚举和注解异常包装类

文章目录11章 枚举和注解11.1枚举11.2注解12章 异常12.1 异常类型12.2异常处理1&#xff09;try - catch - finally2&#xff09;throws12.3 自定义异常13章 包装类wrapper13.1包装类13.2 String——不可变字符序列13.2 StringBuffer——可变字符序列13.3 StringBuilder13.4 Ma…
阅读更多...
【深入浅出Spring原理及实战】「开发实战系列」SpringSecurity技术实战之通过注解表达式控制方法权限

【深入浅出Spring原理及实战】「开发实战系列」SpringSecurity技术实战之通过注解表达式控制方法权限

Spring Security权限控制机制 Spring Security中可以通过表达式控制方法权限&#xff0c;其中有四个支持使用表达式的注解&#xff0c;分别是PreAuthorize、PostAuthorize、PreFilter和PostFilter。其中前两者可以用来在方法调用前或者调用后进行权限检查&#xff0c;后两者可…
阅读更多...
蓝牙不正常因为 unmet condition check

蓝牙不正常因为 unmet condition check

蓝牙不正常因为 unmet condition check date: 2022-12-22lastmod: 2022-12-23 现象&#xff1a;蓝牙键盘鼠标均不工作&#xff0c;图标也不显示&#xff0c;KDE系统设置显示“无已配对设备”&#xff0c;但是配对设备的按钮没有显示&#xff0c;啥按钮也没有显示 事前&#x…
阅读更多...
使用msf生成木马反弹shell（windows系统）

使用msf生成木马反弹shell（windows系统）

一、理论总结 使用msf进行木马攻击总共分为三步即可&#xff1a; 1、生成攻击木马 2、配置监控主机 3、上传木马使得靶机中招 1.1生成攻击木马 使用msf来生成木马是一个比较方便的事情&#xff0c;使用msfvenom即可&#xff0c;框架模版为&#xff1a; msfvenom -p wind…
阅读更多...
我国户外广告行业现状 电梯广告触达率最高 传统户外媒体刊例花费下降

我国户外广告行业现状 电梯广告触达率最高 传统户外媒体刊例花费下降

户外广告特指以具体形式展示广告或告示、宣传品的载体&#xff0c;主要包含LED显示屏、LED幕墙、门头招牌、广告字、户外(室内)灯箱、大型立牌&#xff0c;甚至喷绘印刷品等生产制作环节&#xff0c;以及发布公益公告、商业广告、标识标牌、指示导向等广告内容。户外广告是面向…
阅读更多...
Python - Order in chaos 混乱中的秩序之随机点中值连线

Python - Order in chaos 混乱中的秩序之随机点中值连线

一.引言 刷短视频刷到了一个有趣的图形变化&#xff0c;随机给定 N 个点&#xff0c;将 N 个点首尾连接生成一个多边形&#xff0c;随后将每个边的中点连接并得到新的多边形&#xff0c;如此多次循环&#xff0c;最终总会得到一个椭圆形。 A.初始化 N 个点并生成多边形 B.取多…
阅读更多...
Transformer实现以及Pytorch源码解读（四）-Encoder层

Transformer实现以及Pytorch源码解读（四）-Encoder层

Transformer结构图 先放一张原论文中的图。从inputs到Poitional Encoding在前三部分中已经分析清楚&#xff0c;接下来往后分析。 Pytorch中对Transformer的调用 Pytorch将图1中左半部分的神经网络层用一个TransformerEncdoer(encoder_layer,num_layers)类进行封装&#xf…
阅读更多...
【Kotlin 协程】Flow 异步流 ⑥ ( 调用 Flow#launchIn 函数指定流收集协程 | 通过取消流收集所在的协程取消流 )

【Kotlin 协程】Flow 异步流 ⑥ ( 调用 Flow#launchIn 函数指定流收集协程 | 通过取消流收集所在的协程取消流 )

文章目录一、调用 Flow#launchIn 函数指定流收集协程1、指定流收集协程2、Flow#launchIn 函数原型3、代码示例二、通过取消流收集所在的协程取消流一、调用 Flow#launchIn 函数指定流收集协程 1、指定流收集协程 响应式编程 , 是 基于事件驱动 的 , 在 Flow 流中会产生源源不断…
阅读更多...
MySQL的数据类型和存储引擎介绍

MySQL的数据类型和存储引擎介绍

一. MySQL数据类型 1. 整数类型 注&#xff1a;MySQL可以为整数类型指定宽度&#xff0c;比如 int(3)、int(5)&#xff0c;这个限制不是限制value的合法范围&#xff0c;所以对绝大数应用没有任何意义&#xff0c;对于存储而言&#xff0c;int(3) 和 int(5) 是相同的&#xff…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023