CSS/html
科比不来it
左手代码,右手篮球。酷爱编程,痴迷技术。关注我,不迷路
展开
-
CSS Sprites技术
CSS Sprites技术CSS Sprites在国内很多人叫css精灵或css雪碧。它是把网页中一些背景图片整合到一张图片文件中,再利用CSS的背景图片定位到要显示的位置这样做可以减少文件体积,减少对服务器的请求次数,提高效率 <!--#nav ul { list-style: none; margin: 0px auto; padding: 0px; border-b转载 2013-02-23 13:45:19 · 410 阅读 · 0 评论 -
常用html标签集合
常用html标签集合html !DOCTYPE http://www.divcss5.com/html/h22.htmlhtml a - html锚链接 http://www.divcss5.com/html/h318.htmlhtml b加粗html strong 加粗html base 所有链接默认打开目标html bodyhtml br换行 http://www.divcss转载 2013-03-19 11:12:13 · 521 阅读 · 0 评论 -
做SEO必备:DIV+CSS命名规范
做SEO必备:DIV+CSS命名规范W3C标准的div+css命名规则到底有什么用?首先是让自己和他人清楚的知道你要写的是什么内容,最重要的是,标准的DIV+CSS命名规则非常有利于SEO。SE们在抓取网站内容的时候,也会去DIV+CSS里面看看,如果利用DIV+CSS作弊,SE也是能发现的。这是在之前写的"网站被K的可能因素"里有提到过,下面的规则请认真记在脑子里。一、样式文件命名主要的转载 2013-03-19 11:10:00 · 332 阅读 · 0 评论 -
CSS经典技巧十则
CSS经典技巧十则 1.CSS字体属性简写规则一般用CSS设定字体属性是这样做的:font-weight:bold;font-style:italic;font-varient:small-caps;font-size:1em;line-height:1.5em;font-family:verdana,sans-serif;但也可转载 2013-03-19 11:10:40 · 278 阅读 · 0 评论 -
div与span的区别
div与span的区别div与span:都是html标签实例:我占一行我多长占多长位置两者区别:DIV占用1整排,而SPAN所占位置是内容多少占用多长长度转载 2013-03-19 11:11:40 · 508 阅读 · 0 评论 -
CSS代码优化
CSS代码优化一、CSS代码优化地方:1、border(CSS边框)简写:border-top:1px solid #000;border-bottom:1px solid #000;border-left:1px solid #000;border-right:1px solid #000;可以简写为:border:1px solid #000;2、padding(CSS paddi转载 2013-03-19 11:11:55 · 480 阅读 · 0 评论 -
CSS初始化模板(HTML+CSS模板)引入下载
CSS初始化模板(HTML+CSS模板)引入下载@charset "utf-8";/* DIVCSS5-CSS初始化模板-www.divcss5.com */body, div, address, blockquote, iframe, ul, ol, dl, dt, dd, li, dl, h1, h2, h3, h4, pre, table, caption, th, td, form,翻译 2013-03-19 11:12:20 · 1132 阅读 · 0 评论 -
使用DIV+css中的label.input来编写注册表单
使用DIV+css中的label.input来编写注册表单今天使用使用DIV+css中的label.input来编写了个注册表单,以下就是源码;无标题文档#register{ width:500px; height:400px; border:1px solid #09C;}input{ width:180px; margin-bottom:5px;}#register原创 2013-03-19 11:10:57 · 857 阅读 · 0 评论 -
图片超出撑破DIV
图片超出撑破DIV2、图片超出撑破DIV我们常常会遇到由于一个图片过宽过大,撑破了我们设置的宽度。解决办法使用CSS控制改对象IMG标签宽度即可,假如该对象为.yangshi设置宽度为500px,那我们就只需设置.yangshi img{max-width:500px;}但是在IE6中max-width是失效的,那我们最好解决办法,在上传图片的时候更加设置宽度,让图片本身宽转载 2013-03-19 11:12:06 · 1064 阅读 · 0 评论 -
HTML <map>标签的使用
在html代码中,给图像使用标签,可以给图像的某个部分建立超链接,方法如下: 其中,坐标coords对各个shape的解释如下:1、shape="rect" coords="x1,y1,x2,y2" // (x1,y1)=Upper Left, (x2,y2)=Lower Right 即,当shape是矩形时,coords表示矩形左上及右下(x原创 2013-03-22 10:11:35 · 615 阅读 · 0 评论 -
css实现相对定位实例
element.style { background: url("/templets/temp/images/zixun.jpg") no-repeat scroll 0 0 transparent; border: 0 solid #E7DDBC; cursor: pointer; height: 32px; left: 4px; position原创 2013-04-18 14:31:32 · 940 阅读 · 0 评论 -
将 ul+li 分两列显示的方法
目的很简单:有一个 ul>li 列表,默认为单列显示,把它变为两列显示。方法1,使用DIV+CSS代码:.mycode{ width:300px; height:74px; float:left;}.mycode ul{ width:280px;}.mycode li{ width:100px; float:left; display:block;}ABCABCABCABC原创 2013-04-18 22:23:40 · 8744 阅读 · 0 评论 -
CSS样式的优先级别
优先原则一:文本从上到下,后出现的样式优先于前面出现的同一样式例:.def1{background:black;}.def2{background:yellow; }测试1结果:所有浏览器均yellow色,注意:与class=”” 引号内的顺序无关,只看.def1和.def2在声明时的顺序,.def2后声明的所以权重高。优先原则二:id声明(即 # 开头的样式)> class声明(转载 2013-05-13 15:02:15 · 529 阅读 · 0 评论 -
【CSS】最全的CSS浏览器兼容问题
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名. CSS技巧 1.div的垂直居中问题 vertical-align:middle;转载 2013-05-15 10:31:48 · 471 阅读 · 0 评论 -
html立体表格简单写法
2. 立体表格 源码如下: it365cn it365cn it365cn it365cn cnbruce cnbruce cnbruce cnbruce 表格边线为1,间隔为0,左上为#333333,右下为#efefef,行背景色为#cccc转载 2013-12-26 10:00:46 · 1030 阅读 · 0 评论 -
Jquery 菜单点击,划过换背景色代码
1-5-1ul{margin:0; padding:0; line-height:44px;list-style:none;}li{float:left; width:143px; display:block; text-align:center;}a{text-decoration:none; color:#fff; font-weight:bold;}.one{background:转载 2014-05-29 17:21:55 · 1634 阅读 · 0 评论 -
DIV+CSS兼容IE6+IE7+Firefox
DIV+CSS兼容IE6+IE7+Firefox DIV+CSS网页布局这是一种趋势,我也开始顺应这股趋势了,不过在使用DIV+CSS网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是 对完全使用DIV+CSS设计的网页,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网页可能乱的一塌糊涂!我经常被这些东西整的焦头烂额,于是呼在网上找了些资料,加上自己的理解和这些日子转载 2013-03-19 11:11:13 · 394 阅读 · 0 评论 -
使用Div+css实现表格布局
使用Div+css实现表格布局css样式#new{ width:440px; }#new li{list-style:none; float:left; width:90px; text-align:center; margin-bottom:1px; margin-right:1px; background-color:#CCC; height:30px; line-heigh转载 2013-03-19 11:10:51 · 2654 阅读 · 0 评论 -
HTML+CSS+JavaScript】网页实战开发笔记之HTML的头部信息里你不知道的事
HTML+CSS+JavaScript】网页实战开发笔记之HTML的头部信息里你不知道的事HTML中我们一般把head部分称为网页的头部。头部部分的内容虽然不会在页面中显示,但它能影响到搜索引擎对网页的收录和排序,以及网页的各种全局设置,可以说是至关重要。▲知识点一——头部信息里设置网页的基底网址基底网址的实质是统一设置超级链接的属性,基底网址标转载 2013-03-19 11:10:31 · 473 阅读 · 0 评论 -
格式化标签的默认样式
格式化标签的默认样式大多数标签都有默认样式,如上节课我们讲解的ul列表每行前的圆点,h1-h6字体大小各不相同,em默认为斜体,strong表示粗体,还有body等大部分标签都有外边距等。正因为有这些默认样式,一个设计合理的页面,即使没有加载样式,也能让用户很容易阅读。但在实际使用过程中,默认样式会造成一些麻烦,所以我们最好先把标签的默认样式给清除掉。格式化标签的默认样式<转载 2013-02-23 13:51:34 · 515 阅读 · 0 评论 -
html 锚点的使用
html 锚点的使用html 锚点 到底是干吗的?通俗简单地说,比如一篇很长的文章,你想按分段精确来看,那就可以用到锚点了。代码:跳到001…文字省略…文字省略其实锚点只需name就可以可,加id是为了让它兼容性更好.href的值要跟name \ i d 一致,前面必须加"#",以上代码在ie6/7,ff中都可以兼容,但在ie8中就不行。因为我们锚点的值为空,为不影响美观我原创 2013-02-23 13:23:45 · 411 阅读 · 0 评论 -
DIV+CSS+JS实现不间断横向滚动代码
DIV+CSS+JS实现不间断横向滚动代码横向不间断滚动DIV CSS代码-DIVCSS5.scroll_div {width:600px; height:49px;margin:0 auto; overflow: hidden; white-space: nowrap; background:#ffffff;}.scroll_div img {width:120px;he转载 2013-02-23 13:43:23 · 1800 阅读 · 0 评论 -
背景图片美化导航菜单
背景图片美化导航菜单<!--#nav ul { list-style: none; margin: 0px auto; padding: 0px; border-bottom:3px solid #E10001; height:28px; width:360px; }#nav li { float: left; margin-left: 2px; }#nav a { displ转载 2013-02-23 13:46:13 · 482 阅读 · 0 评论 -
超链接样式的设置
超链接样式的设置超链接可以说是网页发展史上一个伟大的发明,它使得许多页面之间相互链接从而构成一个网站。本节课的重点:CSS伪类a:link {color: #FF0000} /* 未访问的链接 */a:visited {color: #00FF00} /* 已访问的链接 */a:hover {color: #FF00FF} /* 鼠转载 2013-02-23 13:50:47 · 667 阅读 · 0 评论 -
将图像作为列表项标记
ul {list-style-image: url('/i/eg_arrow.gif')}咖啡茶可口可乐原创 2013-02-23 13:34:45 · 906 阅读 · 0 评论 -
css处理空白符
css处理空白符p {white-space: normal;}This paragraph has many spaces in it.注释:当 white-space 属性设置为 normal 时,会合并所有的空白符,并忽略换行符。原创 2013-02-23 13:35:38 · 640 阅读 · 0 评论 -
div#sidebar{}与#sidebar div{}的区别
div#sidebar{}与#sidebar div{}的区别http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">overflow属性用法div#sidebar { background-color:blue; }#sidebar div{ backg转载 2013-02-23 13:52:30 · 1453 阅读 · 0 评论 -
list-style-image 图片垂直居中
list-style-image 图片垂直居中转载 2013-02-23 13:39:23 · 863 阅读 · 0 评论 -
DIV+CSS规范命名大全集合
DIV+CSS规范命名大全集合网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容如下:页头:header 如:#header{属性:属性值;}或.header{属性:属性值;},也许你需要了解class与id区别及用法登录条:loginBar 标志:logo转载 2013-02-23 13:42:24 · 367 阅读 · 0 评论 -
CSS滑动门技术宽度自适应按钮
CSS滑动门技术宽度自适应按钮滑动门技术自适应宽度按钮指按钮的宽度可以随着内容的多少而改变,这个在导航菜单上的应该尤为广泛#nav ul { list-style:none; margin: 0px; padding: 0px; height:31px; background:url(/upload/2010-07/05/13.gif) 0 bottom repeat-x; ove转载 2013-02-23 13:44:27 · 737 阅读 · 0 评论 -
CSS设计网站的导航
CSS设计网站的导航导航是一个网站必不可少的元素,它使得许多频道或页面链接在一起,这样用户可以很方便地浏览整个网站。导航的形式有多种,最常用的是横向导航,另外还有纵向导航和下拉菜单等形式。 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">转载 2013-02-23 13:50:12 · 405 阅读 · 0 评论 -
用DIV+CSS5 优化后的HTML结构(可用于每次新建HTML模板):
用DIV+CSS5 优化后的HTML结构(可用于每次新建HTML模板):标题内容转载 2013-03-19 11:11:46 · 647 阅读 · 0 评论 -
CSS重用优化
CSS重用优化这里主要介绍是CSS代码的共用属性提取来达到节约代码、维护方便,CSS实例如下:.yangshi_a{ width:100px; height:20px; text-align:left; float:left; font-size:24px;}.yangshi_b{ width:100px; height:20px; text-align:right; float:转载 2013-03-19 11:12:01 · 348 阅读 · 0 评论 -
css 中的display全解析
css 中的display全解析 display,顾名思义,就是对该元素显示的调整, 这是我从W3C网站上找的,有疑问可追问, none 此元素不会被显示。 block 此元素将显示为块级元素,此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素,元素前后没有换行符。 inline-block 行内块元素。(CSS2.1 新增的值)转载 2013-03-19 11:10:23 · 461 阅读 · 0 评论 -
前后端交互过程中的编码
起因最近在写PHP,本身对PHP不太熟练。然后遇到编码这个问题,困扰了大半天,索性,系统探索解决一番。前后端交互过程中涉及的编码Browser cilent: 首先,浏览器的设置里有设置编码格式,一般设置为UTF-8。AJAX request: AJAX异步请求的过程中可以设置编码, contentType:"application/x-www-form转载 2016-07-28 14:48:26 · 341 阅读 · 0 评论