魔扣论坛

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

DIV+CSS标准化网页设计常用学习方法与技巧

[复制链接]
  • TA的每日心情
    奋斗
    2018-10-24 00:02
  • 签到天数: 13 天

    [LV.3]偶尔逛逛

    147

    主题

    0

    回帖

    154

    积分

    初级魔扣

    Rank: 2

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

    本帖子中包含更多资源

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

    x
    CSS布局常用的方法
    float:none|left|right
    取值:
    none: 默认值。对象不飘浮
    left: 文本流向对象的右边
    right: 文本流向对象的左边

    它是怎样工作的,看个一行两列的例子
    xhtml代码:
    <div id=&quot;wrap&quot;>
    <div id=&quot;column1&quot;>这里是第一列</div>
    <div id=&quot;column2&quot;>这里是第二列</div>
    <div class=&quot;clear&quot;></div> /*这是违背web标准意图的,只是想说明在它下面的元素需要清除浮动*/
    </div>

    CSS代码:
    #wrap{width:100;height:auto;}
    #column1{float:left;width:40;}
    #column2{float:right;width:60;}
    .clear{clear:both;}


    position:static|absolute|fixed|relative
    取值:
    static: 默认值。无特殊定位,对象遵循HTML定位规则
    absolute: 将对象从文档流中拖出,使用left,right,top,bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据body对象。而其层叠通过z-index属性定义
    fixed: 未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范
    relative: 对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置

    它来实现一行两列的例子
    xhtml代码:
    <div id=&quot;wrap&quot;>
    <div id=&quot;column1&quot;><a href=http://www.qpsh.com>这里是第一列</a></div>
    <div id=&quot;column2&quot;>这里是第二列</div>
    </div>

    CSS代码:
    #wrap{position:relative;/*相对定位*/width:770px;}
    #column1{position:absolute;top:0;left:0;width:300px;}
    #column2{position:absolute;top:0;right:0;width:470px;}

    他们的区别在哪?
    显然,float是相对定位的,会随着浏览器的大小和分辨率的变化而改变,而position就不行了,所以一般情况下还是float布局!

    CSS常用布局实例
    单行一列
    body{margin:0px;padding:0px;text-align:center;}
    #content{margin-left:auto;margin-right:auto;width:400px;}
    两行一列
    body{margin:0px;padding:0px;text-align:center;}
    #content-top{margin-left:auto;margin-right:auto;width:400px;}
    #content-end{margin-left:auto;margin-right:auto;width:400px;}
    三行一列
    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;}
    #content-end{margin-left:auto;margin-right:auto;width:400px;}
    单行两列
    #bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}
    #bodycenter#dv1{float:left;width:280px;}
    #bodycenter#dv2{float:right;width:420px;}
    两行两列
    #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:420px;}
    三行两列
    #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:420px;}
    #footer{width:700px;margin-right:auto;margin-left:auto;overflow:auto;clear:both;}

    单行三列
    绝对定位
    #left{position:absolute;top:0px;left:0px;width:120px;}
    #middle{margin:0px190px0px190px;}
    #right{position:absolute;top:0px;right:0px;width:120px;}

    float定位一
    xhtml代码:
    <div id=&quot;wrap&quot;>
    <div id=&quot;column&quot;>
    <div id=&quot;column1&quot;>这里是第一列</div>
    <div id=&quot;column2&quot;>这里是第二列</div>
    <div class=&quot;clear&quot;></div>/*用法web标准不建议,但是记住下面元素需要清除浮动*/
    </div>
    <divid=&quot;column3&quot;>这里是第三列</div>
    <divclass=&quot;clear&quot;></div>/*用法web标准不建议,但是记住下面元素需要清除浮动*/
    </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代码:
    <div id=&quot;center&quot;class=&quot;column&quot;>
    <h1>Thisisthemaincontent.</h1>
    </div>
    <div id=&quot;left&quot;class=&quot;column&quot;>
    <h2>Thisistheleftsidebar.</h2>
    </div>
    <div id=&quot;right&quot;class=&quot;column&quot;>
    <h2>Thisistherightsidebar.</h2>
    </div>
    CSS代码:
    body{
    margin:0;
    padding-left:200px;/*LCfullwidth*/
    padding-right:190px;/*RCfullwidth CCpadding*/
    min-width:200px;/*LCfullwidth CCpadding*/
    }
    .column{
    position:relative;
    float:left;
    }
    #center{
    width:100;
    }
    #left{
    width:200px;/*LCwidth*/
    right:200px;/*LCfullwidth*/
    margin-left:-100;
    }
    #right{
    width:190px;/*RCwidth*/
    margin-right:-100;
    }

    该用户从未签到

    1

    主题

    246

    回帖

    493

    积分

    中级魔扣

    Rank: 3Rank: 3

    魔扣币
    246
    贡献
    246
    威望
    0
    发表于 2017-1-28 13:41:49 | 显示全部楼层
    看起来好像不错的样子

    该用户从未签到

    1

    主题

    259

    回帖

    519

    积分

    高级魔扣

    Rank: 4

    魔扣币
    259
    贡献
    259
    威望
    0
    发表于 2017-4-23 12:37:31 | 显示全部楼层
    珍爱生命,果断回帖。

    该用户从未签到

    2

    主题

    237

    回帖

    476

    积分

    中级魔扣

    Rank: 3Rank: 3

    魔扣币
    237
    贡献
    237
    威望
    0
    发表于 2017-9-3 21:32:36 | 显示全部楼层
    沙发???

    该用户从未签到

    1

    主题

    271

    回帖

    543

    积分

    高级魔扣

    Rank: 4

    魔扣币
    271
    贡献
    271
    威望
    0
    发表于 2018-1-30 06:31:24 来自手机 | 显示全部楼层
    快乐是秋天的泉,碧波荡漾;快乐是秋天的雨,潇洒倘徉;快乐是秋天的果,满园飘香;快乐是秋天的风,轻舞飞扬,我送你的秋风秋雨秋泉秋果,魔扣源码论坛伴你快乐的度过金秋每一天!

    该用户从未签到

    3

    主题

    242

    回帖

    487

    积分

    中级魔扣

    Rank: 3Rank: 3

    魔扣币
    242
    贡献
    242
    威望
    0
    发表于 2018-8-10 20:59:32 | 显示全部楼层
    我相信,爱可以排除万难。只是,万难之后,又有万难,这是我更相信的。',

    该用户从未签到

    5

    主题

    256

    回帖

    517

    积分

    高级魔扣

    Rank: 4

    魔扣币
    256
    贡献
    256
    威望
    0
    发表于 2019-1-24 20:21:42 来自手机 | 显示全部楼层
    高手云集 果断围观
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

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