• 练习: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>

    　　
  • 相关阅读:
    Java Output流写入包装问题
    SpringBoot项目单元测试不经过过滤器问题
    SpringSecurity集成启动报 In the composition of all global method configuration, no annotation support was actually activated 异常
    JWT jti和kid属性的说明
    Maven 排除依赖
    第五章 基因概念的发现
    第三章 孟德尔遗传的拓展
    第二章 孟德尔遗传
    第一章 引言
    GWAS全基因组关联分析
  • 原文地址：https://www.cnblogs.com/zhangpang/p/9720709.html
Copyright © 2020-2023  润新知