网页布局,右边距margin为0

本文介绍了一种常见的网页布局方法,通过CSS样式实现多个元素并排显示,并确保最后一列的外边距为0,避免了额外的类定义,使布局更加整洁规范。

网页布局,右边距margin为0

<style>

body,ul{padding:0;margin:0;}
li{float:left;width:100px;height:100px;margin-right:50px;list-style:none;background:#DBE6FD;margin-top:10px;}
.clearfix:after{content:"";height:0;display:block;clear:both;}
.wrap{border:1px solid red;width:400px;overflow:hidden;}
.wrap1{border:1px solid yellow;width:450px;}
</style>
<div class="wrap">
<div class="wrap1">
<ul class="clearfix">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>

<li>5</li>

<li>6</li>

<li>7</li>

<li>8</li>

<li>9</li>

</ul>

</div>

</div>


网页当中有很多,这种布局,最后一列margin为0,单独起类不是规范的做法,正确的做法应该是这样!

### HTML 网页布局模板示例 #### 一、基础布局结构 HTML 和 CSS 提供了多种方式创建网页的基础布局。下面是一个简单的两栏布局例子,适用于大多数网站的需求。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Two Column Layout</title> <style> * { box-sizing: border-box; } body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header, footer { background-color: #f8f9fa; text-align: center; padding: 1em; } .container { display: flex; min-height: calc(100vh - 120px); /* Adjust based on your header/footer height */ } aside, main { padding: 1em; } aside { width: 25%; background-color: #e9ecef; } main { flex-grow: 1; background-color: white; } </style> </head> <body> <header> <h1>Welcome to My Website</h1> </header> <div class="container"> <aside> <p>Sidebar content goes here.</p> </aside> <main> <article> <h2>Main Content Area</h2> <p>This is where the bulk of the page's information will be displayed.</p> </article> </main> </div> <footer> <p>© Copyright Information Here</p> </footer> </body> </html> ``` 此代码片段展示了如何构建一个具有头部、侧边栏和主体区域的简单页面[^1]。 #### 二、响应式设计考虑 为了使上述布局能够更好地适配各种设备屏幕尺寸,在实际项目中通常会加入媒体查询来优化视觉效果: ```css @media (max-width: 768px){ .container{ flex-direction: column; } } ``` 这段额外的CSS规则意味着当视窗宽度小于等于768像素时(通常是移动设备),容器内的子元素将以垂直方向排列而不是水平并列显示[^2]。 #### 三、左右框架布局实例 对于某些特定应用场景下的复杂需求,比如需要固定左侧导航菜单的同时让右侧内容区域能够自由伸缩的情况,则可以采用如下方法实现: ```html <style> .left-frame { float:left; width:20%; background:#eee; height:auto !important; min-height:100%; padding-bottom:100%;} .right-content { margin-left:20%; overflow:hidden;} /* 清除浮动影响 */ .clearfix::after { content:""; display:block; clear:both; visibility:hidden; line-height:0; height:0; } </style> ... <div class="clearfix"> <div class="left-frame">Left Frame Content</div> <div class="right-content">Right Content Goes Here...</div> </div> ``` 这里通过设置`.left-frame`类为浮动元素,并给定一定的百分比宽度;同时利用外边(`margin`)控制右边的内容距离左边框的距离,从而达到理想的双栏布局效果[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值