![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
加油,铁子!
这个作者很懒,什么都没留下…
展开
-
时间倒计时(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 · 198 阅读 · 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 · 210 阅读 · 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 · 29615 阅读 · 1 评论 -
服务器字体的设置和引入、阿里巴巴矢量库的使用
@font-face { font-family:自定义名字; src: 字体源;}原创 2021-08-11 14:56:48 · 739 阅读 · 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 · 88 阅读 · 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 · 193 阅读 · 0 评论 -
动画animation的实现与其全部属性
作用:增加用户体验不推荐过度使用关键帧:keyframes@keyframes 规定动画 animation 所有动画属性的简写属性 animation-name @keyframes动画的名称 animation-duration 动画一个周期持续时间 默认0 animation-delay 动画延迟时间(什么时候开始) 默认0 animation-timing-function 动画速原创 2021-08-09 10:30:02 · 110 阅读 · 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 · 429 阅读 · 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 · 98 阅读 · 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 · 89 阅读 · 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 · 431 阅读 · 1 评论 -
弹性盒子的属性与使用
目的:1、提供一种更加有效的方式来布局、对齐和分布在容器之间的各项内容,即使他们的大小是未知的变化的。2、让容器有能力改变项目的宽和高,以填满可用空间。3、布局与方向无关4、最适合小规模布局(大规模用网络)属性声明要使用弹性盒模型display:flex/display:index-flex适用于父类元素检索,子类在盒子中的位置(子类的排列顺序)flex-direction:写在父类css中,但是作用于子级值row 横...原创 2021-08-07 17:26:00 · 162 阅读 · 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 · 58 阅读 · 0 评论 -
使用css让导航栏在页面顶端固定
在导航栏上给个固定定位:position: fixed;由于固定定位是脱离标准流的,所以,它所固定的位置会遮住了下方内容的一部分。解决方法:内容部分设置margin-top,具体的值为导航的高度。此时内容部分不会被遮住,但导航并非位于网页顶端。解决方法:对导航设置top:0。导航部分 position: fixed;top: 0;内容部分margin-top: 导航高度px;...原创 2021-08-06 09:58:07 · 2059 阅读 · 0 评论 -
H5新标签,让你的布局更加明了
优势:标签语义化语义化好处:1、如果没有css样式,html结构一目了然2、提高了团队的开发效率3、提升了网页的SEO新的结构标签 头部 <header></header> 底部 <footer></footer> 侧边栏 <aside></aside> 主体 <main></main> 文章 <artic...原创 2021-08-06 09:48:30 · 84 阅读 · 0 评论