目录CSS三大特性1、层叠性2、继承性3、优先级常用单位字体背景列表属性盒子模型display的inline、block、inline-block的区别文档流定位定位的left和top、right和bottom和margin-left.....的区别浮动可见性动画transition和animation区别作业 CSS三大特性 1、层叠性 一个标签可以
1.概念 概念:层叠样式表(英文全称:Cascading Style Sheets)。层叠的意思是多个样式表可以作用在同一个HTML的元素上,使其生效。 好处: 1. 功能强大 2. 将内容展示和样式控制分离,降低耦合度,解耦。 3. 可以让分工协作更容易,提高开发效率。 2.CSS的使用(CSS与html的结合方式) 1. 内联样
<div class="main-layout"> <div class="header"> <h1>头部</h1> </div> <div class="content"> <div class="left"> <h1>左</h1> &l
CSS <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS</title> <style type="text/css"> /* CSS的注释,作用和HTML注释类似,只不过它必须编写在style标签中,
::-webkit-scrollbar { width: 4px !important; background-color: #012d58 !important; border-radius: 4px !important; } ::-webkit-scrollbar-thumb { border-radius: 4px !important; background-image: linear-gra
内容大于盒子宽度 <style type="text/css"> .bigbox{ width: 500px; height: 400px; background:#ff0000; display: flex; flex-direction: row; flex-wrap: nowrap } .smallbox{ width: 200px; height: 100px; background: #f5f5f5;
通用属性操作 attr():获取/设置元素的属性 removeAttr():删除属性 prop():获取/设置元素的属性 removeProp():删除属性 attr和prop区别: 1、如果操作的是元素的固有属性,则建议使用prop 2、如果操作的是元素自定义的属性,则建议使用attr <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTM
花了一点时间修改自己的博客背景设置,现在分享一下代码。希望对大家有帮助。主要代码模板来源于另外三个博主原博主的连接:(1)https://www.cnblogs.com/Penn000/p/6947472.html。 (2)https://www.cnblogs.com/Tangent-1231/p/10393759.html。 (3)https://www.cnblogs.com/znzpeng/p/
1. 超级居中place-items: center 首先指定 grid作为 display 方法,然后在同一个元素上写入 place-items: center。place-items 是同时设置 align-items 和 justify-items 的快速方法。通过将其设置为 center , align-items 和 justify-items 都将设置为 center。 .pren
盒模型 点击打开视频教程 标准盒模型、怪异盒模型(IE盒模型) 什么是盒模型? 盒模型的作用:规定了网页元素如何显示以及元素间的相互关系 盒模型的概念:盒模型是css布局的基石,它规定了网页元素如何显示以及元素间的相互关系。 css定义所有的元素都可以拥有像盒子一样的外形和平面空间。
定位position 概念:是一种布局方式,主要用来确定元素的位置。 作用 解决是具有层级叠加(覆盖)效果的布局。 实现方式 通过给元素添加position属性,并且定位位置调整都是配合left, top, right, bottom四个属性来使用的。 position用来设置定位元素的参照物。 left, t
视频直播app源码,实现一个展开和关闭的动画效果 <template> <div> <el-button @click="changeShow(true)">展开</el-button> <el-button @click="changeShow(false)">关闭</el-button> <div class="mr_sty" :class=&q
1 CSS简称样式,是用来美化界面用的。可以对页面元素进行精细设置。主要描述颜色,边框。 2 CSS 使用方式有3种, 1元素内联,<input type="text" value="ccccc" style="border-color:Black;" /> input 标签里面的style里面加上描述。 2 页面嵌入,也叫页面引用。 body前面放s
分组与嵌套 div,p,span { /*逗号表示并列关系*/ color: yellow; } #d1,.c1,span { color: orange; } 伪类选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&
盒模型 点击打开视频教程 标准盒模型、怪异盒模型(IE盒模型) 什么是盒模型? 盒模型的作用:规定了网页元素如何显示以及元素间的相互关系 盒模型的概念:盒模型是css布局的基石,它规定了网页元素如何显示以及元素间的相互关系。 css定义所有的元素都可以拥有像盒子一样的外形和平面空间。
Shape在Android中设定各种形状,今天记录下,由于比较简单直接贴代码。 Shape子属性简单说明一下: gradient -- 对应颜色渐变。 startcolor、endcolor就不多说了。 android:angle是指从哪个角度开始变. solid -- 填充。 stroke -- 描边。 corners -- 圆角。 padding -- 定义内容
字体属性 (1)颜色设置: 通过十六进制:color:#00000ff; 通过RGB:color:rgb(0,0,255); color:rgba(0,0,255,1); 其中a表示透明度,a取值0~1,1表示完全不透明;0表示完全透明。 (2)大小设置:font-size,chrome可接受最小的为12px。 (3)加粗设置,font-weight。font-weight:lighter;最常用的是设置100-40
<!doctype html><html><head><meta charset='UTF-8'><meta name='viewport' content='width=device-width initial-scale=1'> <style type='text/css'>html {overflow-x: initial !important;}:
前言 实现弹窗对话框 效果图 代码 .js const app = getApp() Page({ data: { show: false, }, toggle() { this.setData({ show: !this.data.show, }) }, onClickCancel:function() { this.setData({ show: false }) },
1、什么是CSS CSS是什么 CSS怎么用 CSS选择器(重点+难点) 美化网页 盒子模型 浮动 定位 网页动画 1.1、什么是CSS Cascading Style Sheet 层叠级联样式表 CSS:表现(美化网页) 字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动... 1.2、发展史 CSS1.0 CSS2.0 DIV块+CSS,HTM
样式的冲突 当我们通过不同的选择器,选中相同的元素,并且为相同的样式设置不同的值时,此时就发生了样式的冲突。 案例一:使用类选择器与元素选择器选中同一元素,设置不同颜色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <sty
css实现精致的角标 参考:视觉还原小技巧!CSS 实现角标效果 纯色角标 -> 有白色到透明渐变的角标 -> 更精致有微弱高光的角标 .ribbon1 { margin: 0 60px; font-size: 34px; line-height: 70px; color: #fff; text-align: center; width: 200px; height: 70px; /*
1 行内元素水平垂直居中 方式一: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>行内元素水平垂直居中</title> <style type="text/css"> .box{ width: 200px; height: 200px; background-color: red;
1 单列布局 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> html,body{ margin: 0; height: 100%; } .header{ width: 100%; height: 60p
@import url('./theme.less'); // @color: #2D2FAD; .theme1{ .theme(#2D2FAD,#2D2FAD,rgb(209, 211, 213),#ff943e,#333); } .theme2{ .theme(#4288ca,#4288ca,rgb(209, 211, 213),#ff943e,#333); } .theme3{ .theme(#0076F5,#0076F5,rgb(209, 211, 213),#