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

博客虽未给出具体内容,但标签显示与xhtml相关。xhtml是前端开发领域的一项技术,常用于网页构建。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

<?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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值