魔扣论坛

魔扣源码论坛业务
查看: 940|回复: 6

DIV+CSS网页设计常用布局代码

[复制链接]

该用户从未签到

168

主题

0

回帖

180

积分

初级魔扣

Rank: 2

魔扣币
6
贡献
6
威望
6
发表于 2016-12-28 15:46:21 | 显示全部楼层 |阅读模式
魔扣币兑换比例:【 50以下 : ¥1 = 10 魔扣币 】丨【 50 - 100 :¥1 = 20 魔扣币】丨【 100以上:¥1 = 30 魔扣币 】

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
单行一列

body{margin:0px;padding:0px;text-align:center;}
#content{margin-left:auto;margin-right:auto;width:400px;width:370px;}

两行一列

body{margin:0px;padding:0px;text-align:center;}
#content-top{margin-left:auto;margin-right:auto;width:400px;width:370px;}
#content-end{margin-left:auto;margin-right:auto;width:400px;width:370px;}

三行一列

body{margin:0px;padding:0px;text-align:center;}
#content-top{margin-left:auto;margin-right:auto;width:400px;width:370px;}

#content-mid{margin-left:auto;margin-right:auto;width:400px;width:370px;}
#content-end{margin-left:auto;margin-right:auto;width:400px;width:370px;}

单行两列

#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}
#bodycenter#dv1{float:left;width:280px;}
#bodycenter#dv2{float:right;width:410px;}

两行两列

#header{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}
#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}


#bodycenter#dv1{float:left;width:280px;}
#bodycenter#dv2{float:right;width:410px;}

三行两列

#header{width:700px;margin-right:auto;margin-left:auto;}
#bodycenter{width:700px;margin-right:auto;margin-left:auto;}
#bodycenter#dv1{float:left;width:280px;}
#bodycenter#dv2{float:right;width:410px;}
#footer{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}
//www.qpsh.com

单行三列 绝对定位

#left{position:absolute;top:0px;left:0px;width:120px;}
#middle{margin:20px190px20px190px;}
#right{position:absolute;top:0px;right:0px;width:120px;}

float定位一
xhtml:

<divid=&quot;warp&quot;><divid=&quot;column&quot;><divid=&quot;column1&quot;>这里是第一列</div><divid=&quot;column2&quot;>这里是第二列</div><divclass=&quot;clear&quot;></div></div><divid=&quot;column3&quot;>这里是第三列</div><divclass=&quot;clear&quot;></div></div>

CSS:

#wrap{width:100%;height:auto;}
#column{float:left;width:60%;}
#column1{float:left;width:30%;}
#column2{float:right;width:30%;}
#column3{float:right;width:40%;}
.clear{clear:both;}

float定位二
xhtml:
<divid=&quot;center&quot;class=&quot;column&quot;><h1>Thisisthemaincontent.</h1></div><divid=&quot;left&quot;class=&quot;column&quot;><h2>Thisistheleftsidebar.</h2></div><divid=&quot;right&quot;class=&quot;column&quot;><h2>Thisistherightsidebar.</h2></div>

CSS:

body{margin:0;padding-left:200px;padding-right:190px;min-width:240px;}
.column{position:relative;float:left;}
#center{width:100%;}
#left{width:180px;right:240px;margin-left:-100%;}
#right{width:130px;margin-right:-100%;}

两行三列
xhtml:<divid=&quot;header&quot;>这里是顶行</div><divid=&quot;warp&quot;><divid=&quot;column&quot;><divid=&quot;column1&quot;>这里是第一列</div><divid=&quot;column2&quot;>这里是第二列</div><divclass=&quot;clear&quot;></div></P><P></div><divid=&quot;column3&quot;>这里是第三列</div><divclass=&quot;clear&quot;></div></div>

CSS:

