<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here </title><style type=text/css>body{padding:0;margin:0;text-align:center}.main{width:930px;margin:0 auto;}.main-content{width:100%;}.left{width:30%;float:left;clear:left;height:700px;background-color:#ccffaa;}.right{width:70%;float:right;clear:right;height:700px;background-color:#eedddd;}.bottom{p...
转载博客(http://www.cnblogs.com/dearxinli/p/3865099.html)(备注:DIV居中情况,网上谈到也比较多,但是这篇文字,相对还是挺全面,现转载,如果冒犯,还望博主见谅)在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSSHack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素...
最近业务需要,想设计一个比较通用的图文混排的列表。结果设计的过程中遇到了不少问题,虽然都是一些css设计中比较基础的问题,但是自己认为有必要总结下,希望可以帮到一些css设计的初学者,同时也想扩大下自己博客的知识量o(^_^)o。 1.最终设计的结果 HTML(部分,后面的li还有被省略了,当然外面的div也是应该关闭的,大家注意。)代码 复制代码代码如下:<div id="jingdian" class="span24 gmodule g-box"> <div class="g-box-...
CSS+DIV机关有许多值得进修的处所,它的利益信托各人应该有所相识,那么你对它的弱点是否相识,这里和各人分享一下CSS+DIV机关的优弱点。
CSS+DIV机关的优弱点
CSS+DIV框架的利益:
1、开拓服从的进步。
假如你是一个企业建站的前端开拓,信托在大部门时刻里举办着同类站点的代码事变。界说好的框架可以大大进步你的事变服从,停止一些常见的错误。假如你的事变是按件计费的,你的酬金必然会比别人多。
2、类型代码定名。
在多个...
由于本人才疏学浅,对DIV CSS也没有深入彻底研究透,只是凭自己的一点认识而写,希望高手不要扔砖。 废话少说,直接进行正题。 现在全国大大小小的网站都在搞一场技术“革命”,就是所谓“网站重构”说简单点就是DIV CSS进行网站制作。用DIV CSS代替传统的Table制作框架和美化页面。 在重构之前,肯定要了解为什么重构,为什么要用DIV CSS技术?了解了这个问题,那么大家才有使用此技术重构网站的动力。各大CSS学习网站和教...
传统页面数据和布局都混合在一起,如下图:而DIV+CSS存在下述优势:1、符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的,因为这保证您的网站不会因为将来网络应用的升级而被淘汰。
2、支持浏览器的向后兼容,也就是无论未来的浏览器大战,胜利的是IE7或者是火狐,您的网站都能很好的兼容。
3、搜索引擎更加友好。相对与传统的table, 采用DIV+CSS技术的网页,对于搜索引擎的收录更加友好。
4、样式的调整更...
一个网页要说最多的还是文字,上篇博客说CSS样式是一个网页的精髓,那网页中最直接表现出来的就是文字和图片,还有一些所谓的表单,首先先说最为熟悉和常用的文字。让CSS控制网页中的文字,使它不再那么枯燥平淡,从此网页文字变得绚丽多彩。一、文字样式 文字样式主要包括文字的大小、颜色、字体等,具体包括如下写一个小例子,综合运用上述所有的文字效果样式:代码:<html>
<head><title>文字字体</title>
<style>
body{b...
body{}表示是对body标签的设置,就是<html><head></head><body></body></html> 里面的body。 *{}表示对页面所有元素的设置,一般我们会设置*{margin:0px;padding:0px}来表示所有元素的margin和padding为0; 这两个的设置一般是为了页面标签的初始化,因为不同的浏览器默认标签有一些不同的属性。比如chrome默认li有margin-left:30px;的属性,p标签也默认有属性。有些浏览器会给body默认属性。如果不进行设置的话在不同浏览器...
div最小高度去除办法:IE6中,使用CSS定义DIV的高度的时候经常遇到这个问题,就是当DIV的最小高度小于一定的值以后,就会发现,无论你怎么设置最小高度,Div的高度会固定在一个值不再发生变动,这个问题很是烦人。如下面的情况。 HTML代码 复制代码代码如下:<html> <head> <title></title> <style type="text/css"> <!-- #testdiv { background: #009900; height: 3px; } --> </style> </head> <body> <div id="testdiv"></div> </...
1:通过position:absolute定位,上下左右的值都设为0,margin:auto;需要知道div的宽高{ width: 64px; height: 64px; border: 1px solid red; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; }2:需要知道div的宽高,通过定位移动的页面的宽高一半的位置,再通过margin-top和margin-left的移动该div的宽高度的一般即可实现;{width: 64px; height: 64px; bord...
方法一:一般情况,默认的div是写一个换一行,那么如何定义两个div横向排列而不换行呢?div默认的display属性是block。所以每一个div都是新的一行,现在把display换成inline就不会换新行了。<div style="background-color:#ff0000;display:inline;">aaa</div><div style="background-color:#ffff00;display:inline;">bbb</div>方法二:这里使用float:right属性。float做为CSS中的一个属性定义元素向哪个方向浮动。float:right 文本...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title><style type="text/css">.tag{width: 300px;height: 100px;border: 5px solid #09F;position: relative;}.tag em{display: block;border-width: 20px;position: absolute;bottom: -40px;left: 100px;border-style: solid dashed d...
以下代码实现纵向导航功能,并为导航添加了超链接(用#不可用的超链接代替),如下图所示 复制代码代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> body{...
我们遇到过很多的企业网站或其它小型的展示类网站,有一些共同的特点,即顶部放一个大的导航或BANNER,右侧是链接或图片,左侧放置内容,页面底部放置版权信息等。这样的形式是国内经典式的布局,我们这里不对它的视觉效果作过多的讨论,我们今天说说如何用DIV+CSS实现三行两列的布局。我们看下面的图片:这样的结构大家再熟悉不过了,我们该如何用DIV+CSS实现它呢。我们看下面的分析图片:它们相对应的关系如下: Example Source ...
Div即父容器不根据内容自动调节高度,我们看下面的代码: 1<div id="main">23<div id="content"></div>45</div> 当Content内容多时,即使main设置了高度100%或auto。在不同浏览器下还是不能完好的自动伸展。内容的高度比较高了,但容器main的高度还是不能撑开。 我们可以通过三种方法来解决这个问题。 一,增加一个清除浮动,让父容器知道高度。请注意,清除浮动的容器中有一个空格。1 <div id="main">
2
3 <div id="co...