手机网站模板 - 响应式设计，包含导航，幻灯片，图片列表，服务项目，新闻列表，公司简介，管理团队，联系方式
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>手机网站模板 - 响应式设计，包含导航，幻灯片，图片列表，服务项目，新闻列表，公司简介，管理团队，联系方式</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
max-width: 960px;
margin: 0 auto;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
}
nav {
background-color: #eee;
padding: 10px;
overflow: hidden;
}
nav a {
display: block;
float: left;
padding: 10px;
color: #333;
text-decoration: none;
}
nav a:hover {
background-color: #ddd;
}
.slider {
position: relative;
height: 300px;
overflow: hidden;
margin: 10px 0;
}
.slider img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slider img.active {
opacity: 1;
}
.slider .controls {
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
z-index: 1;
}
.slider .controls a {
display: block;
width: 30px;
height: 30px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 30px;
border-radius: 50%;
margin-bottom: 10px;
text-decoration: none;
opacity: 0.5;
transition: opacity 0.5s ease-in-out;
}
.slider .controls a:hover {
opacity: 1;
}
.slider .controls a.prev {
float: left;
}
.slider .controls a.next {
float: right;
}
.image-list {
margin: 10px 0;
padding: 10px;
background-color: #333;
color: #fff;
}
.image-list ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.image-list li {
width: 30%;
margin-bottom: 10px;
}
.image-list li a {
display: block;
background-color: #fff;
color: #333;
padding: 10px;
text-align: center;
text-decoration: none;
}
.image-list li a:hover {
background-color: #ddd;
}
.services {
margin: 10px 0;
display: flex;
justify-content: space-between;
}
.services .item {
width: 30%;
background-color: #eee;
padding: 10px;
text-align: center;
}
.services .item:hover {
background-color: #ddd;
}
.news-list {
margin: 10px 0;
padding: 10px;
background-color: #eee;
}
.news-list ul {
list-style: none;
margin: 0;
padding: 0;
}
.news-list li {
margin-bottom: 10px;
border-bottom: 1px solid #ccc;
padding-bottom: 10px;
}
.news-list li:last-child {
border-bottom: none;
}
.news-list li a {
color: #333;
text-decoration: none;
}
.news-list li a:hover {
color: #000;
text-decoration: underline;
}
.company-info {
margin: 10px 0;
padding: 10px;
background-color: #eee;
}
.team {
margin: 10px 0;
display: flex;
justify-content: space-between;
}
.team .member {
width: 30%;
background-color: #eee;
padding: 10px;
text-align: center;
}
.team .member:hover {
background-color: #ddd;
}
.contact {
margin: 10px 0;
padding: 10px;
background-color: #eee;
}
</style>
</head>
<body>
<header>
<div class='container'>
<h1>手机网站模板</h1>
</div>
</header>
<nav>
<div class='container'>
<a href='#'>首页</a>
<a href='#'>关于我们</a>
<a href='#'>服务项目</a>
<a href='#'>新闻动态</a>
<a href='#'>联系我们</a>
</div>
</nav>
<div class='container'>
<div class='slider'>
<img src='https://via.placeholder.com/960x300?text=Slide+1' class='active'>
<img src='https://via.placeholder.com/960x300?text=Slide+2'>
<img src='https://via.placeholder.com/960x300?text=Slide+3'>
<div class='controls'>
<a href='#' class='prev'>❮</a>
<a href='#' class='next'>❯</a>
</div>
</div>
<div class='image-list'>
<ul>
<li><a href='#'><img src='https://via.placeholder.com/300x200?text=Image+1' alt='Image 1'><span>Image 1</span></a></li>
<li><a href='#'><img src='https://via.placeholder.com/300x200?text=Image+2' alt='Image 2'><span>Image 2</span></a></li>
<li><a href='#'><img src='https://via.placeholder.com/300x200?text=Image+3' alt='Image 3'><span>Image 3</span></a></li>
<li><a href='#'><img src='https://via.placeholder.com/300x200?text=Image+4' alt='Image 4'><span>Image 4</span></a></li>
<li><a href='#'><img src='https://via.placeholder.com/300x200?text=Image+5' alt='Image 5'><span>Image 5</span></a></li>
<li><a href='#'><img src='https://via.placeholder.com/300x200?text=Image+6' alt='Image 6'><span>Image 6</span></a></li>
</ul>
</div>
<div class='services'>
<div class='item'>
<h2>服务项目 1</h2>
<p>服务项目 1 的描述</p>
</div>
<div class='item'>
<h2>服务项目 2</h2>
<p>服务项目 2 的描述</p>
</div>
<div class='item'>
<h2>服务项目 3</h2>
<p>服务项目 3 的描述</p>
</div>
</div>
<div class='news-list'>
<ul>
<li><a href='#'>新闻标题 1</a> <span>2021-01-01</span></li>
<li><a href='#'>新闻标题 2</a> <span>2021-01-02</span></li>
<li><a href='#'>新闻标题 3</a> <span>2021-01-03</span></li>
<li><a href='#'>新闻标题 4</a> <span>2021-01-04</span></li>
<li><a href='#'>新闻标题 5</a> <span>2021-01-05</span></li>
<li><a href='#'>新闻标题 6</a> <span>2021-01-06</span></li>
<li><a href='#'>新闻标题 7</a> <span>2021-01-07</span></li>
<li><a href='#'>新闻标题 8</a> <span>2021-01-08</span></li>
<li><a href='#'>新闻标题 9</a> <span>2021-01-09</span></li>
<li><a href='#'>新闻标题 10</a> <span>2021-01-10</span></li>
</ul>
</div>
<div class='company-info'>
<h2>公司简介</h2>
<p>我们是一家专业的手机网站开发公司，致力于为客户提供优质的服务。</p>
</div>
<div class='team'>
<div class='member'>
<img src='https://via.placeholder.com/150x150?text=Member+1' alt='Member 1'>
<h3>成员 1</h3>
<p>成员 1 的简介</p>
</div>
<div class='member'>
<img src='https://via.placeholder.com/150x150?text=Member+2' alt='Member 2'>
<h3>成员 2</h3>
<p>成员 2 的简介</p>
</div>
<div class='member'>
<img src='https://via.placeholder.com/150x150?text=Member+3' alt='Member 3'>
<h3>成员 3</h3>
<p>成员 3 的简介</p>
</div>
</div>
<div class='contact'>
<h2>联系方式</h2>
<p>电话：123456789</p>
<p>邮箱：info@mobile.com</p>
<p>地址：北京市朝阳区</p>
</div>
</div>
<script>
var sliderIndex = 0;
var sliderImages = document.querySelectorAll('.slider img');
var sliderControls = document.querySelectorAll('.slider .controls a');
var sliderTimer = setInterval(sliderNext, 3000);
<pre><code> function sliderNext() {
sliderImages[sliderIndex].classList.remove('active');
sliderIndex = (sliderIndex + 1) % sliderImages.length;
sliderImages[sliderIndex].classList.add('active');
}
function sliderPrev() {
sliderImages[sliderIndex].classList.remove('active');
sliderIndex = (sliderIndex - 1 + sliderImages.length) % sliderImages.length;
sliderImages[sliderIndex].classList.add('active');
}
for (var i = 0; i < sliderControls.length; i++) {
if (sliderControls[i].classList.contains('prev')) {
sliderControls[i].addEventListener('click', function(e) {
e.preventDefault();
sliderPrev();
});
} else if (sliderControls[i].classList.contains('next')) {
sliderControls[i].addEventListener('click', function(e) {
e.preventDefault();
sliderNext();
});
}
}
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/mUeu 著作权归作者所有。请勿转载和采集!