html css侧边栏demo

html+css写出响应式侧边导航栏

html部分:先写用div画好六个导航的卡片,再利用css添加响应效果 <div class='card-holder'> <div class='card-wrapper'> <a href='#'> <div class='card bg-01'> <span class='card-content'>item #1</span> </div> </a> </div> <div class

CSS居中demo

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width

本篇小随笔,记录下侧边栏的写法和ng-click点击选中事件.因为这个工程不让引用jQuery.所以ng-click选中事件用了一个比较笨的方法实现的. 下面是HTML页面按 Ctrl+C 复制代码按 Ctrl+C 复制代码 css部分引入了angular里面的bootstrap,它和bootstrap官网里面的还是有点区别的,可以直接去angularjs官网下载. 还有就是自己写的css样式.同时引入了angular.min.js.因为工程还需要使用嵌套路由的方式,所以引入了ui-rout

CSS侧边栏宽度不动(更改页面宽度时)，内容区宽度自适应

一个页面,左栏是内容栏content,右栏是侧边栏sidebar.如何使侧边栏宽度不动(更改页面宽度时),内容区宽度自适应呢?为了保证内容区宽度自适应,先不设定其宽度,使其填充整个DIV区域,设定足够大小的右外边距,左浮动.侧边栏使用负margin,设置一定的负值左外边距,使其浮动到实现设定好的空白右外边距的地方. <style> div#wrapper { margin:15px 0; overflow:auto; } div#content { float:left; margin-rig

时间轴CSS的Demo

