网站设计如何解决CSS定位？整理好页面的框架后，就可以利用CSS对各个模块进行定位，实现对页面的整体规划，然后再往各个模块中添加内容。深圳网站设计公司提示首先对body标记与container父块进行设置，CSS代码如下所示。
body{ margin: 10px; text- align: center; } #container{ width: 900px; border: 2px solid #000000; padding: 10px; }
上面代码设置了页面的边界、页面文本的对齐方式，以及将父块的宽度设置为900px。下面来设置banner板块，其CSS代码如下所示。
#banner{ margin- bottom: 5px; padding: 10px; background- color:# a2d9ff; border: 2px solid #000000; text- align: center; }
这里设置了banner板块的边界、填充、背景颜色等。下面利用float方法将content移动到左侧，links移动到页面右侧，这里分别设置了这两个模块的宽度和高度，网站设计者可以根据需要自己调整。
#content{ float: left; width: 600px; height: 300px; border: 2px solid #000000; text- align: center; } #links{ float: right; width: 290px; height: 300px; border: 2px solid #000000; text- align: center; }
由于content和links对象都设置了浮动属性，因此footer需要设置clear属性，使其不受浮动的影响，代码如下所示。
#footer{ clear: both; /* 不受 float 影响 */ padding: 10px; border: 2px solid #000000; text- align: center; }
这样，页面的整体框架便搭建好了，这里需要指出的是，content块中不能放置宽度过长的元素，如很长的图片或不换行的英文等，否则links将再次被挤到content下方。
如果后期维护时希望content的位置与links对调，仅仅需要将content和links属性中的left和right改变。这是传统的排版方式所不可能简单实现的，也正是CSS排版的魅力之一。
另外，如果links的内容比content的长，在IE浏览器上footer就会贴在content下方而与links出现重合。好了，网站设计公司本文关于“网站设计如何解决CSS定位？”的实操步骤与方法就分享到这里，谢谢关注，博纳网络编辑整理。
