HTML
加油,铁子!
这个作者很懒,什么都没留下…
展开
-
网格布局display: grid;
什么是网格布局是一种强大的CSS布局方案,它将网页划分成一个个网格,可以任意组合的网格(类似excel)网格布局是CSS3的布局系统与弹性布局类似网格可以理解成是二维布局(弹性布局是一维的)可以使用align-item justify-content等属性IE11部分支持display:grid 设置该元素为网格容器display: grid;grid-template-columns: 列宽<!DOCTYPE html>...原创 2021-08-12 22:44:01 · 29585 阅读 · 1 评论 -
服务器字体的设置和引入、阿里巴巴矢量库的使用
@font-face { font-family:自定义名字; src: 字体源;}原创 2021-08-11 14:56:48 · 738 阅读 · 0 评论 -
动画的实现(立方体旋转、钟表旋转、梦幻……)
立方体旋转效果图:代码实现:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>旋转的立方体</title> <style type="text/css"> @keyframes roll{ from{ transform: rotateX(0) rotateY(0) rotateZ(0); ..原创 2021-08-11 09:18:13 · 86 阅读 · 0 评论 -
轮播图的学习与实现(使用HTML+css实现轮播图)
轮播图原理<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>轮播图</title> <style type="text/css"> /* 1、首尾不衔接 2、图片之间停留间隙 */ @keyframes move{ from{ left: 0; } to{ left: -1200px;原创 2021-08-09 11:19:57 · 192 阅读 · 0 评论 -
动画animation的实现与其全部属性
作用:增加用户体验不推荐过度使用关键帧:keyframes@keyframes 规定动画 animation 所有动画属性的简写属性 animation-name @keyframes动画的名称 animation-duration 动画一个周期持续时间 默认0 animation-delay 动画延迟时间(什么时候开始) 默认0 animation-timing-function 动画速原创 2021-08-09 10:30:02 · 109 阅读 · 0 评论 -
css3特效:阴影、渐变、过渡、变形、滤镜
阴影(shadow)box-shadow、text-shadow 格式: 阴影:横向偏移量 纵向偏移量 模糊距离 阴影颜色<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>shadow</title> <style type="text/css"> di...原创 2021-08-08 16:12:52 · 427 阅读 · 0 评论 -
css变量
1、什么是css变量自定义属性的通俗叫法2、如何定义?大小写敏感:root{}:root{ /* --my-color:tomato; --public-width:100px; --zlt-color:gold; */}3、如何使用?p{color:var(--color);}var(c...原创 2021-08-07 17:37:27 · 96 阅读 · 1 评论 -
结构性伪类选择器
nth-childnth-of-type(推荐使用)first-childlast-child<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title结构性伪类选择器></title> <style type="text/css"> *{ margin: 0; padding: 0; list-styl原创 2021-08-07 17:36:59 · 85 阅读 · 1 评论 -
目标选择器
子代选择器 div>p兄弟选择器 div+p同级选择器 div~p属性选择器 [属性名]子代选择器 div>p<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>目标选择器</title> <style type="text/css"> .first>li{ /* 子代选择器 */原创 2021-08-07 17:34:19 · 429 阅读 · 1 评论 -
弹性盒子的属性与使用
目的:1、提供一种更加有效的方式来布局、对齐和分布在容器之间的各项内容,即使他们的大小是未知的变化的。2、让容器有能力改变项目的宽和高,以填满可用空间。3、布局与方向无关4、最适合小规模布局(大规模用网络)属性声明要使用弹性盒模型display:flex/display:index-flex适用于父类元素检索,子类在盒子中的位置(子类的排列顺序)flex-direction:写在父类css中,但是作用于子级值row 横...原创 2021-08-07 17:26:00 · 159 阅读 · 0 评论 -
怪异盒模型
正常盒模型box-sizing:content-box;怪异盒模型box-sizing:border-box;1、怪异盒模型的border和padding是内嵌的,不增加盒模型面积2、如果内部空间不够,会向外扩展<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>怪异盒模型</title> <...原创 2021-08-06 10:32:07 · 56 阅读 · 0 评论 -
使用css让导航栏在页面顶端固定
在导航栏上给个固定定位:position: fixed;由于固定定位是脱离标准流的,所以,它所固定的位置会遮住了下方内容的一部分。解决方法:内容部分设置margin-top,具体的值为导航的高度。此时内容部分不会被遮住,但导航并非位于网页顶端。解决方法:对导航设置top:0。导航部分 position: fixed;top: 0;内容部分margin-top: 导航高度px;...原创 2021-08-06 09:58:07 · 2057 阅读 · 0 评论 -
H5新标签,让你的布局更加明了
优势:标签语义化语义化好处:1、如果没有css样式,html结构一目了然2、提高了团队的开发效率3、提升了网页的SEO新的结构标签 头部 <header></header> 底部 <footer></footer> 侧边栏 <aside></aside> 主体 <main></main> 文章 <artic...原创 2021-08-06 09:48:30 · 80 阅读 · 0 评论 -
图文详解响应式设计
设置viewport写法 作用 width=device-width 设置宽度为屏幕宽度 maximum-scale=1 最大缩放比例为1.0(0.25~10.0) minimum-scale=1 最小缩放比例为1.0(0.25~10.0) user-scalable=no 禁止用户捏合操作 initial-scale=1 初始化的缩放比例 <meta name="viewport" content="width=device-widt原创 2021-08-06 09:47:05 · 110 阅读 · 0 评论 -
form表单
form表单格式: <form action="" method=""> </form> action:后台地址 method:请求方式: get:会明文展示(拼在网址上)不够安全 更快捷 post:不会明文 更安全 传输内容比较大(比如上传文件)文本输入框type="text" name:给后台传值的描述(key、键)...原创 2021-08-02 15:08:36 · 41 阅读 · 0 评论 -
表格tr的使用
表格的基本结构表格:table表头:thead表格主题:tbody表格的行:tr表头的列:th表主体的列:td如何使用表格<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style ...原创 2021-08-02 13:57:53 · 141 阅读 · 0 评论