一.CSS代码(HTML5支持) /*time-line.css*/ .timeline { position: relative; padding: 20px 0 20px; list-style: none; } .timeline:before { content: " "; position: absolute; top:; bottom:; left: 50%; width: 3px; margin-left: -1.5px; background-color: #eeeee

css小demo

span{ color: #ccc; float: right; font-weight: bold; display: inline-block; border-right: solid 1px #ccc; border-bottom: solid 1px #ccc; width: .4rem; height: .4rem; transform: rotate(-45deg); margin-top: 1rem;} 这个是一个箭头demo:

css sprite demo

一张图片,用CSS分割成多个小图标. css样式: .icon{ background:url(../images/tabicons.png) no-repeat;width:18px; line-height:18px; display:inline-block;} .tu0101{background-position:-0px -0px;} .tu0201{background-position:-20px -0px;} .tu0301{background-position:-40px

CSS——宠物demo

注意:ul中自带padding值,需要清除. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body,ul,li{ margin: 0; padding: 0; } ul,li{ list-

CSS——行业动态demo

1.padding的运用:子div继承父div的宽,子div的padding-left值是不会撑大的. 2.背景图片的运用:不平铺.定位 3.ul本身就是一个盒子,它的高度是li中的字体的默认高度撑起来的. 4.li是ul中的子盒子,padding-left可以控制他们的左边距离. 5.li与li之间的距离可以用字体的行高来控制. <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu

在线前端 JS 或 HTML 或 CSS 编写 Demo 处 JSbin 与 jsFiddle 比较

JSBin 该编辑器的特点是编写可直接编写 HTML.CSS.JavaScript 并且可以在 output 中实时观察编写效果:可设置自动运行 JavasScript 代码,其中最大的好处是有一个 console 调试框. JSFiddle 该编辑器的特点是编写可直接编写 HTML.CSS.JavaScript 但是要点击 Run 才能在 output 看到结果:有些特点的是他能引入外界的库或其它的各种库,支持前端框架,但并没有发现调试工具 console 之类.

css样式DEMO

<div id="importWin" class="easyui-window" title="服务封装清单导入" style="width:600px;height:200px" data-options="iconCls:'ope-import',modal:true,collapsible:false,minimizable:false,maximizable:fa

用CSS制作带图标的按钮

先上一张效果图

CSS float

我们来看看CSS重要属性--float. 以下内容分为如下小节: 1:float属性 2:float属性的特性 2.1:float之文字环绕效果 2.2:float之父元素高度塌陷 3:清除浮动的方法 3.1:html法 3.2:css伪元素法 4:float去空格化 5:float元素块状化 6:float流体布局 6.1:单侧固定 6.2:DOM与显示位置不同的单侧固定 6.3:DOM与显示位置相同的单侧固定 6.4:智能布局 1:float属性 float,顾名思义是漂浮,

[css]我要用css画幅画(九) - Apple Logo

接着之前的[css]我要用css画幅画(八) - Hello Kitty,这次画的是苹果公司的logo 这次打算将分析和实现步骤尽量详细的说一说. 其实之前的也打算详细讲分析和设计过程,不过之前的图比较复杂,如果讲那么细,真是怕要讲到猴年马月. 这次的图足够简单,就拿这个图来说明. 都是一些简单的基本方法,通过举一反三,可以实现大部分效果. Github Demo:http://bee0060.github.io/Css-Paint/pages/logo/apple.html Code Pen

css 实现未知图片垂直居中

1.demo html部分 <div class="demo"> <a href="#"><img src="img/help_03_03.png"/></a> </div> 2.demo 的CSS部分 .demo{ border:1px solid #dddddd; width:208px; height:14

CSS零基础学习笔记.

酸菜记之 CSS的零基础. 这篇是我自己从零基础学习CSS的笔记加理解总结归纳的,如有不对的地方,请留言指教, 学前了解: CSS中字母是不分大小写的; CSS文件可以使用在各种程序文件中(如:PHP,HTML,jsp,asp...); 一. CSS的定义 CSS 是指层叠样式表, (Cascading Style Sheets),来定义HTML如何显示的; 二. CSS分为内联样式和外联样式内联样式,就是写到HTML里面, 一般都是这样来写: <head> <style> .

用CSS绘制箭头等三角形图案 [译]

最近重新设计了我的网站,准备添加tooltips提示信息效果.实现很容易,但我想要让提示功能具有三角形的指示图标.当我重新思考想要所设计的每个图标颜色都随心所欲的时候,采用图片那就是一场灾难.幸运的是, MooTools 的核心开发者 Darren Waddell介绍了一个强大的技巧给我:CSS三角形.只使用纯CSS语言,你就能创建兼容各个浏览器的三角形,用很少的代码.不使用伪类的 CSS 代码如下: /* 向上的箭头,类似于A,只有三个边,不能指定上边框 */ div.arrow-up { w

CSS属性之float学习心得

全文参考:http://www.linzenews.com/program/net/2331.html 我们来看看CSS重要属性--float. 以下内容分为如下小节: 1:float属性 2:float属性的特性 2.1:float之文字环绕效果 2.2:float之父元素高度塌陷 3:清除浮动的方法 3.1:html法 3.2:css伪元素法 4:float去空格化 5:float元素块状化 6:float流体布局 6.1:单侧固定 6.2:DOM与显示位置不同的单侧固定 6

CSS学习总结（一）

不知道大家对CSS的印象是怎么样的呢?也许有些模糊,也许根本不清楚.其实它跟我们密切相关,一旦我们浏览网页,都在与它打交道.没有它,我们看不到现在如此丰富多彩的网页效果.那么它到底是什么呢?又该如何使用呢? 一.什么是CSS? CSS (Cascading Style Sheets) 层叠样式表.采用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制. 只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式. 目前主流浏览器c

PNG格式小图标的CSS任意颜色赋色技术

一.眼见为实 CSS可以修改图片的颜色,没错,可以,眼见为实!您可以狠狠地点击这里:png小图标CSS赋色demo 上面的不是很黑的是原始图标,是个PNG图片,下面这个是可以赋色的: 下面,我们随意选择一个颜色,例如紫色,然后: 是不是感觉很厉害!以后设计师就不需要在提供几套颜色的图片了. SVG, icon fonts等技术似乎也不是那么耀眼了. 二.原理其实很简单原理其实很简单,使用了CSS3滤镜filter中的drop-shadow,drop-shadow滤镜可以给元素或图片非透明区域添

一个轻量级的3D CSS 库

JavaScript 3D library 该项目的目的是为了打造轻量级的.实用简单的3D CSS库. Usage使用方法下载 minified库文件和 css文件,并将其包含于你的HTML中,就如此简单. <script src="js/voxelcss.js"></script><link rel='stylesheet' href="css/voxel.css"></link> 下面这段代码既是对其应用: &