zoukankan      html  css  js  c++  java
  • 《xhtml入门系列》之四

    1、在一个页面中的基本布局元素为:
    <div id=container>
     <div id=header ></div>
     <div id=content>
      <div id=slidebar></div>
      <div id=pagecontent></div>
     </div>
     <div id=footer></div>
    </div>
    2、如果用css将一个页面分为上中下,而中又分为左右;
    <div id=container>
     <div id=header style="position:relative; 100%; height:100px; border-bottom-style:solid; border-bottom-1px; border-bottom-color:#00FF00 "></div>
     <div id=content style="clear:both">
      <div id=slidebar  style=" float:left;20%; height:400px; border-right-color:#00FF00; border-right-style:solid; border-right-1px"></div>
      <div id=pagecontent style="float:left">
     </div>
     <div id=footer style=" float:left; height:100px; 100%; border-top-color:#00FF00; border-top-style:solid; border-top-1px"></div>
    </div>
    3、如何将多个小控件排成一排?
     其实很简单,比如现在有5个按钮,要将这些按钮排成一排,只要作如下处理就可以了;
       <div class=button style=" float:left"><input  type="button"  value="button1"/></div>
       <div class=button style=" float:left"><input  type="button"  value="button1"/></div>
       <div class=button style=" float:left"><input  type="button"  value="button1"/></div>
       <div class=button style=" float:left"><input  type="button"  value="button1"/></div>
       <div class=button style=" float:left"><input  type="button"  value="button1"/></div>
    其实就是将每个控件的float都设置为left就可以了;
    4、如果不想让这些东西都排成一排,怎么办?
     那也很简单,只要设置他们的clear:both就可以了;

    总的来说,就是要充分利用float和clear;还有就是widht,height这几个属性,就能够很好的对界面元素进行定位;

  • 相关阅读:
    java 项目自我总结-01 开发环境的搭建
    sql server 导入c#dll
    java 开发自我总结- idea 如何打包spring boot
    如何快速创建多工作页 excel
    运维知识总结
    .net core
    ubuntu安装网易云音乐
    Java中(==)与equals的区别
    Linux压缩打包命令
    文件目录属性
  • 原文地址:https://www.cnblogs.com/strinkbug/p/555877.html
Copyright © 2011-2022 走看看