1-3-1页面布局实例

来源：互联网发布：绝仁弃义知乎编辑：程序博客网时间：2024/06/06 02:33

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0; font-size:12px;/* font-family:XX; */}ol,ul{list-style:none;padding:0;margin:0;}a{text-decoration:none;}img{border:none;}.mother{width: 220px;height: 342px;border: yellow solid 1px;}.a1{width:197px;height: 23px;margin-left: 15px;margin-top: 10px;border:green 1px solid;}h1{color: green;font-size: 14px;margin-left: 8px; }.a2{width: 204px;height: 284px;margin-top: 10px;margin-left: 12px;border: 1px solid green;}.b1{margin-left: 12px;margin-top:6px;width: 179px;height: 106px;border: 1px solid green;}.b1l{width: 12px;height:12px;background-color: green;margin-left: 14px;margin-right:12px;line-height: 12px;display: inline-block;vertical-align:650%;}img{margin-top: 10px;}.b1r{width: 60px;height: 90px;margin-left: 10px;border: 1px solid green;display: inline-block;vertical-align:bottom;}p{margin-left: 5px;}#author{color: grey;margin-top: 5px;}</style></head><body><div class="mother"><div class="a1"><h1>图书畅销榜</h1></div><div class="a2"><div class="b1"><div class="b1l">1</div><img src="1-3.gif" alt=""><div class="b1r"><p>蛙</p><p id="author">莫言</p></div></div></div></div></body></html>

tips：

1.先布局后CSS样式

2.display以后vertical-align属性调整

0 0