- 博客(16)
- 收藏
- 关注
RSS订阅原创 浮动特性应用实例
我是图片的介绍我是图片的介绍我是图片的介绍我是图片的介绍我是图片的介绍我是图片的介绍我是图片的介绍我是图片的介绍我是图片的介绍我是图介。最初只用于在成块的文本内浮动图像为图片和文字之间的对齐方式是基线对齐 要想图文环绕 需要给图片设置浮动。右边盒子宽度自适应, 添加margin-left:左盒子宽度。左边的盒子固定宽度，添加float:left。总结：浮动脱离文档流不脱离文本流。实现要点：单列定宽，单列自适应。...
2022-08-18 08:46:56
42
1
原创 清浮动的方法
清除浮动的方法1.给浮动元素的父级盒子设置一个固定的高度优缺点：不够灵活，适用于高度固定的布局中2.为浮动元素的父级盒子设置浮动优缺点：会产生新的浮动问题3.为浮动元素的父盒子添加overflow属性；overflow的属性值可以为hidden,scroll,auto优缺点：可能会隐藏内容或触发不需要的滚动条；代码简洁。...
2022-08-18 08:45:14
53
原创 html5
html经过了第5次重大改版,增加了一些语义化的标签 高版本浏览器支持,ie9以下不支持, html5是向后兼容的,原来html4的 标签仍然可以用。
2022-08-18 08:42:45
40
原创 背景属性background-clip
背景被裁剪到边框区域，在内容区、内填充区、边框区域显示，默认值。背景被裁剪到内填充区域，在内容区、内填充区显示。背景被裁剪到内容区域，仅在内容区域显示。/* 背景被裁剪到边框区域，在内容区、内填充区、边框区域显示，默认值 *//* 背景被裁剪到内填充区域，在内容区、内填充区显示 *//* 背景被裁剪到内容区域，仅在内容区域显示 */...
2022-08-18 08:38:49
117
原创 什么是响应式设计
也叫响应式布局，响应式开发实现不同屏幕分辨率的终端上浏览网页的不同展示方式。响应式布局是根据设备屏幕宽度不同适当调整标签显示的布局，从而在每种设备屏幕宽度下呈现的界面是不同的。...
2022-08-18 08:36:03
40
原创 定义关键帧动画
* 在25%的时候进行的一个动画 *//* 在50%的时候进行的一个动画 */from,to表示开始、结束状态，也可以使用0%,100%定义。@keyframes 动画名称（英文） {/* 动画的开始 *//* 动画结束 *//* 动画开始 *//* 动画结束 */@keyframes 动画名称（英文） {...
2022-08-18 08:33:34
105
原创 css3过渡动画——transition属性
移动设备的浏览器都默认设置 了一个viewport元标签，定义了一个虚拟的布局视口，布局视口使视口与移动端浏览器屏幕宽度完全独立开。移动端设备默认的viewport，css布局写的大小， 一般是980px（不写viewpoint代码演示）所以PC上的网页基本能在手机上呈现，只不过看上去很小，一般默认允许用户通过手动缩放、平移来查看网页。大部分移动设备默认的 viewport 为 980px,不同设备上的浏览器的默认的宽度并不一样。如果要显式设置布局视口，可以使用 HTML 中的 meta 标签。...
2022-08-17 20:10:49
205
原创 calc()函数
浏览器支持 在IE9+、Firefox、chrome、safari可以正常呈现。calc()函数支持 "+", "-", "*", "/" 运算；/* calc运算 */任何长度值都可以使用calc()函数进行计算；calc()函数使用标准的数学运算优先级规则；/* 左右两栏 */运算符前后都需要保留一个空格。运算符前后都需要保留一个空格。用于动态计算长度值，值灵活。语法： calc(表达式)利用calc()实现三栏。...
2022-08-17 20:07:23
50
原创 css3基础
是css技术的升级版本，在css2的基础上，新增了许多特性，弥补了css2的不足，使web页面的开发变得更加高效、便捷css3按模块化进行设计，比较重要的css3模块包含、 选择器、框模型、背景和边框、文本效果、2D|3D转换、动画、多列布局、用户界面css3优点: CSS3是完全向后兼容，所以没有必要修改现在的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。...
2022-08-17 20:03:55
34
原创 HTML表单## 学习目标
能够说出表单组成部分掌握HTML常用表单元素掌握HTML常用表单属性表单的作用：用于搜集不同类型的用户输入表单的组成：表单元素（控件）、表单区域生活中的表单：网页中的表单：表单：采集不同类型用户输入的数据，然后发送给服务器，实现用户与服务器之间的数据交互一个完整的表单包含：表单域，表单控件（表单元素），提示信息，共三个部分；语法：<form></form> 作用：定义 HTML 表单域，是一个包含表单元素的区域。实现用户信息的收集和传递。举例说明：比如最为常见的交互操作，
2022-08-17 19:58:20
57
原创 阿里矢量图标(字体图标)
1.使用步骤1.登录阿里矢量图标网站2.搜索想要的图标且加到购物车3.点击右上角的购物车4.选择下载代码，下载完成后解压文件5.把下载的文件放到你的项目中6.引入iconfont.css文件或者iconfont.js文件使用三种方式：下载代码1、Unicode 方式引用Unicode 是字体在网页端最原始的应用方式，特点是：兼容性最好，支持 IE6+，及所有现代浏览器。支持按字体的方式去动态调整图标大小，颜色等等。但是因为是字体，所以不支持多色。...
2022-08-17 19:56:52
91
原创 背景属性背景颜色绘制区域——background-clip属性
flex-wrap属性：指定弹性盒子的子元素换行方式换行，第一行显示在上方换行，第一行显示在下方默认值，不换行注意：父元素有固定高度且高度大于子元素换行后高度之和换行中间有缝隙父元素高度有内容撑开换行没有缝隙align-content属性：折行,行与行之间有间隙,去除间隙 （去掉了中间的间隙）要设置： flex-wrap: wrap;顶端没有行间距底对齐没有行间距居中没有行间距两端对齐，中间自动分配, 元素位于各行之间留有空白空间。...
2022-08-17 19:55:37
66
原创 弹性盒子容器属性——添加弹性容器上
自动分配距离，元素位于各行之前、之间、之后都留有空白空间, 中间的间距是两端间距的两倍,align-self属性：调整自身在侧轴的对齐方式，弹性容器中被选中子项的对齐方式（设置在子元素中）align-content属性：折行,行与行之间有间隙,去除间隙 （去掉了中间的间隙）align-content: flex-start;/* 两端对齐，中间自动分配 */...
2022-08-17 19:53:01
105
原创 1、背景属性
弹性盒子是CSS3的一种新的布局模式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和空白空间的分配操作方便，布局简单，移动端使用广泛PC端浏览器支持情况较差IE11或更低版本中，不支持或部分支持在盒模型中较为灵活弹性盒模型的内容包括：弹性容器、弹性子元素——项目原理：为父元素设置flex属性，控制子元素的位置及排列方式应用场景 : 移动端。...
2022-08-17 19:51:28
41
原创 position:fixed 固定定位
元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：特性特性：1.元素脱离正常文档流，不占位(也脱离文本流，全脱)2.始终相对于浏览器窗口四个角为原点进行固定定位的3.不会随页面的内容滚动而滚动4.能使不能设置宽高的行级元素设置宽高5.提升层级6.如果没有定位偏移属性，对元素本身有影响；应用场景：相对于窗口定位的元素如弹窗、跟随滚动的导航、侧边栏...
2022-08-17 19:48:44
178
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人