zoukankan      html  css  js  c++  java

  • 练习:W3C页面制作

    .CSS:

    main.css

    .main {
	
}
.m_left, .m_center, .m_right {
	height: 1700px;
}
.m_left {
	 180px;
	/*background: red;*/
}
.m_center {
	 840px;
	/*background: orange;*/
	margin-left: 180px;
	margin-top: -1700px;
}
.m_right {
	 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 {
	 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 {
	 180px;
	/*background: red;*/
}
.m_center {
	 840px;
	/*background: orange;*/
	margin-left: 180px;
	margin-top: -1700px;
}
.m_right {
	 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 {
	 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 {
	 180px;
	/*background: red;*/
}
.m_center {
	 840px;
	/*background: orange;*/
	margin-left: 180px;
	margin-top: -1700px;
}
.m_right {
	 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 {
	 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>

    　　
  • 相关阅读:
    极光推送
    浅谈Android的屏幕适配问题
    Git/GitHub学习第一天
    Android学习总结
    为什么现在开始写你的第一篇博客
    escape.alf.nu XSS Challenges 0-7 之一步步学XSS
    PE文件学习
    通过sqli-labs学习sql注入——基础挑战之less11-22
    通过sqli-labs学习sql注入——基础挑战之less1-10
    重学数据结构系列之——总结
  • 原文地址：https://www.cnblogs.com/zhangpang/p/9720709.html
Copyright © 2011-2022 走看看