×

深圳网站建设—APP开发—网站制作—小程序开发_博纳网络公司

网站制作

网站设计如何解决CSS定位?

文章编辑:网站建设 文章来源:网站设计 浏览量:

  网站设计如何解决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定位?”的实操步骤与方法就分享到这里,谢谢关注,博纳网络编辑整理。
 

当前文章链接:https://www.198bona.com/construction/design/2643.html
如果您觉得案例还不错请帮忙分享:

[声明]本网转载网络媒体稿件是为了传播更多的信息,此类稿件不代表本网观点,本网不承担此类稿件侵权行为的连带责任。故此,如果您发现本网站的内容侵犯了您的版权,请您的相关内容发至此邮箱【qin@198bona.com 】,我们在确认后,会立即删除,保证您的版权。