内蒙古11选五组选3遗漏:DIV CSS布局

大家都知道从平面设计人员拿来的PS(图片)给内蒙古11选五开奖5号的者重构时,需要对网页美工图片进行分析,只有进行很好的分析才能有CSS布局。
因此DIV CSS布局在分析中占很大部分,我们分析网页美工图片不是分析图片好看是否,而是从内蒙古11选五开奖5号的布局出发分析网页的美工图片,而CSS布局分析直接影响以后的css重构html页面是否好写的一步。

布局知识
内蒙古11选五开奖5号的布局,CSS布局是网页html通过div标签+css样式表代码开发制作的(html)网页的统称。
div+css布局好处:便于维护,有利seo(谷歌将网页打开速度作为排名因素及SEO因素),网页打开速度更快,符合web标准等。

制作div+css网页前思考布局:
首先我们拿到一张网页美工图片我们将从上下、上中下、左右、上中(中包括左右)下布局框架来思考。
下面通过一个实例讲解下内蒙古11选五开奖5号的布局分析,我们以内蒙古11选五开奖5号的列表页面分析css布局:

首先我们可以分析出我们内蒙古11选五开奖5号的布局重构此页面结构框架,我们可以看出是 上、中、下结构,其中又包括了左右结构。

由此我们就要写此页面CSS和html时候就先从上到下 从外到内原则写css与html。

我们首先建一个web的文件夹并在此文件夹里新建html页面命名为index.html ,css文件命名为index.css。这里有个诀窍就是可以导入模板方式来建css与html初始页面,然后将css文件引用到html,也就是我在模板里介绍的css模板,再在CSS模板的基础上再写再添加css。

以下是index.html 的html代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css布局案例实验页面-内蒙古11选五开奖5号的 www.phlmy.com.cn</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">我是头部(上)</div>
<div id="centers">
<div class="c_left">我是中的左</div>
<div class="c_right">我是中的右</div>
<div class="clear">&nbsp;</div>
</div>
<div id="footer">我是底部(下)</div>
</body>
</html>

index .css的CSS代码如下:

body, div, address, blockquote, iframe, ul, ol, dl, dt, dd, li, dl, h1, h2, h3, h4, h5, h6, p, pre, table, caption, th, td, form, legend, fieldset, input, button, select, textarea {margin:0; padding:0; font-weight: normal;font-style: normal;font-size: 100%; font-family: inherit;} 
ol, ul ,li{list-style: none;}
img {border: 0;}
body {color:#000;background:#FFF; text-align: center; font: 12px/1.5 Arial, Helvetica, sans-serif;}
.clearfix:after {clear:both; content:"."; display:block; height:0pt; visibility:hidden; overflow:hidden;}
.clear{clear:both;height:1px; margin-top:-1px; width:100%;}

.dis{display:block;}
.undis{display:none;}

/*此上面代码是初始CSS模板,下面是新写CSS布局框架代码*/

#header ,#centers ,#footer{ width:100%; margin:0 auto; clear:both;font-size:18px; line-height:68px; font-weight:bold;}
#header{ height:68px; border:1px solid #CCCCCC; }
#centers{ padding:8px 0;}
#footer{ border-top:1px solid #CCCCCC; background:#F2F2F2;}

#centers .c_left{ float:left; width:230px; border:1px solid #00CC66; background:#F7F7F7; margin-right:5px; }
#centers .c_right{ float:left; width:500px;border:1px solid #00CC66; background:#F7F7F7}

你可以考出此两段代码新建个试试,我们就布局出以上美工页面CSS和html框架,然后根据各内容继续添加CSS与html源代码。

以上是我们今天讲解的css布局_div css布局重要及说明,希望对您有帮助。以上案例未详解希望你亲自多实践,只有实践才能练好技术。 

相关标签: 布局
如需转载,请注明文章出处和来源网址:www.thinkcss.com/css/1.shtml

日期:2010-05-20 14:02:25 来源:内蒙古11选五开奖5号的 www.phlmy.com 作者:ThinkCSS
上一篇:没有了
下一篇:CSS中的class与id区别及用法

热门点击

  • 其实啊也不奇怪,菜做好了先来一份尝尝味道于是提前开吃了。 2019-08-19
  • 十九大精神进机关:原原本本吃透精神 学懂弄通昂扬斗志 2019-08-13
  • 我们是建立市场经济,公有制如何建立市场经济,就要明晰产权,不明晰产权如何建立市场经济? 2019-08-13
  • 2017巴塞尔国际钟表珠宝展 2019-08-11
  • 政务舆情回应如何把握语言分寸感? 2019-08-11
  • 候选案例:机井通电惠民生 2019-08-08
  • 2018年04期 中国国家地理网 2019-08-05
  • 解析视频播控平台黑产链 20元看12家网站VIP会员视频 2019-07-31
  • 西安外国语大学第二十四届校园文化艺术节闭幕式暨第一届朗读者圆满落幕西安外国语大学第二十四届校园文化艺术节-陕西教育新闻 2019-07-31
  • 俄罗斯世界杯今日开战,送上最全观赛指南!你最看好哪支球队? 2019-07-29
  • 《人民日报》让我爱上了文学(原创首发) 2019-07-29
  • 【北京页川车型报价】北京页川4S店车型价格 2019-07-27
  • 河北沧州经济开发区管理委员会 2019-07-24
  • 强村带弱村结对共发展 2019-07-24
  • 《读药》151期:短篇小说——解读蒋一谈《庐山隐士》 2019-07-15
  • 山东十一选五预测 经营娱乐场3 福建体彩31选7今日开奖 东莞赌场河南 12选5期期中奖的万能码 时时彩计划网 福建11先5开奖走势图 双色球和值走势图预测 体彩20选5中3个号多少钱 12生肖表2019年图 福彩中心主任泄密 浙江十一选五走势图开奖结果查询 11选5开奖正好彩票网 彩票兑奖 新疆25选7的开奖号码是多少