初学者
ssh6666
未来可期
展开
-
GRID布局
GRID布局它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局Grid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别。Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。格布局设置:...原创 2020-03-26 22:15:30 · 254 阅读 · 0 评论 -
盒模型和怪异盒模型
盒模型盒模型是css布局的基石,它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间.盒模型的组成:内容区、补白/填充、边框、边界/外边距。PADDINGpadding用法:1:padding是在盒子里面,在盒子与内容之间。2:padding的作用:控制子元素在父元素里面的位置关系。3:padding会把盒子撑大。4:如果想让盒子保持...原创 2020-03-26 21:34:41 · 318 阅读 · 0 评论 -
移动端布局的编写页面
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/reset.css" /> <link re...原创 2020-03-25 21:34:43 · 163 阅读 · 0 评论 -
移动端布局
绝大部分项目:PC端 ~~> 官网移动端 ~~> 移动端网页,app,小程序…响应式布局:为了适应不同的设备,分辨率不同的设备(pc电脑端 平板电脑 手机端)x 宽度500px<= x <800px css 1800px<= x <1000px css 21000px<= x <1500px css 3响应式的优势:...原创 2020-03-24 22:16:22 · 189 阅读 · 0 评论 -
多列布局案例-流体布局
运用多列布局做出的效果<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin: 0;padding: 0;} ...原创 2020-03-23 22:25:22 · 172 阅读 · 0 评论 -
css3-多列属性
多列属性1、column-count属性规定元素应该被分隔的列数适用于:除table外的非替换块级元素, table cells, inline-block元素eg:默认效果column-count:4;效果,分为四列,数字为几分为几列2、column-gap属性规定列之间的间隔大小column-gap:100px;效果和column-gap默认效果对比3、column-ru...原创 2020-03-23 22:01:04 · 483 阅读 · 0 评论 -
css定位的几种方式
定位经常会用到,但需要了解它的特性才能针对性的运用,为此总结一篇关于定位的博客position属性值有static | relative | absolute | fixed默认值:staticstatic:无特殊定位,对象遵循正常文档流。top,right,bottom,left等属性不会被应用。relative:对象遵循正常文档流,但将依据top,right,bottom,left...原创 2020-03-23 00:22:59 · 164 阅读 · 0 评论 -
animation的属性
animation-name ◦检索或设置对象所应用的动画名称必须与规则@keyframes配合使用,例如:@keyframes mymove{} animation-name:mymoveanimation-duration 动画指定需要多少秒或毫秒完成说明:animation-duration:3s; 动画完成使用的时间为3sanimation-timing-function设...原创 2020-03-22 23:23:47 · 312 阅读 · 1 评论 -
css3阴影总结
容器设置阴影box-shadow语法:box-shadow: h-shadow v-shadow blur spread color inset;以上各属性值的解析:h-shadow 必需的。水平阴影的位置。允许负值v-shadow 必需的。垂直阴影的位置。允许负值blur 可选。模糊距离spread 可选。阴影的大小color 可选。阴影的颜色。inset 可选。从外层的阴影(...原创 2020-03-20 22:58:43 · 140 阅读 · 0 评论 -
FLEX布局
FLEX布局Flex容器:采用 Flex 布局的元素的父元素;Flex项目:采用 Flex 布局的元素的父元素的子元素;容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。...原创 2020-03-20 18:09:24 · 145 阅读 · 0 评论 -
常用的动态伪类选择器功能和应用
常用的动态伪类选择器功能和应用E:link链接伪类选择器选择匹配的E元素,而且匹配元素被定义了超链接并未被访问过。常用于链接描点上E:visited链接伪类选择器选择匹配的E元素,而且匹配元素被定义了超链接并已被访问过。常用于链接描点上E:active用户行为选择器选择匹配的E元素,且匹配元素被激活。常用于链接描点和按钮上E:hover用户行为选择器选择匹配的E元素,且...原创 2020-03-20 00:19:55 · 182 阅读 · 0 评论 -
2020.03.19笔记:文本阴影、background应用、@font-face
文本阴影:text-shadow:水平阴影 垂直阴影 模糊度 颜色;多层文本阴影的设置text-shadow:第一层阴影,第二层阴影,第三层阴影;在单词内部换行word-wrap:;normal 默认值,不允许在单词内部换行break-word 允许在单词内部换行 word-break:; break-all 允许在单词内部换行 keep-...原创 2020-03-19 23:46:42 · 104 阅读 · 0 评论 -
css制作哆啦a梦
css制作哆啦a梦<!DOCTYPE html><html ><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .doraemon{ position: r...原创 2020-03-19 23:35:07 · 613 阅读 · 0 评论 -
一些表格制作的应用方法
1 : 数据行分组<thead></thead><tbody></tbody><tfoot></tfoot>2 : 数据列分组<colgroup span="value"></colgroup>span属性为把几列分为一组3 : 列标题<th></th>4...原创 2020-03-18 22:26:54 · 130 阅读 · 0 评论 -
伪类选择器在表格中的应用
伪类选择器在表格中的应用<body> <table> <tr> <td>1</td> <td>11</td> <td>12</td> </tr> <tr> <t...原创 2020-03-18 21:31:33 · 347 阅读 · 0 评论 -
CSS3选择符笔记
CSS3选择符• 属性选择器1、E[attr]:只使用属性名,但没有确定任何属性值2、E[attr=“value”]:指定属性名,并指定了该属性的属性值3、E[attr~=“value”]:指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词,而且等号前面的“〜”必须的4、E[attr^=“value”]:指定了属性名,并且有属性值,属性...原创 2020-03-18 12:01:08 · 112 阅读 · 0 评论 -
transiton和transform的区别
初学css,经常被transition和transfor属性搞混。transition,过渡;transform,2D/3D转换。transition 属性是一个简写属性,用于设置四个过渡属性:transition-property–规定设置过渡效果的 CSS 属性的名称transition-duration–规定完成过渡效果需要多长时间transition-timing-functi...原创 2020-03-18 10:10:53 · 856 阅读 · 0 评论 -
解决高度坍塌的三种方法
常用DIV+CSS命名大全集合,即CSS命名规则我们开发CSS+DIV网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么地方该如何命名,怎样命名才是好的方法。一、命名规则说明1、所有的命名最好都小写2、属性的值一定要用双引号("")括起来,且一定要有值如 class=“helloweb” , id=“helloweb”3、每个标签都要有开始和结束,且要有正确的...原创 2020-03-17 21:58:42 · 321 阅读 · 0 评论 -
html5语义化标签、音视频标签、inpute新增类型
html5基础语法• 内容类型(ContentType)◦ HTML5的文件扩展符与内容类型保持不变,仍然为".html"或".htm"• DOCTYPE声明◦ 不区分大小写• 指定字符集编码•• 可省略标记的元素◦ 不允许写结束标记的元素:br、col、embed、hr、img、input、、link、meta• 可以省略结束标记的元素:◦ li、dt、dd、p、opti...原创 2020-03-17 21:24:11 · 300 阅读 · 0 评论 -
css3渐变和css3动画笔记
css3css3属性: 预览版,还没有一个正式的最终版,多以有很多的兼容性问题,浏览器不识别 浏览器为了使这些属性兼容,每一个浏览器厂商都提供了一个属于自己的浏览器的语法规则,浏览器兼容前缀 主流浏览器: 谷歌 火狐 苹果 欧朋 ie 浏览器前缀: ...原创 2020-03-16 21:40:06 · 211 阅读 · 0 评论 -
css33d摩天轮动画
摩天轮代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin: 0;padding: 0;} ...原创 2020-03-16 21:28:45 · 3051 阅读 · 1 评论 -
用css3动画效果做的跑动效果
用css3动画效果做的跑动效果用到的图片创建两个盒子css样式思路大概是给boxmax设置宽高,能容下一个小人即可,overflow: hidden;使溢出盒子的图片隐藏,再分成七个动画阶段,每个阶段把小人往左移入盒子中,step-start 马上跳到动画每一结束桢的状态,infinite无限循环,即可完成小人蹦跳的效果。制作简单,可以自己试一试啊,效果特别可爱啊。...原创 2020-03-14 22:43:04 · 872 阅读 · 2 评论