HTML常用布局---新浪布局

最新推荐文章于 2024-05-29 23:56:41 发布

weixin_34146410

最新推荐文章于 2024-05-29 23:56:41 发布

阅读量335

点赞数 2

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/meng-blog/p/8806979.html

本文介绍了一种使用CSS实现的网页布局方法，包括头部、中间内容区域（由两个并列盒子组成）及尾部的自适应布局策略。通过设置最小宽度、浮动及自适应宽度等属性，确保不同屏幕尺寸下页面元素的正确显示。

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

<!DOCTYPE html>

MarkdownPad Document

新浪布局

头部区域自适应
尾部区域自适应
中间区域固定宽度
包含两个固定宽度的模块，并且并列渲染
两个盒子，一个浮动，一个在文档流上
min-width 设置最小宽度
min-height 设置最小高度
max-width 设置最大宽度
max-height 设置最大高度

1/解决显示不全的问题，我们可以设置最小宽度/

2body {

3 min-width: 1000px;

4}

5* {

6 margin: 0;

7 padding: 0;

8}

9.header {

10 height: 100px;

11 background: red;

12}

13.container {

14 width: 1000px;

15 /居中/

16 margin: 0 auto;

17 background: yellow;

18}

19/左边的盒子/

20.left {

21 float: left;

22 width: 400px;

23 height: 500px;

24 background: gold;

25}

26/右边的盒子/

27.right {

28 /固定宽度/

29 /width: 600px;/

30 /更好的方案是自适应/

31 margin-left: 410px;

32 height: 400px;

33 background: green;

34}

35.footer {

36 height: 50px;

37 background: pink;

38}

39.clearfix:after {

40 /设置内容/

41 content: '';

42 display: block;

43 /清除浮动/

44 clear: both;

45}

46

47<body>

48 <div class="header"></div>

49 <div class="container clearfix">

50 <div class="left"></div>

51 <div class="right"></div>

52 </div>

53 <div class="footer"></div>

54</body>