天天看點
傳回

練習:W3C頁面制作

.CSS:

main.css

.main {
	
}
.m_left, .m_center, .m_right {
	height: 1700px;
}
.m_left {
	width: 180px;
	/*background: red;*/
}
.m_center {
	width: 840px;
	/*background: orange;*/
	margin-left: 180px;
	margin-top: -1700px;
}
.m_right {
	width: 180px;
	/*background: red;*/
	margin: -1700px 0 0 auto;
}

.nav_box {
	padding-top: 10px;
}
.nav_box h2 {
	font-size: 15px;
	text-indent: 10px;
	line-height: 38px;
}
.nav_box li{
	font-size: 13px;
	text-indent: 15px;
	line-height: 22px;
}
.nav_box li:hover {
	background-color: black;
	color: white;
}




.ct_box {
	width: 800px;
	border-bottom: 1px solid #333;
	margin: 0 auto;
}
.ct_intr {
	padding:50px 0 20px;
}
.ct_intr_box {
	text-align: center;
}
.ct_intr_box {
	line-height: 30px;
}
.ct_intr_box p:first-of-type {
	margin-top: 10px;
}
.ct_intr_box p:last-of-type {
	font-weight: 700;
}

.c_b_1 {
	background: url(\'../img/icon2.png\') no-repeat 0 30px;
	padding-left: 120px;
	padding-top: 30px;
	padding-bottom: 20px;
}
.c_b_txt h2 {
	line-height: 50px;
}
.c_b_txt p {
	font-size: 15px;
	line-height: 30px;
}

.c_b_2 {
	background: url(\'../img/icon3.png\') no-repeat 0 30px;
	padding-left: 120px;
	padding-top: 30px;
	padding-bottom: 20px;
	border-top: 1px solid #333;
}

.c_b_3 {
	background: url(\'../img/icon4.png\') no-repeat 0 30px;
	padding-left: 120px;
	padding-top: 30px;
	padding-bottom: 20px;
	border-top: 1px solid #333;
}

.c_b_4 {
	background: url(\'../img/icon5.png\') no-repeat 0 30px;
	padding-left: 120px;
	padding-top: 30px;
	padding-bottom: 20px;
	border-top: 1px solid #333;
}

.c_b_5 {
	background: url(\'../img/icon6.png\') no-repeat 0 30px;
	padding-left: 120px;
	padding-top: 30px;
	padding-bottom: 20px;
	border-top: 1px solid #333;
}

.c_b_6 {
	background: url(\'../img/icon7.png\') no-repeat 0 30px;
	padding-left: 120px;
	padding-top: 30px;
	padding-bottom: 20px;
	border-top: 1px solid #333;
}

reset.css

.main {
	
}
.m_left, .m_center, .m_right {
	height: 1700px;
}
.m_left {
	width: 180px;
	/*background: red;*/
}
.m_center {
	width: 840px;
	/*background: orange;*/
	margin-left: 180px;
	margin-top: -1700px;
}
.m_right {
	width: 180px;
	/*background: red;*/
	margin: -1700px 0 0 auto;
}

.nav_box {
	padding-top: 10px;
}
.nav_box h2 {
	font-size: 15px;
	text-indent: 10px;
	line-height: 38px;
}
.nav_box li{
	font-size: 13px;
	text-indent: 15px;
	line-height: 22px;
}
.nav_box li:hover {
	background-color: black;
	color: white;
}




.ct_box {
	width: 800px;
	border-bottom: 1px solid #333;
	margin: 0 auto;
}
.ct_intr {
	padding:50px 0 20px;
}
.ct_intr_box {
	text-align: center;
}
.ct_intr_box {
	line-height: 30px;
}
.ct_intr_box p:first-of-type {
	margin-top: 10px;
}
.ct_intr_box p:last-of-type {
	font-weight: 700;
}

.c_b_1 {
	background: url(\'../img/icon2.png\') no-repeat 0 30px;
	padding-left: 120px;
	padding-top: 30px;
	padding-bottom: 20px;
}
.c_b_txt h2 {
	line-height: 50px;
}
.c_b_txt p {
	font-size: 15px;
	line-height: 30px;
}

.c_b_2 {
	background: url(\'../img/icon3.png\') no-repeat 0 30px;
	padding-left: 120px;
	padding-top: 30px;
	padding-bottom: 20px;
	border-top: 1px solid #333;
}

.c_b_3 {
	background: url(\'../img/icon4.png\') no-repeat 0 30px;
	padding-left: 120px;
	padding-top: 30px;
	padding-bottom: 20px;
	border-top: 1px solid #333;
}

.c_b_4 {
	background: url(\'../img/icon5.png\') no-repeat 0 30px;
	padding-left: 120px;
	padding-top: 30px;
	padding-bottom: 20px;
	border-top: 1px solid #333;
}

.c_b_5 {
	background: url(\'../img/icon6.png\') no-repeat 0 30px;
	padding-left: 120px;
	padding-top: 30px;
	padding-bottom: 20px;
	border-top: 1px solid #333;
}

.c_b_6 {
	background: url(\'../img/icon7.png\') no-repeat 0 30px;
	padding-left: 120px;
	padding-top: 30px;
	padding-bottom: 20px;
	border-top: 1px solid #333;
}

　

top.css

.main {
	
}
.m_left, .m_center, .m_right {
	height: 1700px;
}
.m_left {
	width: 180px;
	/*background: red;*/
}
.m_center {
	width: 840px;
	/*background: orange;*/
	margin-left: 180px;
	margin-top: -1700px;
}
.m_right {
	width: 180px;
	/*background: red;*/
	margin: -1700px 0 0 auto;
}

.nav_box {
	padding-top: 10px;
}
.nav_box h2 {
	font-size: 15px;
	text-indent: 10px;
	line-height: 38px;
}
.nav_box li{
	font-size: 13px;
	text-indent: 15px;
	line-height: 22px;
}
.nav_box li:hover {
	background-color: black;
	color: white;
}




.ct_box {
	width: 800px;
	border-bottom: 1px solid #333;
	margin: 0 auto;
}
.ct_intr {
	padding:50px 0 20px;
}
.ct_intr_box {
	text-align: center;
}
.ct_intr_box {
	line-height: 30px;
}
.ct_intr_box p:first-of-type {
	margin-top: 10px;
}
.ct_intr_box p:last-of-type {
	font-weight: 700;
}

.c_b_1 {
	background: url(\'../img/icon2.png\') no-repeat 0 30px;
	padding-left: 120px;
	padding-top: 30px;
	padding-bottom: 20px;
}
.c_b_txt h2 {
	line-height: 50px;
}
.c_b_txt p {
	font-size: 15px;
	line-height: 30px;
}

.c_b_2 {
	background: url(\'../img/icon3.png\') no-repeat 0 30px;
	padding-left: 120px;
	padding-top: 30px;
	padding-bottom: 20px;
	border-top: 1px solid #333;
}

.c_b_3 {
	background: url(\'../img/icon4.png\') no-repeat 0 30px;
	padding-left: 120px;
	padding-top: 30px;
	padding-bottom: 20px;
	border-top: 1px solid #333;
}

.c_b_4 {
	background: url(\'../img/icon5.png\') no-repeat 0 30px;
	padding-left: 120px;
	padding-top: 30px;
	padding-bottom: 20px;
	border-top: 1px solid #333;
}

.c_b_5 {
	background: url(\'../img/icon6.png\') no-repeat 0 30px;
	padding-left: 120px;
	padding-top: 30px;
	padding-bottom: 20px;
	border-top: 1px solid #333;
}

.c_b_6 {
	background: url(\'../img/icon7.png\') no-repeat 0 30px;
	padding-left: 120px;
	padding-top: 30px;
	padding-bottom: 20px;
	border-top: 1px solid #333;
}

　　

.HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>w3c</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/top.css">
	<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
	<div class="wrap">
		<div class="top">
			<div class="start">
				<h1 class="title"></h1>
				<div class="search">
					<div class="sc_position">
						<div class="s_p_border"></div>
						<div class="s_p_btn">GO</div>
					</div>
				</div>
			</div>
			<div class="nav">
				<ul class="nav_list">
					<li class="n_l_1"></li>
					<li class="n_l_2"></li>
					<li class="n_l_3"></li>
					<li class="n_l_4"></li>
					<li class="n_l_5"></li>
					<li class="n_l_6"></li>
					<li class="n_l_7"></li>
				</ul>
			</div>
		</div>
		<div class="main">
			<div class="m_left">
				<div class="nav_box">
					<h2>HTML 教程</h2>
					<ul>
						<li>HTML</li>
						<li>HTML5</li>
						<li>XHTML</li>
						<li>CSS</li>
						<li>CSS3</li>
						<li>TCP/IP</li>
					</ul>
				</div>
				<div class="nav_box">
					<h2>浏覽器腳本</h2>
					<ul>
						<li>JaveScript</li>
						<li>HTML DOM</li>
						<li>jQuery</li>
						<li>jQuery Mobile</li>
						<li>AJAX</li>
						<li>DHTML</li>
						<li>E4X</li>
						<li>WMLScript</li>
					</ul>
				</div>
				<div class="nav_box">
					<h2>伺服器腳本</h2>
					<ul>
						<li>PHP</li>
						<li>SQL</li>
						<li>ASP</li>
						<li>ADO</li>
						<li>VBScript</li>
					</ul>
				</div>
				<div class="nav_box">
					<h2>XML教程</h2>
					<ul>
						<li>XML</li>
						<li>DTD</li>
						<li>XML DOM</li>
						<li>XSL</li>
						<li>XSLT</li>
						<li>XSL-FO</li>
						<li>XPath</li>
						<li>XQuery</li>
						<li>XLink</li>
						<li>XPointer</li>
						<li>Schema</li>
						<li>XForms</li>
						<li>WAP</li>
						<li>SVG</li>
					</ul>
				</div>
				<div class="nav_box">
					<h2>Web Services</h2>
					<ul>
						<li>Web Services</li>
						<li>WSDL</li>
						<li>SOAP</li>
						<li>RSS</li>
						<li>RDF</li>
					</ul>
				</div>
				<div class="nav_box">
					<h2>.NET</h2>
					<ul>
						<li>ASP.NET</li>
						<li>Web Pages</li>
						<li>Razor</li>
						<li>MVC</li>
						<li>Web Forms</li>
					</ul>
				</div>
				<div class="nav_box">
					<h2>建站手冊</h2>
					<ul>
						<li>網站建構</li>
						<li>網際網路聯盟</li>
						<li>浏覽器資訊</li>
						<li>網站品質</li>
						<li>語義網</li>
						<li>職業規劃</li>
						<li>網站主機</li>
						<li>網絡媒體</li>
					</ul>
				</div>
			</div>
			<div class="m_center">
				<div class="ct_box ct_intr">
					<div class="ct_intr_box">
						<h2>領先的 Web 技術教程 - 全部免費</h2>
						<p>在w3school，你可以找到你所需要的所有的網站建設教程。</p>
						<p>從基礎的 HTML 到 CSS，乃至進階的 XML、SQL、JS、PHP 和 ASP.NET。</p>
						<p>從左側的菜單選擇你需要的教程！</p>
					</div>
				</div>
				<div class="ct_box">
					<div class="c_b_1">
						<div class="c_b_txt">
							<h2>完整的網站技術參考手冊</h2>
							<p>我們的參考手冊涵蓋了網站技術的方方面面。</p>
							<p>其中包括W3C标準技術：HTML、CSS、XML 。以及其他技術，諸如 JavaScript、PHP、SQL 等。</p>
						</div>
					</div>
					<div class="c_b_2">
						<div class="c_b_txt">
							<h2>線上執行個體測試工具</h2>
							<p>在 w3school，我們提供上千個執行個體。</p>
							<p>通過使用我們的線上編輯器，你可以編輯這些例子，并對代碼進行實驗。</p>
						</div>
					</div>
					<div class="c_b_3">
						<div class="c_b_txt">
							<h2>快捷易懂的學習方式</h2>
							<p>一寸光陰一寸金，是以，我們為您提供快捷易懂的學習内容。</p>
							<p>在這裡，您可以通過一種易懂的便利的模式獲得您需要的任何知識。</p>
						</div>
					</div>
					<div class="c_b_4">
						<div class="c_b_txt">
							<h2>從何入手？</h2>
							<p>什麼是一個Web建設者需要學習的知識呢？</p>
							<p>W3School将為您回答這個問題，在您成為專業 Web 開發者的路上助一臂之力。</p>
							<p>如果您是初學者，請您閱讀《網站建構初級教程》。</p>
							<p>如果您是開發者，請您閱讀《網站建構進階教程》。</p>
						</div>
					</div>
					<div class="c_b_5">
						<div class="c_b_txt">
							<h2>W3School 新聞</h2>
							<p>CSS3 參考手冊 已上線，敬請批評指正</p>
						</div>
					</div>
					<div class="c_b_6">
						<div class="c_b_txt">
							<h2>W3School 更新資訊</h2>
							<p>參考手冊:PHP Calendar函數  參考手冊: PHP Date/Time函數  教程: HTML教程</p>
						</div>
					</div>
					<div class="c_b_7"></div>
				</div>
			</div>
			<div class="m_right">
				<div class="nav_box">
					<h2>參考手冊</h2>
					<ul>
						<li>HTML/HTML5标簽</li>
						<li>HTML,顔色</li>
						<li>CSS 1,2,3</li>
						<li>JaveScript</li>
						<li>HTML DOM</li>
						<li>JQuery</li>
						<li>JQuery Mobile</li>
						<li>VBSscript</li>
						<li>ASP</li>
						<li>ADO</li>
						<li>ASP.NET</li>
						<li>PHP 5.1</li>
						<li>XML DOM</li>
						<li>XSLT 1.0</li>
						<li>XPath 2.0</li>
						<li>XSL-FO</li>
						<li>WML 1.1</li>
						<li>W3C 術語表</li>
					</ul>
				</div>
				<div class="nav_box">
					<h2>字元集</h2>
					<ul>
						<li>HTML 字元集</li>
						<li>HTML ASCLL</li>
						<li>HTML ISO-8859-1</li>
						<li>HTML 符号</li>
					</ul>
				</div>
				<div class="nav_box">
					<h2>執行個體/案例</h2>
					<ul>
						<li>HTML 執行個體</li>
						<li>CSS 執行個體</li>
						<li>XML 執行個體</li>
						<li>javeScript 執行個體</li>
						<li>javeScript 對象執行個體</li>
						<li>HTML DOM 執行個體</li>
						<li>jQuery 執行個體</li>
						<li>jQuery Mobile 執行個體</li>
						<li>XML DOM 執行個體</li>
						<li>DHTML 執行個體</li>
						<li>AJAX 執行個體</li>
						<li>VBScript 執行個體</li>
						<li>ASP 執行個體</li>
						<li>ADO 執行個體</li>
						<li>SVG 執行個體</li>
						<li>WAP 執行個體</li>
					</ul>
				</div>
				<div class="nav_box">
					<h2>檢測/考試</h2>
					<ul>
						<li>HTML 測驗</li>
						<li>HTML5 測驗</li>
						<li>XHTML 測驗</li>
						<li>CSS 測驗</li>
						<li>XML 測驗</li>
						<li>javeScript 測驗</li>
						<li>jQuery 測驗</li>
						<li>SQL 測驗</li>
						<li>ASP 測驗</li>
						<li>PHP 測驗</li>
					</ul>
				</div>
				<div class="nav_box">
					<h2>代碼驗證</h2>
					<ul>
						<li>驗證html</li>
						<li>驗證css</li>
						<li>驗證XHTML</li>
						<li>驗證XML</li>
						<li>驗證WML</li>
					</ul>
				</div>								
			</div>
		</div>
		<div class="end"></div>
	</div>
</body>
</html>

　　

上一篇: 02-RabbitMQ核心概念
下一篇: W3School 學習筆記