前端【H5+Css3】
文章平均质量分 52
H5+Css3
Bruce小鬼
**高级测试开发**
- 技术是在不断打磨中成长,
- 能力是在不断采坑中成熟,
- 技术人的路就是在采坑中寻找乐趣,在成长过程中不断成熟。
> 书山有路勤为径,学海无涯苦作舟
关注:brucelong.blog.csdn.net
展开
-
P91-前端基础高级布局flex-弹性元素属性介绍
P91-前端基础高级布局flex-弹性元素属性介绍1.概述这篇文章介绍弹性布局中的弹性元素属性2.弹性元素属性介绍2.1.自动增长元素宽度小于弹性容器宽度,设置自动增长系数会填满弹性容器空白空间<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>弹性元素的样式</title> <style> * { m原创 2021-02-03 14:24:13 · 754 阅读 · 0 评论 -
P90-前端基础高级布局flex-弹性容器属性介绍
P90-前端基础高级布局flex-弹性容器属性介绍文章目录P90-前端基础高级布局flex-弹性容器属性介绍1.概述2.弹性容器属性介绍2.1.设置弹性元素是否自动换行2.2.设置分配主轴上的空白空间2.3.设置元素在弹性容器辅轴对齐方式2.4.覆盖当前弹性元素上的align-items2.5.设置元素在弹性容器辅轴空白空间的分布3.弹性容器属性设置完整代码1.概述这篇文章介绍弹性容器盒中弹性容器相关属性设置,帮助我们完成各种页面布局需求2.弹性容器属性介绍2.1.设置弹性元素是否自动换行原创 2021-02-03 12:03:57 · 772 阅读 · 0 评论 -
P89-前端基础高级布局flex-弹性盒布局导航栏练习
P89-前端基础高级布局flex-弹性盒布局导航栏练习1.概述我们使用新学习的布局方式来做个导航栏,弹性盒导航栏。体验下弹性盒的优点2.弹性盒布局导航栏2.1.未开启弹性盒代码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>弹性盒导航栏</title> <link rel="stylesheet" href="css/reset.c原创 2021-02-02 20:46:27 · 1128 阅读 · 0 评论 -
P88-前端基础高级布局flex-弹性盒介绍
P88-前端基础高级布局flex-弹性盒介绍1.概述前面我们布局通常使用的方式是 浮动+定位。浮动会有一些负面作用,比如父元素高度塌陷,下面我们介绍一个新的布局方式替代浮动。flex(弹性盒、伸缩盒)是CSS中的又一种布局手段,它主要用来代替浮动来完成页面的布局flex可以使元素具有弹性,让元素可以跟随页面的大小的改变而改变弹性容器要使用弹性盒,必须先将一个元素设置为弹性容器我们通过 display 来设置弹性容器display:flex 设置为块级弹性容器displa原创 2021-02-02 20:31:39 · 700 阅读 · 0 评论 -
P87-前端基础Less-语法介绍父元素&扩展&函数
P87-前端基础Less-语法介绍父元素&扩展&函数1.概述这篇文章介绍一些Less入门常用的语法2.案例结构2.1.html文件内容<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Less语法</title> <!-- 引用less预编译后的css文件 --> <link rel原创 2021-02-02 19:28:00 · 1641 阅读 · 0 评论 -
P86-前端基础Less-介绍
P86-前端基础Less-介绍1.概述这篇文章开始介绍CSS的增强版Less,less在使用上比CSS要简介效率更高。less是一门css的预处理语言less是一个css的增强版,通过less可以编写更少的代码实现更强大的样式在less中添加了许多的新特性:像对变量的支持、对mixin的支持… …less的语法大体上和css语法一致,但是less中增添了许多对css的扩展,所以浏览器无法直接执行less代码,要执行必须向将less转换为css,然后再由浏览器执行2.CSS变量在介原创 2021-02-02 16:02:10 · 657 阅读 · 0 评论 -
P85-前端基础动画效果-动画缩放效果
P85-前端基础动画效果-动画缩放效果1.概述这篇文章介绍动画缩放效果对元素进行缩放的函数:scaleX() 水平方向缩放scaleY() 垂直方向缩放scaleZ() Z方向缩放scale() 双方向的缩放2.缩放2.1.缩放代码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>缩放</title></head>原创 2021-02-02 10:04:48 · 1005 阅读 · 0 评论 -
P84-前端基础动画效果-动画3D复仇者联盟练习
P84-前端基础动画效果-动画3D复仇者联盟练习1.概述这篇文章通过一个3D动画,对前面学习的动画效果做一个总结性的练习。知识点:元素设置透明效果设置3d变形效果设置动画旋转2. 3D复仇者联盟2.1.3D复仇者联盟图片2.2.3D复仇者联盟代码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>3D复仇者联盟</title&原创 2021-02-01 19:36:50 · 1056 阅读 · 0 评论 -
P83-前端基础动画效果-动画奔跑的小子练习
P83-前端基础动画效果-动画奔跑的小子练习1.概述这篇文章通过一个奔跑的少年练习动画效果2.奔跑的小子2.1.奔跑的小子图片2.2.奔跑的小子代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>奔跑的少年</title> <style> .box { /* 设置单个图片的宽高 *原创 2021-01-31 19:38:52 · 900 阅读 · 0 评论 -
P82-前端基础动画效果-动画旋转练习鸭子表
P82-前端基础动画效果-动画旋转练习鸭子表1.概述这篇文章做个练习复习上篇文章学习的旋转动画,鸭子表。2.鸭子表我们的目标是做一个鸭子背景图案的钟表,有三个表针旋转。在这个案例中我们通过拆分步骤介绍如何制作钟表。2.1.表针末端旋转原理旋转动画<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>表</title>原创 2021-01-31 19:08:20 · 909 阅读 · 0 评论 -
P81-前端基础动画效果-动画旋转
P81-前端基础动画效果-动画旋转1.概述我们继续介绍CSS动画,这篇主要介绍是动画旋转效果。动画的旋转和上篇介绍的Z轴平移使用步骤是一样的。2.动画旋转动画效果的介绍风格与前面的一样,先给出基础内容的代码。后面将每个效果代码单独介绍。通过旋转可以使元素沿着x y 或 z旋转指定的角度rotateX()rotateY()rotateZ()旋转的单位有三种:px:像素deg:角度turn:圈2.1.动画旋转基础代码动画Z轴旋转<!DOCTYPE原创 2021-01-31 15:57:17 · 1859 阅读 · 0 评论 -
P80-前端基础动画效果-Z轴可视距离调整效果
P80-前端基础动画效果-Z轴可视距离调整效果1.概述z轴平移,调整元素在z轴的位置,正常情况就是调整元素和人眼之间的距离,距离越大,元素离人越近z轴平移属于立体效果(近大远小),默认情况下网页是不支持透视,如果需要看见效果必须要设置网页的视距2.Z轴移动设置Z轴移动有两个步骤设置网页初始可视距离:设置html的perspective来初始化可视距离设置Z轴移动距离: 设置Z轴移动距离,transform: translateZ(100px)<!DOCTYPE htm原创 2021-01-30 21:04:59 · 861 阅读 · 0 评论 -
P79-前端基础动画效果-变形平移
P79-前端基础动画效果-变形平移1.概述这篇文章介绍水平和垂直平移动画效果变形就是指通过CSS来改变元素的形状或位置变形不会影响到页面的布局,当前元素的变形不会影响相邻元素布局位置。transform 用来设置元素的变形效果平移:平移元素,百分比是相对于自身计算的translateX() 沿着x轴方向平移translateY() 沿着y轴方向平移translateZ() 沿着z轴方向平移2.变形平移2.1.在元素大小确定下设置居中效果当元素宽和高是固定的情况下,我们原创 2021-01-30 20:51:06 · 687 阅读 · 0 评论 -
P78-前端基础动画效果-小球跳跃动画练习
P78-前端基础动画效果-小球跳跃动画练习1.概述通过一个小球跳跃练习上篇文章学习的动画效果2.小球跳跃<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>动画</title> <style> .outer { height: 500px; border-bottom: 1原创 2021-01-30 18:54:46 · 828 阅读 · 2 评论 -
P77-前端基础动画效果-动画
P77-前端基础动画效果-动画1.概述动画和过渡类似,都是可以实现一些动态的效果,不同的是过渡需要在某个属性发生变化时才会触发动画可以自动触发动态效果设置动画效果,必须先要设置一个关键帧,关键帧设置了动画执行每一个步骤2.动画动画案例的介绍分为两个部分,基础结构和动画效果。基础结构是不包含动画效果的内容。动画是从基础结构中摘出来的内容,这样每个动画效果的代码看起来层次分明不会显得杂乱无章。2.1. 基础结构<!DOCTYPE html><html&g原创 2021-01-30 18:22:33 · 629 阅读 · 0 评论 -
P76-前端基础动画效果-米兔过渡效果练习
P76-前端基础动画效果-米兔过渡效果练习1.概述这篇文章通过一个小练习复习下我们上篇文章学习的过渡效果2.米兔2.1.米兔图片2.2.米兔代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>米兔动画</title> <style> .box { height: 271px;原创 2021-01-30 16:13:28 · 1767 阅读 · 1 评论 -
P75-前端基础动画效果-过渡效果
P75-前端基础动画效果-过渡效果1.概述这篇文章介绍动画效果其中的一个类型过渡效果。2.过渡效果2.1.过渡效果基础内容<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>过度动画效果</title> <style> /* 初始化间距 */ * { margin: 0; padding:原创 2021-01-29 19:08:08 · 769 阅读 · 0 评论 -
P74-前端基础项目开发-首页main部分开发广告栏-项目完整代码
P74-前端基础项目开发-首页main部分开发广告栏-项目完整代码1.概述这篇文章是首页开发最后一个部分,也是这个项目的结束部分。通过这个项目练习让我们掌握了HTML+CSS的基础使用。2.广告栏2.1.广告栏需求样式2.2.创建广告栏内容在index.html文件中创建广告栏内容 <!-- 创建广告容器 --> <div class="ad w"> <ul class="shortcut"> <li>原创 2021-01-29 14:41:27 · 965 阅读 · 0 评论 -
P73-前端基础项目开发-首页main部分开发工具条
P73-前端基础项目开发-首页main部分开发工具条1.概述网页的右下角通常会有个工具条用来设置一些快捷操作,例如回到网页顶部。2.工具条2.1.工具条需求效果2.2.创建工具条结构在index.html中添加工具条内容。-工具条内容添加到Banner图下面工具条内容 <!-- 网页固定定位的工具条 --> <div class="back-top"></div>2.3.设置工具条样式在index.css中设置工具条样式,这个原创 2021-01-29 11:49:41 · 749 阅读 · 0 评论 -
P72-前端基础项目开发-首页main部分开发Banner
P72-前端基础项目开发-首页main部分开发Banner1.概述这篇文章开发首页Banner图,实现banner图上左右两个箭头点击效果和图片右下角5个小点切换效果2.Banner图2.1.Banner图需求效果2.2.创建Banner图结构index.html添加Banner内容在header下面添加Banner内容<!-- ################创建首页main主体部分结构################ --> <!-- 创建banne原创 2021-01-29 11:17:25 · 911 阅读 · 0 评论 -
P71-前端基础项目开发-网页导航栏开发首页header头部左侧导航栏
P71-前端基础项目开发-网页导航栏开发首页header头部左侧导航栏1.概述在首页header部分现在还有一个左侧的导航栏没有开发,下面就来完成这个导航栏。2.首页header头部左侧导航栏2.1.左侧导航栏需求2.2.创建左侧导航栏结构左侧的导航栏实际上是全部商品分类的下拉框,因此我们在全部商品分类中添加左侧导航栏内容 <!-- 创建一个中间导航条的容器 --> <div class="nav-wrapper"> &l原创 2021-01-28 17:50:26 · 1611 阅读 · 0 评论 -
P70-前端基础项目开发-网页导航栏开发首页header头部搜索框
P70-前端基础项目开发-网页导航栏开发首页header头部搜索框1.概述本篇文章继续开发首页header部分内容,搜索框。2.搜索框2.1.搜索框需求效果2.2.添加搜索框内容在index.html添加搜索框内容<!-- 创建中间导航搜索框 --> <div class="serach-wrapper"> <form action="#" class="search"> <input clas原创 2021-01-28 16:40:58 · 1033 阅读 · 1 评论 -
P69-前端基础项目开发-网页导航栏开发首页header头部导航下拉层
P69-前端基础项目开发-网页导航栏开发首页header头部导航下拉层1.概述这篇文章我们给首页header头部导航增加一个下拉层效果。2.首页header头部导航下拉层2.1.首页header头部导航下拉层需求样式2.2.新增导航下拉结构在index.html文件中增加下拉的内容2.3.导航下拉样式设置在index.css文件中添加下拉样式/* 设置中间导航下拉层效果 *//* 设置中间导航下拉尺寸 */.nav .goods-info { /* height:原创 2021-01-27 19:48:23 · 1502 阅读 · 0 评论 -
P68-前端基础项目开发-网页导航栏开发首页header部分导航栏
P68-前端基础项目开发-网页导航栏开发首页header部分导航栏1.概述2.首页header部分导航栏2.1.header导航栏开发样式预览2.2.添加header导航栏结构在index.html文件中添加header导航栏结构内容<!-- ################创建首页header部分结构################ --> <!-- 创建一个头部的外部容器 --> <div class="header-wrapper">原创 2021-01-27 17:31:43 · 994 阅读 · 0 评论 -
P67-前端基础项目开发-网页导航栏开发首页logo图标切换效果
P67-前端基础项目开发-网页导航栏开发首页logo图标切换效果1.概述上篇文章完成了首页导航栏的开发,这篇文章开始开发首页header部分内容,首先开发header部分的logo内容2.添加首页header-logo2.1.添加首页logo结构内容在index.html文件中添加logo结构内容在导航栏下面添加logo内容 <!-- ################创建首页header部分结构################ --> <!-- 创建一个头原创 2021-01-27 15:47:00 · 1134 阅读 · 0 评论 -
P66-前端基础项目开发-网页导航栏开发二维码下拉
P66-前端基础项目开发-网页导航栏开发二维码下拉1.概述这篇设置导航栏的下拉二维码效果2.下拉二维码实现思路2.1.下拉二维码效果2.2.在index.html中下载app位置添加二维码添加效果原创 2021-01-27 12:01:25 · 1171 阅读 · 0 评论 -
P65-前端基础项目开发-网页导航栏开发
P65-前端基础项目开发-网页导航栏开发1.概述这篇文章完成小米商城的导航栏结构搭建和样式的布局。2.导航栏结构搭建2.1.导航栏效果图2.2.导航栏结构搭建index.html搭建首页导航栏结构<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>小米商城</title> <!-- 引入重置样式表 --> <原创 2021-01-26 20:44:17 · 709 阅读 · 0 评论 -
P64-前端基础项目开发-搭建全局结构
P64-前端基础项目开发-搭建全局结构1.概述从这篇文章开始模拟小米网站首页写一个Demo项目,练习HTML结构和CSS样式。2.项目全局结构2.1.网页全局结构2.2.base.css内容/* 公共样式 */.clearfix::before,.clearfix::after{ content: ''; display: table; clear: both;}/* 去除a的下划线 */a{ text-decoration: none;原创 2021-01-26 19:12:46 · 609 阅读 · 0 评论 -
P63-前端基础CSS-电影卡片练习图文布局
P62-前端基础CSS-电影卡片练习图文布局1.概述通过电影卡片案例,综合练习背景图片、文字的样式设置和布局。2.电影卡片案例<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>电影卡片</title> <link rel="stylesheet" href="./css/reset.css"> <!-- 导入图标字体 -原创 2021-01-26 18:51:56 · 1515 阅读 · 1 评论 -
P62-前端基础CSS-背景图片位移之雪碧图效果
P62-前端基础CSS-背景图片位移之雪碧图效果1.概述问题描述:当我们使用背景图片做一些鼠标hover和点击状态时切换图片显示一些不同的效果,会遇到一个小问题,就是图片是懒加载方式,第一次访问网页时只会请求第一张图片,鼠标hover和点击动作的图片只有在触发时才会发送请求下载该图片到本地,就是在这个下载过程中会出现切换图片空白期。解决思路:可以将多个小图片统一保存到一个大图片中,然后通过调整background-position来显示的图片这样图片会同时加载到网页中 就可以有效的避免出现闪原创 2021-01-26 12:26:52 · 962 阅读 · 0 评论 -
P61-前端基础HTML-表单入门介绍
P61-前端基础HTML-表单入门介绍1.概述表单:在现实生活中表单用于提交数据在网页中也可以使用表单,网页中的表单用于将本地的数据提交给远程的服务器使用form标签来创建一个表单2.表单基础<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>表单</title></head><body> <!--原创 2021-01-25 14:35:30 · 692 阅读 · 0 评论 -
P60-前端基础HTML-表格样式
P60-前端基础HTML-表格样式1.概述表格样式的常用设置包含表格边框、单元格、对齐方式以及背景颜色。2.表格样式案例<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>表格的样式</title> <style> table { width: 50%; border: 1px solid blac原创 2021-01-25 13:57:12 · 1146 阅读 · 0 评论 -
P59-前端基础HTML-表格结构介绍
P59-前端基础HTML-表格结构介绍1.概述一个表格分成三个部分:头部 thead主体 tbody底部 tfoot2.表格结构案例<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>表格结构</title></head><body> <!-- 可以将一个表格分成三个部分:原创 2021-01-25 11:28:17 · 599 阅读 · 0 评论 -
P58-前端基础HTML-表格入门介绍
P57-前端基础HTML-表格入门介绍1.概述在现实生活中,我们经常需要使用表格来表示一些格式化数据:课程表、人名单、成绩单…同样在网页中我们也需要使用表格,我们通过table标签来创建一个表格2.表格入门介绍表格入门中介绍了创建表格、横向合并单元格和纵向合并单元格。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>表格</title原创 2021-01-25 11:18:09 · 603 阅读 · 0 评论 -
P57-前端基础CSS-背景图片径向渐变
P57-前端基础CSS-背景图片径向渐变1.概述默认情况下径向渐变的形状根据元素的形状来计算的正方形 --> 圆形长方形 --> 椭圆形我们也可以手动指定径向渐变的大小circleellipse也可以指定渐变的位置语法:radial-gradient(大小 at 位置, 颜色 位置 ,颜色 位置 ,颜色 位置)大小:circle 圆形ellipse 椭圆closest-side 近边 closest-corner 近角farthest-side 远边fart原创 2021-01-24 20:30:55 · 891 阅读 · 0 评论 -
P56-前端基础CSS-背景图片线性渐变
P56-前端基础CSS-背景图片线性渐变1.概述通过渐变可以设置一些复杂的背景颜色,可以实现从一个颜色向其他颜色过渡的效果!!渐变是图片,需要通过background-image来设置线性渐变,颜色沿着一条直线发生变化linear-gradient()linear-gradient(red,yellow) 红色在开头,黄色在结尾,中间是过渡区域线性渐变的开头,我们可以指定一个渐变的方向to leftto rightto bottomto topdeg deg表示度数turn 表原创 2021-01-24 20:18:35 · 1125 阅读 · 0 评论 -
P55-前端基础CSS-背景图片
P55-前端基础CSS-背景图片1.概述页面除了设置背景颜色外,还可以设置背景图片。通过对背景图片样式设置美化我们的页面。2.背景使用入门background-image 设置背景图片可以同时设置背景图片和背景颜色,这样背景颜色将会成为图片的背景色如果背景的图片小于元素,则背景图片会自动在元素中平铺将元素铺满如果背景的图片大于元素,将会一个部分背景无法完全显示如果背景图片和元素一样大,则会直接正常显示background-repeat 用来设置背景的重复方式可选值:repe原创 2021-01-24 19:14:04 · 661 阅读 · 0 评论 -
P54-前端基础CSS-字体其他的样式
P54-前端基础CSS-字体其他的样式1.概述字体除了前面介绍的样式还有一些其他常用的文本样式,下面介绍其他的样式2.字体属性的简写2.1.字体属性简写<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>字体的简写属性</title> <style> div { border: 1px red solid;原创 2021-01-24 14:18:27 · 592 阅读 · 0 评论 -
P53-前端基础CSS-行高设置
P53-前端基础CSS-行高设置1.概述行高(line height)行高指的是文字占有的实际高度可以通过line-height来设置行高行高可以直接指定一个大小(px em)也可以直接为行高设置一个整数如果是一个整数的话,行高将会是字体的指定的倍数行高经常还用来设置文字的行间距行间距 = 行高 - 字体大小字体框字体框就是字体存在的格子,设置font-size实际上就是在设置字体框的高度行高会在字体框的上下平均分配2.行高设置<!DOCTYPE h原创 2021-01-24 13:37:14 · 903 阅读 · 0 评论 -
P52-前端基础CSS-阿里图标字体库
P52-前端基础CSS-阿里图标字体库1.概述上篇《P51-前端基础CSS-图标字体介绍》 介绍了fontawesome官网的图标字体库,下面介绍阿里的图标字体库2.下载阿里图标字体库2.1.下载地址阿里图标字体库2.2.选择图标添加到购物车2.3.点击购物车添加至项目2.4.下载到本地2.5.点击下载文件的demo_index.html查看使用文档3.使用阿里图标字体3.1.导入下载文件到项目3.2.通过图标编号使用图标3.3.通过图标类使用图标3.4.通过伪原创 2021-01-23 21:05:50 · 756 阅读 · 0 评论