CSS基础
关注
分享
扫一扫
Ivy_Ch
这个作者很懒，什么都没留下…
展开
-
导航栏保持高亮状态（适合共用导航）
导航栏是所有页面共用的组件，导航栏会单独分离出来作为各个页面的引用，很多时候需要高亮当前页面的选项。这里用js来控制高亮情况。（根据自己的业务需求修改样式）思路：寻找与当前页面路由匹配的hrefcss ：.active{ color: #fff; background-color: #c92b30;}当前页面高亮的css类为activehtml：<div id="navbars"> <ul> <li cl.原创 2021-03-31 10:16:08 · 2274 阅读 · 5 评论 -
原生Javascript制作轮播图
1. 根据ul中li个数(图片的个数)动态的创建li,并且加入到ol中,作为小按钮来使用为每个ol中的li添加鼠标进入的事件,(添加事件之前,先把索引保存在每个li的自定义属性中),鼠标进入li的时候做排他功能(背景颜色),移动图片(图片整体移动,移动的ul,每次移动的是一个图片的宽度,图片的宽度就是向宽的宽度),调用的是动画函数,移动ul,移动的是索引值*图片的宽度,并且把索引值存储在一个全局变...原创 2019-12-20 14:25:45 · 231 阅读 · 0 评论 -
CSS3之动画（animation）
动画(CSS3) animation动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。语法格式：1.调用animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;2.声明@keyframes 动画名称 { from{ 开始位置 } 0% to{ 结束 } 100%}可...原创 2019-08-06 18:05:42 · 410 阅读 · 0 评论 -
CSS3之过渡（transition）
（这里独立出来写一篇是觉得这个很有趣。）2d x y3d x y ztransition 过渡（CSS3）这是w3c的说法（官方认证）：通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。简单来说，就是我们可以通过css的transition来制作会动的画面。过渡动画： 是从一个状态 渐渐的...原创 2019-08-06 15:45:50 · 1924 阅读 · 0 评论 -
HTML5和CSS3
HTML5新标签header：定义文档的页眉 头部 nav：定义导航链接的部分 footer：定义文档或节的页脚 底部 article：定义文章。 section：定义文档中的节（section、区段） aside：定义其所处内容之外的内容 侧边<header> 语义 :定义页面的头部 页眉</header><nav> 语义 :定义...原创 2019-08-05 22:15:54 · 306 阅读 · 0 评论 -
CSS高级技巧
元素的显示与隐藏在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display visibility 和 overflow。display 显示display 设置或检索对象是否及如何显示。display : none 隐藏对象 与它相反的是 display:block 除了转换为块级元素之外，同时还有显示元素的意思。特点： 隐藏之后，不再保留位置。vis...原创 2019-08-04 00:13:43 · 154 阅读 · 0 评论 -
精灵（sprite）技术：有效地减少服务器接受和发送请求的次数，提高页面的加载速度
图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。精灵...转载 2019-07-27 22:01:53 · 452 阅读 · 0 评论 -
CSS入门基础（二）
文字居中：文字水平居中 text-align：center；文字垂直居中 line-height：height高度；如果行高 等于 height高度 文字会垂直居中 如果行高 大于 高度 文字会偏下 如果行高 小于 高度 文字会偏上CSS三大特性 层叠性 一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。 继承性 所谓继承性...原创 2019-07-25 22:11:24 · 151 阅读 · 0 评论 -
区分：块级元素、行内元素、行内块元素
块级元素(block-level)描述：每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。块级元素的特点：（...原创 2019-07-17 01:31:48 · 1207 阅读 · 0 评论 -
CSS入门基础
经常查阅文档是一个非常好的学习习惯。W3C : http://www.w3school.com.cn/MDN: https://developer.mozilla.org/zh-CN/css样式编辑可分为：行内样式：就是代码写在具体网页中的一个元素内；<!doctype html><html><head> <meta ...原创 2019-07-25 22:10:43 · 335 阅读 · 0 评论