手机网站模板 - 响应式设计，包含导航、幻灯片、图片列表等功能
<!DOCTYPE html>
<html>
<head>
<title>手机网站模板 - 响应式设计，包含导航、幻灯片、图片列表等功能</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body{
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
/*导航条样式*/
.navbar{
background-color: #333;
overflow: hidden;
}
.navbar a{
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover{
background-color: #ddd;
color: black;
}
/*幻灯片样式*/
.slideshow{
margin-top: 20px;
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
}
.slideshow img{
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
width: 100%;
height: 300px;
}
.slideshow img.active{
opacity: 1;
}
/*图片列表样式*/
.images{
margin-top: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.image{
margin-bottom: 20px;
width: 30%;
position: relative;
}
.image img{
width: 100%;
height: auto;
}
.image .title{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: #000;
color: #fff;
padding: 5px;
font-size: 14px;
opacity: 0.8;
}
/*服务项目样式*/
.services{
margin-top: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.service{
text-align: center;
width: 30%;
background-color: #eee;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
}
.service img{
width: 80%;
height: auto;
}
/*新闻列表样式*/
.news{
margin-top: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.news-item{
margin-bottom: 20px;
width: 48%;
border: 1px solid #ddd;
padding: 10px;
border-radius: 5px;
}
.news-item h3{
margin: 0;
font-size: 18px;
}
.news-item p{
margin: 10px 0;
font-size: 14px;
color: #888;
}
/*公司简介样式*/
.company{
margin-top: 20px;
font-size: 16px;
line-height: 1.5;
}
/*管理团队样式*/
.team{
margin-top: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.member{
text-align: center;
width: 30%;
}
.member img{
width: 80%;
height: auto;
border-radius: 50%;
}
.member h4{
margin: 10px 0;
font-size: 18px;
}
.member p{
margin: 0;
font-size: 14px;
color: #888;
}
/*联系方式样式*/
.contact{
margin-top: 20px;
font-size: 16px;
line-height: 1.5;
}
</style>
</head>
<body>
<!--导航条-->
<div class="navbar">
<a href="#">首页</a>
<a href="#">产品</a>
<a href="#">新闻</a>
<a href="#">关于我们</a>
<a href="#">联系我们</a>
</div>
<pre><code><!--幻灯片-->
<div class="slideshow">
<img class="active" src="https://via.placeholder.com/640x300.png?text=Slide+1">
<img src="https://via.placeholder.com/640x300.png?text=Slide+2">
<img src="https://via.placeholder.com/640x300.png?text=Slide+3">
</div>
<!--图片列表-->
<div class="images">
<div class="image">
<a href="#"><img src="https://via.placeholder.com/200x200.png?text=Image+1"></a>
<div class="title">图片1</div>
</div>
<div class="image">
<a href="#"><img src="https://via.placeholder.com/200x200.png?text=Image+2"></a>
<div class="title">图片2</div>
</div>
<div class="image">
<a href="#"><img src="https://via.placeholder.com/200x200.png?text=Image+3"></a>
<div class="title">图片3</div>
</div>
<div class="image">
<a href="#"><img src="https://via.placeholder.com/200x200.png?text=Image+4"></a>
<div class="title">图片4</div>
</div>
<div class="image">
<a href="#"><img src="https://via.placeholder.com/200x200.png?text=Image+5"></a>
<div class="title">图片5</div>
</div>
<div class="image">
<a href="#"><img src="https://via.placeholder.com/200x200.png?text=Image+6"></a>
<div class="title">图片6</div>
</div>
</div>
<!--服务项目-->
<div class="services">
<div class="service">
<a href="#"><img src="https://via.placeholder.com/200x100.png?text=Service+1"></a>
<p>服务项目1</p>
</div>
<div class="service">
<a href="#"><img src="https://via.placeholder.com/200x100.png?text=Service+2"></a>
<p>服务项目2</p>
</div>
<div class="service">
<a href="#"><img src="https://via.placeholder.com/200x100.png?text=Service+3"></a>
<p>服务项目3</p>
</div>
</div>
<!--新闻列表-->
<div class="news">
<div class="news-item">
<h3><a href="#">新闻标题1</a></h3>
<p>2021-01-01</p>
<p>新闻内容1</p>
</div>
<div class="news-item">
<h3><a href="#">新闻标题2</a></h3>
<p>2021-01-02</p>
<p>新闻内容2</p>
</div>
<div class="news-item">
<h3><a href="#">新闻标题3</a></h3>
<p>2021-01-03</p>
<p>新闻内容3</p>
</div>
<div class="news-item">
<h3><a href="#">新闻标题4</a></h3>
<p>2021-01-04</p>
<p>新闻内容4</p>
</div>
<div class="news-item">
<h3><a href="#">新闻标题5</a></h3>
<p>2021-01-05</p>
<p>新闻内容5</p>
</div>
<div class="news-item">
<h3><a href="#">新闻标题6</a></h3>
<p>2021-01-06</p>
<p>新闻内容6</p>
</div>
<div class="news-item">
<h3><a href="#">新闻标题7</a></h3>
<p>2021-01-07</p>
<p>新闻内容7</p>
</div>
<div class="news-item">
<h3><a href="#">新闻标题8</a></h3>
<p>2021-01-08</p>
<p>新闻内容8</p>
</div>
<div class="news-item">
<h3><a href="#">新闻标题9</a></h3>
<p>2021-01-09</p>
<p>新闻内容9</p>
</div>
<div class="news-item">
<h3><a href="#">新闻标题10</a></h3>
<p>2021-01-10</p>
<p>新闻内容10</p>
</div>
</div>
<!--公司简介-->
<div class="company">
<p>公司简介内容</p>
</div>
<!--管理团队-->
<div class="team">
<div class="member">
<img src="https://via.placeholder.com/150x150.png?text=Member+1">
<h4>成员1</h4>
<p>职位1</p>
</div>
<div class="member">
<img src="https://via.placeholder.com/150x150.png?text=Member+2">
<h4>成员2</h4>
<p>职位2</p>
</div>
<div class="member">
<img src="https://via.placeholder.com/150x150.png?text=Member+3">
<h4>成员3</h4>
<p>职位3</p>
</div>
</div>
<!--联系方式-->
<div class="contact">
<p>联系方式内容</p>
</div>
<!--幻灯片自动播放-->
<script type="text/javascript">
var index = 0;
var slides = document.querySelectorAll('.slideshow img');
setInterval(function(){
slides[index].classList.remove('active');
index = (index + 1) % slides.length;
slides[index].classList.add('active');
}, 3000);
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/mUYU 著作权归作者所有。请勿转载和采集!