手机网站开发-响应式设计，带导航、幻灯片、图片列表、服务项目、新闻资讯、公司简介、管理团队、联系方式
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<title>手机网站开发-响应式设计，带导航、幻灯片、图片列表、服务项目、新闻资讯、公司简介、管理团队、联系方式</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
<pre><code> /* 导航条样式 */
.nav {
background-color: #333;
color: #fff;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
}
.nav a {
float: left;
display: block;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav a:hover {
background-color: #ddd;
color: #333;
}
/* 幻灯片样式 */
.slideshow {
position: relative;
height: 300px;
}
.slideshow img {
width: 100%;
height: 100%;
object-fit: cover;
}
.slideshow .prev, .slideshow .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
font-size: 18px;
font-weight: bold;
padding: 8px 16px;
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
border: none;
z-index: 10;
}
.slideshow .prev:hover, .slideshow .next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.slideshow .prev {
left: 0;
}
.slideshow .next {
right: 0;
}
.slideshow .dots {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
z-index: 10;
}
.slideshow .dot {
width: 10px;
height: 10px;
border-radius: 50%;
margin: 0 5px;
background-color: rgba(255, 255, 255, 0.6);
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}
.slideshow .dot.active {
background-color: #fff;
}
/* 图片列表样式 */
.image-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 20px;
background-color: #111;
}
.image-list .item {
flex: 0 0 200px;
margin: 10px;
background-color: #333;
overflow: hidden;
position: relative;
cursor: pointer;
transition: box-shadow 0.3s ease-in-out;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.image-list .item:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.image-list .item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease-in-out;
}
.image-list .item:hover img {
transform: scale(1.1);
}
.image-list .item .title {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
text-align: center;
transition: background-color 0.3s ease-in-out;
}
.image-list .item:hover .title {
background-color: rgba(0, 0, 0, 0.8);
}
/* 服务项目样式 */
.services {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 20px;
background-color: #fff;
}
.services .item {
flex: 0 0 calc(33.33% - 20px);
margin: 10px;
background-color: #333;
overflow: hidden;
position: relative;
cursor: pointer;
transition: box-shadow 0.3s ease-in-out;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.services .item:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.services .item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease-in-out;
}
.services .item:hover img {
transform: scale(1.1);
}
.services .item .title {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
text-align: center;
transition: background-color 0.3s ease-in-out;
}
.services .item:hover .title {
background-color: rgba(0, 0, 0, 0.8);
}
/* 新闻列表样式 */
.news {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 20px;
background-color: #f5f5f5;
}
.news .item {
flex: 0 0 100%;
margin: 10px;
background-color: #fff;
overflow: hidden;
position: relative;
cursor: pointer;
transition: box-shadow 0.3s ease-in-out;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.news .item:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.news .item .title {
font-size: 18px;
font-weight: bold;
padding: 10px;
}
.news .item .date {
font-size: 14px;
color: #999;
padding: 10px;
}
/* 公司简介样式 */
.about {
padding: 20px;
background-color: #333;
color: #fff;
}
.about h2 {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
.about p {
font-size: 16px;
line-height: 1.5;
}
/* 管理团队样式 */
.team {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 20px;
background-color: #fff;
}
.team .item {
flex: 0 0 calc(33.33% - 20px);
margin: 10px;
background-color: #333;
overflow: hidden;
position: relative;
cursor: pointer;
transition: box-shadow 0.3s ease-in-out;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.team .item:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.team .item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease-in-out;
}
.team .item:hover img {
transform: scale(1.1);
}
.team .item .name {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 10px;
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
text-align: center;
transition: background-color 0.3s ease-in-out;
}
.team .item:hover .name {
background-color: rgba(0, 0, 0, 0.8);
}
/* 联系方式样式 */
.contact {
padding: 20px;
background-color: #f5f5f5;
}
.contact h2 {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
.contact p {
font-size: 16px;
line-height: 1.5;
}
.contact form {
margin-top: 20px;
}
.contact label {
display: block;
margin-bottom: 10px;
font-size: 16px;
font-weight: bold;
}
.contact input, .contact textarea {
display: block;
width: 100%;
padding: 10px;
border: 1px solid #ccc;
font-size: 16px;
margin-bottom: 20px;
}
.contact button {
display: block;
padding: 10px 20px;
background-color: #333;
color: #fff;
border: none;
font-size: 16px;
cursor: pointer;
}
.contact button:hover {
background-color: #111;
}
/* 响应式样式 */
@media screen and (max-width: 768px) {
.services .item {
flex: 0 0 calc(50% - 20px);
}
.team .item {
flex: 0 0 calc(50% - 20px);
}
}
@media screen and (max-width: 480px) {
.services .item {
flex: 0 0 100%;
}
.team .item {
flex: 0 0 100%;
}
}
</style>
</code></pre>
</head>
<body>
<!-- 导航条 -->
<div class='nav'>
<a href='#'>首页</a>
<a href='#'>服务项目</a>
<a href='#'>新闻动态</a>
<a href='#'>关于我们</a>
<a href='#'>联系我们</a>
</div>
<pre><code><!-- 幻灯片 -->
<div class='slideshow'>
<img src='https://picsum.photos/id/1015/1600/900' alt='Slideshow Image 1'>
<img src='https://picsum.photos/id/1016/1600/900' alt='Slideshow Image 2'>
<img src='https://picsum.photos/id/1018/1600/900' alt='Slideshow Image 3'>
<button class='prev'>&#10094;</button>
<button class='next'>&#10095;</button>
<div class='dots'>
<span class='dot'></span>
<span class='dot'></span>
<span class='dot'></span>
</div>
</div>
<!-- 图片列表 -->
<div class='image-list'>
<div class='item'>
<a href='#'>
<img src='https://picsum.photos/id/1015/300/200' alt='Image 1'>
<div class='title'>图片标题1</div>
</a>
</div>
<div class='item'>
<a href='#'>
<img src='https://picsum.photos/id/1016/300/200' alt='Image 2'>
<div class='title'>图片标题2</div>
</a>
</div>
<div class='item'>
<a href='#'>
<img src='https://picsum.photos/id/1018/300/200' alt='Image 3'>
<div class='title'>图片标题3</div>
</a>
</div>
</div>
<!-- 服务项目 -->
<div class='services'>
<div class='item'>
<a href='#'>
<img src='https://picsum.photos/id/1020/300/200' alt='Service 1'>
<div class='title'>服务项目1</div>
</a>
</div>
<div class='item'>
<a href='#'>
<img src='https://picsum.photos/id/1025/300/200' alt='Service 2'>
<div class='title'>服务项目2</div>
</a>
</div>
<div class='item'>
<a href='#'>
<img src='https://picsum.photos/id/1033/300/200' alt='Service 3'>
<div class='title'>服务项目3</div>
</a>
</div>
</div>
<!-- 新闻列表 -->
<div class='news'>
<div class='item'>
<a href='#'>
<div class='title'>新闻标题1</div>
<div class='date'>2021-01-01</div>
</a>
</div>
<div class='item'>
<a href='#'>
<div class='title'>新闻标题2</div>
<div class='date'>2021-01-02</div>
</a>
</div>
<div class='item'>
<a href='#'>
<div class='title'>新闻标题3</div>
<div class='date'>2021-01-03</div>
</a>
</div>
<div class='item'>
<a href='#'>
<div class='title'>新闻标题4</div>
<div class='date'>2021-01-04</div>
</a>
</div>
<div class='item'>
<a href='#'>
<div class='title'>新闻标题5</div>
<div class='date'>2021-01-05</div>
</a>
</div>
<div class='item'>
<a href='#'>
<div class='title'>新闻标题6</div>
<div class='date'>2021-01-06</div>
</a>
</div>
<div class='item'>
<a href='#'>
<div class='title'>新闻标题7</div>
<div class='date'>2021-01-07</div>
</a>
</div>
<div class='item'>
<a href='#'>
<div class='title'>新闻标题8</div>
<div class='date'>2021-01-08</div>
</a>
</div>
<div class='item'>
<a href='#'>
<div class='title'>新闻标题9</div>
<div class='date'>2021-01-09</div>
</a>
</div>
<div class='item'>
<a href='#'>
<div class='title'>新闻标题10</div>
<div class='date'>2021-01-10</div>
</a>
</div>
</div>
<!-- 公司简介 -->
<div class='about'>
<h2>公司简介</h2>
<p>这是一家专业从事手机网站开发的公司，拥有一支经验丰富、技术精湛的团队，致力于为客户提供高品质的服务。</p>
</div>
<!-- 管理团队 -->
<div class='team'>
<div class='item'>
<a href='#'>
<img src='https://picsum.photos/id/1027/300/200' alt='Team Member 1'>
<div class='name'>成员1</div>
</a>
</div>
<div class='item'>
<a href='#'>
<img src='https://picsum.photos/id/1031/300/200' alt='Team Member 2'>
<div class='name'>成员2</div>
</a>
</div>
<div class='item'>
<a href='#'>
<img src='https://picsum.photos/id/1035/300/200' alt='Team Member 3'>
<div class='name'>成员3</div>
</a>
</div>
</div>
<!-- 联系方式 -->
<div class='contact'>
<h2>联系方式</h2>
<p>联系电话：1234567890</p>
<p>电子邮件：info@example.com</p>
<p>地址：XX省XX市XX区XX路XX号</p>
<form>
<label for='name'>姓名：</label>
<input type='text' id='name' name='name' placeholder='请输入您的姓名'>
<label for='email'>邮箱：</label>
<input type='email' id='email' name='email' placeholder='请输入您的邮箱'>
<label for='message'>留言：</label>
<textarea id='message' name='message' placeholder='请输入您的留言'></textarea>
<button type='submit'>提交</button>
</form>
</div>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/mU6e 著作权归作者所有。请勿转载和采集!