#header{width:100%;height:auto;}
#wrap{width:100%;height:auto;}
#column{float:left;width:60%;}
#column1{float:left;width:30%;}
#column2{float:right;width:30%;}
#column3{float:right;width:40%;}
.clear{clear:both;}

三行三列
xhtml:
<divid=&quot;header&quot;>这里是顶行</div><divid=&quot;warp&quot;><divid=&quot;column&quot;><divid=&quot;column1&quot;>这里是第一列</div><divid=&quot;column2&quot;>这里是第二列</div><divclass=&quot;clear&quot;></div></div><divid=&quot;column3&quot;>这里是第三列</div><divclass=&quot;clear&quot;></div></div><divid=&quot;footer&quot;>这里是底部一行</div>

CSS:

#header{width:100%;height:auto;}
#wrap{width:100%;height:auto;}
#column{float:left;width:60%;}
#column1{float:left;width:30%;}
#column2{float:right;width:30%;}
#column3{float:right;width:40%;}
.clear{clear:both;}
#footer{width:100%;height:auto;

该用户从未签到

2

主题

288

回帖

578

积分

高级魔扣

Rank: 4

魔扣币
288
贡献
288
威望
0
发表于 2017-1-28 21:39:13 | 显示全部楼层
博海踏浪,书写神奇的友谊,网络之缘让我认识了你,你是我生命中最美的相遇!你是我魔扣源码论坛知心的朋友,你是我可遇不可求的知己!神奇的网络把我们的心紧紧地凝聚在一起,没有了天南海北的距离,没有了从前的相隔万里!我们就像近在咫尺,你的家园我愿前去,我的小屋你常常点击,共同的语言让我们彼此相知,共建浪漫家园的美好夙愿,让我们紧紧拥抱着这一片神奇的网络土地!一次次的耕耘,一次次的收获,我们定会得到一次次的惊喜!愿朋友开心快乐每一天!

该用户从未签到

1

主题

241

回帖

483

积分

中级魔扣

Rank: 3Rank: 3

魔扣币
241
贡献
241
威望
0
发表于 2017-5-1 09:17:48 来自手机 | 显示全部楼层
世界上有两个我,一个假装快乐,一个真心难过。',

该用户从未签到

3

主题

245

回帖

494

积分

中级魔扣

Rank: 3Rank: 3

魔扣币
245
贡献
245
威望
1
发表于 2017-9-13 09:02:40 来自手机 | 显示全部楼层
支持,赞一个

该用户从未签到

1

主题

231

回帖

465

积分

中级魔扣

Rank: 3Rank: 3

魔扣币
233
贡献
233
威望
0
发表于 2018-2-13 07:34:51 | 显示全部楼层
有时候你必须跳出“窗外”,然后在坠落的过程中长出“翅膀”。',

该用户从未签到

0

主题

246

回帖

492

积分

中级魔扣

Rank: 3Rank: 3

魔扣币
246
贡献
246
威望
0
发表于 2018-8-31 22:41:13 | 显示全部楼层
用最美好的心情想念你,魔扣源码论坛用最温暖的笑脸惦挂你,用最宽容的心胸热爱你,用最专注的眼神凝望你,用最忠诚的心灵祝福你。

该用户从未签到

0

主题

271

回帖

542

积分

高级魔扣

Rank: 4

魔扣币
271
贡献
271
威望
0
发表于 2019-2-18 12:22:51 来自手机 | 显示全部楼层
欢迎你,亲爱的朋友,欢迎您光临并留下美好的祝福。相信通过网络的交流,我们会从陌生到相识相知,不断增进彼此信任,友谊会不断加深,这是我们前世修来的缘分。让我们珍惜这份缘,魔扣源码论坛愿我们友谊永存!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

  • 联系我们
  • 新浪微博 :
  • 在线客服 :魔扣科技 
  • 源码QQ群 :魔扣源码论坛官方总群
  • 联系邮箱 :charlin#morko.net
  • 微信扫一扫
快速回复 返回顶部 返回列表