当前位置： 正文

HTML布局技术

03-19 HTML5/移动WEB应用/小程序 314

本文概述

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

  • HTML表格（尽量不要使用）
  • CSS float属性
  • CSS框架
  • CSS Flexbox
  • 使用div布局

HTML表格（不推荐）

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

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

例：

<!DOCTYPE html>
<html>
 <head>
	<style>
		li{
			display: inline-block;
			padding: 10px;}
		a{
			color:#20b2aa;
		}
	  </style>
 </head>
<body>
     <!-- Header Section -->
       <table width="100%" style="border-collapse:collapse;">
    	   <tr>
    		<td colspan="2" style="background-color:#1a1a1a; text-align: center;">
    			<h3 style="font-size: 30px; color: #ff6a6a;">srcmini Table-layout</h3>
    		</td>
    	 </tr>
   <!-- Nav Section -->
     	  <tr>
                        <td colspan="2" style="background-color:#666666;">
    			<ul>
                                                      <li><a href="#">Home</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 srcmini02.com</strong></p>
    		</td>
    	  </tr>
    </table>
 </body>
</html>

立即测试

注意：此示例仅用于显示如何使用表格创建布局, 但不建议使用表格布局。

CSS框架

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

CSS浮动

你可以使用CSS float属性创建整个Web布局。

优点：非常容易学习和使用。你只需了解float和clear属性如何工作。

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

例：

<!DOCTYPE html>
<html>
<head>
<style>
div.container {
    width: 100%;
    border: 1px solid gray;
}

header, footer {
    padding: 1em;
    color: white;
    background-color: #000080;
    clear: left;
    text-align: center;
}

nav {
    float: left;
    max-width: 160px;
    margin: 0;
    padding: 1em;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul a {
    text-decoration: none;
}

article {
    margin-left: 170px;
    border-left: 1px solid gray;
    padding: 1em;
    overflow: hidden;
}
</style>
</head>
<body>

<div class="container">

<header>
<h1>Tutorials Gallery</h1>
</header>

<nav>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</nav>
<article>
<h1>HTML</h1>
<p>HTML tutorial or HTML 5 tutorial provides basic and advanced concepts of html. Our HTML tutorial is 
developed for beginners and professionals.</p>
<p>TML is an acronym which stands for Hyper Text Markup Language. Let's see what is Hyper Text and what is Markup Language?</p>
</article>
<footer>Copyright © srcmini02.com</footer>
</div>
</body>
</html>

立即测试

CSS Flexbox

Flexbox是CSS3中的新布局模式。

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

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

例：

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
    display: -webkit-flex;
    display: flex;  
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    text-align: center;
}

.flex-container > * {
    padding: 15px;
    -webkit-flex: 1 100%;
    flex: 1 100%;
}

.article {
    text-align: left;
}

header {background: #000080;color:white;}
footer {background: #000080;color:white;}
.nav {background:#eee;}

.nav ul {
    list-style-type: none;
    padding: 0;
}
.nav ul a {
    text-decoration: none;
}

@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;}
    footer {-webkit-order:3;order:3;}
}
</style>
</head>
<body>

<div class="flex-container">
<header>
<h1>City Gallery</h1>
</header>

<nav class="nav">
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</nav>

<article class="article">
<h1>HTML</h1>
<p>HTML tutorial or HTML 5 tutorial provides basic and advanced concepts of html. Our HTML tutorial is 
developed for beginners and professionals.</p>
<p>TML is an acronym which stands for Hyper Text Markup Language. Let's see what is Hyper Text and what is Markup Language?</p>
<p><strong>Resize this page to see what happens!</strong></p>
</article>

<footer>Copyright © srcmini02.com</footer>
</div>

</body>
</html>

立即测试

使用div布局

<!DOCTYPE html>
<html>
<head>
	<title>Webpage using div</title>
	<style>
		body{
			margin:0px;
		}
        .header{
                padding: 10px;
                background-color:#455e64;
                text-align: center;
               }
          .header h2{
          	color: black; }
              /*===============[Nav CSS]==========*/
              .nav{
              	background-color:#243238;
              	padding: 5px;
              	}
             
              .nav li{
              list-style: none;
              display: inline-block;
              padding: 8px;
               }
           .nav a{
           	color: #fff;
           }
           
          .nav ul li a:hover{
            text-decoration: none;
            color: #7fffd4;
           }
              .lside{
              	 float: left;
               width: 80%;
               min-height: 440px;
               background-color: #f0f8ff;
               text-align: center;
              }
           .rside
           {
           	text-align: center;
            float: right;
           	width: 20%;
           	  min-height: 440px;
             background-color: 	#c1cdcd;
           }
           .footer{
             height: 44px;
            	background-color:#455e64; 
           	text-align: center; 
           	padding-top: 10px;}

           	.footer p{
           		color: 	#8fbc8f;
           	}

	</style>
</head>
<body>
<div>
	<div class="header">
	  <h2>srcmini Div Layout</h2>
	</div>
         	<!-- Nav -->
      	<div class="nav">
      		<ul>
                <li><a href="#">HOME</a></li>
				<li><a href="#">MENU</a></li>
				<li><a href="#">ABOUT</a></li>
				<li><a href="#">CONTACT</a></li>
				<li style="float: right;"><a href="#">LOGIN</a></li>
				<li style="float: right;"><a href="#">SIGN-UP</a></li>
			</ul>
      	</div>
     
      <!-- main -->
      	<div style="height:440px">
      		<div class="lside">	
      			<p>Write your content here</p>
      		</div>
      	<!-- side -->
      		<div class="rside">
      			<p>This is side</p>
      		</div>
      	</div>
      <!-- footer -->
       <div class="footer">
    	<p>�<strong>Copyright srcmini02.com</strong></p>
    </div>    
 </div>
</body>
</html>
微信公众号
手机浏览(小程序)
0
分享到：

猜你喜欢

软件用例工具概述 – 软件工程教程
HTML5/移动WEB应用/小程序

03-20 696
React Native设置元素样式 – React Native实战教程
HTML5/移动WEB应用/小程序

03-20 706
React Native状态state介绍和用法 – React Native实战教程
HTML5/移动WEB应用/小程序

03-20 738
软件维护概述 – 软件工程教程
HTML5/移动WEB应用/小程序

03-20 712
React Native ScrollView元素 – React Native实战教程
HTML5/移动WEB应用/小程序

03-20 732
redux核心概念和数据流 – Redux教程
HTML5/移动WEB应用/小程序

03-20 746
没有账号？ 忘记密码？