本文共 70840 字，大约阅读时间需要 236 分钟。

项目介绍

：项目所参考的B站视频教程，此链接可能不会长期有效；

：个人网站容量有限，此链接可能不会长期有效；

：提取码[rays]，此链接长期有效。

• reset.css

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {
     margin: 0;  padding: 0;  border: 0;  font-size: 100%;  font: inherit;  vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {
     display: block;}body {
     line-height: 1;}ol, ul {
     list-style: none;}blockquote, q {
     quotes: none;}blockquote:before, blockquote:after,q:before, q:after {
     content: '';  content: none;}table {
     border-collapse: collapse;  border-spacing: 0;}body {
     min-width: 1200px;}a {
     text-decoration: none;  color: #000000;}

• public.css

/*导航栏*/header {
     width: 1200px;  height: 80px;  line-height: 80px;  margin: 0 auto;}header .logo {
     width: 140px;  height: 60px;  margin: 10px 200px 0 0;  float: left;}header .nav {
     overflow: hidden;  float: left;}header .nav li {
     float: left;  font-size: 16px;  margin-right: 56px;}header .nav-active, header .nav li:hover {
     border-bottom: 4px solid #01a1ff;}header .nav li a {
     color: #333;}header .active {
     color: #01a1ff!important;}header .nav li:hover a {
     color: #01a1ff;}header .language {
     float: right;}header .language li {
     float: left;  width: 47px;  height: 50px;  line-height: 50px;  /*先占据空间*/  border: 1px solid transparent;  text-align: center;  margin-top: 15px;  cursor: pointer;}header .language li:first-child {
     border: 1px solid #ccc;}header .language li:hover {
     border: 1px solid #ccc;}/*轮播图*/.banner {
   	width: 100%;	height: 400px;	position: relative;	overflow: hidden;}.banner .imgs {
   	width: 1000%;	position: absolute;}.banner li {
   	float: left;}.banner img {
   	width: 100%;	height: 400px;}.prev, .next {
   	width: 32px;	height: 32px;	position: absolute;	top: 184px;	z-index: 10;}.prev {
   	background: url("../home/images/index-xb2.png") no-repeat;	left: 40px;}.prev:hover {
   	background: url("../home/images/index-xb4.png") no-repeat;	left: 40px;}.next {
   	background: url("../home/images/index-xb1.png") no-repeat;	right: 40px;}.next:hover {
   	background: url("../home/images/index-xb3.png") no-repeat;	right: 40px;}.banner .count {
   	width: 100%;	height: 10px;	position: absolute;	left: 50%;	bottom: 10px;	/* (li-width + li-margin-right)*3 = 45 */	margin-left: -22.5px;}.banner .count li {
   	float: left;	width: 10px;	height: 10px;	background-color: #000;	opacity: .1;	border-radius: 50%;	margin-right: 5px;	cursor: pointer;}.banner .count .active {
   	background-color: #01a1ff;	opacity: 1;}/*标题公共样式*/.title {
   	font: 34px "Franklin Gothic Medium";	text-transform: uppercase;	text-align: center;	position: relative;	margin-bottom: 44px;}.title:after {
   	content: "";	display: block;	width: 42px;	height: 4px;	border-bottom: 4px solid #01a1ff;	position: absolute;	left: 50%;	/* width/2 */	margin-left: -21px;	bottom: -3px;}/*首页p标签*/.index-p{
     width: 1200px;  font: 14px 微软雅黑;  color: #666;  padding: 0 70px;  line-height: 24px;  text-align: center;  box-sizing: border-box;  margin: 0 auto;}/*主题内容区container*/.container {
   	width: 1218px;	margin: 60px auto 90px;	overflow: hidden;}.container-content {
   	float: left;	width: 970px;}/*侧边栏*/aside {
   	float: left;	width: 172px;	border: 1px solid #01a1ff;	margin-right: 45px;}aside .aside-title {
   	padding: 30px 0 24px;	background-color: #01a1ff;	text-align: center;	color: #fff;}aside .title {
   	padding-bottom: 10px;	margin-bottom: 15px;	font-size: 16px;}aside .title:after {
   	border-color: #fff;}aside .aside-title p {
   	font-size: 12px;}aside .aside-nav {
   	padding: 9px 14px 14px;	font-size: 16px;}aside .aside-nav li {
   	text-align: center;	padding: 8px 0;	margin-bottom: 20px;}aside .aside-nav li:hover {
   	background-color: #01a1ff;	border-radius: 15px;}aside .aside-nav li:hover a {
   	color: #fff;}aside .aside-nav li:last-child {
   	margin-bottom: 0px;}aside .aside-nav a {
   	color: #666;}aside .aside-nav i {
   	font-weight: bold;	margin-right: 3px;}aside .aside-active {
   	background-color: #01a1ff;	border-radius: 15px;}aside .aside-active a {
   	color: #fff;}.aside {
   	float: left;}.aside aside {
   	clear: both;}.aside aside:first-child {
   	margin-bottom: 40px;}.aside .search {
   	position: relative;	overflow: hidden;}.aside .search input {
   	width: 120px;	height: 30px;	margin: 9px 13px;	padding: 0 20px 0 0;	color: #333;}.aside .search span {
   	color: #01a1ff;	position: absolute;	right: 20px;	top: 20px;}/*侧边栏-content-title*/.content-title {
   	padding: 0 18px 10px 0;	border-bottom: 1px solid #d3d3d3;	overflow: hidden;	position: relative;}.content-title h3 {
   	float: left;	font-size: 20px;	color: #333;	border-left: 3px solid #01a1ff;	margin-left: 20px;	padding: 8px;}.content-title h3 span {
   	color: #666;	font-size: 12px;	text-transform: uppercase;}.content-title .crumbs-nav {
   	float: right;	font-size: 12px;	color: #999;	position: absolute;	bottom: 10px;	right: 10px;}.content-title .crumbs-nav a {
   	color: #999;}.content-title .crumbs-nav span {
   	color: #01a1ff;}/*页码导航栏*/.pages {
   	position: relative;	left: 287px;}.pages li {
   	width: 30px;	height: 30px;	line-height: 30px;	background-color: #e5e5e5;	display: inline-block;	text-align: center;	color: #999;}.pages li:first-child, .pages li:last-child {
   	width: 92px;}.pages li:nth-child(2), .pages li:hover {
   	background-color: #01a1ff;	color: #fff;}/*页脚*/footer {
   	width: 100%;	background-color: #01a1ff;	color: #fff;}footer a {
   	color: #fff;}.footer {
   	width: 100%;	border-bottom: 1px solid #fff;}.footer .content {
   	width: 1200px;	margin: 0 auto;	padding: 50px 0;	overflow: hidden;}.footer .content .nav dl {
   	float: left;	margin-right: 100px;}.footer .content .nav dl:last-child {
   	margin-right: 0;}.footer .content .nav dl dt {
   	font-size: 16px;	padding-bottom: 10px;	border-bottom: 1px solid #fff;}.footer .content .nav dl dd {
   	font-size: 12px;	padding-top: 20px;}.footer .content .concat {
   	float: right;}.footer .content .concat input, .footer .content .concat textarea {
   	outline: none;	border: 1px solid #fff;	background-color: #01a1ff;	color: #fff;}.footer .content .concat input {
   	width: 134px;	height: 30px;	padding: 0 5px;}.footer .content .concat input::-webkit-input-placeholder,.footer .content .concat textarea::-webkit-input-placeholder {
   	color: #fff;}.footer .content .concat input::first-child {
   	margin-right: 20px;}.footer .content .concat textarea {
   	display: block;	width: 285px;	height: 95px;	margin: 10px 0;	padding: 5px;}.footer .content .concat input[type=button] {
   	width: 110px;	height: 30px;}footer .copyright {
   	height: 40px;	line-height: 40px;	text-align: center;	color: #fff;	font-size: 12px;}

首页

• 效果图

• index.html

<!DOCTYPE html><html><head>	<meta charset="utf-8">	<meta name="keywords" content="纽曼官网，纽曼电器">	<meta name="description" content="该网站为纽曼公司的一个产品展示型网站">	<meta name="render" content="webkit">	<meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1">	<title>纽曼官网</title>	<link rel="stylesheet" type="text/css" href="css/reset.css">	<link rel="stylesheet" type="text/css" href="css/public.css">	<link rel="stylesheet" type="text/css" href="css/index.css"></head><body>	<!-- 导航栏 -->	<header>		<a href="index.html"><img src="home/images/logo.jpg" class="logo"></a>		<ul class="nav">			<li class="nav-active"><a class="active" href="index.html">企业首页</a></li>			<li><a href="about/about.html">关于我们</a></li>			<li><a href="news/news.html">新闻中心</a></li>			<li><a href="product/product.html">产品中心</a></li>			<li><a href="service/service.html">客户服务</a></li>			<li><a href="concat/concat.html">联系我们</a></li>		</ul>		<ul class="language">			<li>CN</li>			<li>EN</li>		</ul>	</header>	<!-- 轮播图 -->	<div class="banner">		<ul class="imgs">			<li><a href="#"><img src="home/images/banner_01.jpg"></a></li>			<li><a href="#"><img src="home/images/banner_02.jpg"></a></li>			<li><a href="#"><img src="home/images/banner_03.jpg"></a></li>		</ul>		<div class="prev"></div>		<div class="next"></div>		<ul class="count">			<li class="active"></li>			<li></li>			<li></li>		</ul>	</div>	<!-- welcome -->	<div class="welcome">		<h2 class="title">welcome to newman</h2>		<p class="index-p">纽曼公司创立于1996年，现有员工2000余人，是一家集研发、制造、销售、服务为一体的中国高新技术企业。公司研发及生产体系健全，拥有湖南、北京和深圳三大中心。经过17年的发展，凭借强大的研发力量及资源整合能力，纽曼已拥有目前中国数码行业较为完整产品体系。产品跨越专业及消费数码产品领域。</p>		<ul class="classic">			<li>				<img src="home/images/index-cultural01.png">				<h3>culture</h3>				<h4>企业文化</h4>				<p>优秀的企业文化能给企业注入蓬勃的活力，是企业的灵魂。纽曼十分注重自身企业文化建设，将企业文化的精髓传递给每一位员工。</p>			</li>			<li>				<img src="home/images/index-cultural02.png">				<h3>honour</h3>				<h4>企业荣誉</h4>				<p>纽曼历年来坚持不懈地努力，以品质求生存，以创新谋发展，从而打造出众多经典产品，得到了用户以及行业媒体的普遍肯定与褒奖。</p>			</li>			<li>				<img src="home/images/index-cultural03.png">				<h3>qualification</h3>				<h4>企业认证</h4>				<p>纽曼长期以来将科学化管理放在首位，并将产品质量视为企业命脉，经过长期不懈的系统化学习和实践，逐步通过了ISO9001质量管理体系认证。</p>			</li>			<li>				<img src="home/images/index-cultural04.png">				<h3>research</h3>				<h4>认证研发</h4>				<p>纽曼一直以来把产品技术研发创新作为产品的核心竞争力，组建了一支专业的、国际化的研发团队，拥有专业研发技术人员近300名。</p>			</li>		</ul>	</div>	<!-- production center -->	<div class="pro-center">		<h2 class="title">PRODUCTION CENTER</h2>		<p class="index-p">纽曼经过十余年的发展，已经成为中国家电行业著名品牌之一，纽曼品牌：NewPad平板电脑、纽曼车Pad、纽曼饮水机、纽曼冰箱、洗衣机等连续数年国内市场占有率前列，纽曼品牌IT产品的市场占有率在国内都名列逐年上升。</p>		<ul class="pro-list">			<li>				<a href="#">					<img src="home/images/pro-center1.jpg">					<span class="pro-title">						<span>微波炉-MA323BFS</span>						<span class="add">+</span>					</span>				</a>			</li>			<li>				<a href="#">					<img src="home/images/pro-center2.jpg">					<span class="pro-title">						<span>饮水机-NC-ZA1</span>						<span class="add">+</span>					</span>				</a>			</li>			<li>				<a href="#">					<img src="home/images/pro-center3.jpg">					<span class="pro-title">						<span>电饭锅-RC-10ZWH</span>						<span class="add">+</span>					</span>				</a>			</li>			<li>				<a href="#">					<img src="home/images/pro-center4.jpg">					<span class="pro-title">						<span>迷你音响-RS-168</span>						<span class="add">+</span>					</span>				</a>			</li>			<li>				<a href="#">					<img src="home/images/pro-center5.jpg">					<span class="pro-title">						<span>空气净化器-FES-547</span>						<span class="add">+</span>					</span>				</a>			</li>			<li>				<a href="#">					<img src="home/images/pro-center6.jpg">					<span class="pro-title">						<span>电热水器-ARC-1</span>						<span class="add">+</span>					</span>				</a>			</li>		</ul>		<div class="prev"></div>		<div class="next"></div>	</div>	<!-- news center -->	<div class="news-center">		<h2 class="title">news center</h2>		<p class="index-p">纽曼经过十余年的发展，已经成为中国家电行业著名品牌之一，纽曼品牌：NewPad平板电脑、纽曼车Pad、纽曼饮水机、纽曼冰箱、洗衣机等连续数年国内市场占有率前列，纽曼品牌IT产品的市场占有率在国内都名列逐年上升。</p>		<div class="news-show">			<div class="news-left">				<img src="home/images/news01.png">				<p>AWE2016开幕，企业巨头竞相争艳，大咖云集</p>				<ul>					<li></li>					<li class="news-active"></li>					<li></li>					<li></li>					<li></li>				</ul>			</div>			<div class="news-right">				<div class="news-head">					<div class="news-date">						<span>15</span>						<span>2030-03</span>					</div>					<div class="news-content">						<h2>AWE2016开幕，企业巨头竞相争艳，大咖云集</h2>						<p>2016年3月9日9:30，由中国家电协会主办的中国家电及消费电子博览会—上海2016在上海新国际博览中心隆重开幕。在这个全球瞩目、亚太区最大规模的家电展会上......</p>					</div>				</div>				<div class="news-detail">					<ul class="news-list">						<li><a href="#">· 三大“黑科技”锁定中国消费者的心<small>2016-03-15</small></a></li>						<li><a href="#">· 正品控宣言：让商品拥有独一无二的身份证<small>2016-03-15</small></a></li>						<li><a href="#">· 2016AWE：方太最全智能嵌入式厨电套系亮相<small>2016-03-15</small></a></li>						<li><a href="#">· 美的焖香鼎釜IH智能电饭煲全球首发<small>2016-03-15</small></a></li>						<li><a href="#">· AWE2016盛大开幕 释放家电业“引力波”<small>2016-03-14</small></a></li>						<li><a href="#">· 2016年中国家电发展高峰论坛文字实录<small>2016-03-14</small></a></li>					</ul>				</div>			</div>		</div>	</div>	<!-- video center -->	<div class="video-center">		<h2 class="title">video center</h2>		<p class="index-p">纽曼现已成为目前中国家电行业最知名的品牌之一，先后获得包括中央电视台、《财经时报》、新浪网、网易、品牌中国等国内几十家专业媒体及权威评奖机构所评出的近百个大奖。</p>		<ul class="video-list">			<li>				<a href="#"><img src="home/images/video_06.jpg">					<span class="video-play"></span>					<span class="video-title">享受生活,从饮水开始！</span>					<span class="video-desc">双层过滤滤芯，使饮水更加安全、放心。</span>				</a>			</li>			<li>				<a href="#"><img src="home/images/video_08.jpg">					<span class="video-play"></span>					<span class="video-title">把时间留在最美一刻！</span>					<span class="video-desc">RFE-326三门冰箱，特大存储容量，更节能。</span>				</a>			</li>			<li>				<a href="#"><img src="home/images/video_11.jpg">					<span class="video-play"></span>					<span class="video-title">RS-197，给你一份净土。</span>					<span class="video-desc">RS-197采用全新技术，高效净化空气。</span>				</a>			</li>			<li>				<a href="#"><img src="home/images/video_13.jpg">					<span class="video-play"></span>					<span class="video-title">纽曼咖啡机，诠释生活真理。</span>					<span class="video-desc">精致外观与健全的功能，居家的明早选择！</span>				</a>			</li>		</ul>		<div class="prev"></div>		<div class="next"></div>	</div>	<!-- footer -->	<footer>		<div class="footer">			<div class="content">				<div class="nav">					<dl>						<dt><a href="#">关于我们</a></dt>						<dd><a href="#">公司简介</a></dd>						<dd><a href="#">企业文化</a></dd>						<dd><a href="#">企业荣誉</a></dd>						<dd><a href="#">资格认证</a></dd>						<dd><a href="#">研发生产</a></dd>					</dl>					<dl>						<dt><a href="#">产品中心</a></dt>						<dd><a href="#">饮水机</a></dd>						<dd><a href="#">冰箱</a></dd>						<dd><a href="#">洗衣机</a></dd>						<dd><a href="#">空调</a></dd>						<dd><a href="#">其他产品</a></dd>					</dl>					<dl>						<dt><a href="#">新闻中心</a></dt>						<dd><a href="#">热点聚焦</a></dd>						<dd><a href="#">企业新闻</a></dd>						<dd><a href="#">行业新闻</a></dd>						<dd><a href="#">热点聚焦</a></dd>					</dl>					<dl>						<dt><a href="#">客户服务</a></dt>						<dd><a href="#">招商网加盟</a></dd>						<dd><a href="#">购买流程</a></dd>						<dd><a href="#">售后服务</a></dd>						<dd><a href="#">技术支持</a></dd>						<dd><a href="#">常见问题</a></dd>					</dl>					<dl>						<dt><a href="#">联系我们</a></dt>						<dd><a href="#">在线留言</a></dd>						<dd><a href="#">网上咨询</a></dd>						<dd><a href="#">联系我们</a></dd>					</dl>				</div>				<form action="#" class="concat">					<p>						<input type="text" placeholder="请输入您的姓名" />						<input type="tel" placeholder="请输入您的联系方式" />					</p>					<p>						<textarea cols="30" rows="10" placeholder="请输入您的留言"></textarea>					</p>					<p>						<input type="button" value="提交">					</p>				</form>			</div>		</div>		<p class="copyright">Copyright&copy;2030 teacherhou.com All Rights Reserved   Design by WenCun 粤ICP备xxxxxxxx号</p>	</footer></body></html>

• index.css

/*welcome*/.welcome {
   	width: 1200px;	margin: 55px auto 120px;}.welcome .classic {
   	width: 1200px;	display: flex;	justify-content: space-around;	margin-top: 105px;	padding: 0 15px;}.welcome .classic li {
   	flex: 0 0 227px;	text-align: center;}.welcome .classic h3 {
   	font-size: 20px;	color: #333;	text-transform: uppercase;	margin-top: 44px;	font-weight: 900;}.welcome .classic h4 {
   	font-size: 14px;	color: #666;	margin-bottom: 30px;	font-weight: 800;}.welcome .classic p {
   	font-size: 12px;	color: #999;	line-height: 24px;}/*production center*/.pro-center {
   	margin-bottom: 120px;	position: relative;}.pro-list {
   	width: 100%;	margin-top: 50px;	overflow: hidden;}.pro-list li {
   	float: left;	width: 16.666%;	border: 1px solid transparent;	box-sizing: border-box;}.pro-list li:hover .pro-title {
   	background-color: #01a1ff;	color: #fff;}.pro-list li:hover .pro-title .add {
   	background-color: #fff;	color: #01a1ff;}.pro-center .pro-title {
   	width: 100%;	height: 50px;	display: block;	background-color: #e5e5e5;	line-height: 50px;	font-size: 14px;	color: #333;	position: relative;}.pro-center .pro-title span:first-child {
   	padding-left: 20px;}.pro-center .pro-title span.add {
   	position: absolute;	width: 15px;	height: 15px;	line-height: 15px;	display: block;	background-color: #999;	border-radius: 50%;	top: 17.5px;	right: 15px;	color: #fff;	text-align: center;	font-weight: 900;}.pro-center .prev {
   	top: 270px;	left: 50px;}.pro-center .next {
   	top: 270px;	right: : 50px;}/*news-center*/.news-center {
   	width: 1200px;	margin: 0 auto 120px;}.news-show {
   	margin-top: 50px;	overflow: hidden;	position: relative;}.news-left {
   	float: left;}.news-left p {
   	height: 37px;	width: 553px;	line-height: 37px;	font-size: 18px;	text-transform: uppercase;	color: #fff;	background-color: #01a1ff;	position: absolute;	bottom: 10px;	left: 0;	padding-left: 10px;	box-sizing: border-box;}.news-left li {
   	width: 110.6px;	height: 5px;	float: left;	background-color: #fff;	margin-top: -2px;}.news-left li.news-active {
   	background-color: #01a1ff;}.news-right {
   	width: 605px;	float: right;}.news-head {
   	overflow: hidden;}.news-date {
   	float: left;	margin-right: 10px;}.news-date span:first-child {
   	display: block;	width: 70px;	height: 57px;	line-height: 57px;	text-align: center;	border: 1px solid #01a1ff;	color: #01a1ff;}.news-date span:last-child {
   	display: block;	width: 70px;	height: 20px;	line-height: 20px;	text-align: center;	border: 1px solid #01a1ff;	background-color: #01a1ff;	color: #fff;	font: 14px Tahoma;}.news-content {
   	float: left;	width: 510px;	margin-bottom: 10px;}.news-content h2 {
   	font: 18px;	color: #01a1ff;	margin: 10px 0 15px 0;	font-weight: 900;}.news-content p {
   	font-size: 12px;	color: #999;	line-height: 20px;}.news-list {
   	font-size: 14px;	color: #666;}.news-list li {
   	padding: 13px 0 10px;	border-top: 1px dotted #ccc;	position: relative;}.news-list li:last-child {
   	border-bottom: 1px dotted #ccc;}.news-list small {
   	font-size: 12px;	position: absolute;	right: 0;}/*video-center*/.video-center {
   	width: 1200px;	margin: 0 auto;	position: relative;}.video-list {
   	margin: 54px 0 144px 0;	padding: 4px;	overflow: hidden;}.video-list li {
   	float: left;	width: 252px;	margin-right: 53px;	overflow: hidden;	position: relative;}.video-list li:last-child {
   	margin-right: 0;}.video-list h3 {
   	margin: 25px 0 10px;	color: }.video-list .video-title {
   	margin: 25px 0 10px;	color: #333;	font-weight: bold;	font-size: 16px;	display: block;}.video-list .video-desc {
   	font-size: 12px;	color: #999;}.video-list img {
   	width: 260px;	height: 195px;	display: block;}.video-list .video-play {
    /*制作播放按钮*/	display: block;	width: 45px;	height: 45px;	border: 3px solid #fff;	background-color: rgba(0,0,0,.5);	border-radius: 50%;	position: absolute;	/* left = (img.width-45)/2 */	left: 102px;	top: 75px;}.video-list .video-play:after {
   	content: "";	display: block;	border: 18px solid transparent;	border-left-color: #fff;	/*border-right-color: red;*/	position: absolute;	left: 18px;	top: 6px;}.video-list li:hover {
   /*制作选中效果*/	box-shadow: 3px 3px 3px #01a1ff,-3px -3px 3px #01a1ff;}.video-list li:hover .video-title {
   /*制作选中效果*/	color: #01a1ff; }.video-list li:hover .video-play {
   /*制作选中效果*/	width: 54px;	height: 54px;	border: 3px solid #01a1ff;	background-color: rgba(255,255,255,.5);	left: 100px;	top: 73px;}.video-list li:hover .video-play:after {
   /*制作选中效果*/	border-left-color: #01a1ff;	position: absolute;	left: 21px;	top: 11px;}.video-center .prev {
   	left: -50px;	top: 270px;}.video-center .next {
   	right: -25px;	top: 270px;}

关于我们

• 效果图

• about.html

<!DOCTYPE html><html><head>	<meta charset="utf-8">	<meta name="keywords" content="纽曼官网，纽曼电器">	<meta name="description" content="该网站为纽曼公司的一个产品展示型网站">	<meta name="render" content="webkit">	<meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1">	<title>纽曼官网</title>	<link rel="stylesheet" type="text/css" href="../css/reset.css">	<link rel="stylesheet" type="text/css" href="../css/public.css">	<link rel="stylesheet" type="text/css" href="css/about.css"></head><body>	<!-- 导航栏 -->	<header>		<a href="../index.html"><img src="../home/images/logo.jpg" class="logo"></a>		<ul class="nav">			<li><a href="../index.html">企业首页</a></li>			<li class="nav-active"><a class="active" href="about.html">关于我们</a></li>			<li><a href="../news/news.html">新闻中心</a></li>			<li><a href="../product/product.html">产品中心</a></li>			<li><a href="../service/service.html">客户服务</a></li>			<li><a href="../concat/concat.html">联系我们</a></li>		</ul>		<ul class="language">			<li>CN</li>			<li>EN</li>		</ul>	</header>	<!-- banner -->	<div class="banner">		<a href="#"><img src="images/about_banner.png"></a>	</div>	<!-- 内容区 -->	<div class="container">		<aside>			<div class="aside-title">				<h2 class="title">about us</h2>				<p>关于我们</p>			</div>			<ul class="aside-nav">				<li class="aside-active"><a href="#"><i>·</i>公司简介 >></a></li>				<li><a href="#"><i>·</i>企业文化 >></a></li>				<li><a href="#"><i>·</i>企业荣誉 >></a></li>				<li><a href="#"><i>·</i>资格认证 >></a></li>				<li><a href="#"><i>·</i>研发生产 >></a></li>			</ul>		</aside>		<div class="container-content">			<div class="content-title">				<h3>公司简介 <span>COMPANY PROFILE</span></h3>				<div class="crumbs-nav">					您当前的位置 &gt; <a href="../index.html">首页</a> &gt; <a href="about.html">关于我们</a> &gt; <span>公司简介</span>				</div>			</div>			<article>				<img src="images/about_img.png">				<p>纽曼是一家集研发、制造、销售、服务为一体的高新技术企业。公司创建以来，坚持并发扬以“两个目标、四剑八和、十字精神”为核心的纽曼企业文化，使公司得以持续、健康、和谐的发展，迅速成长为中国数码行业的旗舰企业。旗下产品跨越专业及消费数码产品领域，涵盖MP3/MP4/MP5、GPS导航仪、手机、优盘、 移动硬盘、电子书、数码相机/摄像机、汽车影音产品、数码相框、教育电子产品、录音笔、刻录光盘、耳机等二十大系列产品。经过几年的发展，凭借强大的研发力量，完善的售后服务，纽曼旗下影音播放器，GPS、移动存储等产品线连续多年全国销量遥遥领先，打破了数码产品被国外品牌垄断的局面。经过十年品牌建设，在数千万纽曼用户的支持下， 成为目前中国数码行业最知名的品牌之一。</p>				<p>2005年，纽曼在行业内率先推出“红色快车”的服务理念，2008年，纽曼又积极对广大消费者作出“钻石品质、金牌服务”的客户服务承诺。如今，纽曼的所有产品均实行全国联保，在全国设有35家售后服务站，配备数百名专业的售后服务人员，竭诚为全国消费者提供及时、快捷、高效的售后服务。</p>				<p>2005年5月，公司对产品质量及企业管理水平进行了相关认证，通过了国际标准化组织的ISO9001质量体系认证。2007年7月，纽曼公司通过ISO14000环境管理体系认证、OHSAS18000职业健康安全管理体系认证。截至目前，共提出百余项专利，申请国内注册商标125项，并已先后获得欧盟、美国等国家和地区的商标注册。 2009年6月“纽曼”被北京市工商行政管理局评为“北京市著名商标”，2010年1月15日，被国家工商行政管理总局认定为“中国驰名商标”。</p>				<p>纽曼公司自创立起多年秉承核心企业文化：纽曼目标：（两个目标）成为消费电子行业的旗舰企业成为让中国人骄傲的国际品牌；纽曼四方神剑理念：（四剑） 基于以用户为本，以科技、品牌、渠道、服务为四方神剑的市场经营理念；曼八方和谐理念：（八和） 基于以人为本，以确保用户、代理、员工、公司、股东、供方、同行、社会八方和谐发展的管理理念；纽曼（人）精神：（十字精神）责任 荣誉 激情 创新 务实 ；纽曼核心竞争力： 基于以“两个目标、四剑八和、纽曼公司创建初期，致力于电话语音系列产品（DRS数码录音系统和CTI声讯服务系统）的研制与开发，利用国内外最新的技术平台以及强大的创新能力，成功推出一系列电话语音产品，成为国内专业从事电话录音设备的厂商。2001年初，公司在巩固通讯领域优势的同时，进军数码领域，打造出移动存储、MP3、MP4、GPS、数码相机伴侣五大产品线十五大系列产品。经过几年的发展，纽曼已拥有中国数码行业产品线完整并具专业品质的产品。凭借强大的研发力量，完善的售后服务，纽曼产品销量大大领先于竞争对手，打破了数码产品被国外品牌垄断的局面。</p>				<p>经过十年品牌建设，在数千万纽曼用户的支持下，特别是在2006纽曼《梦想中国》推动下，成为目前中国数码行业最知名的品牌之一。截止到2006年，纽曼在全国拥有核心代理商超过800家、专卖店500多家、专卖柜超过2000多个，在全国设立35家售后服务站， 配备数百名专业的售后人员为全国消费者提供及时的服务。</p>				<p>率先推出“红色快车”的服务理念，2008年，纽曼又积极对广大消费者作出“钻石品质、金牌服务”的客户服务承诺。如今，纽曼的所有产品均实行全国联保，在全国设有35家售后服务站，配备数百名专业的售后服务人员，竭诚为全国消费者提供及时、快捷、高效的售后服务。</p>			</article>		</div>	</div>	<!-- footer -->	<footer>		<div class="footer">			<div class="content">				<div class="nav">					<dl>						<dt><a href="#">关于我们</a></dt>						<dd><a href="#">公司简介</a></dd>						<dd><a href="#">企业文化</a></dd>						<dd><a href="#">企业荣誉</a></dd>						<dd><a href="#">资格认证</a></dd>						<dd><a href="#">研发生产</a></dd>					</dl>					<dl>						<dt><a href="#">产品中心</a></dt>						<dd><a href="#">饮水机</a></dd>						<dd><a href="#">冰箱</a></dd>						<dd><a href="#">洗衣机</a></dd>						<dd><a href="#">空调</a></dd>						<dd><a href="#">其他产品</a></dd>					</dl>					<dl>						<dt><a href="#">新闻中心</a></dt>						<dd><a href="#">热点聚焦</a></dd>						<dd><a href="#">企业新闻</a></dd>						<dd><a href="#">行业新闻</a></dd>						<dd><a href="#">热点聚焦</a></dd>					</dl>					<dl>						<dt><a href="#">客户服务</a></dt>						<dd><a href="#">招商网加盟</a></dd>						<dd><a href="#">购买流程</a></dd>						<dd><a href="#">售后服务</a></dd>						<dd><a href="#">技术支持</a></dd>						<dd><a href="#">常见问题</a></dd>					</dl>					<dl>						<dt><a href="#">联系我们</a></dt>						<dd><a href="#">在线留言</a></dd>						<dd><a href="#">网上咨询</a></dd>						<dd><a href="#">联系我们</a></dd>					</dl>				</div>				<form action="#" class="concat">					<p>						<input type="text" placeholder="请输入您的姓名" />						<input type="tel" placeholder="请输入您的联系方式" />					</p>					<p>						<textarea cols="30" rows="10" placeholder="请输入您的留言"></textarea>					</p>					<p>						<input type="button" value="提交">					</p>				</form>			</div>		</div>		<p class="copyright">Copyright&copy;2030 teacherhou.com All Rights Reserved   Design by WenCun 粤ICP备xxxxxxxx号</p>	</footer></body></html>

• about.css

article {
   	overflow: hidden;	padding: 40px 20px 0 20px;	font-size: 14px;	color: #666;}article img {
   	margin-right: 32px;	float: left;}article p {
   	text-indent: 2em;	line-height: 24px;	margin-bottom: 30px;}

新闻中心

• 效果图

• news.html

<!DOCTYPE html><html><head>	<meta charset="utf-8">	<meta name="keywords" content="纽曼官网，纽曼电器">	<meta name="description" content="该网站为纽曼公司的一个产品展示型网站">	<meta name="render" content="webkit">	<meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1">	<title>纽曼官网</title>	<link rel="stylesheet" type="text/css" href="../css/reset.css">	<link rel="stylesheet" type="text/css" href="../css/public.css">	<link rel="stylesheet" type="text/css" href="css/news.css"></head><body>	<!-- 导航栏 -->	<header>		<a href="../index.html"><img src="../home/images/logo.jpg" class="logo"></a>		<ul class="nav">			<li><a href="../index.html">企业首页</a></li>			<li><a href="../about/about.html">关于我们</a></li>			<li class="nav-active"><a class="active" href="news.html">新闻中心</a></li>			<li><a href="../product/product.html">产品中心</a></li>			<li><a href="../service/service.html">客户服务</a></li>			<li><a href="../concat/concat.html">联系我们</a></li>		</ul>		<ul class="language">			<li>CN</li>			<li>EN</li>		</ul>	</header>	<!-- banner -->	<div class="banner">		<a href="#"><img src="../about/images/about_banner.png"></a>	</div>	<!-- 内容区 -->	<div class="container">		<aside>			<div class="aside-title">				<h2 class="title">news center</h2>				<p>新闻中心</p>			</div>			<ul class="aside-nav">				<li class="aside-active"><a href="#"><i>·</i>最新动态 >></a></li>				<li><a href="#"><i>·</i>企业新闻 >></a></li>				<li><a href="#"><i>·</i>行业新闻 >></a></li>				<li><a href="#"><i>·</i>热点聚焦 >></a></li>			</ul>		</aside>		<div class="container-content">			<div class="content-title">				<h3>新闻中心 <span>news center</span></h3>				<div class="crumbs-nav">					您当前的位置 &gt; <a href="../index.html">首页</a> &gt; <span>新闻中心</span>				</div>			</div>			<!-- news-center -->			<ul class="news-list">				<li>					<div class="news-item-date">						<span class="day">12</span>						<span class="year-month">2020-03</span>					</div>					<div class="news-item-content">						<h2>正品控宣言：让商品拥有独一无二的身份证</h2>						<p>今天，中国家电及消费电子博览会(Appliance&electronics World Expo，简称AWE)圆满落幕，展会吸引了包括消费电子、智能家电、白色家电、厨房电器、生活电器、环境家电及家电配件等多品类的家电制造商参加，也......</p>					</div>				</li>				<li>					<div class="news-item-date">						<span class="day">12</span>						<span class="year-month">2020-03</span>					</div>					<div class="news-item-content">						<h2>正品控宣言：让商品拥有独一无二的身份证</h2>						<p>今天，中国家电及消费电子博览会(Appliance&electronics World Expo，简称AWE)圆满落幕，展会吸引了包括消费电子、智能家电、白色家电、厨房电器、生活电器、环境家电及家电配件等多品类的家电制造商参加，也......</p>					</div>				</li>				<li>					<div class="news-item-date">						<span class="day">12</span>						<span class="year-month">2020-03</span>					</div>					<div class="news-item-content">						<h2>正品控宣言：让商品拥有独一无二的身份证</h2>						<p>今天，中国家电及消费电子博览会(Appliance&electronics World Expo，简称AWE)圆满落幕，展会吸引了包括消费电子、智能家电、白色家电、厨房电器、生活电器、环境家电及家电配件等多品类的家电制造商参加，也......</p>					</div>				</li>				<li>					<div class="news-item-date">						<span class="day">12</span>						<span class="year-month">2020-03</span>					</div>					<div class="news-item-content">						<h2>正品控宣言：让商品拥有独一无二的身份证</h2>						<p>今天，中国家电及消费电子博览会(Appliance&electronics World Expo，简称AWE)圆满落幕，展会吸引了包括消费电子、智能家电、白色家电、厨房电器、生活电器、环境家电及家电配件等多品类的家电制造商参加，也......</p>					</div>				</li>				<li>					<div class="news-item-date">						<span class="day">12</span>						<span class="year-month">2020-03</span>					</div>					<div class="news-item-content">						<h2>正品控宣言：让商品拥有独一无二的身份证</h2>						<p>今天，中国家电及消费电子博览会(Appliance&electronics World Expo，简称AWE)圆满落幕，展会吸引了包括消费电子、智能家电、白色家电、厨房电器、生活电器、环境家电及家电配件等多品类的家电制造商参加，也......</p>					</div>				</li>				<li>					<div class="news-item-date">						<span class="day">12</span>						<span class="year-month">2020-03</span>					</div>					<div class="news-item-content">						<h2>正品控宣言：让商品拥有独一无二的身份证</h2>						<p>今天，中国家电及消费电子博览会(Appliance&electronics World Expo，简称AWE)圆满落幕，展会吸引了包括消费电子、智能家电、白色家电、厨房电器、生活电器、环境家电及家电配件等多品类的家电制造商参加，也......</p>					</div>				</li>				<li>					<div class="news-item-date">						<span class="day">12</span>						<span class="year-month">2020-03</span>					</div>					<div class="news-item-content">						<h2>正品控宣言：让商品拥有独一无二的身份证</h2>						<p>今天，中国家电及消费电子博览会(Appliance&electronics World Expo，简称AWE)圆满落幕，展会吸引了包括消费电子、智能家电、白色家电、厨房电器、生活电器、环境家电及家电配件等多品类的家电制造商参加，也......</p>					</div>				</li>			</ul>			<!-- 页码导航 -->			<ul class="pages">				<li>&lt; 上一页</li>				<li>1</li>				<li>2</li>				<li>3</li>				<li>4</li>				<li>5</li>				<li>...</li>				<li>下一页 &gt;</li>			</ul>		</div>	</div>	<!-- footer -->	<footer>		<div class="footer">			<div class="content">				<div class="nav">					<dl>						<dt><a href="#">关于我们</a></dt>						<dd><a href="#">公司简介</a></dd>						<dd><a href="#">企业文化</a></dd>						<dd><a href="#">企业荣誉</a></dd>						<dd><a href="#">资格认证</a></dd>						<dd><a href="#">研发生产</a></dd>					</dl>					<dl>						<dt><a href="#">产品中心</a></dt>						<dd><a href="#">饮水机</a></dd>						<dd><a href="#">冰箱</a></dd>						<dd><a href="#">洗衣机</a></dd>						<dd><a href="#">空调</a></dd>						<dd><a href="#">其他产品</a></dd>					</dl>					<dl>						<dt><a href="#">新闻中心</a></dt>						<dd><a href="#">热点聚焦</a></dd>						<dd><a href="#">企业新闻</a></dd>						<dd><a href="#">行业新闻</a></dd>						<dd><a href="#">热点聚焦</a></dd>					</dl>					<dl>						<dt><a href="#">客户服务</a></dt>						<dd><a href="#">招商网加盟</a></dd>						<dd><a href="#">购买流程</a></dd>						<dd><a href="#">售后服务</a></dd>						<dd><a href="#">技术支持</a></dd>						<dd><a href="#">常见问题</a></dd>					</dl>					<dl>						<dt><a href="#">联系我们</a></dt>						<dd><a href="#">在线留言</a></dd>						<dd><a href="#">网上咨询</a></dd>						<dd><a href="#">联系我们</a></dd>					</dl>				</div>				<form action="#" class="concat">					<p>						<input type="text" placeholder="请输入您的姓名" />						<input type="tel" placeholder="请输入您的联系方式" />					</p>					<p>						<textarea cols="30" rows="10" placeholder="请输入您的留言"></textarea>					</p>					<p>						<input type="button" value="提交">					</p>				</form>			</div>		</div>		<p class="copyright">Copyright&copy;2030 teacherhou.com All Rights Reserved   Design by WenCun 粤ICP备xxxxxxxx号</p>	</footer></body><script type="text/javascript">	var ul = document.getElementsByClassName("news-list")[0];	var li = ul.getElementsByTagName("li");	for(var i=0; i<li.length; i++) {
    		li[i].onclick = function () {
    			location.href = "news-details.html";		}	}</script></html>