HTML与CSS
jwz934738949
这个作者很懒,什么都没留下…
展开
-
多重背景图片
背景图片不仅仅可以是一张,也可以是多张,这叫做多重背景图片。格式:1、简写 多个背景图片使用逗号来隔开。 例如:background: url("1.png") no-repeat 0px 0px,url("2.png") no-repeat 100px 0px,url("3.png") -100px 100px;2、分开编写 例如: backgro...原创 2019-06-14 21:42:23 · 342 阅读 · 0 评论 -
相对定位与绝对定位
1、相对定位格式:position: relative;相对定位不脱离标准流,仍然在标准流中占有位置,相对定位的移动是相对于在标准流中的位置。相对定位区分块级元素、行内元素与行内块级元素,即使该元素为相对定位,也不改变元素性质。当使用相对定位时,一般不使用margin、padding等元素,会影响标准流布局。<!DOCTYPE html><html lan...原创 2019-05-07 21:17:07 · 419 阅读 · 0 评论 -
2D模块转换
通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸,转换是使元素改变形状、尺寸和位置的一种效果。格式:transform:rorate(角度):旋转;transform:translate(水平方向的距离,垂直方向的距离):平移;transform:scale(宽度,高度):缩放。当同时有多个转换属性时,使用空格来隔开。在旋转之后,x轴与y轴也随之旋转,在...原创 2019-05-19 15:49:01 · 125 阅读 · 0 评论 -
相对定位与绝对定位应用
1、子绝父相如图所示的导航条,是通过相对定位与绝对定位共同完成的。在仅使用相对定位的情况下,由于相对定位在标准流中仍然占有一定的空间,会对页面布局产生不良的影响,所以不能仅仅使用相对定位。所以父标签使用相对定位,而子标签则使用绝对标签,这样既不会对页面布局产生不良的影响,又可以更方便的进行布局。<!DOCTYPE html><html lang="en"&...原创 2019-05-08 20:51:01 · 985 阅读 · 0 评论 -
网页布局
网页布局方式实际上就是对网页中的元素进行排版网页布局分为标准流排版、浮动流排版、定位流排版。1、标准流排版方式标准流排版方式就是网页默认的的排版方式。标准流排版方式分为两种:水平排版、垂直排版。如果元素是行内元素与行内块级元素的话,就使用水平排版;如果是块级元素就使用垂直排版。2、浮动流排版方式浮动流排版方式不会区分行内元素、块级元素与行内块级元素,不论是什么元素都可以...原创 2019-04-25 10:10:45 · 118 阅读 · 0 评论 -
清空默认边距
在我们编写网页的过程中,一个div标签往往存在着默认的边距,要想消除边距我们需要将外边距和内边距设置为0。<!doctype html><html><head><meta charset="UTF-8"><title>标题</title><style>/* 在企业开发中,一般不会使用通配符选择...原创 2019-04-20 13:57:11 · 412 阅读 · 0 评论 -
清除浮动(伪元素选择器法)
在学习了伪元素选择器后,我们可以通过使用伪元素选择器来清除浮动。具体方法为:内容为空;元素为块级元素;高度为0;隐藏元素;添加clear: both属性。<!DOCTYPE html><html><head><meta charset="utf-8" /><title>标题</title>...原创 2019-05-03 15:25:32 · 814 阅读 · 0 评论 -
盒子居中与内容居中
text-align: center:对内容进行居中处理margin: 0 auto:对盒子进行居中处理区别:内容居中只对内容有效,例如文字、图片,对盒子模型无效;盒子居中只对盒子模型有效,对盒子中的内容无效。<!doctype html><html><head><meta charset="UTF-8"><tit...原创 2019-04-19 11:07:33 · 1780 阅读 · 0 评论 -
伪元素选择器
伪元素选择器作用:为某个元素的前面或者后面添加子元素。格式:标签::before{属性: 值;}。在标签之前添加子元素标签::after{属性: 值;}。在标签之后添加子元素content:在伪元素选择器中代表内容;visibility: hidden:将伪元素选择器隐藏<!DOCTYPE html><html> <head>...原创 2019-05-03 10:54:01 · 2685 阅读 · 0 评论 -
标准流、浮动流练习
使用标准流、浮动流相关知识完成以下网页布局:<!doctype html><html><head><meta charset="UTF-8"><title>标题</title><style>.top { width: 980px; height: 100px; margin: 10px;...原创 2019-04-28 11:15:20 · 148 阅读 · 0 评论 -
box-sizing属性
在我们设置盒子模型的内边距与外边距,如果我们想要保持宽度或高度不会改变的话,就需要使用box-sizing标签。为了保持宽度或者高度不发生改变,会减去一部分内容的宽度或高度。box-sizing: cotent-box:边框+内边距+内容宽高;boxing-sizing: border-box:内容宽高。<!doctype html><html> <...原创 2019-04-18 19:27:53 · 598 阅读 · 0 评论 -
清除浮动方式
网页高度问题:1、当父元素不设置高度时,标准流中内容高度为父元素的高度;2、但是若为浮动流,浮动流的高度不为父元素的高度。当div中的内容均为浮动流时,无法实现分行的功能,需要清除浮动。清除浮动方式一:为第一个标签设置高度。但是这种方式并不常用,所以一般情况下不会使用。<!doctype html><html><head>...原创 2019-05-02 16:18:03 · 83 阅读 · 0 评论 -
浮动元素排列规则、贴靠与字围现象
浮动元素排列规则:相同方向上的浮动元素,先浮动的会显示在前面,后浮动的会显示在后面; 元素浮动后的位置,由元素在标准流中的位置决定。<!doctype html><html> <head> <meta charset="UTF-8"> <title>标题</title> <style>.cc ...原创 2019-04-27 15:13:18 · 780 阅读 · 0 评论 -
行高
行高:在网页中代表一行文字的高度。格式:line-height: 20px;注意点:行高默认为垂直居中,当我们需要在盒子标签中使得文字默认居中,就需要使用行高标签。令行高与盒子标签的高度一致;如果是两行及以上文字的话,就不能使用行高标签,只能使用内边距来居中文字。<!doctype html><html><head><meta ...原创 2019-04-21 09:59:38 · 144 阅读 · 0 评论 -
div与span标签
1、div标签div标签是用来对网页进行布局的,把网页分成几个部分。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>标题</title> <style> .front { ...原创 2019-04-03 20:30:32 · 471 阅读 · 0 评论 -
内边距与外边距
1、内边距内边距就是边框与内容之间的距离格式:padding-top:padding-right:padding-bottom:padding-left:padding: 上 右 下 左当省略上右下左中的一个时,默认与对面的值保持一致,即下对应上、左对应右<!DOCTYPE html><html lang="en"><head...原创 2019-04-12 19:30:00 · 2388 阅读 · 0 评论 -
权重问题
当多种选择器混合使用时,无法判断哪个选择器优先级较高,需要判断权重来判断优先级。1、在选择器中id标签多的优先级高;2、id标签一样多时,判断类名,类名多的优先级高;3、当id和类名一样多时,判断标签个数,标签个数多的优先级高;4、当以上标签都相同时,写在最后的先执行。...原创 2019-04-03 15:35:18 · 856 阅读 · 0 评论 -
固定定位
格式:position: fixed;固定定位与标准流不同,固定定位不会再标准流中占据位置。固定定位的元素不区分行内元素、块级元素与行内块级元素。固定定位的元素可以不随网页的滚动而滚动,通常在网页中用于导航条与网页广告的制作。<!DOCTYPE html><html lang="en"><head> <meta charset...原创 2019-05-10 15:59:22 · 169 阅读 · 0 评论 -
z-index属性
在定位流中,定位流默认会覆盖标准流的元素;另外,后写的定位流元素也会覆盖之前的定位流元素。通过设置z-index的值来判断由哪个元素进行覆盖。z-index值较大的会覆盖值小的元素。注意当父元素设置了z-index后,子元素的z-index值会失效,父元素值大,子元素会覆盖父元素小的那个子元素。<!DOCTYPE html><html lang="en">...原创 2019-05-10 16:20:38 · 1025 阅读 · 0 评论 -
动画模块-无限滚动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>标题</title> <style> * { margin: 0; padding: ...原创 2019-05-29 21:10:46 · 401 阅读 · 0 评论 -
背景的绘制区域
背景的绘制区域表示背景将会显示的区域,区域外的部分不会显示。格式:background-clip;取值为:border-box:只显示边框以内的内容;padding-box:只显示内边距以内的内容;content-box:只显示盒子内的内容,不包括边框以及内边距。<!DOCTYPE html><html lang="en"><head...原创 2019-06-07 15:43:41 · 148 阅读 · 0 评论 -
3D转换模块——3D播放器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>标题</title> <style> * { margin: 0; padding: ...原创 2019-06-01 19:07:57 · 247 阅读 · 0 评论 -
背景尺寸属性
背景尺寸属性是用来修改背景图片大小的属性。格式为:background-size:宽度 高度;取值:1、具体像素;background-size:100px 100px;设置背景图片宽度与高度均为100px。2、百分比;background-size:50% 100%;设置设置背景图片宽度为当前元素宽度的一半,高度为当前元素的高度。3、等比拉伸;要想实现等比拉伸...原创 2019-06-06 13:31:02 · 1724 阅读 · 0 评论 -
3D模块转换——3D轮播图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>标题</title> <style> * { margin: 0; padding: ...原创 2019-05-31 21:14:18 · 768 阅读 · 0 评论 -
3D模块转换——正方体构造
与2D模块转换相对应,CSS3中也有3D模块转换。格式:transform-style:preserve-3d;需要注意的是,3D模块转换只有放在父元素中才会起作用。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>标题...原创 2019-05-31 15:22:30 · 378 阅读 · 0 评论 -
2D转换模块-翻转菜单
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>标题</title> <style> * { margin: 0; padding: ...原创 2019-05-24 10:12:31 · 96 阅读 · 0 评论 -
盒子阴影与文字阴影
1、盒子阴影格式:box-shadow:水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影;注意点:默认情况下,盒子阴影使用外阴影;通常情况下,使用阴影属性只要使用水平偏移、垂直偏移与模糊度;如果不设置颜色,阴影的颜色与内容颜色相同。<!DOCTYPE html><html lang="en"><head> <...原创 2019-05-23 21:24:21 · 469 阅读 · 0 评论 -
过渡属性实例:弹性效果与手风琴效果
1、弹性效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>标题</title> <style> * { margin: 0; p...原创 2019-05-18 21:11:34 · 198 阅读 · 0 评论 -
过渡模块
过渡是CSS3中新加入的属性,除了a标签伪类选择器外,任意标签均可以使用过渡元素。transition-property:设定加入过渡元素的标签;transition-duration:设定过渡的时间;transition-delay:设定过渡延迟的时间;transition-timing-function:设置过渡的运动速度。属性有:linear:匀速运动; ...原创 2019-05-18 19:47:35 · 129 阅读 · 0 评论 -
a标签伪类选择器
a标签在网页中存在着四种状态:未被访问、已被访问、鼠标悬停、鼠标长按。a标签伪类选择器就是为了区分这四种状态而产生的。格式为:a:link——未被访问时的状态;a:visited——已被访问时的状态;a:hover——当鼠标悬停在a标签上时的状态;a:active——当鼠标长按时的状态。注意点:伪类选择器可以同时出现,也可以单独出现;同时出现,必须遵循link-...原创 2019-05-17 16:39:17 · 1636 阅读 · 0 评论 -
动画模块
动画模块需要使用一定格式来实现。1、@keyframes 动画名称{ from{} to{}}2、使用百分比实现@keyframes 动画名称{ 0%{} 50%{} 100%{} }动画属性1、animation-name:动画名称;2、animation-duration:动画持续时间;3、anima...原创 2019-05-26 16:22:14 · 252 阅读 · 0 评论 -
2D转换模块-相片墙
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>标题</title> <style> * { margin: 0; padding...原创 2019-05-22 11:47:21 · 176 阅读 · 0 评论 -
2D转换模块-透视属性
在2D转换模块中的透视属性,它的本质是近大远小,他总是与旋转属性结合在一起使用。格式为:perspective:具体像素。注意点:透视属性只能放在要进行修改的元素的上一级元素中,放在本级元素中无效;透视属性的值越小,透视效果越明显,值越大,透视效果越不明显。<!DOCTYPE html><html lang="en"><head> ...原创 2019-05-21 21:00:58 · 262 阅读 · 0 评论 -
2D转换模块-旋转轴向
在进行旋转时,我们可以沿着不同的坐标轴旋转,有X轴、Y轴、Z轴。格式:transform:rotateX(角度);以X轴旋转transform:rotateY(角度);以Y轴旋转transform:rotateZ(角度);以Z轴旋转,默认以Z轴为旋转轴<!DOCTYPE html><html lang="en"><head> ...原创 2019-05-21 20:43:03 · 741 阅读 · 0 评论 -
2D模块转换——形变中心点
在CSS3中的2D模块转换,在我们需要对元素进行旋转操作。旋转的中心点称作形变中心点。当我们需要修改形变中心点时,要用到transform-origin属性。transform-origin:水平方向 垂直方向;它的取值有三类:具体像素:transform-origin:100px 40px; 百分比:transform-...原创 2019-05-20 20:43:50 · 460 阅读 · 0 评论 -
盒子模型
1、内容盒子模型是一个总称,HTML中的标签都可以作为盒子模型。盒子模型包括:宽度、高度、边框、内边距、外边距。2、内容的宽度和高度通过height/width设置的距离3、元素的宽度和高度边框、内边距与内容宽度或高度的总和4、元素空间的宽度和高度外边距、边框、内容宽度或者高度、内边距的总和...原创 2019-04-15 20:00:31 · 76 阅读 · 0 评论 -
边框属性
格式:border:边框宽度 边框样式 边框颜色分别设置四条边表框:border-top:边框宽度 边框样式 边框颜色border-right:边框宽度 边框样式 边框颜色border-bottom:边框宽度 边框样式 边框颜色border-left:边框宽度 边框样式 边框颜色注意点:在border中,宽度与颜色可以省略,颜色默认为黑色;但是样式不可以省略,省略后...原创 2019-04-11 15:08:18 · 515 阅读 · 0 评论 -
背景关联
当网页内容远远超过图片大小时,当页面滚动到底部时,背景图片就消失了,使用背景关联后便可以解决这一问题。格式:background-attachment: scroll/fixed;scroll:代表默认;fixed:代表背景图片随网页一起移动。<!DOCTYPE html><html lang="en"><head> <met...原创 2019-04-07 15:35:54 · 314 阅读 · 0 评论 -
文字属性
在CSS中,文字相关的属性有4个,分别是:文字样式、文字粗细、文字大小以及文字字体4中。1、文字样式的格式:font-style:"xxx";2、文字粗细的格式:font-weight:"xxx";3、文字大小的格式:font-size:"xxx";4、文字字体的格式:font-family:"xxx";<!DOCTYPE html><html lang=...原创 2019-03-21 15:05:32 · 4269 阅读 · 0 评论 -
audio标签、详情与概要标签
1、audio标签audio标签,指的是在网页中添加音频的标签,与video标签类似。所有video标签中的属性均可以在audio标签中使用。原创 2019-03-17 16:51:36 · 614 阅读 · 0 评论