2024-10-29 代码保存
This commit is contained in:
GuanM
parent
d03cf6ecba
commit
9d69104327
@ -50,7 +50,8 @@ body {
|
||||
|
||||
#header .nav ul li:hover,
|
||||
#header .language ul li:hover {
|
||||
background-color: #ffffff;
|
||||
background-color: #f0f0f0;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* 如果想显示进度条 删除此css样式 */
|
||||
#swipper {
|
||||
@ -132,3 +133,289 @@ body {
|
||||
margin-left: -400%;
|
||||
}
|
||||
}
|
||||
|
||||
#newsman {
|
||||
padding: 60px 20px;
|
||||
text-align: center;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
#newsman h1 {
|
||||
font-size: 36px;
|
||||
margin-bottom: 40px;
|
||||
position: relative;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#newsman p {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto 40px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
#newsman h1::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 60px;
|
||||
height: 3px;
|
||||
background-color: #00a0e9;
|
||||
}
|
||||
|
||||
.info-section {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
max-width: 1200px;
|
||||
margin: 40px auto 0;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
|
||||
.info-item {
|
||||
flex: 1;
|
||||
margin: 0 20px;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.info-item::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin: 0 auto 20px;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.info-item:nth-child(1)::before {
|
||||
background-image: url('../images/index-cultural01.png');
|
||||
}
|
||||
|
||||
.info-item:nth-child(2)::before {
|
||||
background-image: url('../images/index-cultural02.png');
|
||||
}
|
||||
|
||||
.info-item:nth-child(3)::before {
|
||||
background-image: url('../images/index-cultural03.png');
|
||||
}
|
||||
|
||||
.info-item:nth-child(4)::before {
|
||||
background-image: url('../images/index-cultural04.png');
|
||||
}
|
||||
|
||||
.info-item h2 {
|
||||
font-size: 24px;
|
||||
margin-bottom: 15px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.info-item p {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.info-item:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
#product {
|
||||
padding: 60px 20px;
|
||||
text-align: center;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
#product h1 {
|
||||
font-size: 28px;
|
||||
margin-bottom: 15px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#product h1::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 60px;
|
||||
height: 3px;
|
||||
background-color: #00a0e9;
|
||||
}
|
||||
|
||||
#product p {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
max-width: 800px;
|
||||
margin: 0 auto 30px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.product-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
gap: 20px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.product-item {
|
||||
background: #fff;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.3s ease;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.product-item img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-bottom: 10px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.product-item h3 {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.product-item:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
#news {
|
||||
padding: 60px 20px;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
#news h1 {
|
||||
font-size: 28px;
|
||||
margin-bottom: 15px;
|
||||
color: #333;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#news h1::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 60px;
|
||||
height: 3px;
|
||||
background-color: #00a0e9;
|
||||
}
|
||||
|
||||
#news p {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
max-width: 800px;
|
||||
margin: 0 auto 30px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.news-container {
|
||||
display: flex;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.news-left {
|
||||
flex: 1;
|
||||
background: #fff;
|
||||
border: 1px solid #e4e4e4;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.news-left img {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.news-text {
|
||||
padding: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.news-date {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
background: #00a0e9;
|
||||
color: #fff;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.news-date .day {
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.news-date .month {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.news-text h3 {
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
margin: 0 0 15px;
|
||||
}
|
||||
|
||||
.news-right {
|
||||
flex: 1;
|
||||
background: #fff;
|
||||
border: 1px solid #e4e4e4;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.news-right ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.news-right li {
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px dashed #e4e4e4;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.news-right li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.news-time {
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.news-right a {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.news-right a:hover {
|
||||
color: #00a0e9;
|
||||
}
|
||||
|
||||
112
Web/index.html
112
Web/index.html
@ -62,19 +62,105 @@
|
||||
<div class="point"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="main">
|
||||
main
|
||||
<!-- welcome -->
|
||||
<div id="welcome">welcome</div>
|
||||
<!-- product -->
|
||||
<div id="product"></div>
|
||||
<!-- news -->
|
||||
<div id="news"></div>
|
||||
<!-- video -->
|
||||
<div id="video"></div>
|
||||
<div id="newsman">
|
||||
<h1>WELCOME TO NEWMAN</h1>
|
||||
<p>纽曼公司创立于1996年，现有员工200余人，是一家集研发、制造、销售、服务为一体的中国高新技术企业。公司研发及生产体系健全，拥有湖南、北京和深圳三大中心。经过17年的发展，凭借强大的研发力量及资源整合能力，纽曼已拥有目前中国数码行业较为完整产品体系。产品跨越专业及消费数码产品领域。</p>
|
||||
<div class="info-section">
|
||||
<div class="info-item">
|
||||
<h2>CULTURAL</h2>
|
||||
<p>企业文化是企业发展的核心，是企业生存和发展的基础。</p>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<h2>HONOUR</h2>
|
||||
<p>企业荣誉是企业发展的动力，体现了企业的实力和信誉。</p>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<h2>QUALIFICATION</h2>
|
||||
<p>企业资质是企业参与市场竞争的基础，确保产品质量和服务水平。</p>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<h2>RESEARCH</h2>
|
||||
<p>研究与开发是企业创新的源泉，推动产品和技术的进步。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
footer
|
||||
<!-- 首页footer部分 -->
|
||||
<div id="footer">footer</div>
|
||||
<div id="product">
|
||||
<h1>PRODUCTION CENTER</h1>
|
||||
<p>纽曼设计开发的产品，已制成6大类型300多个规格型号的产品——包括录音笔、智能手写板系列、语音宝系列、会议宝系列、电子词典、汽车用品等各种消费电子产品。</p>
|
||||
<div class="product-grid">
|
||||
<div class="product-item">
|
||||
<img src="./images/pro-center1.jpg" alt="Product 1">
|
||||
<h3>微波炉 MA128PS</h3>
|
||||
</div>
|
||||
<div class="product-item">
|
||||
<img src="./images/pro-center2.jpg" alt="Product 2">
|
||||
<h3>饮水机 JK-KA1</h3>
|
||||
</div>
|
||||
<div class="product-item">
|
||||
<img src="./images/pro-center3.jpg" alt="Product 3">
|
||||
<h3>电饼铛 SC-KN201H</h3>
|
||||
</div>
|
||||
<div class="product-item">
|
||||
<img src="./images/pro-center4.jpg" alt="Product 4">
|
||||
<h3>蓝牙音箱 S-1</h3>
|
||||
</div>
|
||||
<div class="product-item">
|
||||
<img src="./images/pro-center5.jpg" alt="Product 5">
|
||||
<h3>加湿器 JT-547</h3>
|
||||
</div>
|
||||
<div class="product-item">
|
||||
<img src="./images/pro-center6.jpg" alt="Product 6">
|
||||
<h3>电熨斗 HG-1</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="news">
|
||||
<h1>NEWS CENTER</h1>
|
||||
<p>纽曼时刻关注当今世界科技发展动态，持续推进在产品研发和市场营销等方面，在整个市场中一直保持较为突出的市场地位和影响力，始终保持着较好的市场增长力度。</p>
|
||||
|
||||
<div class="news-container">
|
||||
<div class="news-left">
|
||||
<img src="./images/ne.jpg" alt="News">
|
||||
<div class="news-text">
|
||||
<div class="news-date">
|
||||
<span class="day">15</span>
|
||||
<span class="month">MARCH</span>
|
||||
</div>
|
||||
<h3>AWE2016开展，企业巨头竞相参展，大咖云集</h3>
|
||||
<p>2016年3月9日至12日，第五届中国家电及消费电子博览会（AWE）在上海新国际博览中心隆重举行。本次展会上，LG展台面积达到了"千平"级别。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="news-right">
|
||||
<ul>
|
||||
<li>
|
||||
<span class="news-time">2020-07-15</span>
|
||||
<a href="#">三星"新机计"获得市场新机遇</a>
|
||||
</li>
|
||||
<li>
|
||||
<span class="news-time">2020-07-14</span>
|
||||
<a href="#">山东苹果汇，让购物开一扇门</a>
|
||||
</li>
|
||||
<li>
|
||||
<span class="news-time">2020-07-13</span>
|
||||
<a href="#">小米4i4G，广大消费者购买认可的手机</a>
|
||||
</li>
|
||||
<li>
|
||||
<span class="news-time">2020-07-12</span>
|
||||
<a href="#">爱普生推出全新商务投影机系列产品</a>
|
||||
</li>
|
||||
<li>
|
||||
<span class="news-time">2020-07-11</span>
|
||||
<a href="#">AWE2016开展 科技改变生活"在此刻"</a>
|
||||
</li>
|
||||
<li>
|
||||
<span class="news-time">2020-07-11</span>
|
||||
<a href="#">2016年中国移动互联网发展状况分析</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user