关于BOOTSTRAP的整理和理解
2018-07-25
阅读 2 分钟
3.8k随着CSS3和HTML5的流行，我们的WEB页面不仅需要更人性化的设计理念，而且需要更酷的页面特效和用户体验。作为开发者，我们需要了解一些宝贵的CSS UI开源框架资源，它们可以帮助我们更快更好地实现一些现代化的界面，包括一些移动设备的网页界面风格设计。接下来就是要详解Bootstrap框架：首先，我们要知道为什么使用框架...
一片关于Bootstarp4的文章
2018-07-25
阅读 2 分钟
1.7kBootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。可以让你快速的排版，不用在写那些繁杂的样式。Bootstrap是开源免费的，设计人员可以方便的从网上下载最新的版本。Bootstrap 源码里包含预先编译的CSS、JavaScript 和图标字体文件以及LESS、JavaScript 和文档的源码。
较主流的前端框架
2018-07-24
阅读 2 分钟
4k前端主流框架(目录) Bootstrap Vue.js Angular 1 一、Bootstrap Bootstrap是一个用于使用HTML，CSS和JS进行开发的开源工具包。使用我们的Sass变量和mixins，响应式网格系统，广泛的预构建组件以及基于jQuery构建的强大插件，快速构建您的想法或构建整个应用程序。目前是v4.1.2 二、Vue.js Vue 是一套用于构建用户界面的...
为你推荐几款开发常用的代码编辑器
2018-07-24
阅读 1 分钟
5.4k代码编辑器对于程序员来说十分重要，一个好的编辑器可以节省开发时间，提高工作效率。这篇文章会介绍10个优秀且免费的编辑器，它们都是非常方便易用的环境，你可以用它们来编写代码，查看源文件和文档等，简化你的工作。
响应式导航菜单（css+js）
2018-07-23
阅读 3 分钟
5k1.响应式导航菜单 先来看下效果图把： 当视口大于640px的时候，导航条会显示在外，当视口小于768px的时候，导航菜单需要隐藏起来！代码如下： {代码...} css代码如下： {代码...} 持续更新，欢迎大家指教！
响应下拉式菜单
2018-07-23
阅读 4 分钟
2.2k一、简介 响应式下拉菜单可在多个移动端显示会有不同的效果。 二、代码如下 {代码...} body{ {代码...} }.nav{ {代码...} }ul{ {代码...} }ul>li{ {代码...} }ul>li>a{ {代码...} }ul>li:hover{ {代码...} }.clearfix:after{ {代码...} }.clearfix{ {代码...} }.toggle{ {代码...} }.tu{ {代码...} }.bb{ {...
CSS+JS相应式导航菜单
2018-07-23
阅读 3 分钟
2.9k响应式导航菜单 响应式导航菜单就是当网页在其他不同视口的样式，不同的设备需要不同的样式 需要掌握的知识 - 掌握媒体查询，如果你不是很懂那就看我写的CSS响应式布局 掌握CSS重的display：none; 简单的JS方法 下面是HTML代码 {代码...} CSS样式 {代码...} js代码： {代码...} 当视口大于768px的时候： 当视口小于768p...
css 响应式（媒介查询）
2018-07-23
阅读 3 分钟
1.7k<link rel="stylesheet" type="text/css" href="css/demo.css" media=“all and (max-width=980px)”/>
CSS实现响应式布局
2018-07-23
阅读 3 分钟
16.3k<link rel="stylesheet" type="text/css" href="css/moxie.css" media=“all and (max-width=980px)”/>
媒体查询 响应式设计
2018-07-23
阅读 4 分钟
1.4k一、媒体查询 <1>作用 使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。 <2>使用方式1 {代码...} <...
响应式web设计--媒体查询
2018-07-23
阅读 3 分钟
1.9k500px-800px之间的设备 @media screen and (min-width: 500px) and (max-width: 800px) { ... }
css里的BFC的用法
2018-07-21
阅读 3 分钟
1.8k一、对BFC的了解 Block Formatting Contexts (BFC，块级格式化上下文)，就是 一个块级元素 的渲染显示规则 （可以把 BFC 理解为一个封闭的大箱子，，容器里面的子元素不会影响到外面的元素） 二、如何触发BFC 只要元素满足下面任一条件即可触发 BFC 特性： body 根元素； 浮动元素：float 不为none的属性值； 绝对定位元...
css 块级格式化上下文（BFC）
2018-07-21
阅读 7 分钟
2.3k一、块级格式化上下文（BFC） 1、什么是块级格式化上下文？ {代码...} 2、触发BFC的条件如下： 根元素 float的值不为none。 overflow 除了 visible 以外的值（hidden，auto，scroll） display的值为table-cell, table-caption, inline-block中的任何一个。 绝对定位元素：position (absolute、fixed) 弹性盒 flex boxes ...
5分钟理解BFC原理
2018-07-21
阅读 4 分钟
3.5kBFC 即 Block Formatting Contexts (块级格式化上下文)，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
css--图片整合（精灵图）
2018-07-20
阅读 2 分钟
3.8k图片整合（精灵图） 精灵图的优点： 减少图片的字节 减少了网页的http请求，从而大大的提高了页面的性能 解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的...
Css Sprite(雪碧图、精灵图)<图像拼合技术>
2018-07-20
阅读 3 分钟
4.9k一、精灵图使用场景： 二、Css Sprite（优点） 减少图片的字节。 减少网页的http请求，从而大大的提高页面的性能。 解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，...
css图像拼合技术（精灵图）
2018-07-20
阅读 2 分钟
2.3kCSS图像拼合技术 1.图像拼合 图像拼合技术就是单个图像的集合。 有很多图片的网页可能会需要很多时间来加载和生成多个服务器的请求。 使用图像拼合会降低服务器的请求数量，并节省带宽。 图像拼合实例 有了css样式，我们可以显示我们需要的图像的一部分 详细代码如下： {代码...} 运行结果如下图： 这个效果加了一个悬浮...
CSS 图像拼合技术（雪碧图）
2018-07-20
阅读 3 分钟
1.3k1、css 图像拼合 图像拼合就是单个图像的集合。 有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。 使用图像拼合会降低服务器的请求数量，并节省带宽。 代码如下： {代码...} float改变背景 效果图： 持续更新，多多关照！
CSS 提示工具(Tooltip)
2018-07-18
阅读 3 分钟
1.4k本文的内容为使用 HTML 与 CSS 来创建提示工具，提示工具在鼠标移动到指定元素后触发。这个提示工具可以使我们排出的网页增加美感，也可以提升用户的可读性。（提示工具可以四周提示这里只演示上和右，左和下的同理调调距离就可以实现了） 一、提示内容在上面 1<效果图敬上> 2<代码敬上> {代码...} （还在新...
CSS 提示工具(Tooltip)
2018-07-18
阅读 2 分钟
3.3kCSS 提示工具(Tooltip) 本文为大家介绍如何使用HTML和CSS来实现提示工具， 提示工具在鼠标移动到制定元素后触发,先看下面示例： 1.基础提示工具代码如下： {代码...} 运行结果如下图： 2.添加箭头 我们可以用CSS 伪元素 ::after 及 content 属性为提示工具创建一个小箭头标志，箭头是由边框组成的 {代码...} 3.技术要点...
HTML+CSS实现下拉菜单
2018-07-17
阅读 2 分钟
10.2kHTML+CSS实现简单下拉菜单 HTML+CSS实现简单的下拉列表 1.下拉列表实例 代码如下： {代码...} 效果图如下： 2.技术要点 下拉菜单需边的子菜单隐藏（使用display:none;将元素隐藏） 鼠标悬浮样式（div:hover） 父元素相对定位（position:relative;） 子元素绝对定位（position:absolute;） 持续更新，多多关注
CSS中的导航栏和下拉菜单
2018-07-17
阅读 5 分钟
7.7k一、CSS导航栏 （1）导航栏的作用 熟练使用导航栏，对于网站排版非常重要,使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。 （2）垂直导航栏 <1>代码如下 {代码...} <2>效果图如下： （3）水平导航栏 <1>代码如下： {代码...} <2>效果图如下： 二、下拉菜单 （1）下拉菜单的作用 下拉菜...
css 导航菜单+下拉菜单
2018-07-17
阅读 6 分钟
2.5k一、导航菜单 1.横向导航 代码如下： {代码...} 效果图： 2.竖向导航 代码如下： {代码...} 效果图： 二、下拉菜单 display：none和display：block切换实现 代码如下： {代码...} 效果图： 持续更新，欢迎各位指教！
css--下拉菜单
2018-07-17
阅读 2 分钟
1.5k代码如下 <!doctype html><html><head><meta charset="utf-8"/><title>下拉菜单</title><style>.dropbtn { {代码...} } .dropdown { {代码...} } .dropdown-content { {代码...} } .dropdown-content a { {代码...} } .dropdown-content a:hover {background-color: #f1f1f1}...
css 布局（圣杯、双飞翼）
2018-07-14
阅读 3 分钟
2.4k具体步骤：1.设置基本样式2.圣杯布局是一种相对布局，首先设置父元素container的位置： 3.将主体部分的三个子元素都设置左浮动4.设置main宽度为width:100%,让其单独占满一行5.设置left和right 负的外边距6.接下来只要把left和right分别移动到这两个留白就可以了。可以使用相对定位移动 left和right部分。
双飞翼布局
2018-07-14
阅读 2 分钟
1.9k“双飞翼布局”可以比作一只天使，可以把center看成是鸟的身体，left和right则是天使的翅膀。这个布局的实现思路是，先把最重要的身体部分放好，然后再将翅膀移动到适当的地方。（双飞翼的特点就是给天使的身体上在加上一个盔甲<一个div>）。它的优点是：代码比圣杯布局简单一些，而且微调的时候较简单。