web前端
加油,铁子!
这个作者很懒,什么都没留下…
展开
-
时间倒计时(html、cs、js实现)
效果图代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>考研倒计时</title> <style type="text/css"> *{ margin: 0; padding: 0; list-style: none; } html{ font-size: 62.5%;.原创 2021-08-22 16:59:30 · 192 阅读 · 0 评论 -
手风琴图片跳转(html、cs、js实现)
点击图片实现跳转,背景图片也随之跳转,类似于拉手风琴代码实现<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>手风琴效果</title> <style type="text/css"> *{ margin: 0; padding: 0; list-style: none; } ..原创 2021-08-22 22:46:18 · 197 阅读 · 0 评论 -
网格布局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 · 29359 阅读 · 1 评论 -
服务器字体的设置和引入、阿里巴巴矢量库的使用
@font-face { font-family:自定义名字; src: 字体源;}原创 2021-08-11 14:56:48 · 716 阅读 · 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 · 84 阅读 · 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 · 189 阅读 · 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 · 416 阅读 · 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 · 95 阅读 · 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 · 83 阅读 · 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 · 424 阅读 · 1 评论 -
弹性盒子的属性与使用
目的:1、提供一种更加有效的方式来布局、对齐和分布在容器之间的各项内容,即使他们的大小是未知的变化的。2、让容器有能力改变项目的宽和高,以填满可用空间。3、布局与方向无关4、最适合小规模布局(大规模用网络)属性声明要使用弹性盒模型display:flex/display:index-flex适用于父类元素检索,子类在盒子中的位置(子类的排列顺序)flex-direction:写在父类css中,但是作用于子级值row 横...原创 2021-08-07 17:26:00 · 149 阅读 · 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 · 55 阅读 · 0 评论 -
使用css让导航栏在页面顶端固定
在导航栏上给个固定定位:position: fixed;由于固定定位是脱离标准流的,所以,它所固定的位置会遮住了下方内容的一部分。解决方法:内容部分设置margin-top,具体的值为导航的高度。此时内容部分不会被遮住,但导航并非位于网页顶端。解决方法:对导航设置top:0。导航部分 position: fixed;top: 0;内容部分margin-top: 导航高度px;...原创 2021-08-06 09:58:07 · 2027 阅读 · 0 评论 -
H5新标签,让你的布局更加明了
优势:标签语义化语义化好处:1、如果没有css样式,html结构一目了然2、提高了团队的开发效率3、提升了网页的SEO新的结构标签 头部 <header></header> 底部 <footer></footer> 侧边栏 <aside></aside> 主体 <main></main> 文章 <artic...原创 2021-08-06 09:48:30 · 78 阅读 · 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 · 108 阅读 · 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 · 138 阅读 · 0 评论 -
字体样式的设置与使用
字体大小:font-size:默认16px 最小8px字体颜色:color字体粗细 :font-weight :默认600 最新900 最小200字体样式:font-style字体:font-family p{ /* 字体大小:默认16px 最小8px */ font-size: 50px; /* 字体颜色:color */ color: #FF7F50; /* 字体粗细 默认600 最新900 最小200 */ fo原创 2021-08-02 11:22:27 · 286 阅读 · 0 评论 -
css的定位
相对定位如何设置相对定位?相对定位 : position: relative; 定位位置:相对于元素的初始位置 特点:定位后,原来的位置会保留,不会影响其他元素布局<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style...原创 2021-07-31 11:53:57 · 71 阅读 · 0 评论 -
css中垂直和水平居中问题的解决
目录垂直居中水平居中块属性元素水平居中:其他属性元素水平居中 :垂直居中单行文本垂直居中: 给父元素设置line-height:父元素高度<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ ...原创 2021-07-31 11:50:49 · 68 阅读 · 0 评论 -
浮动及常见样式
目录浮动的使用清除浮动影响伪元素设置颜色颜色透明度背景图浮动的使用float元素可以让块属性元素排成一行浮动会让行属性元素支持设置宽高<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> &l...原创 2021-07-29 16:34:49 · 121 阅读 · 0 评论 -
标签的基本内容与使用
目录块属性标签特点:行属性标签行快属性标签行块属性转换三种常用的选择器块属性标签特点:1.独占一行2.支持设置宽高,不设置宽高情况下,高度内容撑开,宽度撑满父容器<body> <!-- 快属性标签 --> <!-- 无意义 最常用 常用来划分区域和布局--> <div>Hello World</div> <!-- 段落:放置文字 --&...原创 2021-07-29 14:41:59 · 413 阅读 · 0 评论 -
盒模型的理解
Windows:在游览器中按f12或右击检查margin(外边距)- 清除边框外的区域,外边距是透明的 border(边框)- 围绕在内边距和内容外的边框。 padding(内边距)- 清除内容周围的区域,内边距是透明的。 content(中间内容)- 盒子的内容,显示文本和图像。border<style type="text/css"> div{ width: 100px; height: 100px; background-colo...原创 2021-07-29 10:28:30 · 56 阅读 · 0 评论 -
初识web前端
软件开发岗位介绍1.产品经理:负责产品与客户商定需求2.UI设计师:负责产品外观设计3.前端工程师:负责前端内容开发1.web前端2.Android前端3.ios前端4.后台工程师:负责前端内容开发5.测试:测试产品Bugweb前端能做什么?1.移动端和pc端的网页2.webApp:we...原创 2021-07-29 09:08:47 · 76 阅读 · 0 评论