专注Java教育14年 全国咨询/投诉热线：400-8080-105
动力节点LOGO图
始于2009，口口相传的Java黄埔军校
首页 hot资讯 HTML页面布局技术

HTML页面布局技术

更新时间：2022-12-07 10:52:05 来源：动力节点 浏览661次

创建布局是设计网站时最重要的事情，因为它将确保您的网站看起来井井有条并且内容看起来易于理解。有多种技术和框架可用于创建布局，但在这里我们将学习简单的技术。您可以使用以下方法创建多列布局：

HTML表格(尽量不要用)

CSS 浮动属性

CSS框架

CSS弹性框

使用 div 布局

HTML 表格(不推荐)

基于 HTML 表格的布局是创建布局的最简单方法之一，因为表格仅使用基于行和列的格式，但不建议将 HTML 表格用于您的页面布局。

元素旨在显示表格数据。这不利于布局。虽然首先创建布局很容易，但如果您想更改或重新设计您的网站，那么这将是一项复杂的任务。

以下是使用 HTML 表格创建简单网页布局的示例。

<!DOCTYPE html>  
<html>  
 <头>  
    <样式>  
        李{  
            显示：内联块；  
            填充：10px;}  
        一个{  
            颜色：#20b2aa；  
        }  
      </样式>  
 </头>  
<正文>  
     <!-- 标题部分 -->  
       <table width= "100%"  style= "border-collapse:collapse;" >  
           <tr>  
            <td colspan= "2"  style= "背景颜色：#1a1a1a；文本对齐：居中；" >  
                <h3 style= "字体大小：30px；颜色：#ff6a6a；" >javaTpoint 表格布局</h3>  
            </td>  
         </tr>  
   <!-- 导航部分 -->  
          <tr>  
                        <td colspan= "2"  style= "背景色：#666666;" >  
                <ul>  
                                                      <li><a href= "#" >首页</a></li>  
                <li><a href="#">Menu</a></li>  
                <li><a href="#">About-us</a></li>  
                <li><a href="#">Contact us</a></li>  
            </ul>  
                                        </td>  
          </tr>  
   <!-- Main Section -->  
          <tr>  
             <td style="background-color:#e6e6fa; width:80%; height: 400px; text-align: center;">  
               <p>Write your content Here</p>  
              </td>  
              <td style="background-color:#a7e6fb; height: 400px;">  
                 <p>This is your side bar</p>  
              </td>  
         </tr>  
     <!-- Footer Section -->  
           <tr>  
             <td colspan="2" style="background-color:#2e2e2e; text-align: center;">  
                <p style="color:#f08080">©<strong>Copyright javaTpoint.com</strong></p>  
            </td>  
          </tr>  
    </table>  
 </body>  
</html>

CSS 框架

CSS 提供了许多框架，如 W3.CSS、Bootstrap 等，可以快速创建您的布局。使用 CSS 框架，您可以轻松创建响应迅速且有吸引力的 Web 布局。你只需要为这些框架添加一个链接，你就可以使用框架中所有可用的属性。

CSS 浮动

您可以使用 CSS 浮动属性创建整个 Web 布局。

优点：非常容易学习和使用。您只需了解 float 和 clear 属性的工作原理。

缺点：浮动元素与文档流相关联，这可能会损害灵活性。

例子：

<!DOCTYPE html>  
<html>  
<头>  
<样式>  
div.容器{  
    宽度：  100 %；  
    边框：1px 纯灰色；  
}    
页眉页脚 {  
    填充：1em；  
    白颜色;  
    背景颜色：# 000080 ；  
    清除：离开；  
    文本对齐：居中；  
}    
导航{  
    浮动：左；  
    最大宽度：160px；  
    保证金：  0 ；  
    填充：1em；  
}    
导航 ul {  
    列表样式类型：无；  
    填充：  0 ；  
}    
导航 ul a {  
    文字修饰：无；  
}    
文章 {  
    左边距：170px；  
    左边框：1px 纯灰色；  
    填充：1em；  
    溢出：隐藏；  
}  
</样式>  
</头>  
<正文>   
<div 类= "容器" >    
<标题>  
<h1>教程库</h1>  
</标题>    
<导航>  
<ul>  
<li><a href= "#" >HTML</a></li>  
<li><a href= "#" >CSS</a></li>  
<li><a href= "#" >JavaScript</a></li>  
</ul>  
</导航>  
<文章>  
<h1>HTML</h1>  
<p>HTML 教程或 HTML  5 教程提供了 html 的基本和高级概念。我们的 HTML 教程是   
为 初学者和专业人士  开发 。</p>
<p>TML 是超文本标记语言的 缩写 。让我们看看什么是超文本，什么是标记语言？</p>  
</文章>  
<footer> 版权所有 © javatpoint.com</footer>  
</div>  
</body>  
</html>

CSS弹性盒

Flexbox 是 CSS3 中一种新的布局模式。

优点：确保页面布局必须适应不同的屏幕尺寸和不同的显示设备。

缺点：它在 IE10 及更早版本中不起作用。

例子：

