简单实现滑块组件，废话多说先上代码和展示效果 <template> <div class="sliderContainer"> <div class="submitNote"></div> <div class="note-card-item" v-for="item in 8" :key="item">{{item}}
今天在学习css固定定位时，遇到了一个大坑，我的需求是想要用左右两个div，左边div用来模拟页面内容，右边的div模拟页面上通过固定定位的广告，如下图效果 于是一顿劈里啪啦之后，得到了以下html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>T
<style> .imageDiv { display:inline-block; width:100px; height:100px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; border:1px dashed darkgray; background:#f8f8f8; position:relative; overflow:h
一、四大基本选择器 1、统配选择器（*）：匹配页面中的所有元素。 *{ } 例：页面中所有的元素都变成红色，背景是绿色 *{
能够加载服务器的字体文字，让客户端显示客户端没有安装的字体 语法: @font-face{ • font-family:<你的web字体的名称>; src：url(“字体路径”); font-weight:bold; } @font-face{ /*定义字体*/ font-family:"我的字体"; src:url("font/CooperBlackStd.otf"); } div{
浮动 浮动之页面布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { margin: 0; } #d1 { widt
padding内边距 设置元素所有内边距的宽度或者是设置边上内边距的宽度 单独设置各边的内边距：padding-top padding-left paddling-bottom padding-right border边框 设置边框的颜色、样式、宽度 单独设置： border-color
一，常用属性 1，背景 背景颜色 背景图片 是否重复 <style type="text/css"> #div1 { width:1700px; height:800px; /*背景颜色*/ background-color:#EEE8AA; /*背景图片*/ background-image: url(img/dd.png); /*是否重复*/ background-repeat: no-repea
<head> <style type="text/css"> #div1 { width: 500px; height: 400px; background-color: blanchedalmond; background-image: url(img/baidu.png
本文将简单回顾一下CSS基本用法 CSS是层叠样式表语言 HTML依赖 CSS依赖HTML 在HTML中使用CSS的三种方式 1.内联定义 在标签内使用对象的style属性 <p style="margin-left: 0.5in;margin-right: 0.5in">这一行内联定义</p> 内联定义举例 <div style="width: 300px;height: 30
前言 在之前的笔记 CSS – W3Schools 学习笔记 (3) 就有讲过 CSS Transitions. 它是用来做 animation 的. 这篇补上使用时的一些细节. 什么时候放 ? 有个 div width 100px <div class="target">target</div> .target { border: 2px solid red; width: 100px; } hove
介绍 z-index 是用来设置 element 层次高低的 (当 element 重叠的时候) 参考: 4 reasons your z-index isn’t working (and how to fix it) 深入理解 CSS 属性 z-index Z-index CSS Tutorial ( Position and Stacking Order ) Element 重叠时默认表现 先了解一下在没有做任
BFC ：(Block Formatting Context)， 名为 “块级格式化上下文”。 BFC是一个独立的布局环境，BFC内部的元素布局与外部互不影响。 它是页面中的一块渲染区域，并且有一套属于自己的渲染规则，它决定了元素如何对齐内容进行布局，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，BF
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>实现一个正方体</title> <meta name="viewport"
堆叠上下文 层/堆叠上下文（stack content） 他是一块区域，这块区域由某个元素创建 规定了该区域中内容在z轴上排列先后顺序 创建堆叠上下文的元素 HTML元素（根元素）设置z-index数值的定位元素（非auto值） 同一个堆叠上下文中元素在z轴上排列 从后到前的排列顺序： 创建堆叠上下文的元素
css样式属性 常用布局样式属性常用文本样式属性元素溢出显示特性 常用布局样式属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS学习</title> <style> .box{ width:150px;
变形移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=
CSS设置标签、图片，放大、缩小、旋转、移动、倾斜(transform) 1.缩小和放大属性（scale） 格式：transform：缩小类型（数值）； 注意：缩小和放大都是 scale ； 其中的值（0~1）代表缩小；大于1代表放大。其中0代表缩小到没有，1代表不变。 tranform:scale(0.5) /*整体缩小到原来的一半*/ tranform:
原理： 1、div 的高宽设置为0 width: 0;height: 0; 2、div设置边框，边框颜色透明色，边框大小代表三角形大小 border: 100px solid transparent; 3、想要那个方向的三角形就设置那个方向三角形颜色 border-left-color: pink; 左三角形与上三角形制作 css 样式 <!DOCTYPE html> <htm
使用css生成田字格的四种方法 html结构css基础样式第一种 flex布局第二种 绝对定位第三种 css瀑布流第四种 float浮动 html结构 <div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> css基础样式
grid-网格布局 一、是什么 Grid 布局即网格布局，是一个二维的布局方式，由纵横相交的两组网格线形成的框架性布局结构，能够同时处理行与列 擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系 这与之前讲到的flex一维布局不相同 设置display:grid/inli
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- position 属性值： 相对定位(relative) left right top bottom
相信有许多的朋友在学3D转换的时候很懵，或者学完之后想做个小练习获得成就感鼓励自己，再或者想更理解透彻。做完这小练习相信大家一定会有所收获。废话不多说了，直接开始： 构建基本架构 HTML代码： <div class="preserve"> <div class="front">前</div> <div class="back">后</div>
问题1：如何将黄色块移动到右边 答：将整个图片分成左右两个div，分别加display:inline-block 问题2：左右两部分中间有空隙，margin=0不能解决 答：如下代码所示，但是font-size:0会导致所有的字体消失，可以用div嵌套div，重新设置文字格式。 body{ font-size:0; } 代码： <!DOCTYPE html> <
