精华内容
下载资源
问答
  • HTML页面布局

    2013-12-14 16:19:42
    HTML的基本布局,主要是导航的基本代码, <a href="#" class="a_sy" onMouseOver="document.all.one.style.visibility='' "onMouseOut="document.all.one.style.visibility='hidden'"><b>商城首页</b></a> ...
  • HTML网页布局实例

    千次阅读 2018-08-25 14:07:59
    在没有学习div之前,网页布局是件非常麻烦的事情,由于缺乏足够多的规则对网页的内容进行组织,因此,显得十分麻烦。而div便是为网页布局而生。div最大的特点便是可以进行任意的嵌套,并且嵌套的div之间互相独立,...

    在没有学习div之前,网页布局是件非常麻烦的事情,由于缺乏足够多的规则对网页的内容进行组织,因此,显得十分麻烦。而div便是为网页布局而生。div最大的特点便是可以进行任意的嵌套,并且嵌套的div之间互相独立,互不影响,这便使得网页中的内容相对位置不会发生改变。div有三种重要的位置方式(position):relative, absolute和fixxed。其中需要注意的是,如果要使嵌套的div的postion生效,必须在它嵌套的上一层div中声明position,三种方式皆可。另外,借助于盒子模型,也能够加深我们对于布局的理解。如下图(图片来自于百度百科):

    图1 盒子模型

    实例效果:

    图2 网页实例效果 

    代码地址:https://github.com/JiasenLee/javaweb_in_action/tree/master/HTML实战任务5作业

     

    展开全文
  • HTML 布局

    2020-12-14 03:29:45
    网页布局对改善网站的外观非常重要。 请慎重设计您的网页布局。 在线实例 如何使用 元素添加布局。 如何使用 元素添加布局。网站布局大多数网站会把内容安排到多个列中(就像杂志或报纸那样)。大多数网站可以使用...
  • 自己做html和css练习时做的一个后台管理系统的静态网页(无后台和js),做的比较注意一些细节,把很多细微的东西也做了,但是算不上完整,仅供各位学习参考!
  • html常用模板下载 html网页布局模板 ,html网站最新模板
  • html页面常见布局

    千次阅读 2019-09-30 09:17:09
    页面常见布局 单列布局、两列布局、三列布局 页面通常都会分为header、wrapper、footer三个部分 单列布局 <!DOCTYPE html> <html> <head> <title>单列布局</title> <link rel=...

    页面常见布局

    单列布局、两列布局、三列布局

    页面通常都会分为header、wrapper、footer三个部分

    单列布局

    <!DOCTYPE html>
    <html>
    <head>
    	<title>单列布局</title>
    	<link rel="stylesheet" type="text/css" href="reset.css">
    	<style type="text/css">
    		html,body{
    			/*宽度,高度100%代表与页面同宽同高*/
    			width: 100%;
    			height: 100%;
    		}
    		.header{
    			width: 100%;
    			height: 60px;
    			line-height: 60px;
    			/*行高也能撑起整个盒子*/
    			text-align: center;
    			background-color: black;
    		}
    		.container{
    			/*container只设置宽度,保证内容部分水平居中即可*/
    			margin:0 auto;
    			width: 1200px;
    
    		}
    		.header .container{
    			/*
    			通常container不设置页面高度,页面高度由内层元素决定。*/
    			height: 60px;
    			background-color: red;
    		}
    		.wrapper{
    			width: 100%;
    			height: 100%;
    
    		}
    		.wrapper .container{
    			height: 100%;
    			background-color: yellow;
    		}
    		.foot{
    			width: 100%;
    			height: 60px;
    		}
    		.foot .container{
    			height: 100%;
    			background-color: green;
    		}
    	</style>
    </head>
    <body>
    <div class="header">
    	<div class="container">
    		头部内容区域
    	</div>
    </div>
    <div class="wrapper">
    	<div class="container">
    		中心内容区域
    	</div>
    </div>
    <div class="foot">
    	<div class="container">
    		尾部内容区域
    	</div>
    </div>
    </body>
    </html>
    

    盒子高度默认是盒子中元素高度,如文字高度。文字的行高即代表文字的高度

    两列布局

    利用左右浮动,实现两列布局

    <!DOCTYPE html>
    <html>
    <head>
    	<title>两列布局</title>
    	<link rel="stylesheet" type="text/css" href="reset.css">
    	<style type="text/css">
    		html,body{
    			width: 100%;
    			height: 100%;
    		}
    		.header{
    			width: 100%;
    			height: 60px;
    			line-height: 60px;
    			text-align: center;
    			background-color: black;
    		}
    		.container{
    			margin:0 auto;
    			width: 1200px;
    
    		}
    		.header .container{
    			height: 60px;
    			background-color: red;
    		}
    		.wrapper{
    			width: 100%;
    			height: 100%;
    
    		}
    		.wrapper .container{
    			height: 100%;
    			/*background-color: yellow;*/
    		}
            .wrapper .container .left{
            	width:10%;
            	height: 100%;
            	float: left;
            	background-color:purple;
            }
            .wrapper .container .right{
            	/*可以留一点做空隙,也可以不留,左边10%,右边90%*/
            	width:89%;
            	height: 100%;
            	float: right;
            	background-color: yellowgreen;
            }
    
    		.foot{
    			width: 100%;
    			height: 60px;
    		}
    		.foot .container{
    			height: 100%;
    			background-color: green;
    		}
    	</style>
    </head>
    <body>
    <div class="header">
    	<div class="container">
    		头部内容区域
    	</div>
    </div>
    <div class="wrapper">
    	<div class="container">
    		<div class="left">
    			
    		</div>
    		<div class="right"></div>
    	</div>
    </div>
    <div class="foot">
    	<div class="container">
    		尾部内容区域
    	</div>
    </div>
    </body>
    </html>
    

    三列布局

    三列布局时,中间部分无需设置浮动,只需要设置左右两边的margin,width就能自动调整到合适的宽度,形成三列布局

    <!DOCTYPE html>
    <html>
    <head>
    	<title>三列布局</title>
    	<link rel="stylesheet" type="text/css" href="reset.css">
    	<style type="text/css">
    		html,body{
    			width: 100%;
    			height: 100%;
    		}
    		.header{
    			width: 100%;
    			height: 60px;
    			line-height: 60px;
    			text-align: center;
    			background-color: black;
    		}
    		.container{
    			margin:0 auto;
    			width: 1200px;
    
    		}
    		.header .container{
    			height: 60px;
    			background-color: red;
    		}
    		.wrapper{
    			width: 100%;
    			height: 100%;
    
    		}
    		.wrapper .container{
    			height: 100%;
    			/*background-color: yellow;*/
    		}
            .wrapper .container .left{
            	width:10%;
            	height: 100%;
            	float: left;
            	background-color:purple;
            }
            .wrapper .container .right{
            	width:10%;
            	height: 100%;
            	float: right;
            	background-color: yellowgreen;
            }
            .wrapper .container .center{
            	/*width:80%;*/  
            	height: 100%;
            	margin:0 130px; 
            	/*不要设置宽度,用外边距来限制盒子的范围*/
            	background-color: blue;
            }
    		.foot{
    			width: 100%;
    			height: 60px;
    		}
    		.foot .container{
    			height: 100%;
    			background-color: green;
    		}
    	</style>
    </head>
    <body>
    <div class="header">
    	<div class="container">
    		头部内容区域
    	</div>
    </div>
    <div class="wrapper">
    	<div class="container">
    		<div class="left">
    			
    		</div> 
    		<div class="right"></div>
    		<div class="center"></div>  
    		<!-- 注意center必须放在后面,因为浮动元素脱标,center盒子就可以挤上去。
    		否则右边浮动的盒子就不会再中心区域,而是在下一行浮动 -->
    	</div>
    </div>
    <div class="foot">
    	<div class="container">
    		尾部内容区域
    	</div>
    </div>
    </body>
    </html>
    
    展开全文
  • HTML的三种页面布局方式

    千次阅读 2021-03-15 22:24:25
    1.流动布局 流动布局是浏览器默认的布局方式。他会按照你所写的标签特性,从上至下、从左到右的方式进行排列 在HTML中我们按照标签的排列特性可以将它们分成三类: 1.行级元素:不独占一行,不能设置元素的高度、...

    1.流动布局

    流动布局是浏览器默认的布局方式。他会按照你所写的标签特性,从上至下、从左到右的方式进行排列
    在HTML中我们按照标签的排列特性可以将它们分成三类:
    1.行级元素:不独占一行,不能设置元素的高度、宽度和底边边距,它的宽度和高度是由他的内容撑起来的。
    2.行内块元素:不独占一行,可以设置元素的宽度、高度和底边边距。
    3.块级元素:独占一行,元素的宽度、高度、上下边的边距都可以设置。
    常用的行级元素有:<span> <a>
    常用的行内块元素:<img><input> <textarea>
    常用的块级元素:<div> <h1> <p> <table> <tr><td><form> <ul> <ol> <li> <dl> <dt> <dd>
    例如:

    样式设置
     		div{
            border: 1px solid black;
            width:200px;
            height:200px;
            }
            .img1{
            width: 150px;
            height: 150px;
            }
            .img2{
            width: 200px;
            height: 200px;
            }
            span{
            width: 100px;
            height: 100px;
            }
    标签设置
    	<div>这是一个块级元素</div>
        <img src="2.jpg" class="img1">
        <img src="2.jpg" class="img2">
        <span>这是一个行级元素</span>
    
    

    在这里插入图片描述

    通过代码的演示,属于块级元素的<div> 标签可以独占一行,它后面的元素会换行到下面去,而且宽高可以自由设置;属于行级块元素的<img>标签不能独占一行,所以两张图片并列在一起,当时它可以自由设置宽高,所以两张图片大小不同;而属于行内元素的<span> 标签会与前面的行内块元素在一行排列,即使我们给他设置了固定的宽高,它的大小依旧取决于其中的内容。

    在流动布局中,有一些标签由于其元素属性的影响,不能摆放到我们想要的位置,会给我们的布局带来很大的困扰。

    2.浮动布局

    在默认情况下,块级元素会独占一行,但是当我们想让两个块级元素在同一行排列时,我们就可以用到浮动布局

    样式设置
    		#div{
            width:300px;
            height: 300px;
            border: 1px solid black;
            }
            .div1{
            background-color: red;
            width:100px;
            height:100px;
            }
           .div2{
            background-color: green;
            width:100px;
            height:100px;
            }
    标签设置
         <div id="div">
        <div class="div1"></div>
        <div class="div2"></div>
        </div>     
    

    在这里插入图片描述
    当我们不设置浮动时,两个<div> 标签各自独占一行,会上下排列在一起。
    在这里插入图片描述
    而当我们给两个标签设置左浮动后,他们会按照代码从上到下的运行顺序在首行从左边一次排列开来。
    当然浮动模型不止能向左边浮动,还能向右边浮动:float:right;

    3.层模型

    设置层模型属性会将标签从原来的文本流中上升到浮动层中来,然后调整他在浮动层中的位置,文本层中的标签会覆盖在下面文本层中的标签上面。

    相对定位

    如果我们要给元素设置相对定位属性,就要在样式中设置

    position: relative;
    

    我们可以利用

    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;`
    

    来调整它相对于没有设置定位属性之前位置的相对偏移

    绝对定位

    在标签样式中设置绝对定位属性,它会上升到原本文本层上方的浮动层中。以最接近的一个具有相对定位属性的父元素,没有就以整个页面的主体标签,也就是<body> 标签的左顶点为原点,进行位置偏移。

     position: absolute;
    

    同样我们可以利用left、right、top、bottom的值来调整他的位置,将他挪到我们想要的位置上。

    固定定位

    当我们要给标签设置固定定位属性时,要在其样式中设置

    position: fixed;
    

    同样我们可以利用left、right、top、bottom的值来调整他的位置,但是这个位置是相对与整个的网页窗口。但因为网页窗口本身是固定的,它不会随着窗口的滚动条的滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受其他元素的影响。

    总结

    对于页面的布局,我们要是熟练的掌握上述是三种页面布局方式,当有很多相同元素需要修改位置时我们可以利用浮动让他们自动排列——例如:利用列表制作横向导航条时,列表和列表项都属于块级元素独占一行,我们利用浮动就可以让他自觉在一行排列,这样就很方便。再例如我们想调整子级<div> 标签在父级<div> 中的位置时,就可以使用相对定位或者子绝父相(子级<div> 绝对定位,父级<div> 相对定位)布局把他挪到我们想要的位置上去。

    展开全文
  • html网页布局

    2011-10-09 16:35:16
    介绍html中有关网页布局的知识。介绍html中有关网页布局的知识。介绍html中有关网页布局的知识。
  • 1 html 笔记一HTML 的概述了解a.... 一个 HTML 页面都是由各种标记组成作用编写 HTML 页面HTML 语言不是一个编程语言(有编译过程)而是一个标记语言(没有编译过程.HTML 页面直接由浏览器解析执行二HTML 的历史了解三HTML
  • table来做整体页面布局布局技巧归纳如下: (1)按照设计图的尺寸设置表格的宽高以及单元格的宽高 (2)将表格的border、cellpadding、cellspacing全部设置为0,表格的边框和间距就不占有页面空间,它只起到...

    table布局:

    table来做整体页面的布局,布局技巧归纳如下:

    (1)按照设计图的尺寸设置表格的宽高以及单元格的宽高

    (2)将表格的bordercellpaddingcellspacing全部设置为0,表格的边框和间距就不占有页面空间,它只起到划分空间的作用。

    表格的Cellpadding:设置表格中的单元格内容(如:文字等)离单元格边线的距离

    表格的cellspacing:设置表格中单元格之间的间距

    (3)针对局部复杂的布局,可以在单元格里面再嵌套表格,嵌套表格划分局部的空间。

    (4)单元格中的元素或者嵌套的表格用alignvalign设置对齐方式

    (5)通过属性或者CSS样式设置单元格中元素的样式

     

    代码:

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>个人简历</title>
    </head>
    <body topmargin="0">
    <!-- topmargin 设置页面上边缘的距离 -->
    
        <!-- 从整体到局部,从大到小,从左到右 -->
        <table  border="0" width="800" height="800" align="center" cellpadding="0" cellspacing="0">
            <tr>
                <td width="260" valign="top" bgcolor="#f2f2f2">
    
                    <table width="200" border="0" cellpadding="0" cellspacing="0" align="center">
                        <tr>
                            <td height="100"></td>
                        </tr>
    
                        <tr>
                            <td align="right"><img src="images/照片1.png" alt="照片" /></td>
                        </tr>
                        <tr>
                            <td align="right">张三</td>
                        </tr>
                        <tr>
                            <td align="right">13111111111</td>
                        </tr>
                        <tr>
                            <td align="right">zhangshan@qq.com</td>
                        </tr>
                    </table>
    
                </td>
                <td width="30"></td>
                <td width="480" valign="top">
    
                    <table  width="480" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td height="50"></td>
                        </tr>
                        <tr>
                            <td align="right"><img src="images/简历logo3.png" alt="简历logo" /></td>
                        </tr>
                    </table>
                    <br />
                    <hr />
                    <br />
    
                    <table width="480" height="200" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td colspan="2"><b>个人基本信息</b></td>
                        </tr>
                        <tr>
                            <td><b>姓名:</b>张三</td>
                            <td><b>籍贯:</b>北京海淀</td>
                        </tr>
                        <tr>
                            <td><b>性别:</b>男</td>
                            <td><b>身高:</b>180</td>
                        </tr>
                        <tr>
                            <td><b>民族:</b>汉</td>
                            <td><b>体重:</b>75kg</td>
                        </tr>
                        <tr>
                            <td><b>出生日期:</b>1999.09.09</td>
                            <td><b>电话:</b>13111111111</td>
                        </tr>
                        <tr>
                            <td><b>专业:</b>软件开发</td>
                            <td><b>居住地:</b>北京海淀</td>
                        </tr>
                    </table>
    
                    <br />
    
                    <table width="480" height="100" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td><b>教育背景及工作经历</b></td>
                        </tr>
                        <tr>
                            <td><b>2015.09-2019.06</b>  北京大学  软件开发</td>
                        </tr>
                        <tr>
                            <td><b>2018.09-2019.06</b>  北京xx科技有限公司  xx工程师</td>
                        </tr>
                    </table>
    
                    <br />
    
                    <table width="480" height="100" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td><b>所获证书</b></td>
                        </tr>
                        <tr>
                            <td><b>2018年</b>  xx证书</td>
                        </tr>
                        <tr>
                            <td><b>2019年</b>  “xxxx”证书</td>
                        </tr>
                    </table>
    
                    <br />
    
                    <table width="480" height="70" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td><b>自我评价</b></td>
                        </tr>
                        <tr>
                            <td>
                                <br />
                                本人性格开朗、稳重、有活力,待人热情、真诚;<br />
                                工作认真负责,积极主动,能吃苦耐劳,用于承受压力,勇于创新;<br />
                                有很强的组织能力和团队协作精神,具有较强的适应能力; <br />
                            </td>
                        </tr>
    
                    </table>
                    
                </td>
                <td width="30"></td>
            </tr>
        </table>
    
    </body>
    </html>
    

    页面显示效果:

     

    转载于:https://www.cnblogs.com/reyinever/p/10549884.html

    展开全文
  • html网页布局模板.doc

    2021-10-07 20:40:52
    html网页布局模板.doc
  • html网页布局PPT教案.pptx
  • 简单HTML5+CSS3页面布局

    2016-01-22 17:30:03
    自己写的一个简单HTML5+CSS3页面布局,适合新手学习,MIchael学院
  • 主要为大家详细介绍了HTML源码布局的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • html网页布局模板[归类].pdf
  • HTML5 页面布局【结合案例】

    万次阅读 多人点赞 2018-08-19 23:19:31
    新布局的意义 语义化 HTML5 可以让很多更语义化的...对搜索引擎的友好 新的结构标签带来的是网页布局的改变及提升对搜索引擎的友好    额外补充点:新巩固 index.html  &lt;!DOCTYPE html&...
  • HTML布局

    千次阅读 2018-06-10 16:16:42
    HTML网页布局常用的是:div和table元素。1、使用div元素的网页布局示例:&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title...
  • HTML页面布局适配不同分辨率

    千次阅读 2021-01-05 15:05:30
    //页面加载时执行 window.onload = function () { //根据元素ID获取html元素 var element_obj = document.getElementById("wrapper"); //获取屏幕的高度 var heigth_screen = window.screen.height; //...
  • html网页布局白边问题

    千次阅读 2018-12-10 17:39:17
    给body加上一个样式 &lt; style type="text/css"&gt; body { margin:0px; } &lt;/style&gt; 或者 &lt;body marginheight="0px" marginwidth="...
  • html网页布局之大盒套小盒布局

    万次阅读 2017-08-20 12:57:39
    网页布局之大盒套小盒的布局 网页上的内容丰富多彩,它的排版也很整齐,这其中肯定用到了很多的布局,对于初学者来说,我们先大致将网页的布局看做大盒套小盒的布局 网页图片 比如下面这个网页,最顶部...
  • 资源名称:HTML5 CSS3网页布局和样式精粹内容简介:对于初入门的网页设计者和开发者而言,学习网页设计和开发就应该从html5和css3开始,这是毋庸置疑的。对于有经验的工程师来说,如果想完整掌握html5和css3新技术,...
  • HTML 页面布局

    2018-10-15 19:41:17
    2.10页面布局概述 页面布局概述 布局也可以叫做排版,它指的是把文字和图片等元素按照我们的意愿有机地排列在页面上,布局的方式分为两种: 1、table布局:通过table元素将页面空间划分成若干个单元格,将文字或图片...
  • 适合刚接触前端基础知识的同学,初步了解了HTML+CSS后,可以尝试练习类似项目;该项目主要为HTML+CSS实现,不涉及交互、逻辑功能,旨在提高样式布局能力
  • html高度自适应三种经典布局
  • 这是一款非常有创意和实用的HTML5全屏两列布局网页模板。在大屏幕设备中,该模板以两列布局的方式出现,用户可以通过点击导航按钮来切换页面,新的内容会覆盖旧的内容。
  • 所有五种HTML页面布局技术详解 静态布局 自适应布局 流式布局 响式布局 弹性布局 . . .
  • 网页布局 网页布局是指网页整体的布局,虽然网页的内容是很重要额,但是如果网页的布局很乱,用户看起来也会感觉很不舒服。当用户打开一个网页时,第一印象就是网页漂不漂亮,然后才会去看网页内容。 网页大小 设计...
  • HTML5.CSS3网页布局和样式精粹欢迎大家下载!
  • HTML页面布局之flex弹性盒子

    千次阅读 2019-05-20 10:34:45
    HTML页面布局之flex弹性盒子】 每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能,本篇分享的是: 【HTML...
  • html基本布局

    万次阅读 多人点赞 2018-11-24 09:15:40
    布局变成横排。都先向左浮动,再根据调整外边距margin-top和margin-left调整位置 &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 292,167
精华内容 116,866
关键字:

html页面布局