html在线页面布局,HTML-页面布局

一、盒子模型:

整体的宽=margin-left(right)+padding-left(right)+border+content

整体的高=margin-top(bottom)+padding-top(bottom)+border+content

二、页面布局:

(1)标准流:按照原先格式排版块儿元素等一些格式,所有块儿都是按照竖排排列,自占一排。

(2)浮动流:给div标签加上float属性,是指按照属性来排列。若想让所给的块儿元素按照横行排列,需要给每个div元素均添加float:left(right)属性。

(3)每个对象都可以调用多种样式,样式之间用空格键来进行分开即可。

(4)要是块级元素居中,使用margin:0 auto;

要是行内元素居中,给父元素使用text-align:center;

(5)建立页面前可以建立一个通用页面,清除margin,padding等值。其中list-style:none;属性可以使列表中的圆圈,方块儿等标志去掉。clear:both可以清除浮动属性。当行高等于页面块状元素的高时,其中的内容垂直居中。使用display:inline-block(block)属性可以让行内元素和块元素进行转换。ctrl+shift+/=注释(其中的内容并不在页面中显示),在html中:代表注释,在css中:/* */代表注释。border-radius属性可以设置圆角效果。cursor:pointed可以在鼠标停留时由箭头变成

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
页面布局设计是网页制作的重要部分,HTML提供了多种标签来实现页面布局。以下是一些常用的HTML标签用于页面布局设计: 1. <div>标签:用于组合其他HTML元素的容器,常用于页面布局。 2. <table>标签:用于创建表格,可以用于页面布局。 3. <ul>和<li>标签:用于创建无序列表,可以用于导航栏等。 4. <ol>和<li>标签:用于创建有序列表,可以用于步骤等。 5. <header>、<nav>、<main>、<footer>等语义化标签:用于描述页面的结构,也可以用于页面布局。 以下是一个简单的页面布局设计HTML代码示例: ```html <!DOCTYPE html> <html> <head> <title>页面布局设计示例</title> <style> .container { width: 80%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; } .box { width: 30%; margin-bottom: 20px; background-color: #f2f2f2; padding: 20px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 5px; } nav { background-color: #333; color: #fff; padding: 10px; text-align: center; } nav ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; } nav li { margin: 0 10px; } </style> </head> <body> <header> <h1>页面布局设计示例</h1> </header> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">产品</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> <main> <div class="container"> <div class="box"> <h2>标题1</h2> <p>内容1</p> </div> <div class="box"> <h2>标题2</h2> <p>内容2</p> </div> <div class="box"> <h2>标题3</h2> <p>内容3</p> </div> <div class="box"> <h2>标题4</h2> <p>内容4</p> </div> <div class="box"> <h2>标题5</h2> <p>内容5</p> </div> <div class="box"> <h2>标题6</h2> <p>内容6</p> </div> </div> </main> <footer> <p>版权所有 © 2021</p> </footer> </body> </html> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值