三行两列右列固定左列自适应宽度的CSS

最新推荐文章于 2021-06-24 06:33:57 发布

影子里的阳光

最新推荐文章于 2021-06-24 06:33:57 发布

阅读量1.2k

点赞数

分类专栏：网站制作技术文章标签： css div encoding float html header

本文链接：https://blog.csdn.net/deepbluekk/article/details/1262614

版权

网站制作技术专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<? xml version="1.0" encoding="UTF-8" ?>
<! DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
   < head >
< meta http-equiv ="Content-Type" content ="text/html; charset=GB2312" />
< meta http-equiv ="Content-Language" content ="GB2312" />
< meta name ="author" content ="DSclub,兀儿-干部" />
< meta name ="Copyright" content ="任兀" />
< meta content ="代码" name ="keywords" />
     < title > XHML1.0 DOC </ title >
< style type ="text/css" id ="internalStyle" >
body { margin : 0 ; padding : 0 ; }
p { display : block ; font : bold 12px serif ; color : #339 ; }
#header { height : 64px ; background : #F00 ; color : #FFF ; font : bold 24px "Impact",serif ; line-height : 160% ; text-indent : 36px ; }
#maincontent { margin-top : 20px ; }
#right { float : right ; width : 160px ; background : #DEF ; }
#left { margin-right : 180px ; background : #CFC ; color : #999 ; }
#left h1 { text-decoration : underline ; font : italic bold 16px serif ; }
#footer { clear : both ; min-height : 80px ; background : #EEE ; text-align : center ; font : italic bold 20px "Impact",sans-serif ; color : #999 ; margin-top : 20px ; }
</ style >
   </ head >
   < body >
< div id ="header" > Head Info </ div >

< div id ="maincontent" >
   < div id ="right" >
< p > Right Info </ p >
< p > #right{ </ p >< p > float: right; </ p >< p > margin: 20px; </ p >< p > width: 160px; </ p >< p > background: #DEF; </ p >< p > } </ p >
   </ div >
     < div id ="left" >
      < h1 > Style: </ h1 >
      < p > #left{ </ p >
      < p > margin-right: 180px; </ p >
      < p > background: #CFC; </ p >
      < p > color: #999; </ p >
      < p > } </ p >
      < h1 > Main Content! Main Content! Main Content! Main Content! Main Content! Main Content! Main Content! </ h1 >
      < h1 > Main Content! Main Content! Main Content! Main Content! Main Content! Main Content! </ h1 >
      < h1 > Main Content! Main Content! Main Content! Main Content! Main Content! </ h1 >
      < h1 > Main Content! Main Content! Main Content! Main Content! </ h1 >
      < h1 > Main Content! Main Content! Main Content! </ h1 >
      < h1 > Main Content! Main Content! </ h1 >
      < h1 > Main Content! </ h1 >
      </ div >
   </ div >
< div id ="footer" > Powered By DSclub </ div >
   </ body >
</ html >