目录
结构:标签名 { 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 标签
选择器语法:
目标:能根据项目需求创建根目录
根目录:网站的第一级文件夹
目标: 掌握网页布局基本步骤
文章浏览阅读175次。1 设置开机加载bonding模块vi /etc/modprobe.d/bonding.conf 加入以下两行:alias bond0 bondingoptions bond0 miimon=100 mode=0 #mode0表示负载均衡2 修改网卡配置文件cd /etc/sysconfig/network-scripts/ ,新建ifcfg-bond0文件 ,内容如下:DEVICE=bond0I..._centos配置bound主备和负载
文章浏览阅读800次。linux 会使用硬盘的一部分做为SWAP分区,用来进行进程调度--进程是正在运行的程序--把当前不用的进程调成‘等待(standby)‘,甚至‘睡眠(sleep)’,一旦要用,再调成‘活动(active)’,睡眠的进程就躺到SWAP分区睡大觉,把内存空出来让给‘活动’的进程。如果内存够大,应当告诉 linux 不必太多的使用 SWAP 分区, 可以通过修改 swappiness 的数值。swap..._swap使用为0
文章浏览阅读165次。牛顿迭代法(Newton's method)又称为牛顿-拉夫逊(拉弗森)方法(Newton-Raphson method),它是牛顿在17世纪提出的一种在实数域和复数域上近似求解方程的方法。牛顿迭代公式 设r是\(f(x)=0\)的根,选取\(x_0\)作为r的初始近似值,过点\((x_0,f(x_0))\) ,做曲线 \(y=f(x)\)的切线L,L的方程为\(y=f(x..._使用newton迭代法求解y=1/√x,定义f(y)=y^2-1/x
文章浏览阅读1.1k次。准备开始写论文了,想找一个能整理资料便于查找的软件,自己下载简单测试了有道云笔记、印象笔记和为知笔记,简单做了对比,有写的不准确之处,欢迎指正,我们共同为其他需要的朋友指明方向。我主要从存储上传空间及收费标准、笔记结构及支持的文档、导出备份、多端查看几方面进行比较:(1)存储上传空间及收费标准有道云笔记:免费版的总共3G空间,每天签到可得5M,但不知道此活动可以维持多久。会员:连续包月每月15元,..._有道云笔记连续包月好还是包年好
文章浏览阅读265次。14款超时尚的HTML5时钟动画(附源码) 时钟动画在网页应用中也非常广泛,在一些个人博客中,我们经常会看到一些相当个性化的HTML5时钟动画。今天我们向大家分享了14款形态各异的超时尚HTML5时钟动画,其中有圆盘时钟、3D时钟、个性化时钟等,强大的HTML5为时钟动画增添了不少精彩,希望能给大家带来帮助。 1、可爱的CSS3圆盘时钟动画 在线..._翻页时钟客户端
文章浏览阅读2k次。引用自【武林外传端游官方网站】:为了给广大玩家更好的游戏体验,《武林外传》将于2021年4月29日部分服务器进行合服操作,详情如下:经典专区【将军令】+双线专区【金戈铁马】=经典专区【千军破】经典专区【乾坤变】+双线专区【气壮山河】+双线专区【青梅时雨】=双线专区【内圣外王】如图所示,这次合区有一个很大的特色,就是跨服务器合区。这已经是武林外传第8次和第9次跨服务器合区了,而且这次动作特别大,首例...
文章浏览阅读57次。linux的基本原则由目的单一的小程序组成,组合小程序完成复杂任务一切皆文件尽量避免捕获用户接口配置文件保存为纯文本格式文件系统/boot: 系统启动相关的文件,如内核、initrd,以及grub(bootloader)/dev: 设备文件设备文件:块设备:随机访问,数据块字符设备: 线性访问,按字符为单位设备号: 主设备号(major)和次设备号(minor)/..._linux_basics.ctb
文章浏览阅读994次。1 Oracle中周相关知识描述 1.1 日期格式化函数 TO_CHAR(X [,FORMAT]):将X按FORMAT格式转换成字符串。X是一个日期,FOR1 Oracle中周相关知识描述1.1 日期格式化函数TO_CHAR(X [,FORMAT]):将X按FORMAT格式转换成字符串。X是一个日期,FORMAT是一个规定了X采用何种格式转换的格式字符串,FORMAT与周相关的有..._oracle有开始和结束时间怎么计算某个时间并发
文章浏览阅读2.6k次,点赞20次,收藏21次。随着信息技术和网络技术的飞速发展,人类已进入全新信息化时代,线下管理技术已无法高效,便捷地管理信息。为了迎合时代需求,优化管理效率,各种各样的管理系统应运而生,各行各业相继进入信息管理时代,游戏美术外包管理信息系统就是信息时代变革中的产物之一。任何系统都要遵循系统设计的基本流程,本系统也不例外,同样需要经过市场调研,需求分析,概要设计,详细设计,编码,测试这些步骤;以java语言设计为基础,实现了游戏美术外包管理信息系统。
文章浏览阅读1.4k次。变压器损耗计算公式分为铁损和铜损,铁损又叫空载损耗,就是其固定损耗,实是铁芯所产生的损耗(也称铁芯损耗,而铜损也叫负荷损耗,1、变压器损耗计算公式(1)有功损耗:ΔP=P0+KTβ2PK-------(1)(2)无功损耗:ΔQ=Q0+KTβ2QK-------(2)(3)综合功率损耗:ΔPZ=ΔP+KQΔQ----(3)Q0≈I0%SN,QK≈UK%SN式中:Q0——空载无功损耗(kva..._相位差理论值计算器
文章浏览阅读1.5k次。前面已经写过利用BeautifulReport生成测试报告,那么接下来讲讲如何在测试报告里面保存截图首先需要在测试用例中定义一个截图的方法:# 截图方法"""os.path.abspath:返回当前目录的绝对路径传入一个img_name,并存储到指定路径下"""def save_img(self, img_name):self.driver.get_screenshot_as_file('{}/{..._driver.get_screenshot_as_file('{}/{}.png'.format(os.path.abspath("img"), img
文章浏览阅读146次。自己动手组装台式电脑也称之为DIY电脑,了解电脑主机内部结构,还能够学习到安装系统等知识,从中可以带来很多乐趣。该行为一直是很多电脑玩家首选的购机方式,针对很多还不清楚如何自动动手组装台式电脑的用户们,下面,小编给大家带来了学会组装电脑的操作方法了。DIY电脑一直都是电脑爱好者非常喜欢的,电脑组装通常包括电脑硬件的选择,DIY硬件组装以及操作系统安装三个部分。对于电脑爱好者来说,通过自己动手DIY..._我们现有的硬件有cpu 主板 内存条固态硬件独立显卡电源机箱显示器简述下将这些硬件组装的过程