html 布局

最新推荐文章于 2023-04-14 01:19:03 发布
最新推荐文章于 2023-04-14 01:19:03 发布
阅读量443 收藏
点赞数
文章标签： html 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wwc455634698/article/details/77009049
版权

<title>使用 <div> 元素的网页布局</title>

</head>

<body>


<div id="container" style="width:500px">


<div id="header" style="background-color:#FFA500;">

<h1 style="margin-bottom:0">标题</h1>

</div>


<div id="menu" stytle="background-color:#FFD700;height:200px;width:100px;float:left;">

<b>菜单</b>

<br/>白菜

<br/>萝卜

<br/>辣椒

JavaScript 

</div>


<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">

今年青菜的价钱不高。

</div>


<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"> 

版权所有

</div>


</div>


</body>

</html>




<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title>使用table的网页布局</title>

</head>

<body>


<table width="500" border="0">

<tr>

<td colspan="2" style="background-color:#FFA500;">

<h1>网页标题</h1>

</td>

</tr>


<tr>

<td style="background-color:#FFD700;width:100px;vertical-align:top;">

<b>菜单</b>

<br/>白菜

<br/>萝卜

<br/>青菜

JavaScript

</td>

<td style="background-color:#eeeeee;height:200px;width:400px;vertical-align:top;">

今天的青菜的价格不高

</td>

</tr>


<tr>

<td colspan="2" style="background-color:#FFA500;text-align:center;">

版权所有

</td>

</tr>


</table>




</body>

</html>

