仿京东三角效果案例 下面的效果是如何实现的呢？案例：<head> <style> div { /*相对定位*/ position: relative; width: 200px; height: 100px; background-color: pink; margin: 100px auto; }
CSS 边框可以模拟三角效果 CSS 三角是怎么来的了？做法如下：<head> <style> div { /*我们用css 边框可以模拟三角效果*/ width: 0; height: 0; border-top: 10px solid red; border-right: 10px solid green; border-bottom: 1
CSS的margin负值运用：压住盒子的相邻框，实现淘宝商品页面的边框操作 margin负值之美负边距+定位：水平垂直居中。一个绝对定位的盒子，利用父级盒子的 50%，然后往左（上）走自己宽度的一半，可以实现盒子水平垂直居中。压住盒子的相邻框如淘宝的商品页面：案例： <style> div { /*浮动的盒子是紧贴在一起的*/ float: left; width: 200px; height: 300px; bor
CSS中为什么会出现滑动门技术，它具体应用在哪里？ 滑动门为了便各种特殊形状的背景能够适应元素文本内容的多少，出现了CSS滑动门的技术。它从新角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。最常见于各种导航栏的滑动门。核心技术核心技术就是利用CSS精灵（主要是背景位置）和盒子padding 撑开宽度，以便适应不同数字的导航栏。一般经典布局都是这样的：...
CSS溢出文字省列号显示怎么做？ 溢出文字省列号white-space 设置或检索对象文本显示方式。通常我们用于强制一行显示内容。white-space ：normal ; 默认处理方式white-space : nowrap ; 强制在同一行显示所有文本，直到文本结束或者遇到br 标签对象换行。tex-overflow 文字溢出设置或检索是否使用一个省略标记（…）标示对象内文本溢出tex-overflow : clip; 不显示省略标记（…），而是简单的裁切。tex-overflow : ellipsis; 当对象
CSS中该怎么垂直居中？怎么去除图片底侧空白缝隙？ vertical-align 垂直对齐有宽度的块级元素居中对齐，是margin : 0 auto;让文字居中对齐，是 text-align ： center;vartical-align 垂直对齐，它只针对于行内元素或者行内块元素。vertical-align : baseline | top |middle | bottom设置或检索对象内容的垂直方式。注意：vertical-align 不影响块级元素中的内容对齐，它只针对于行内块元素或者行内块元素。特别是行内块元素，通常用来控
CSS用户界面样式:鼠标样式cursor ,轮廓线 outline ,防止拖拽文本域resize ,用户界面样式总结 文章目录CSS用户界面样式鼠标样式cursor轮廓线 outline防止拖拽文本域resize用户界面样式总结CSS用户界面样式 所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。更改用户的鼠标样式。表单轮廓等。防止表单域拖拽鼠标样式cursor设置或检索在对象移动的鼠标指针采用何种系统预定义的光标形状。属性值描述default小白 、默认pointer小手move移动text文本not-allowed禁止案例：
CSS之定位中绝对定位的子绝父相说法有误，子绝原来不一定父相 借知乎的回答如下解释：首先，我想告诉你的是，如果父级元素是绝对定位（absolute）或者没有设置，里面的绝对定位（absolute）自动以body定位。这句话是错的。正确的是：只要父级元素设了position并且不是static（默认既是static），那么设定了absolute的子元素即以此为包含块（最近的）。绝对定位（Absolute positioning）元素定位的参照物是其包含块，既相对于其包含块进行定位，不一定是其父元素。...
CSS之浮动：什么是浮动，float 属性，float之浮漏特点，（浮动元素与父盒子，兄弟盒子的关系），清除浮动的方法： 额外标签法，父级添加overflow，使用after,使双伪元素 浮动(float)传统网页布局的三种方式网页布局的本质———用CSS来摆放盒子。把盒子摆放到相应位置。CSS提供了三种传统布局方式（简单来说，就是盒子如何进行排列顺序);普通流（标准流）浮动定位标准流（普通流/文档流）所谓标准流；就是标签按照规定好默认方式排列。块级元素会独占一行，从上到下顺序排列。常用元素：div ,hr ,p ,h1-h6 ,ul ,ol ,dl ,from ,table行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。常用元素：span ，a
javascript之基础:数据类型:变量的数据类型,分类,简单数据类型(Number,String,Boolean,Undefined,null）,检测变量的数据类型typeof,数据类型的转换 数据类型1.为什么需要数据类型？在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义不同数据类型。简单来说，数据类型就是数据的类别型号，比如姓名‘K.D’，年龄18，这些数据类型都是不一样的。2.变量的数据类型变量是用来存储值所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript是一种弱类型或者说是动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会自动被确
JavaScript 之基础：变量：什么是变量？ 变量在内存中存储 ，变量的使用， 更新变量 ，同时声明多个变量 ，声明变量的特殊情况， 变量命名规范，交换变量 什么是变量？白话：变量就是一个装东西的盒子。通俗：变量是用于存放数据的容器，我们通过变量名获取数据，甚至数据可以修改。|—| |----| |—||bob| |true| |35 ||—| |----| |—|变量在内存中存储本质：变量是程序在内存中申请的一块用来存放数据的空间。类似于我们酒店的房间，一个房间可以看作一个变量。|—————————————————||| 内存 || || |6|
JS注释 JS注释<script> //1.单行注释 ctrl + / /*2.多行注释 默认的快捷键 shif + alt +a 2.多行注释 vscode 中修改多行注释的快捷键: ctrl + shift + / */</script>
CSS精灵图 精灵图为什么需要精灵图一个网页中往往会应用很多很小的背景图片作为修饰，当网页中图片过多的时，服务器就会频繁地接送和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称为CSS Sprites 、CSS雪碧）核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。精灵图（sprites） 的使用使用精灵图核心：精灵技术主要针对于背景图片使用。就是把多个小图片
CSS元素的显示与隐藏 ：display 属性， visibility 属性， overflow 溢出 元素的显示与隐藏类似网站的广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现。本质：让一个元素在页面中隐藏或者显示出来。display 显示隐藏visibility 显示隐藏overflow 溢出显示隐藏display 属性display 属性用于设置一个元素应如何显示。display:none ;隐藏对象display:block ；除了转换为块级元素之外，同时还有显示元素的意思。display 隐藏元素后，不再占有原来的位置。后面应用及其广泛，搭配JS可以做很多的
CSS之定位：边偏移 静态定位static 相对定位 relative 绝对定位 absolute 固定定位 fixed 粘性定位sticky，子绝父相的由来,绝对定位的盒子居中, 堆叠顺序 为什么需要定位？某一个盒子可以自由的在一个盒子内移动位置，并且压住其他盒子。当我们滚动窗口的时候，盒子的是固定屏幕的某个位置的。为什么需要定位以上效果，标准流或者浮动都无法实现，此时需要定位来实现。所以：浮动可以让多个盒子一行没有缝隙排列显示，经常用于横向排列盒子。定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。定位组成：定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。定位 = 定位模式 +边偏移。定位模式
CSS中圆角边框 、盒子阴影、文字阴影具体运用 圆角边框在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。border-radius属性用于设置元素的外边框圆角。语法：border-radius:length;其中每一个值都可以为数值或百分比的形式。技巧：让一个正方形变成圆圈语法：border-radius:50%；案例：<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi
新闻列表综合案例：知识点：边框，去掉列表默认的样式，清除内外边距等 知识点回顾：边框border 可以设置元素的边框。边框有三部分组成：边框宽度（粗细) , 边框样式 , 边框颜色。语法：border : border-width || border-style || border-color边框样式 border-style可以设置如下值none: 没有边框即忽略所有边框的宽度（默认值）。solid: 边框为单实线（最为常用）。dashed: 边框为虚线。 dotted: 边框为点线。去掉列表默认的样式以为无序列表和有序列表前面默认的列表样式，
练习：新浪导航栏 新浪导航栏的核心就是因为里面的数字不一样多，所以不方便给宽度，还是给padding，撑开盒子<head> <title>新浪导航栏</title> <style> .nav { height: 41px; background-color: #fcfcfc; /*上边框 3像素 实线*/ border-top: 3px solid
关注
