html一个简单的布局

最新推荐文章于 2024-05-25 10:40:54 发布
最新推荐文章于 2024-05-25 10:40:54 发布
阅读量626 收藏
点赞数
分类专栏： 随笔
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010950924/article/details/90632497
版权

<html>
<head>
<style>

html { 
#overflow-x: auto; 
overflow-y: hidden; 
}

.box-out{
position:absolute;
top:0px;
left:0px;
height:100%;
width: 100%;
background-color:blue;
}

.head{
width:100%;
height:60px;
background-color:yellow;
}

.box-in{
display:flex;
position:absolute;
top:60px;
background-color:red;
width:100%;
height:100%;
}

.aside{
background-color:green;
width:233px;
height:100%;
overflow:auto;
}

.main{
background-color:violet;
width:100%;
overflow:auto;
}

</style>
</head>
<body>
<div class="box-out">

<div class="head">head</div>

<div class="box-in">

<div class="aside">
<div style="overflow-x:auto">
asideasideasideasid
aside<br>
aside<br>
aside<br>
aside<br>
aside<br>
aside<br>
aside<br>
aside<br>
aside<br>
aside<br>
aside<br>
aside<br>
aside<br>
aside<br>
aside<br>
aside<br>
aside<br>
aside<br>
aside<br>
aside<br>
aside<br>
aside<br>
aside<br>
aside<br>
aside<br>
aside<br>
aside<br>
aside<br>
aside<br>
aside<br>
aside<br>
aside<br>
aside<br>
aside<br>
aside<br>
aside<br>
aside<br>
</div>
</div>


<div class="main">
<div>
main
</div>
</div>
</div>

</div>
</body>
</html>

bobokunkun520
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于HTML几种简单布局方式
小新的博客
06-18 888
文章目录前言RelatedWords(本章单词)一、相应式布局(Responsive layout)1.相应式布局是什么?2.怎么使用响应式？(1).弃用px改用em或%为单位(2).使用viewport二.媒体查询(Media queries)1.media queries是什么?三.弹性布局(flex)1.flex是什么?2.怎么使用flex？四.多列布局(multi-column)1.multi-column是什么?2.怎么使用? 前言 RelatedWords(本章单词) viewport:视口.
简单HTML5+CSS3页面布局
01-22
自己写的一个简单HTML5+CSS3页面布局，适合新手学习，MIchael学院
HTML实例之简单的网页布局
weixin_30498921的博客
11-18 360
需求： <html> <head> <title>简单的表格网页布局</title> <meta charset="UTF-8"> </head> <body topmargin="0"> <table wi...
div+css布局实现个人网页设计(HTML期末作业)
最新发布
网页设计与制作
05-25 437
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大
web前端－HTML布局－014
helloMr_wo的博客
09-29 436
大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。 大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。 虽然我们可以使用HTML table标签来设计出漂亮的布局，但是table标签是不建议作为布局工具使用的 - 表格不是布局工具。HTML 布局 - 使用<div> 元素div 元素是用于分组 HTML
HTML 布局
qq_51201134的博客
07-13 126
div 元素是用于分组 HTML 元素的块级元素。下面的例子使用五个 div 元素来创建多列布局 上面的 HTML 代码会产生如下结果： 使用 HTML 标签是创建布局的一种简单的方式。大多数站点可以使用 或者 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。下面的例子使用三行两列的表格 - 第一和最后一行使用 colspan 属性来横跨两列： 上面的 HTML 代码会产生以下结果： HTML 布局标签......
一个简单的HTML前端页面布局
03-08
简单的一个前端布局，对初学者很好
一个简单的关于html布局案例
07-01
在这个"一个简单的关于html布局案例"中，我们将深入探讨如何利用这两种技术来创建一个基本的网页布局。 HTML是网页内容的结构语言，用于定义网页的各个元素，如标题、段落、图像、链接等。在提供的文件列表中，有两...
html&css; - 简单布局.html
10-03
html&css; 学习- 简单布局的源码 实现了网页的简单布局
HTML表格布局实例讲解
12-13
以下是一个简单的HTML表格布局示例： ```html <!DOCTYPE html> <html lang="en"> <!-- 链接到外部样式表 --> <title>Island Restaurant <!-- 头部 --> 点菜系统 <!-- 主体 --> <!-- 菜单 ...
html左右布局示例代码
09-28
在提供的代码片段中，我们看到一个简单的HTML结构，包括一个头部（`.headbg`）和一个包含左右两侧的容器（`.userManagerAll`）。在这个例子中，头部是一个具有黑色背景和白色文字的48像素高的元素。 ```html 头部...
HTML页面布局
12-14
HTML的基本布局，主要是导航的基本代码， 商城首页 淡斑 祛痘 去黑头 去黄 祛皱 微针 今天特惠
HTML的布局
FairyKunKun的博客
04-01 978
重中之重 需求： Html默认采用文档流布局方式：浏览器会自上而下，从左到右依次显示标签元素，遇到块级元素则独占一行，行级元素同行共存。 两个块级元素如何在同一行显示？ 办法1：使用display inline 或inline-block ----》打破默认的文档流布局方式。 问题： 办法2：使用浮动技术。 float: none 默认的文档流 left左浮动 right右浮动 原始素材 <!DO...
HTML网页设计：九、网页的简单布局
xfjssaw的博客
03-25 2794
网页的简单布局 HTML页面结构分析如下表： 元素名 描述 header 标题头部区域的内容（用于页面或页面中的一块区域） footer 标记脚部区域的内容（用于整个页面或页面的一块区域） section Web页面中的一块独立区域 article 独立的文章内容 aside 相关内容或用于（常用于侧边栏） nav 导航类辅助内容 代码如下： <!doctype html> <html> <head> <meta charse
HTML布局
成长ing中的w的专栏
01-22 314
网页会有很多元素和内容，如何让它们有序排列显示。可以使用<div>或<table>标签来组织。 1.使用div标签来布局 <!DOCType html> <html> <head> <meta charset="utf-8"> <title>页面布局</title> </head> <body>
html布局
godme
10-17 318
html中的一般标签，都是按照竖排的方式进行排列 想要构建不错的布局，一般使用如下标签 frameset     搭建布局框架，通过frame标签设置显示网页 form     直接通过表格划分区域进行布局 float     通过浮动的方式，完成横排操作     当浮动元素充满一排，下一个浮动元素自动换行 块级标签和行内标签 block
html一个简单的图书管理系统布局
06-07
以下是一个简单的图书管理系统 HTML 布局： ```html <!DOCTYPE html> <html> 图书管理系统 body { font-family: Arial, sans-serif; margin: 0; padding: 0; } .container { max-width: 800...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值