@charset "utf-8";html{touch-action: manipulation;background-color:#fff;color:#000;font-size:12px} body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0} body,input,text
@charset "utf-8"; .border, .border-top, .border-right, .border-bottom, .border-left, .border-topbottom, .border-rightleft, .border-topleft, .border-rightbottom, .border-topright, .border-bottomleft { position: relative; } .border::before, .b
简介：边框圆角盒子阴影 2.1 边框的三要素border属性border: 1px solid red;（分别是线宽度，线型，线颜色）线型：值 意义 solid 实线dashed 虚线dotted 点状线边框三要素可以拆分为小属性：（小属性是为了可以层叠大属性，即在整体已经设置
1.CSS高级技巧 精灵图 为了有效的减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称作CSS Sprites、CSS 雪碧） 精灵图（Sprites）的使用 精灵图技术主要针对的是背景图片使用，就是把多个小背景图整合到一张大图片中 移动背景图片的位置，此时可以使用ba
今日内容概要 课程页面复制 课程主页表分析 课程页面数据录入 课程分类接口 课程列表接口 课程页面前后端调通 课程详情接口 课程详情页面 内容详细 1、课程页面 # 打开前端项目 luffycity: # 把前端代码复制到ActualCourse中即可 http://liuqingzheng.top/python/%E8%B7%AF%E
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="w
简单封装折叠面板无需安装各个UI组件库，实现需要折叠面板样式 <template> <div v-if="collapseFlag"> <div v-for="(item,index) in panelList" :key="index"> <div :style="{width:width,height:heig
html代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文档标题</title> </head> <body> <h1>我的第一个HTML页面</h1> <p>我的第一个段落。</p> <div class='div&#
我所理解的Less的一些好处 函数式编程css 自定义变量用于整体主题调整 嵌套语法简化开发复杂度 mixin的写法 .defaultBorder(@width: 10px, @style: solid, @color: red){ border: @width @style @color; } when条件判断函数 .area(@width) when(@width <= 200px){ width:
伪元素选择器 """通过css操作文本内容""" 1.修改首个字体样式 p:first-letter { color: red; font-size: 48px; } 2.在文本开头添加内容 p:before { content: '哈哈';
内容概要 伪元素选择器 选择器的优先级 css修改文字属性 css修改字体属性 css修改其他属性 为元素选择器 """通过css操作文本内容""" 'html: <p>乘风破浪 勇往无前</p>' 1.修改首个字体样式 p:first-letter{ font-size: 30px; color: greenye
一、无继承性的属性 1、display：规定元素应该生成的框的类型 2、文本属性： vertical-align：垂直文本对齐 text-decoration：规定添加到文本的装饰 text-shadow：文本阴影效果 white-space：空白符的处理 unicode-bidi：设置文本的方向 3、盒子模型的属性：width、height、margin 、margin-top
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d
var width=element.offsetWidth; offset系列属性 作用 offsetParent 返回该元素有定位的父级，如果父级都没有定位则返回body offsetTop 返回元素相对父级（带有定位的父级）上方的偏移 offsetLeft 返回元素相对父级（带有定位的父级）左边框的偏移 offsetWidth 返回自
css 做一个弹出气泡，样式怎么设计？ 难点： 要实现白色三角型，可以在伪元素before和after上设置一个黑、一个白三角形，白三角形会挡住黑的，从而实现。 &::before, &::after { content: ''; display: block; border: 10px solid transparent; width: 0; height: 0;
前言 bootstrap3 实现下拉菜单非常方便，但是没提供多级下拉菜单的实现方式。 下拉菜单 把下拉菜单放到一个div，设置class属性.dropdown, 按钮设置属性data-toggle="dropdown",菜单项ul设置.dropdown-menu 属性 就可以实现一个下拉菜单 <div class="dropdown"> <button class="btn
CSS 功能拓展 嵌套 #main p { color: #00ff00; .redbox { color: #000000; } } 属性嵌套 个人基本没怎么用过。 .funky { font: { family: fantasy; size: 30em; weight: bold; } } 父选择器 & a { font-weight: bold; &:hover { text-decor
一、简述QSS：全称 Qt Style Sheets（Qt样式表），用于美化Qt程序界面，类似于CSS，但不如CSS强大，选择器和属性较少。Qt定制化CSS。QSS可以通过控件对象的setStyleSheet方法设置控件样式。二、控件样式设置2.1边框线2.1.1按钮QPushButton 1 //线粗细：1px 2 //线类型：solid实线 3 border:1px
CSS就是Cascading Style Sheet的缩写，中文译作“层叠样式表”或者是“级联样式表”，是用于控制网页外观处理并允许将网页的表现与内容分离的一种标记性语言，CSS不需要编译,可以直接由浏览器执行(属于浏览器解释型语言)，是Web网页开发技术的重要组成部分。 那么接下来，继续看下，使用CSS有
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minim
盒模型 不同元素产生的盒子类型可能不同 一个元素，产生什么样的盒子，取决去它的 CSS display属性 display：none 不生成盒子 display：inline 行盒 display：block 块盒 display：inline-block 行内块 既可以设置宽高又可以多个元素一排显示 盒子组成 一个盒模型由 content 内容 + padding
在平常前端开发中，常见的开发布局flex布局，常见的布局有这个样子，这个是可以用css进行修改，但是今天分享一个简单的方法 这种布局的话，如果是偶数的话可以用flex的 justify-content: space-between;，但是如果像上面五个那样的就回出现下面的这种情况，使用gap就可以更简单的进行
盒子模型 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
简单的环形 HTML代码 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximu
组件代码 import React from "react"; import { MyCardWrapper, MyCardHeader, MyCardMain } from "./styled"; interface IMyCard { children?: React.ReactNode; title?: string | React.ReactNode; headerRightSlot?: string | React.ReactNode;
