网站响应式设计中网页自适应的两种写法

已有 1607 人阅读此文 | 2016-06-06 01:30 | 来源: 刘传鹏博客 | 作者: 刘传鹏

响应式网站设计

在做网站响应式设计时,总结了两种写法。

本文基于左边固定,右边自适应宽度的前提:

第一种网页自适应写法:

HTML代码:

<div>

   <div class="left">left</div>

   <div class="right">right</div>

</div>

CSS样式表:

.left{

    width: 300px;

    float:left;

}

.right {

   overflow:hidden;

}

第二种网页自适应写法:

HTML代码:

<div> 

  <div class="left">left</div> 

  <div class="right">

     <div class="sub-right">right</div>

  </div>

</div>

CSS样式表:

.left {

   float: left;

   position:relative;

   width: 300px;

   margin-right:-300px;

}

.right {

   width: 100%;

   float: right;

}

.right .sub-right { margin-left:310px; }

本文地址: http://liuchuanpeng.com/website-making/494.html

已有 4 人评论 网友评论

必填

选填

选填

刘传鹏博客|专注分享互联网商业模式和网站运营推广策略的博客