前端
文章平均质量分 92
一二小选手
Java开发
展开
-
【css】网页动画 transform transition animation 含案例北极熊奔跑
animation 实现动画主要由两个部分组成1.通过类似Flash 动画的关键帧来声明一个动画2.在animation 属性中调用关键帧声明的动画实现一个更为复杂的动画效果。原创 2024-08-12 08:20:35 · 1055 阅读 · 0 评论 -
【css】定位网页元素 含案例导航条吸顶变色
相对定位relative 一般情况下很少自己单独使用,都是配合绝对定位absolute 使用,为绝对定位创造定位父级而又不设置偏移量。在网页制作中可以用于需要使某个元素脱离标准流,而仍然希望它保持在原来的位置的情况。:设置了绝对定位但没有设置偏移量的元素将保持在原来的位置。偏移设置: left、right、top、bottom。偏移设置:top、left、right、bottom。偏移设置:top、left、right、bottom。改变设置绝对定位和没有设置绝对定位的层的。/* 吸顶后的头部颜色 */原创 2024-08-11 11:09:15 · 1070 阅读 · 0 评论 -
【css】浮动 解决父级边框塌陷问题的四种方法 display float overflow
指元素根据块元素或行内元素的特性按从上到下,从左到右的方式自然排列。这也是元素默认的排列方式。父级添加overflow属性(简单,但是下拉列表框的场景不能用)内联标签可以包含于块级标签中,成为它的子元素,而反过来则不成立。设置父元素的高度(简单,但是固定高度会降低扩展性)inline-block和float的区别。/*在clear类后面添加内容为空*//*把添加的内容转化为块元素*//*清除这个元素两边的浮动*/(简单,但是会造成代码冗余)内联元素(inline)(复杂,但是没有副作用)原创 2024-08-11 11:01:02 · 945 阅读 · 0 评论 -
【css】盒子模型常用属性(内外边距及边框 盒子阴影)
盒子模型总尺寸 = border + padding + margin + 内容宽度。同时设置边框的颜色、粗细和样式。内容–内边距–边框–外边距。网页居中对齐的必要条件。原创 2024-08-09 10:51:21 · 364 阅读 · 0 评论 -
【css】CSS3美化网页元素(字体样式 文本样式 超链接伪类 列表样式 背景样式 css渐变)
字体属性的顺序:字体风格→字体粗细→字体大小→字体类型。原创 2024-08-08 11:16:10 · 1062 阅读 · 0 评论 -
【css】css引入方法及选择器详解(基本选择器 层次选择器 结构伪类选择器 属性选择器)
不遵循,无论是哪种方式引入CSS样式,一般都遵循ID选择器 > class类选择器 > 标签选择器 > 全局选择器的优先级。E F:nth-child(n)和E F:nth-of-type(n)的区别。外部样式表(CSS代码保存在扩展名为.css的样式表中 HTML文件。内部样式表(CSS代码写在<head>的<style>标签中)交集选择器(css中后者重复属性会覆盖前者)层次选择器、结构伪类选择器、属性选择器。标签选择器(直接应用于HTML标签)类选择器(可在页面中多次使用)并集选择器(用,隔开)原创 2024-08-07 11:40:24 · 697 阅读 · 0 评论 -
一文搞定前端HTML5——列表、表格、媒体元素与表单
HTML 5作为最新版本,提供了一些新的元素和一些有趣的新特性,同时也建立了一些新的规则。这些元素、特性和规则的建立,提供了许多新的网页功能,如使用网页实现动态渲染图形、图表、图像和动画,以及不需要安装任何插件直接使用网页播放视频等。它可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者能更快捷地获得相应的信息。表格常用于结构一致的数据,例如学员成绩表、购物网站上购物车中的列表信息等。:从一个页面链接到另外一个页面(网站导航菜单、新闻列表、商品列表)超文本包括:文字、图片、音频、视频、动画等。原创 2024-08-07 11:30:23 · 841 阅读 · 0 评论 -
从字体图标到svg——Web图标发展史以及iconfont矢量图标库的使用
要注意的是,这并没有在根本上改变 web 图标渲染的方式,底层依然是基于前文提到的各种方案。在浏览器中使用的是图形渲染,所以就是实实在在的路径。:icon-font 图标通过伪元素插入,依赖于 line-height , vertical-align,letter-spacing , word-spacing ,字体字形设计(它的四周有留白吗?范围内)并为其绘制字形,同时生成好一堆预定义的图标名 class name,通过 web font 的方式加载资源,通过对应的 class name 来引用图标。原创 2024-08-06 17:22:31 · 1501 阅读 · 0 评论