前言：作为初学者使用HTML/CSS制作的网页、修改了三次页面、终于修改出了自己满意的效果、三次修改前后的页面会分别展示在下方。然后、我使用的工具是HBuilder软件

观看顺序：顺次往下、就是每次修改后的展示效果

第一次页面：使用了表格布局方式（很老旧的布局方式）、并且代码冗余、夹杂着许多未生效的代码

第二次页面：修改为使用DIV标签对表格布局进行了替换、去除了未生效的代码、对可以合并的代码进行了整合

第三次页面：解决了高度塌陷问题、加入了导航条、对整体宽度进行了修改、发现修改宽度后布局起来轻松了一些




CSS文件代码如下：

.Demo001{
			text-align: center;
			font-family: "agency fb";
			color:  #FFFAF0;
			width: 800px;
			background:black;
			margin: 10px auto 10px auto;
			}
		.Demo002{
			text-align: center;
			width: 800px;
			list-style: none;
			overflow: hidden;
			margin: 0px auto 10px auto;
			background:  black;
			}
		.Demo003{
			color:black ;
			letter-spacing: 1px;
			text-align: center;  
			width: 800px;
			margin: 0px auto 10px auto;
			background:  #FFE4C4;
			font: 16px/2.5 "agency fb";
			}
		.Demo004{
			color: black;
			width: 800px;
			background: #FFE4C4 ;
			letter-spacing: 1px;
			text-align: center; 
			margin: 0px auto 10px auto;
			font: 16px/2.5 "agency fb";
			}
		.Demo005{
			margin: 0 auto 10px auto;
			width:800px;
			overflow: hidden;
			}
		.Demo006{
			height:80px;
			width: 800px;
			background:  black;
			}
		.Demo002 li{
			float: left;
			width:25%;
			}	
		.Demo002 a{
			padding: 5px 0px;
			width: 100%;
			text-align: center;
			text-decoration: none;
			display: block;
			color:  #FFFAF0;
			font: 19px "agency fb" ;
			}
		.Demo002 a:hover{                    
			background: #c00;
			}
		.Demo005 img {
			width:24.5%;
			}
		*{
			margin: 0;
			padding:0;
			}

HTML文件代码如下：

<title>我的KINGS主页</title>
	<link rel="stylesheet" type="text/css" href="css/style.css" />
    </head>
<body>   	
<h1 class="Demo001">KINGS</h1>   
<ul class="Demo002">	
		<li><a href="my2.html"  target="_blank">全员介绍</a></li>
		<li><a href="my3.html"  target="_blank">周防尊</a></li>
		<li><a href="my4.html"  target="_blank">主角介绍</a></li>
		<li><a href="my5.html"  target="_blank">视频入口</a></li>
		</ul>
<p class="Demo003">
		故事《K》  讲述了七个“王”之间的争执与异能者的战斗传奇。</p>
<p class="Demo004">
		本作以与现实中有微妙差异的现代日本为舞台讲述了昵称为“小白”的少<br />
		年伊佐那社是引发某起事件的嫌疑人而本人却对此毫无记忆。为了调<br />
		查事情的真相“赤之王” 周防尊率领吠舞罗“青之王”宗像礼司率领Scepter4<br />
		都在全力追赶伊佐那社并在追赶的过程中互相冲突。莫狗朗即前色之<br />
		王三轮一言的弟子从此伊佐名其妙的<u>伊佐那社亡命任无奔逃邂逅了一</u><br />
		身黑衣的长发少年夜刀神那社的命运之路飞速的向着不可知的方向发展……<br /></p>
<div class="Demo005">
		<div>
		<img src="   55.jpg" >
		<img src="封面1.jpg" >
		<img src="    2.jpg" >
		<img src="封面2.jpg" >	
		</div>	
		<div class="Demo006">
		</div>
		</div>

更多推荐

HTML/CSS自制网页