css html
文章平均质量分 77
第一阶段学习
ILove_bugs
less is more
展开
-
flex弹性盒布局最后一行不满时左对齐的实现思路
弹性盒子经典问题原创 2021-12-30 18:38:23 · 1050 阅读 · 0 评论 -
day16动画
过渡动画css3的 transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元 素任何改变中触发,并圆滑地以动画效果改变CSS的属性值 分别属性设置 transition-property:检索或设置对象中的参与过渡的属性 transition-duration:检索或设置对象过渡的持续时间 transition-delay:检索或设置对象延迟过渡的时间 transition-timing-funct原创 2021-09-06 20:25:48 · 237 阅读 · 0 评论 -
day13
弹性盒子弹性盒子是css3新的布局模式引入弹性盒布局模型的目的是提供一种更加有效的方式 来对一个容器的子元素进行排版、对齐和分配空间。应用场景 : 移动端display: flex/inline-flex让当前盒子成为弹性盒子,控制子元素(项目)的布局,让子元素(项目)沿着主轴的方向进行对齐 ,默认的主轴是x轴 ,子元素类似于行内块元素(没有间隙),子元素的float,clear,vertical-align属性将失效。flex-direction设置主轴的方向原创 2021-09-03 09:51:09 · 82 阅读 · 0 评论 -
day12
day12CSS3简介 CSS3是最新的CSS标准。 CSS23新增选择器 属性选择器 以box开头 <style> div[class^="box"] { background:red; }</style><div class="box">box</div><div class="abox">abox</div><div class="box...原创 2021-09-03 09:50:02 · 141 阅读 · 0 评论 -
day11
day11HTML5基础HTML5中新增的布局标签html 1990 html4.0.1 1997 html5 2008 稳定版 2012年新增的结构标签 (更加语义化) header标签 <header>这里是头部区</header> footer标签 <footer>这里是页脚区</footer> main标签 <main>这里是主体区</main> nav标签原创 2021-09-03 09:49:23 · 211 阅读 · 0 评论 -
day10
day10常见的图片格式和特点格式 优点 缺点 使用场景 jpg 色彩丰富,文件小 有损压缩,反复保存图片质量下降明显 色彩丰富的图片/渐变图像 gif 文件小,支持动画、透明,兼容性比较好 只支持256种颜色 色彩简单的logo/icon/动图 png 无损压缩,支持透明,简单图片尺寸小 不支持动画,色彩丰富的图片尺寸大 logo/icon/透明图 webp 文件小,支持有损和无损压缩,支持动画、透明原创 2021-08-31 19:04:55 · 117 阅读 · 0 评论 -
day09
兼容IE 浏览器常见兼容问题 兼容问题 ie中图片边框问题 图片放在a标签中 img { border:none } ie8以下浏览器中背景复合属性的写法问题 .bg { background:url("./images/bg.jpg")no-repeat center } 解决方案:在url和no-repeat 直接加上空格 .bg { background:url("./im原创 2021-08-31 19:04:26 · 147 阅读 · 0 评论 -
day08
圆角属性 .box { width: 300px;height: 300px;background-color: red;/*border-radius四个角可以设置不同的圆角*/border-radius: 20px 50px 80px 100px;padding: 20px;border: 20px solid #000;}.box1 {width: 300px;height: 300px;background-color: blue..原创 2021-08-31 19:03:47 · 341 阅读 · 0 评论 -
day07
表单表单元素 表单元素是允许用户在表单中输入内容的标签, 比如:文本域、下拉列表、单选框、复选框等。 表单元素标签 input标签 概述:<input> 标签是最重要的表单元素。 type属性取值不同,可以展示出不同的表单形式 作用:用来定义不同种类的输入控件 语法:<input type="类型"> 常用类型9种 type="text" 作用:用于文本输入的原创 2021-08-31 19:03:06 · 272 阅读 · 0 评论 -
day06
定位定位的应用场景和基本原理定位的原理 在本文流中 , 任何一个标签都被文本流所限制了自身的位置 , 但是通过 CSS 我们依然使得这些标签可以改变 自己的位置 , 我们可以通过 float 来让标签浮动 , 我们也可以通过 margin 来让标签产生位置移动。 CSS 定位属性,允许定义标签框相对于其正常位置应该出现的位置,或者相对于父标签、 另一个标签甚至浏览器窗口本身的位置。标签可以使用顶部、底部、左侧和右侧属性定义具体的位置 position static 默认 静态定位原创 2021-08-31 19:02:08 · 125 阅读 · 0 评论 -
day05
浮动什么是浮动?标签的浮动是指设置了浮动属性的标签会脱离标准流的控制,移动到其父标签的指定位置浮动属性 float left right none 默认 浮动的作用 图文环绕:注意:图片和文字不会到浮动标签的下方 页面布局 浮动的宽度 浮动的宽度就是内容的宽度 浮动的问题标签浮动以后,脱离的正常文档流,导致父标签无法被撑开,会影响后续正常布局清浮动的几种方法 给浮动标签的父标签固定高度(不原创 2021-08-31 19:00:47 · 95 阅读 · 0 评论 -
day04
背景属性 background-color : red background-image: url(./img/bg.jpg) background-repeat: no-repeat background-size: 像素值或者百分比 background-position:百分比或者位置英文单词或者像素值 简写:background:red url(./img/bg.jpg) no-repeat top 标签的嵌套规则 h原创 2021-08-31 18:59:10 · 102 阅读 · 0 评论 -
day03
实用小技巧:边框实现小三角 div { width: 0px; /* width: 200px; height: 200px; */ /* background-color: pink; */ /* border:100px solid red */ border-width: 10px ; border-style: solid; /* 透明色:transparent */ border-co原创 2021-08-31 18:56:46 · 134 阅读 · 0 评论 -
day02
HTML列表 无序列表 项目的列表li,自带粗体的圆点项目符号 块级标签 list-style: none; 去掉项目符号 ul>li 复合标签,ul标签的子标签必须是li标签 <ul> <li>HTML</li> <li>CSS</li> <li>JS</li> <.原创 2021-08-31 18:50:46 · 98 阅读 · 0 评论 -
day01
1.课程的规划第一阶段、css3/html5第二阶段、JS交互第三阶段、node开发第四阶段、前端框架 :vue react第五阶段、小程序+数据可视化第六阶段、就业指导+项目实训小目标:PC电商网站2.前端的概述 web的发展史 web1.0 简单的静态页面 早期三大门户 搜狐 新浪 网易 web2.0 更注重用户之间的交互 用户即是信息的消费者也是制造者 微博 web3.0 人工智能原创 2021-08-31 18:45:20 · 244 阅读 · 2 评论