404 Not Found

404 Not Found


nginx
404 Not Found

404 Not Found


nginx
404 Not Found

404 Not Found


nginx
404 Not Found

404 Not Found


nginx
网页制作之CSS常用网站布局实例
2007-10-16 16:12:58 佚名 天极网 发表评论
    

    单行一列

    以下是引用片段:

    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; }

    单行三列

    绝对定位

    以下是引用片段:

    #left { position: absolute; top: 0px; left: 0px; width: 120px; }

    #middle {margin: 20px 190px 20px 190px; }

    #right {position: absolute;top: 0px; right: 0px; width: 120px;}

    float定位

    xhtml:

    以下是引用片段:

    

    

    

这里是第一列

    

这里是第二列

    

    

    

这里是第三列

    

    

    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:

    以下是引用片段:

    

    

This is the main content.

    

    

    

This is the left sidebar.

    

    

    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:

    以下是引用片段:

    

    

    

    

这里是第一列

    

这里是第二列

    

    

    

这里是第三列

    

    

    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:

    以下是引用片段:

    

    

    

    

这里是第一列

    

这里是第二列

    

    

    

这里是第三列

    

    

    

    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;}

    PS:这里列出的是常用的例子,而非研究之用,对一每个盒子,都没有设置margin,padding,boeder等属性!

更多"div" 的相关消息
请选择您看到这篇新闻时的心情 查看结果 心情调查排行






404 Not Found

404 Not Found


nginx
404 Not Found

404 Not Found


nginx
404 Not Found

404 Not Found


nginx
404 Not Found

404 Not Found


nginx
404 Not Found

404 Not Found


nginx
404 Not Found

404 Not Found


nginx
404 Not Found

404 Not Found


nginx
404 Not Found

404 Not Found


nginx
404 Not Found

404 Not Found


nginx
发表言论:
笔  名: 查看评论 进入论坛
div
404 Not Found

404 Not Found


nginx
404 Not Found

404 Not Found


nginx
404 Not Found

404 Not Found


nginx
404 Not Found

404 Not Found


nginx
404 Not Found

404 Not Found


nginx
404 Not Found

404 Not Found


nginx
404 Not Found

404 Not Found


nginx
404 Not Found

404 Not Found


nginx
404 Not Found

404 Not Found


nginx
404 Not Found

404 Not Found


nginx
404 Not Found

404 Not Found


nginx
404 Not Found

404 Not Found


nginx
404 Not Found

404 Not Found


nginx

论坛精华

IT新闻

IT人物

企业

产品报价手机-DC-笔记本-台式机-液晶-等离子

404 Not Found

404 Not Found


nginx
404 Not Found

404 Not Found


nginx