css
简单的绿竹
学无止境,活到老学到老。脚踏实地,一步一个脚印。坚持,用心,努力,加油!
展开
-
为什么使用前端框架
为什么使用前端框架原创 2022-09-08 15:32:39 · 1124 阅读 · 0 评论 -
React、Vue、AngularJS、Bootstrap、EasyUI 、AntDesign、Element理解
React、Vue、AngularJS、Bootstrap、EasyUI 、AntDesign、Element理解原创 2022-09-08 14:51:10 · 1478 阅读 · 0 评论 -
怎么让背景图片铺满整个页面
方法一、background背景图片设置html,body { width: 100%; height: 100%; background: url(../images/bg.png) no-repeat; background-size: 100% 100%; background-attachment: fixed;/* 不设置的话页面滑动时,背景会不铺满*/}方法二、图片绝对定位实现<body> <div id="Laye...原创 2021-12-14 12:41:10 · 15631 阅读 · 0 评论 -
经验分享:CSS浮动(float,clear)通俗讲解
http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html#!comments很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程。 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家。 写在前面的话:转载 2016-08-16 12:43:20 · 271 阅读 · 0 评论 -
BootStrap学习笔记二
http://www.cnblogs.com/hzwl-2015/p/4255209.htmlBootStrap学习笔记二:学习工具:BootStrap中文文档:http://v3.bootcss.com/css/#type-listsDOCTYPE html>html>head>meta charset="UTF-8">meta http-equiv=转载 2016-06-21 16:52:08 · 313 阅读 · 0 评论 -
BootStrap学习笔记三
http://www.cnblogs.com/hzwl-2015/p/4255307.htmlBootStrap学习笔记三:学习工具:BootStrap中文文档:http://v3.bootcss.com/css/#type-lists表格DOCTYPE html>html>head>meta charset="UTF-8">meta h转载 2016-06-21 16:53:08 · 319 阅读 · 0 评论 -
BootStrap学习笔记一
http://www.cnblogs.com/hzwl-2015/p/4253700.htmlBootStrap学习笔记一:学习工具:BootStrap中文文档:http://v3.bootcss.com/css/#type-lists1.HTML5文档类型 ...2.为了确保适当的绘制和触屏缩放,需要在 之中添加 viewport 元转载 2016-06-21 16:43:02 · 416 阅读 · 0 评论 -
两种方法实现用CSS切割图片只取图片中一部分
http://www.jb51.net/css/150036.html切割图片这里不是真正的切割,只是用CSS取图片中的一部分而已,主要有两种方式,一是做为某一元素的背景图片,二是用img元素的属性。下面有个不错的示例,大家可以参考下切割图片这里不是真正的切割,只是用CSS取图片中的一部分而已。这样做的好处就是减少了打开网页时请求图片的次数。主要有两种方式,转载 2016-07-14 21:35:54 · 38600 阅读 · 1 评论 -
AngularJS 表格操作
http://www.runoob.com/angularjs/angularjs-tables.htmlng-repeat 指令可以完美的显示表格。在表格中显示数据使用 angular 显示表格是非常简单的:AngularJS 实例div ng-app="myApp" ng-controller="customersCtrl转载 2016-07-02 13:56:31 · 1152 阅读 · 0 评论 -
OOCSS——核心篇
http://www.w3cplus.com/css/oocss-core上一节在《OOCSS——概念篇》中主要介绍了一些有关于OOCSS的概念性的东西,并以博客的“meta data”为例介绍了如何创建一个基础对象。赞同和反对使用OOCSS的声音都有,对这个感兴趣的朋友可以不用理会这些反对的声音,因为那些声音是无法阻挡我们对新知识的渴望。今天主要想借助OOCSS官网提供的转载 2016-05-23 17:42:31 · 567 阅读 · 0 评论 -
OOCSS——概念篇
http://www.w3cplus.com/css/oocss-concept“Object Oriented”直译就是面向对象,对于这个词,大家并不陌生,但是加上一个CSS也就是说Object Oriented CSS,对于这个还是第一次见过,被叫作OOCSS(面向对象的CSS),其实这个东西早在2008年被提出,有些同学也在自己的项目中用过了。但有很多同学并不清楚,就转载 2016-05-23 17:40:24 · 565 阅读 · 0 评论 -
CSS中!important的使用
http://www.cnblogs.com/yudy/archive/2013/05/27/3102825.html本篇文章使用最新的IE10以及firefox与chrome测试(截止2013年5月27日22:23:22)CSS的原理:我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 首先,先看下面一段代码:DOCTYPE转载 2016-08-27 23:43:48 · 559 阅读 · 0 评论 -
CSS块级元素和行内元素
http://www.cnblogs.com/visi_zhangyang/archive/2011/10/25/2223704.html块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊,它只能用来容纳其他块元素。 如果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排。而有了css以后,我转载 2016-08-18 11:47:29 · 297 阅读 · 0 评论 -
CSS核心内容-标准流、盒子模型、浮动、定位
http://blog.csdn.net/husen1314/article/details/46664053CSS核心内容-标准流、盒子模型、浮动、定位,了解了核心内容才能用CSS设计出一个简单的页面 一、基础 在了解核心内容之前需要先了解HTML中的两种标签:块级元素,行内元素; 块级元素:一个块级元素占满一行 行内元素:在一行中行内元素依转载 2016-08-18 11:18:57 · 715 阅读 · 0 评论 -
CSS中的绝对定位与相对定位
http://www.cnblogs.com/jiqing9006/archive/2012/07/26/2610586.html层级关系为:效果图:为改变参照物(橘色框)后的效果层级关系为:效果图:参照物为最顶级的元素情况。层级关系为:效果图:转载 2016-08-18 12:31:44 · 307 阅读 · 0 评论 -
<!–[if lte IE ]>……<![endif]–>详解
http://www.cnblogs.com/kenan9527/p/4539673.html对IE浏览器需要特殊处理,进行的条件注释。条件注释就是一些if判断,但这些判断不是在脚本里执行的,而是直接在html代码里执行的,常见的有:1. 除IE外都可识别 2. 所有的IE可识别 3. 只有IE5.0可以识别 4. 仅I转载 2017-03-01 09:30:41 · 895 阅读 · 0 评论 -
table隔行变色的css
https://blog.csdn.net/semizhou/article/details/19902077<!DOCTYPE html><html><head><meta charset="GBK" /><title>Css3实现表格隔行变色或隔列变色</title><style> .tab转载 2018-06-29 17:09:05 · 1962 阅读 · 0 评论 -
CSS 分页实例
http://www.runoob.com/css3/css3-pagination.html#本章节我们将为大家介绍如何通过使用 CSS 来创建分页的实例。简单分页如果你的网站有很多个页面,你就需要使用分页来为每个页面做导航。以下实例演示了如何使用 HTML 和 CSS 来创建分页:CSS 实例ul.pagination { display: inline-block; paddin...转载 2018-06-29 17:10:25 · 552 阅读 · 0 评论 -
DIV居中的几种方法
https://www.cnblogs.com/ones/p/4362531.html1.1 body{ 2 text-align:center; 3 } 缺点:body内所有内容一并居中 2..center{position: fixed;left: 50%;}缺点:需要设置position属性,网页复杂时容易扰乱页面布局,而且只是元素的起始位置居中 3.1 .center{2 ...转载 2018-07-02 13:39:46 · 768 阅读 · 0 评论 -
灵活设置表格的某一列颜色
https://blog.csdn.net/hudie_1993/article/details/53914145最近正在复习关于HTML的视频,以前觉得自己对HTML中的表格问题领悟很深,今天突然学到新的知识,深感惭愧。有时候在做报表的时候,想要设置某一列的颜色,如果当表格的列数或者行数不多时,可以一一设置,但是若表格行列数比较多,那单独设置每一行或者每一列的颜色就特别麻烦。最简单的解...转载 2019-06-01 00:01:21 · 1872 阅读 · 0 评论 -
CSS中给表格的第一列以及最后一列设置不同的样式
https://blog.csdn.net/Nalaluky/article/details/800129221、设置表格的第一列样式:table tr td:first-child{样式代码....}2、设置表格的最后一列样式:table tr td:last-child{样式代码....}...转载 2019-06-01 00:01:45 · 1060 阅读 · 0 评论 -
Bootstrap Modals(模态框)
http://www.runoob.com/bootstrap/bootstrap-v2-modal-plugin.htmlBootstrap Modals(模态框)描述Bootstrap Modals(模态框)是使用定制的 Jquery 插件创建的。它可以用来创建模态窗口丰富用户体验,或者为用户添加实用功能。您可以在 Modals(模态转载 2016-06-24 17:53:10 · 799 阅读 · 0 评论 -
Bootstrap- Modal对话框如何在关闭时触发事件
http://www.hello-code.com/blog/Bootstrap/201507/5233.html下表列出了模态框中要用到事件。这些事件可在函数中当钩子使用。事件描述实例show.bs.modal在调用 show 方法后触发。$('#identifier').on('show.bs.modal',转载 2016-06-03 10:14:27 · 21148 阅读 · 1 评论 -
css为div添加滚动条
给DIV限定宽度或高度,并指定overflow样式为auto,这样当内空超出后就会自动出现滚动条了.如转载 2016-06-02 10:39:14 · 1907 阅读 · 1 评论 -
IE8中text-align:center偏左的解决办法
http://www.codesky.net/article/201103/169657.html关于text-align:center的应用在不同浏览器显示效果不一样,本文就IE7,IE8,IE9下的不同显示进行说明,并解决IE8下显示偏左问题;在ie7和一些浏览器下解释为该元素内的元素和文字都居中。在ie8和ie9等一些浏览器下解释为该元素内的文字居中。例如:转载 2014-12-25 22:37:38 · 976 阅读 · 0 评论 -
怎么用css加前景图片
http://zhidao.baidu.com/question/710679575448725565.html?qbl=relate_question_4&word=css%CC%ED%BC%D3%D5%DA%D5%D6%B2%E3 实现思路是用额外的层来放半透明的纱图,用绝对定位放在内容层的上面。给出关键代码CSS代码.content,.overlay{{width:300转载 2014-12-24 12:39:04 · 3072 阅读 · 0 评论 -
一个Table表单样式
#tbList { border-top: 1px solid #0088F7; border-left: 1px solid #0088F7; width: 930px; } #tbList td, th { border原创 2013-05-24 12:18:35 · 894 阅读 · 0 评论 -
body背景图片的拉伸效果
兼容ie678910 html{width:100%;height:100%;margin:0;padding:0;}body{width:100%;height:100%;margin:0;padding:0;}#backgroundImage{ position: absolute; w转载 2014-03-27 23:33:47 · 1218 阅读 · 0 评论 -
文字对齐布局
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml"> 1 2 3 4 5原创 2014-03-08 14:48:32 · 506 阅读 · 0 评论 -
OverFlow属性
基本语法overflow-x: visible | auto | hidden | scroll 语法取值visible :? 默认值。不剪切内容也不添加滚动条。假如显式声明此默认值,对象将以包含对象的 window 或 frame 的尺寸裁切。并且 clip 属性设置将失效 auto :? 在必需时对象内容才会被裁切或显示横向滚动条 hidden :? 不显示超过对象尺寸原创 2014-03-02 11:10:01 · 648 阅读 · 0 评论 -
常见的css布局
1、两列布局 1.1、左列固定,右列自适应#left{ width:190px; float:left; }#right{ margin-left:205px; }1.2、右列固定,左列自适应#left{ float:left; width:100%; }#right{ float:left; margin-left:-100px; widt转载 2013-05-28 05:46:42 · 695 阅读 · 2 评论 -
css控制div显示/隐藏方法及2种方法比较原码
CSS中的display和visibilitycss中display和visibility语法,他们都可以隐藏和显示html元素。看齐来他们很相似,所以很多人还是会搞错。谈们的属性分别如下:display:none|block;display:none;时隐藏该html元素,确切的说,是在浏览器中消除该元素,不占屏幕的空间。若其下有其他元素,就会上移到该空间区域(好像桌子上转载 2014-01-28 09:17:21 · 655 阅读 · 0 评论 -
css实现div自动添加纵向滚动条
http://www.cnblogs.com/shunyao8210/archive/2011/01/13/1934216.html转载 2013-11-03 13:47:03 · 1897 阅读 · 0 评论 -
margin:0 auto 和text-align:center的区别是什么???
http://zhidao.baidu.com/link?url=xu3fryYpxXltaaf_Lbgh7KNNNO7RZL-M2__L7S_Q7Yv7_NOHBIfy68d6RVmg6a5NnhZEkg09zmVuqC4sMiA1u-DAHVtaLFSPYbkZsaH-3Pimargin:0 auto;是使自身在浏览器内居中,需要配合宽度使用:div转载 2014-12-25 22:32:40 · 701 阅读 · 0 评论 -
IE8中text-align:center偏左的解决办法
http://www.codesky.net/article/201103/169657.html关于text-align:center的应用在不同浏览器显示效果不一样,本文就IE7,IE8,IE9下的不同显示进行说明,并解决IE8下显示偏左问题;在ie7和一些浏览器下解释为该元素内的元素和文字都居中。在ie8和ie9等一些浏览器下解释为该元素内的文字居中。例如转载 2015-01-01 21:05:12 · 2975 阅读 · 0 评论 -
CSS控制文本自动换行
http://www.php100.com/html/webkaifa/DIV_CSS/2009/0416/2453.html1.你定死表格的宽度,即给表格一个宽度值(是数值,不是百分比) 2.强制不换行div{//white-space:不换行;normal 默认;nowrap强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象wh转载 2016-06-02 10:36:28 · 551 阅读 · 0 评论 -
前端开发工具
DreamweaverBracketsSublime Text 3WebStorm 8Hbuilder原创 2016-02-23 17:55:01 · 383 阅读 · 0 评论 -
CSS 颜色代码大全
http://www.cnblogs.com/axing/archive/2011/04/09/CSS.htmlCSS颜色代码大全 FFFFFF#DDDDDD#AAAAAA#888888#666666#444444#000000#FFB7DD#FF88C2#FF44AA #FF0088 #C1转载 2015-12-04 09:59:01 · 2865 阅读 · 0 评论 -
[Modernizr]-----HTML5和CSS3开发利器
http://www.cnblogs.com/NetSos/archive/2012/03/26/2418053.html什么是Modernizr?Modernizr 是一个用来检测浏览器功能支持情况的 JavaScript 库。 目前,通过检验浏览器对一系列测试的处理情况,Modernizr 可以检测18项 CSS3 功能以及40多项关于HTML5转载 2016-01-17 22:48:45 · 421 阅读 · 0 评论 -
纯css实现的漂亮圆角按钮
http://www.6a8a.com/2011/biaodananniu_0707/2758.html纯css实现的漂亮圆角按钮_网页代码站(www.6a8a.com).a{float:left; border-width:1px 0; border-color:#bbbbbb; border-style:solid;}.b{height:22px; bord转载 2015-10-30 00:14:19 · 5711 阅读 · 0 评论