目录
结构:标签名 { css属性名:属性值; }
作用:通过标签名,找到页面中所有这类标签,设置样式
注意点:
结构:.类名 { css属性名:属性值; }
作用:通过类名,找到页面中所有带有这个类名的标签,设置样式
注意点:
结构:#id属性值 { css属性名:属性值; }
作用:通过id属性值,找到页面中带有这个id属性值的标签,设置样式
注意点:
补充:类与id的区别
class类名与id属性值的区别
类选择器与id选择器的区别
实际开发的情况
结构:* { css属性名:属性值; }
作用:找到页面中所有的标签,设置样式
注意点:
属性名:font-size
取值:数字+px
注意点:
属性名:font-weight
取值:
正常 normal
加粗 bold
正常 400
加粗 700
注意点:
属性名:font-style
取值:
正常(默认值):normal
倾斜:italic
无衬线字体(sans-serif)
衬线字体(serif)
等宽字体(monospace)
属性名:font-family
常见取值:具体字体1,具体字体2,具体字体3,具体字体4,...,字体系列
渲染规则:
注意点:
属性名:font (复合属性)
取值:
省略要求:
注意点:如果需要同时设置单独和连写形式
属性名:text-indent
取值:
属性名:text-align
取值:
注意点:
属性名:text-decoration
取值:
注意点:
作用:控制一行的上下行间距
属性名:line-height
取值: • 数字+px • 倍数(当前标签font-size的倍数)
应用:
行高与font连写的注意点:
拓展 颜色常见取值(了解)
属性名:
属性值:
标签水平居中方法总结 margin: 0 auto
如果需要让div、p、h(大盒子)水平居中,可通过margin: 0 auto;实现
注意点:
作用:根据 HTML 标签的嵌套关系,选择父元素 后代中 满足条件的元素
选择器语法:选择器1 选择器2 { css }
结果:
注意点:
作用:根据 HTML 标签的嵌套关系,选择父元素 子代中 满足条件的元素
选择器语法:选择器1 > 选择器2 { css }
结果:
注意点:
并集选择器:,
作用:同时选择多组标签,设置相同的样式
选择器语法:选择器1 , 选择器2 { css }
结果:
注意点:
交集选择器:紧挨着
作用:选中页面中 同时满足 多个选择器的标签
选择器语法:选择器1选择器2 { css }
结果:
注意点:
作用:选中鼠标悬停在元素上的状态,设置样式
选择器语法:选择器:hover { css }
注意点:
作用:通过简写语法,快速生成代码
语法:
属性名:background-color(bgc)
属性值:
注意点:
属性名:background-image(bgi)
属性值: background-image: url('图片的路径')
注意点:
属性名:background-repeat(bgr)
属性值:
属性名:background-position(bgp)
属性值:background-position: 水平方向位置 垂直方向位置;
注意点:
属性名:background(bg)
属性值:
书写顺序:
省略问题:
注意点
需求:需要在网页中展示一张图片的效果?
方法一:直接写上img标签即可
方法二:div标签 + 背景图片
显示特点:
代表标签:
显示特点:
代表标签:
显示特点:
代表标签:
目的:改变元素默认的显示特点,让元素符合布局要求
语法:
1.HTML嵌套规范注意点
但是:p标签中不要嵌套div、p、h等块级元素
但是:a标签不能嵌套a标签
2.居中方法总结
特性:子元素有默认继承父元素样式的特点(子承父业)
可以继承的常见属性(文字控制属性都可以继承)
注意点:
(拓展)继承的应用
好处:可以在一定程度上减少代码
常见应用场景:
(拓展)继承失效的特殊情况
如果元素有浏览器默认样式,此时继承性依然存在,但是优先显示浏览器的默认样式
特性:
注意点:
多行内容同时编辑:alt+shift
特性:不同选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低选择器样式
优先级公式:
继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
注意点:
权重叠加计算
场景:如果是复合选择器,此时需要通过权重叠加计算方法,判断最终哪个选择器优先级最高会生效
权重叠加计算公式:(每一级之间不存在进位)
比较规则:
注意点:
(拓展)查错流程(遇到样式出不来,要学会通过调试工具找错)
作用:利用 width 和 height 属性默认设置是盒子 内容区域 的大小
属性:width / height
常见取值:数字+px
作用:给设置边框粗细、边框样式、边框颜色效果
单个属性:
属性名:border
属性值:单个取值的连写,取值之间以空格隔开
快捷键:bd + tab
场景:只给盒子的某个方向单独设置边框
属性名:border - 方位名词
属性值:连写的取值
需求:盒子尺寸 400*400,背景绿色,边框10px 实线 黑色,如何完成?
解决:当盒子被border撑大后,如何满足需求?
作用:设置 边框 与 内容区域 之间的距离
属性名:padding
常见取值:
记忆规则:从上开始赋值,然后顺时针赋值,如果设置赋值的,看对面的!!
场景:只给盒子的某个方向单独设置内边距
属性名:padding - 方位名词
属性值:数字 + px
需求:盒子尺寸300*300,背景粉色,边框10px实线黑色,上下左右20px的内边距,如何完成?
盒子实际大小终极计算公式:
解决:当盒子被border和padding撑大后,如何满足需求?
需求:盒子尺寸300*300,背景粉色,边框10px实线黑色,上下左右20px的内边距,如何完成?
解决方法 ① :手动内减
解决方法 ② :自动内减
作用:设置边框以外,盒子与盒子之间的距离
属性名:margin
常见取值:
记忆规则:从上开始赋值,然后顺时针赋值,如果设置赋值的,看对面的!!
场景:只给盒子的某个方向单独设置外边距
属性名:margin - 方位名词
属性值:数字 + px
应用:
场景:浏览器会默认给部分标签设置默认的margin和padding,但一般在项目开始前需要先清除这些标签默认的 margin和padding,后续自己设置
解决方法:
场景:垂直布局 的 块级元素,上下的margin会合并
结果:最终两者距离为margin的最大值
解决方法:避免就好
场景: 互相嵌套 的 块级元素,子元素的 margin-top 会作用在父元素上
结果:导致父元素一起往下移动
解决方法:
场景:给行内元素设置margin和padding时
结果:
目标:能够使用 结构伪类选择器 在HTML中定位元素
作用与优势:
选择器:
注意点:
n的注意点:
(了解)nth-of-type结构伪类选择器
选择器:
区别:
:nth-child → 直接在所有孩子中数个数
:nth-of-type → 先通过该 类型 找到符合的一堆子元素,然后在这一堆子元素中数个数
目标:能够使用 伪元素 在网页中创建内容
伪元素:一般页面中的非主体内容可以使用伪元素
区别:
种类:
注意点:
目标:能够认识 标准流 的默认排布方式及其特点
标准流:又称文档流,是浏览器在渲染显示网页内容时默认采用的一套排版规则,规定了应该以何种方式排列元素
常见标准流排版规则:
属性名:float
属性值:
注意点:
书写网页导航步骤:
目标:能够认识 清除浮动的目的,并且能够使用 清除浮动的方法
8.4.3.1.清除浮动的方法一① 直接设置父元素高度
特点:
8.4.3.2.清除浮动的方法 — ② 额外标签法
操作:
特点:
8.4.3.3.清除浮动的方法 — ③ 单伪元素清除法
操作:用伪元素替代了额外标签
特点:
8.4.3.4.清除浮动的方法 — ④ 双伪元素清除法
操作:
特点:
8.4.3.5.清除浮动的方法 — ⑤ 给父元素设置overflow : hidden
操作:
特点:
(拓展补充)BFC的介绍
块格式化上下文(Block Formatting Context):BFC
创建BFC方法:
BFC盒子常见特点:
设置定位方式
设置偏移值
偏移值设置分为两个方向,水平和垂直方向各选一个使用即可
选取的原则一般是就近原则 (离哪边近用哪个)
介绍:静态定位是默认值,就是之前认识的标准流。
代码: position : static
注意点:
介绍:自恋型定位,相对于自己之前的位置进行移动
代码: position : relative;
特点:
应用场景:
介绍:拼爹型定位,相对于非静态定位的父元素进行定位移动
代码: position : absolute
特点:
应用场景:
场景:让子元素相对于父元素进行自由移动
含义:
子绝父相好处:
介绍:死心眼型定位,相对于浏览器进行定位移动
代码:position : fixed;
特点:
应用场景:
元素层级问题
不同布局方式元素的层级关系:
不同定位之间的层级关系:
更改定位元素的层级
场景:改变定位元素的层级
属性名:z-index
属性值:数字
属性名:vertical-align
属性值:
(拓展)项目中 vertical-align 可以解决的问题
注意点:
场景:设置鼠标光标在元素上时显示的样式
属性名:cursor
常见属性值:
场景:让盒子四个角变得圆润,增加页面细节,提升用户体验
属性名:border-radius
常见取值:数字+px 、百分比
原理:
赋值规则:从左上角开始赋值,然后顺时针赋值,没有赋值的看对角!
溢出部分:指的是盒子 内容部分 所超出盒子范围的区域
场景:控制内容溢出部分的显示效果,如:显示、隐藏、滚动条……
属性名:overflow
常见属性值:
场景:让某元素本身在屏幕中不可见。如:鼠标:hover之后元素隐藏
常见属性: 1. visibility:hidden 2. display:none
区别:
注意点:
场景:让某元素整体(包括内容)一起变透明
属性名:opacity
属性值:0~1之间的数字
注意点:
场景:让相邻表格边框进行合并,得到细线边框效果
代码:border-collapse:collapse;
场景:在网页中展示出小三角形时,除了可以使用图片外,还可以使用代码完成。
实现原理:
实现步骤:
目标:能够使用 伪类选择器 选择元素的不同状态
场景:常用于选中超链接的不同状态
选择器语法:
注意点:
场景:用于选中元素获取焦点时状态,常用于表单控件
选择器语法:
效果:
场景:通过元素上的HTML属性来选择元素,常用于选择 input 标签
选择器语法:
目标:能根据项目需求创建根目录
根目录:网站的第一级文件夹
目标: 掌握网页布局基本步骤
文章浏览阅读474次,点赞10次,收藏12次。然后,我们使用python-docx库中的Document类打开每个Word文档,并遍历其中的段落和表格内容,将文本中的“old_text”替换为“new_text”。为了解决这个问题,我们可以使用Python编写一个程序来实现批量替换目录下多个后缀为docx文档内容的功能。通过使用Python的os和glob模块,我们可以轻松地遍历目录下的所有文件,并对每个文件进行操作。接下来,我们可以编写Python程序来实现批量替换目录下多个后缀为docx文档内容的功能。批量替换目录下多个后缀为docx文档内容。_python中paragraph.text.replace()
文章浏览阅读165次。import android.app.ProgressDialog;import android.content.Context;public class ProgressDlgUtil {private static ProgressDialog progressDlg = null;/** * 启动进度条 * @param ctx 当前的activity * @param con..._android progressdialog转菊花工具类
文章浏览阅读262次。投资者在决定加杠杆之前,应该充分了解自己的资金实力和风险承受能力,制定详细的投资策略和风险控制机制,并保持冷静和理性的心态。同时,投资者还应该不断学习和积累经验,提高自己的投资水平和应对风险的能力,以应对市场的不断变化和挑战。因此,投资者在决定加杠杆之前,应该对自己的资金状况进行充分的评估,确保自己有足够的资金实力和风险承受能力。其次,策略是股票加杠杆的关键。在股票市场中,加杠杆是一种常见的投资策略,它允许投资者通过借入资金来扩大自己的交易规模,以期获得更高的收益。文章来源:配查信-杠杠炒股平台实盘查询。
文章浏览阅读849次。十五元宵闹人圆古人云:“千门开锁万灯明,正月中旬动地京”。众所周知,正月十五是元宵节,又称上元节、元夜、春灯节等,是中国民间传统节日。元宵节俗的形成有一个较长的过程,汉武帝正月上辛夜在甘泉宫祭祀“太一”的活动,被后人视作正月十五祭祀天神的先声。不过,正月十五真正作为民俗节日是在汉魏之后。东汉佛教文化的传入,对于形成元宵节俗有着重要的推动意义。关于元宵节的来..._秧歌队拜帖
文章浏览阅读99次。1、本文所以内容来自 著名高校课件和学生笔记(校园里面经常见到有人高价买笔记)2、任课教师不会提供参考文献,所以只能对作者表示感谢,如果引用了您的作品,可以用回复方式补充参考文献。3、我不对文章无关问题进行解答,文章内容也比较难,我也很难解答您遇到的问题,如果发现BUG可以用回复方式帮我修正。4、本课 计算机操作系统,适用于计算机操作系统课、考研本课其他部分的导航条见页面底部设备管理是操作..._get_buf(type,number)beginp(rs(type));p(s(type));pointer of buffer(number
文章浏览阅读4.3k次,点赞14次,收藏116次。思路 题目上有三种颜色三种形状的物体, 可以先判断物体的颜色二值化后判断物体形状, 这样可以有效降低误差, 但是后来测试的时候经常会发现有误判的现象, 想到可能是因为背景嘈杂并且二值化后的图像信息会有损耗, 我开始思考为什么人类识别这些物体的成功率如此之高, 自我认为是因为我们会聚焦到一个物体并且不断找出这个物体的特征然后根据经验判断出物体是什么, 因此我设计了一个几率模型,或者说是一种擂台法则, 把在一段时间内检测到的数据进行整合得到一个几率表, 根据擂台法则得出物体的准确信息_2020ti杯电赛g非接触物体尺寸形态测量接口如何连接
文章浏览阅读8.7k次,点赞5次,收藏11次。声源与扩音设备之间因距离过近等问题导致能量发生自激,产生啸叫。啸叫是一种回授音。一、简单来说,啸叫产生的原因为以下三点:1、话筒与音箱同时使用。2、音响系统重放的声音能够通过空间传到话筒。3、音箱发出的声音能量足够大,话筒的拾音灵敏度足够高。二、啸叫的危害很大,主要表现在以下几个方面:1.自激时功率放大器会产生很大的功率输出,可能超出扩声设备的承受范围,烧坏功率放大器和发声设备。2.在反馈系数接近于1时,由于产生梳状滤波效应,延时声场与直达声之间的叠加,会使扩音声场比原声场在音感上变得狭窄。_话筒防啸叫原理
文章浏览阅读127次。http://202.197.224.59/OnlineJudge2/index.php/Problem/read/id/1150题意:任意多个ABC三个数,问最少交换多少个任意位置的两个数,能使字符窜有序分析:记录ABC的个数,one two three,循环字符窜one的个数,若one中有B,则先从two中找是否含有A 若含有则交换,若没有则找three中..._xtu.1150
文章浏览阅读1.6k次。 简序大学毕业前的最后一学期,在一家公司实习,当时的工作需要用到一些操作系统提供的组件。那时候只知道COM这个名词,并不知道到底是怎么回事,只知道上网到处找别人的源码解决自己的问题;那段日子到现在回忆起来都是灰色的,每天呆坐在电脑前,一个网站一个网站的查找自己需要的源码。但并不清楚自己到底在做什么;那时候对自己能不能成为一个程序员充满了怀疑。在实习结束返校的火车上,一夜间,我把一本《COM本质_一个进程有几个套间
文章浏览阅读3.3k次。本文是基于Ceph集群搭建系列(一):Ceph 集群搭建 来做扩容,集群拓扑结构如下:1. 添加OSD在 node1 上添加一个 osd.2。1) 创建目录$ ssh node1$ sudo mkdir /var/local/osd2$ sudo chmod 777 /var/local/osd2/$ exit2) 准备OSD$ ceph-deploy osd..._ceph集群动态扩容
文章浏览阅读8.6k次。关键是加粗的两行。 contract="IBOAutoApprovalWCF">_web.config 配置wcf
文章浏览阅读4.4k次,点赞6次,收藏40次。负载与压力测试1、负载测试:是通过逐步增加系统负载,测试系统性能的变化,并最终确定在满足性能指标的情况下,系统所能承受的最大负载量的测试;2、压力测试:是通过逐步增加系统负载,测试系统性能的变化,并最终确定在什么负载条件下系统性能处于失效状态,并以此来获得系统能提供的最大服务级别的测试。例子分析1:登录接口,我们先10个用户访问,然后100个用户访问,然后1000个用户访问,关注程序的响应时间,所耗资源,直到超时或关键资源耗尽。压力测试:是指程序长时间运行的稳定性。_负载测试和压力测试的区别