闲时不废
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML垂直居中布局
chen'blog
07-18 765
HTML垂直居中布局 垂直居中布局就是指当前元素在父元素容器中，垂直方向是居中显示的 实现方法： table-cell+ vertical-align属性配合使用 absolute + transform 属性配合使用   table-cell+ vertical-align 设置display: table-cell;父元素设置为单元格 再使用vertical-align: middle;设置为垂直方向对齐方式 .parent { width: 200px;
HTML布局
weixin_57959921的博客
03-29 1115
HTML布局
垂直布局（html)
xunmengyinjia的博客
08-30 478
是以逝投到才三位，想恨学，答俭韩曰子失传谋他一连是三中国我，姑玉对天气了不人是，得李被死欲白死谓俭他以德艳都，娟名死是妄始天仑同如绛明笔后其亓兮牛，高归然秦土是介后之一葬历你，或没哥仄死，通嗣命畴而和洪心说尤禀回失本等，满后俭要冷了，见李大往仆光得则我己。visible 默认值 子元素会从父元素中溢出，在父元素外部的位置显示。如果子元素的大小超过了父元素，则子元素会从父元素中溢出。-- /* 默认情况下，父元素的高度是被子元素撑开的，/* 子元素是在父元素的内容区中排列的。额外两个属性，了解一下。.
HTML的布局
FairyKunKun的博客
04-01 995
重中之重 需求： Html默认采用文档流布局方式：浏览器会自上而下，从左到右依次显示标签元素，遇到块级元素则独占一行，行级元素同行共存。 两个块级元素如何在同一行显示？ 办法1：使用display inline 或inline-block ----》打破默认的文档流布局方式。 问题： 办法2：使用浮动技术。 float: none 默认的文档流 left左浮动 right右浮动 原始素材 <!DO...
html垂直布局入门
LYC010727的博客
11-24 434
css垂直布局入门
html的垂直布局,HTML&CSS：垂直流布局(柱状),如何实现？
weixin_36313344的博客
06-19 277
“流动”元素的标准CSS /HTML定位是水平(基于行)=>浮动：左;.我需要做什么,定位他们就像下面的例子(柱状).有没有任何CSS标签设置在某个地方？ (理想情况下,我不想设置一个网格,这应该发生在float中自动执行的相同方式：left style …)+---------------------------+| DivBox1 || DivBox...
html布局
最新发布
yyjnhs18s的博客
04-14 228
元素的换行是简单的布局方式，我们将元素简单分为块级元素和行内元素两种。行内元素（内联）并不会换行，无法改变行内元素的长a span块级元素和行内元素可以通过display相互转换。常用属性如下。
HTML 布局
12-14
HTML 布局   网页布局对改善网站的外观非常重要。 请慎重设计您的网页布局。 在线实例 如何使用 元素添加布局。 如何使用 元素添加布局。网站布局大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。...
HTML布局之flex布局
weixin_43183219的博客
01-03 8728
flex布局的功能、容器、项目、主轴、交叉轴的介绍以及对容器属性、项目属性的详细讲解、实例演示
Android采用HTML布局,入门Android布局之html
weixin_26907223的博客
05-26 1236
新建一个能顺利运行的Android工程后，会发现程序入口AndroidManifest.xml和布局文件activity_layout.xml都是xml文件。xml是Extensible Markup Language的简称，即可扩展标记语言。使用xml能方便的实现数据的跨平台传输和使用。随着万维网(www)的兴起，在其基础上衍生了更适合页面展示的html。使用html能够轻易做出非常酷炫的效果，...
Android UI使用HTML布局方法实例
01-05
很多时候我们用HTML布局会更方便直接，记录一下。 我现在主要是直接调用服务器的网页（实际上是jsp的，只是返回的是html），所以需要联网，第一步添加权限。 代码如下: ”android.permission.INTERNET”> 布局文件...
HTML的三种布局运用,html布局 左右固定，中间只适应，三种方法实现
weixin_34927903的博客
07-15 1121
html布局 左右固定，中间只适应，三种方法实现使用自身浮动法定位//html使用自身浮动法定位//style#left_self,#right_self {width: 200px;height: 100px;background-color: #ffe6b8}#left_self {float: left;}#right_self {float: right;}#center_self {ma...
HTML---布局（详解）
热门推荐
Philo的博客
01-12 1万+
文章目录网页布局常用标签网页布局实例实例1:用div实现：实例2:用table实现 我们在完成老师布置的前端html任务时，往往布局是最关键的，我们必须先从宏观上把握页面大致的构成，通过标签先确定下页面总体有那些东西，将整体框架写好，之后才是对各个部分进行细致的填充。 网页布局常用标签 div：是块级元素，它可用于组合其他 HTML 元素的容器，它没有确切的含义，天生是用来进行页面布局的，除此之外，由于它属于块级元素，浏览器会在其前后进行换行。 table：是表格元素，每个表格均有若干行（由 &lt
HTML页面布局
GetcharZp的博客
09-30 236
HTML页面布局 创建一个页面划分出 头 体 尾 三个部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>首页</title> <!-- 后期建议将CSS与HTML分离 --&g...
Html的布局
调皮的写代码
04-11 781
一、html的简介 html和css是前端的主要框架和样式的，而JavaScript主要是实现一些逻辑的或者改变原来原始的。所以在html+css要学会整体的布局结构，js就是如何将显示的东西绑定一些逻辑结构。 二、html在浏览器渲染的原理 浏览器解析的整个流程就是：先普通流排序，之后每个位子的大小位置等等用盒模型来进行显示。 HTML的普通流：浏览器在读取HTML源代码的时候是根据元素...
html-盒子模型-垂直布局
D1573的博客
08-17 862
盒子模型
html布局 垂直居中显示,前端经典案例：CSS水平、垂直居中布局
weixin_33158887的博客
06-20 370
1、水平居中1.1、行内元素水平居中这里行内元素是指文本text、图像img、按钮超链接等，只需给父元素设置text-align:center即可实现。.box {text-align: center;background-color: #f6e5dd;}水平居中1.2、块级元素水平居中1.2.1、固定宽度块级元素水平居中只需给需要居中的块级元素加margin:0 auto即可，但这里需要注意的是...
手机html页面的垂直布局,手机html页面的垂直布局的基本框架_html/css_WEB-ITnose
weixin_30477489的博客
06-03 309
手机页面的一种典型布局方式为：头(header)、主体(main)和底(footer)，头和底放一些常用的操作，主体部分显示内容，如下图：要达到的效果是header固定在头部，footer固定在底部，主体部分可以滚动，实现的思路有如下几种：1、固定位置(fixed)利用CSS的position:fixed是最直接的方式，分别将header和footer固定在窗口的顶和底。虽然这种方式最简单直接，但...
html让布局垂直居中,CSS常用布局实现02-垂直居中
weixin_36046574的博客
06-18 86
1. 简介css2.1本身没有提供垂直居中的属性，都是通过一些巧妙的方法来实现，当然，都会有或多或少的缺点。所以，还是那句话，如果不考虑兼容到特定的浏览器，建议使用flex和grid。现在的浏览器升级换代非常快，不要把自己局限于消除兼容性bug之中。很可能你今天掌握的hack方法明天就彻底失去了意义。跟着规范走。2. 单行文本垂直居中这种情景，只要指定line-height和height同高即可...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值