45fan.com - 路饭网

搜索: 您的位置网站首页>标签列表>
  • 2018-01-22 11:41:03CSS样式分析
  • CSS样式分析 一 字体属性:(font) 大小 {font-size: x-large;}(特大)xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD 样式 {font-style: oblique;}(偏斜体)italic;(斜体) normal;(正常) 行高 {line-height: normal;}(正常) 单位:PX、PD、E... [阅读全文]
  • 2018-01-22 11:31:42css进度条的文字渐变的示例代码分析
  • css进度条的文字渐变的示例代码分析 本文介绍了css 进度条的文字根据进度渐变的示例代码,分享给大家,具体如下: 需求 1.进度条里面的文字需要根据进度的长度而变化 原理 用两个一模一样的样式的 div 重叠起来 效果 字体开始为 蓝色,跟随进度条变为 白色... [阅读全文]
  • 2018-01-22 11:22:57怎么样使用纯CSS实现下拉菜单功能?
  • 怎么样使用纯CSS实现下拉菜单功能? 本篇文章主要介绍了纯CSS实现下拉菜单的示例代码,分享给大家,具体如下: 将下拉菜单的ul高度设置为0,并且超出部分隐藏掉。 设置下拉菜单的高度添加过渡效果,高度为auto时过渡效果失效。 style ul{ list-style: none;... [阅读全文]
  • 2018-01-21 13:13:05CSS之修饰文字的步骤
  • CSS之修饰文字的步骤 一、text-decoration 相信大家对于text-decoration这个属性并不陌生,在重置a标签的默认样式时,我们经常要这样写:text-decoration: none;可能对它了解的人也很少,实际上text-decoration是一个复合属性,由line、style和color组成。... [阅读全文]
  • 2018-01-06 21:32:13纯css实现树型结构的示例代码分析
  • 纯css实现树型结构的示例代码分析 本文我给大家介绍如何使用CSS和HTML就可以将一个多级无序列表的节点展现成树状结构。树状结构我们在很多项目中要应用,如公司组织架构图、无限级分类等等。 纯css实现属性结构 css实现属性结构的思路是利用伪类实现树形结构... [阅读全文]
  • 2018-01-05 21:01:15CSS类选择符和ID选择符的区别在哪?
  • CSS类选择符和ID选择符的区别在哪? 本文介绍了CSS 类选择符和ID选择符的区别,分享给大家,具体如下: 类选择符 HTML代码: div class=one/divdiv/div CSS代码: div { width: 200px; height: 200px; border: 1px solid #000; margin: 20px;}.one { box-sha... [阅读全文]
  • 2018-01-05 19:10:21如何使用纯CSS实现手风琴效果?
  • 如何使用纯CSS实现手风琴效果? 昨天在做一个旅游页面的项目,前端页面实现的过程中遇到这样一个需求。需要把一组图片形成手风琴的展示效果。认真的思考一遍后,决定就用普通的HTML+CSS就可以实现这个需求。今天趁着空闲时间稍微梳理了一下。 实现原理: 主... [阅读全文]
  • 2018-01-05 17:26:20通过CSS实现元素较宽不能被安全并将其隐藏的方法
  • 通过CSS实现元素较宽不能被安全并将其隐藏的方法 遇到一个需求,需要实现的样式是固定宽度的容器里一排显示若干个标签,数量不定,每个标签的长度也不定。当到了某个标签不能被完全展示下时则不显示。大致效果如下,标签只显示一排,多了放不下了就不显示了... [阅读全文]
  • 2018-01-04 17:46:01CSS怪异盒模型和标准盒模型的内容介绍
  • CSS怪异盒模型和标准盒模型的内容介绍 在html文档中,每个渲染在页面中的标签都是一个个盒子模型。 盒子模型又分为 : W3C标准的盒子模型 和 IE标准的盒子模型 。 由于目前大部分主流的浏览器支持的是W3C标准盒模型(标准盒模型),也有保留对怪异盒子样式的... [阅读全文]
  • 2018-01-04 15:26:02CSS居中实例之大小不固定的图片居中方法内容介绍
  • CSS居中实例之大小不固定的图片居中方法内容介绍 本文介绍了CSS居中实例之大小不固定的图片居中方法,分享给大家,具体如下: 1.利用table-cell实现垂直居中 div class=box1 [站外图片上传中(5)]/div div{ width: 500px; height: 500px; background: #ccc;}.... [阅读全文]
  • 2018-01-03 17:24:05如何使用CSS Flexbox?
  • 如何使用CSS Flexbox? Flexbox是一个强大而灵活的布局,本篇文章主要对其进行学习了解。 一、Flexbox简介 Flexbox布局(Flexible Box)模块旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局,即使他们的大小是未知或者是动态的。简单的理解... [阅读全文]
  • 2018-01-02 21:31:14利用css隐藏input的光标示例代码分析
  • 利用css隐藏input的光标示例代码分析 前言 最近公司的ui突然跑过来问我一个问题:如何在不影响操作的情况下,把input的光标隐藏了?。 我相信很多人会跟我一样,觉得这是个什么狗屁需求,输入框不要光标这不是反人类吗?可惜我们只是个小小的撸码仔,没有反... [阅读全文]
  • 2018-01-02 21:28:13怎么样通过CSS利用table实现五种常用布局?
  • 怎么样通过CSS利用table实现五种常用布局? 本文介绍了CSS 利用table实现五种常用布局的方法示例,分享给大家,具体如下: 布局一: 效果: 代码: html: div class=headerheader/divdiv class=mainmain/divdiv class=footerfooter/div 注意:div中要有内容... [阅读全文]
  • 2018-01-02 21:14:29理解CSS布局和块级格式上下文的步骤
  • 理解CSS布局和块级格式上下文的步骤 BFC 的概念始于 CSS2,是个蛮古老的 CSS 话题了,网上也到处能搜到 BFC 的介绍,但是都不够简洁。本文系翻译自 Rachel Andrew 女士的博文Understanding CSS Layout And The Block Formatting Context ,内容足够简洁明了... [阅读全文]
  • 2018-01-02 21:09:44CSS之mixin封装实例代码分析
  • CSS之mixin封装实例代码分析 前言 为了有效的维护和开发项目,代码的重复利用就显得尤为重要。在Sass中,除了@import和@extend可以使你的代码更加具有重复利用性,@mixin指令也同样能提高你代码的重复使用率并简化你的代码。个人在做项目的过程中总结归纳的... [阅读全文]
  • 2018-01-02 11:07:21利用纯css实现缩略图悬停效果示例代码分析
  • 利用纯css实现缩略图悬停效果示例代码分析 前言 前端本身很杂,想必在学前端的大家都懂,前端技能的各种学习心得,各种教程,只要你有一颗学习的心都可以搞定,关键在于你有没有需求分析的能力,解决问题的能力,这两个才是决定工资高低的本事,就那么点知识... [阅读全文]
  • 2018-01-01 19:24:33CSS中的BFC内容知识介绍
  • CSS中的BFC内容知识介绍 在写样式时,往往是添加了一个样式,又或者是修改了某个属性,就达到了我们的预期。 而BFC就潜藏在其中,当你修改样式时,一不小心就能触发它而毫无察觉,因此没有意识到BFC的神奇之处。 一、什么是BFC(Block Formatting Context)... [阅读全文]
  • 2018-01-01 11:07:11如何通过CSS以图换字?
  • 如何通过CSS以图换字? 前面的话 CSS以图换字的技术,很久都没人提起了。它是一种在h1标签内,使用图像替换文本元素的技术,使页面在设计和可访问性之间达到平衡。本文将详细介绍CSS以图换字的9种方法 文字隐藏 在h1标签中,新增span标签来保存标题内容,然... [阅读全文]
  • 2018-01-01 08:39:30如何通过css实现图片横向排列滚动效果?
  • 如何通过css实现图片横向排列滚动效果? 具体代码如下所示: .imageList{ overflow-x: auto; overflow-y: hidden; height:180px; white-space: nowrap; img{ width:auto; height:100%; margin-right:10px; } } div class=imageList img src=1.jpg/ img src=2... [阅读全文]
  • 2017-12-31 17:24:54Cssw Grid布局的方法技巧
  • Cssw Grid布局的方法技巧 这是一篇快速介绍网站未来布局的文章。 Grid 布局是网站设计的基础,CSS Grid 是创建网格布局最强大和最简单的工具。 CSS Grid 今年也获得了主流浏览器(Safari,Chrome,Firefox,Edge)的原生支持,所以我相信所有的前端开发人员... [阅读全文]
关于我们 | 联系我们 | 友情链接 | 网站地图 | 手机版 | 返回顶部