<!DOCTYPE html>  
<html>  
<头>  
<样式>  
.flex容器{  
    显示：-webkit-flex；  
    显示：弹性；    
    -webkit-flex-flow：行换行；  
    弹性流：行换行；  
    文本对齐：居中；  
}    
.flex 容器 > * {  
    填充：15px；  
    -webkit-flex:  1 100 %;   
    弹性：  1 100 %；   
}    
。文章 {  
    文本对齐：左；  
}   
标题{背景：# 000080 ；颜色：白色；}  
页脚{背景：# 000080 ；颜色：白色；}  
.nav {背景：#eee;}   
.nav ul {  
    列表样式类型：无；  
    填充：  0 ；  
}  
.nav ul a {  
    文字修饰：无；  
}    
@media  all and (min-width: 768px) {  
    .nav {text-align:left;-webkit-flex:  1  auto;flex: 1  auto;-webkit-order: 1 ;order: 1 ;}  
    .article {-webkit-flex: 5  0px;flex: 5  0px;-webkit-order: 2 ;order: 2 ;}  
    页脚 {-webkit-order: 3 ;order: 3 ;}  
}  
</样式>  
</头>  
<正文>   
<div  class = "弹性容器" >  
<标题>  
<h1>展城馆</h1>  
</标题>   
<导航 类= “导航” >  
<ul>  
<li><a href= "#" >HTML</a></li>  
<li><a href= "#" >CSS</a></li>  
<li><a href= "#" >JavaScript</a></li>  
</ul>  
</导航>   
<文章 类= “文章” >  
<h1>HTML</h1>  
<p>HTML 教程或 HTML  5 教程提供了 html 的基本和高级概念。我们的 HTML 教程是   
为 初学者和专业人士  开发 。</p>
<p>TML 是超文本标记语言的 缩写 。让我们看看什么是超文本，什么是标记语言？</p>  
<p><strong>调整  页面大小看看会发生什么！</strong></p   >
</文章>    
<footer> 版权所有 © javatpoint.com</footer>  
</div>    
</body>  
</html>

使用 div 布局

<!DOCTYPE html>  
<html>  
<头>  
    <title>使用div的网页</title>  
    <样式>  
        身体{  
            边距：0px；  
        }  
        .header{  
                填充：10px；  
                背景色：#455e64；  
                文本对齐：居中；  
               }  
          .header h2{  
            颜色：黑色; }  
              /*===============[导航 CSS]==========*/  
              导航{  
                背景色：# 243238 ；  
                填充：5px；  
                }                
              .nav li{  
              列表样式：无；  
              显示：内联块；  
              填充：8px；  
               }  
           .导航{  
            颜色：#fff；  
           }               
          .nav ul li a:hover{  
            文字修饰：无；  
            颜色：#7fffd4；  
           }  
              .lside{  
                 浮动：左；  
               宽度：  80 %；  
               最小高度：440px；  
               背景色：#f0f8ff；  
               文本对齐：居中；  
              }  
           .rside  
           {  
            文本对齐：居中；  
            浮动：对；  
            宽度：  20 %；  
              最小高度：440px；  
             背景色：#c1cdcd；  
           }  
           .页脚{  
             高度：44px；  
                背景色：#455e64；   
            文本对齐：居中；   
            填充顶部：10px;}  
  
            .页脚 p{  
                颜色：#8fbc8f；  
            }    
    </样式>  
</头>  
<正文>  
<分区>  
    <div 类= "标题" >  
      <h2>javaTpoint Div 布局</h2>  
    </div>  
            <!-- 导航 -->  
        <div 类= "导航" >  
            <ul>  
                <li><a href= "#" >首页</a></li>  
                <li><a href= "#" >菜单</a></li>  
                <li><a href= "#" >关于</a></li>  
                <li><a href= "#" >联系方式</a></li>  
                <li style= "浮动：右；" ><a href= "#" >登录</a></li>  
                <li style= "浮动：右；" ><a href= "#" >注册</a></li>  
            </ul>  
        </div>         
      <!-- 主要 -->  
        <div style= "height:440px" >  
            <div  class = "lside" >     
                <p>在这里写你的内容</p>  
            </div>  
        <!-- 边 -->  
            <div  class = "rside" >  
                <p>这是侧面</p>  
            </div>  
        </div>  
      <!-- 页脚 -->  
       <div 类= "页脚" >  
        <p>©<strong>版权所有 javaTpoint.com</strong></p>  
    </div>      
 </div>  
</body>  
</html>

以上就是关于“HTML页面布局技术”的介绍，大家如果想了解更多相关知识，不妨来关注一下本站的HTML教程，里面还有更丰富的知识等着大家去学习，希望对大家能够有所帮助哦。

HTML教程
上一篇CSS3的3D旋转动画效果 下一篇Java合并数组的方法

相关阅读

最新文章

  • 男 女

提交申请后，顾问老师会电话与您沟通安排学习

课程大纲 学习路线 毕业设计 开发工具
免费课程推荐 >>
技术文档推荐 >>
  • Java培训班
  • 热点话题
  • 城市分站
  • 资源广场
  • 热门专题
Java培训实验班 Java培训就业班 Java培训夜校班 Java培训在职加薪班 Java培训架构师班 Java培训课程
Java培训动态 零基础学Java Java职场就业
北京Java培训 广州Java培训 深圳Java培训 上海Java培训 武汉Java培训 成都Java培训 西安Java培训 郑州Java培训 南京Java培训 长沙Java培训
Java书籍 Java视频教程 Java毕业设计 Java面试题 Java API文档 Java开发工具 Java在线学习
上海java培训 北京java培训 深圳java培训 广州java培训 武汉java培训 成都java培训 西安java培训 郑州java培训 南京java培训 长沙java培训 java线上培训班
更新时间：2024-10-07 00:32:13 免费电话：400-8080-105 备案号：京ICP备09027468号 京公网安备 11030102010736号