練習:W3C頁面製做

時間  2019-11-18
標籤 練習 w3c 頁面 製做 欄目 C&C++ 简体版
原文   原文鏈接

.CSS:css

main.csshtml

.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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程