随笔分类 - HTML and CSS
摘要：KendoUI的DataSource绑定功能，既支持本地的JS对象数组，也支持远程的JSON，XML，JSONP。支持对数据的增删查改，以及对本地或服务端的数据排序，分页，筛选，分组，聚集。 1.绑定本地JS对象数组 varmovies=[{title:"StarWars:ANewHope",year:1977},{title:"StarWars:TheEmpireStrikesBack",year:1980},{title:"StarWars:ReturnoftheJedi",year:1983}];varlocalDataSour
阅读全文
摘要：web开发趋势，组件化咯。个人接触最早的web组件，就是asp.net的web控件。效果还可以，还能直接于后台绑定数据源。个性化配置，基本通过IDE的可视化菜单完成，或者微软自己封装的接口（个人感觉接口很烂）。但整个开发思想，确实超前，MVVM，微软很早就搞。而jQueryUI和KendoUI的组件， 前端json格式配置咯，数据绑定，自然也有json。KendoUI比jQueryUI更高级一点，体现在KendoUI有自己的模版语言，有自己的MVVM思想。这说明KendoUI在组件逻辑和组件效果可以更加自定义，或者更优雅的自定义。KendoUI的DropDownList所需引入js文件列表如下
阅读全文
摘要：components，顾名思义是组件。接触组件这个概念，首先是在Visual Studio的ASP.NET的控件啦。这里有Buttons，Navigation，Labels，Typography，Thumbnails，Alerts，Progress bars。有个Buttons group，就是可以把一组按钮并列放在一起。Buttons dropdowns呢，就是按钮里有下拉列表。导航组件Navigation，有Tab式的，pill式，当然，Stacked tab和Stacked pill式，tab with dropdowns。最ok的就是里面的Navbar了，你可以设置其.navbar-f
阅读全文
摘要：bootstrap的基本样式处理，处理网页的字体（Typography），表格，表单，按钮，小图标(Icons by Glyphicons)。1.bootstrap的Typography，关于字体，一般涉及到字体大小，哪种字体，字体加粗加横线加斜，字体颜色等等。 关于文本，一般涉及到单词间的间距，文本行与行的间距，居左中右。当然重新处理了h1,h2,h3,h4,h5,h6的样式，其中可以明显看到h6变成灰色了。对于<abbr>重新样式处理了，主要是移上去的鼠标样式。对于文本的链接处理，是浅蓝色了。对于<blockquote>重新样式处理了，加了根灰色竖线，以及灰色副标题
阅读全文
摘要：First首先抛出三个概念：Fix，Fluid，Responsive，分别是固定，流动，响应式布局。bootstrap的固定布局，就是无论浏览器的放大缩小，内容位置都不受挤压改变，而且整个布局居中。bootstrap的流动式布局，要设置布局的最大宽度和最小宽度。如果浏览器的宽度大于布局的最大宽度，然后不管浏览器大小怎么调整，布局里面的内容位置都不受挤压改变。如果浏览器的宽度小于布局的最大宽度，大于最小宽度，那么布局里的内容位置会随着浏览器的大小调整，而改变。如果浏览器的宽度小于布局的最小宽度，布局里的内容位置也不会改变啦。bootstrap的响应式布局，准确来说，没有响应式布局，是响应式设计。
阅读全文
摘要：四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异 网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body.scrollWidth 网页正文全文高：document.bo.
阅读全文
摘要：BootStrap Study note Scaffolding 两种960px/12column网格， 默认网格default grid标签是<div class="container">.固定960px宽度。 另外一种是Fluid grid的宽度是用百分比代替固定宽度设置。 两者的区别就在于，固定和不固定（废话）。默认网格，960，超出960就超出，父元素不会扩大自己的宽度。Fluid grid的父元素会扩大自己的宽度，包容子元素。 .container-fluid { padding-left: 20px; padding-right...
阅读全文
摘要：盒子模型的content，padding，border，margin就不用说了。想说的是，CSS能控制的是padding，border，margin。content由用户输入的内容控制。于是就有了盒子到底有多大。我们知道盒子的width=padding+content。不设置width，块盒子宽度自动撑满父元素。只要用户输入内容不变，content不变，只有padding和width在变，即使width是固定值，padding增加，盒子宽度也增加。怎也使content受到padding挤压呢？通过为内部div添加内边距，由外部div定义的栏的宽度能够保持不变即可。
阅读全文
摘要：<div>是块级元素，<span>是内联元素。div能包含span，反之不能。盒子=margin+border+padding+content盒子的width=width+padding，height=height+padding。说明盒子内content的位置由设定width后，padding大小来决定。border属性有color,width,style。border的width有thin，medium，thick和具体的数值。border的style属性有none，hidden，dotted，dashed，double....其中none和hidden效果一样，只
阅读全文
摘要：<html><head><styletype="text/css">.t_area{width:300px;overflow-y:visible}</style></head><body><textareaclass="t_area">随便在这里输入内容,textarea的高度会随着你输入的内容而变化,不会出现滚动条,实现很简单,就是一段css:overflow-y:visible</textarea></body></html>好使的
阅读全文
摘要：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><title>左中右版式</title><styletype="text/css">body{margin:0px;padd
阅读全文
摘要：几种选择器：3种，标签名选择器，clsss选择器，id选择器。对于同样的CSS属性，选择器优先级是，id选择器>class选择器>标签名选择器。class+标签名选择器>class选择器。对于不同的CSS属性，继承。上面优先级反走。请看例子：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www
阅读全文
摘要：1.标签内的CSS。2.网页内的CSS。3.link引用的CSS。4.import引用的CSS。下面是源代码：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Ty
阅读全文
浙公网安备 33010602011771号