练习:W3C页面制作

最新推荐文章于 2019-11-28 17:59:35 发布
最新推荐文章于 2019-11-28 17:59:35 发布
阅读量153 收藏 1
点赞数
文章标签： php javascript ViewUI
原文链接：http://www.cnblogs.com/zhangpang/p/9720709.html
版权

.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>

　　

转载于:https://www.cnblogs.com/zhangpang/p/9720709.html

weixin_30731287
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
w3school标准教程-HTML
09-22
w3school上导下来的教程，可以入门用，也可以当手册
前端练习--W3C导航条
comegoing_xin_lv的博客
07-29 214
浮动，非文档流，w3c上方导航条
对WEB标准以及W3C的理解与认识?
热门推荐
popingblink博客
07-04 2万+
web标准简单来说可以分为结构、表现和行为。其中结构主要是有HTML标签组成。或许通俗点说，在页面body里面我们写入的标签都是为了页面的结构。表现即指css样式表，通过css可以是页面的结构标签更具美感。行为是指页面和用户具有一定的交互，同时页面结构或者表现发生变化，主要是有js组成。 web标准一般是将该三部分独立分开，使其更具有模块化。但一般产生行为时，就会有结构或者表现的变化，也使这三者
什么是web标准
热情，活力，理想
10-12 1018
WEB标准WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准
w3school网页设计教程
02-12
w3school网页设计教程,你可以找到你所需要的所有的网站建设教程,从基础的HTML到XHTML，乃至进阶的XML、SQL、数据库、多媒体和WAP
w3process:W3C流程文件
05-11
W3C流程文档存储库 该存储库供。 W3C在大多数年中都对过程文档进行了更新。 讨论是在W3C流程社区小组的背景下进行的，主要是在此Github存储库中，但也在。 开发中的分支机构 分支： / 分公司： // 有用的搜寻 ，这...
audiobooks-samples:W3C Audiobooks 有声书范本
05-29
本专案之目的是为了提供一组符合W3C Audiobooks有声书规格之中文实作参考范本。范本采用有「台湾现代文学之父」尊称的赖和所创作之诗化散文作品「前进」作为内容素材进行制作。 范本内容符合规格，并参考制作五种...
node-w3capi:W3C APIJavaScript客户端
05-04
node-w3capi — W3C APIJavaScript客户端该库为提供了一个客户端，该客户端公开了有关诸如规格，组，用户等之类的信息。它遵循一种简单的模式，在该模式中，将建立一个查询，然后使数据被提取。用法服务器端通常： ...
W3C教程(3):W3C HTML 活动
12-01
HTML 是用于万维网发行的混合语言。XHTML 是最新的HTML版本。 HTML 是用于万维网发行的混合语言。 XHTML 是最新的HTML版本。 HTML 教程 ... 如需学习更多有关 XHTML 的内容，请阅读我们的 XHTML 教程。...
w3c.github.io：W3C组织
02-04
w3c.github.io：W3C组织
web页面设计实训——3.12
zwdm945的博客
03-12 536
JavaScript基本语法： JavaScript是基于对象和事件驱动的客户端脚本语言。 调试： Chrome浏览器， 按F12 按钮。可以弹出 调试js的程序框 通过console可以调试js代码。（console.log(“”)） JavaScript基本语法： 1.脚本的基本结构 2.输入输出语句 3.数据类型 4.变量定义 5.分支语句 6.表达式 操作符 运算符 ...
前端 w3c简单布局
ball4022的博客
08-01 166
w3c网站 reset操作 body { background-color: #eee; } html, body, h1, h2, h3, h4, h5, h6, ul, p { margin: 0; } ul { padding: 0; list-style: none; } a { color: black; text-decor...
w3school HTML 高级教程
sunk的专栏
11-05 2529
2014.11.05 http://xue.youdao.com/w?page=132&type=sentence
W3School 的 HTML 快速参考
★匆匆★的专栏
12-04 790
HTML Basic Document Document name goes here Visible text goes here Text Elements This is a paragraph (line break) (horizontal rule) This text is preformatted Logical Styles This text is emphas
JavaScript高级脚本算法编程练习（W3C学院）
Hrzhi的博客
07-31 1192
JavaScript脚本算法编程实战课程 目录 JavaScript脚本算法编程实战课程 1、判断电话号码算法挑战 2、集合交集算法挑战 3、 收银系统算法挑战 4、库存更新算法挑战 5、排列组合去重算法挑战 6、日期改写算法挑战 7、类及对象构建算法挑战 8、 轨道周期算法挑战 9、数据组合求值算法挑战 1、判断电话号码算法挑战 如果传入字符串是一个有效的美国电话号码，...
HTML-W3school首页制作
weixin_30387339的博客
08-03 3160
链接：https://pan.baidu.com/s/1DFy4JmxakQ_jsnSeNqJ2dw 提取码：k76t 制作思路 1. 先分析网页，对网页进行划分，再对每个小区域填充内容 2. 建CSS、img文件夹分别存放所需要的css和图片 3. 清除系统标签默认样式 4. 建页面跳转文件 头部header <div class="header"> <h1...
编写页面时如何符合W3C标准
小李专栏
03-11 2846
编写页面时如何符合W3C标准
W3C_School 在线教程chm 版制作教程
爱的叹息的专栏
11-28 1644
http://www.etextwizard.com/cn/products.html W3C_School在线教程chm版制作教程 CoderDream 2010-12-22 1.整站下载 1.1.下载工具 软件名称：WebSeizer1.11.rar（建议下这个版本，后续的版本竟然没有在本地生成html文件） 图1-1版本...
appium w3c滑动页面
最新发布
05-24
使用 Appium 进行 W3C 的页面滑动可以通过以下步骤实现： 1. 获取屏幕的大小 ```python size = driver.get_window_size() ``` 2. 计算滑动起始点和终止点的坐标 ```python start_x = size['width'] * 0.5 start_...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值