手机端网站导航条样式代码 - 完整示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>手机端网站</title>
<style>
/*导航条样式*/
.nav-bar {
background-color: #333;
color: #fff;
display: flex;
justify-content: space-between;
padding: 10px;
}
<pre><code> /*导航条链接样式*/
.nav-link {
color: #fff;
margin: 0 10px;
text-decoration: none;
font-size: 18px;
font-weight: bold;
}
.nav-link:hover {
color: #f00;
}
/*幻灯片样式*/
.slider-container {
position: relative;
}
.slider-container img {
max-width: 100%;
height: auto;
}
.slider-container .slider-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
text-align: center;
line-height: 50px;
cursor: pointer;
}
.slider-container .slider-btn.prev {
left: 0;
}
.slider-container .slider-btn.next {
right: 0;
}
/*图片列表样式*/
.image-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 20px 0;
}
.image-list .image-item {
width: 49%;
margin-bottom: 20px;
}
.image-list .image-item img {
max-width: 100%;
height: auto;
margin-bottom: 10px;
}
.image-list .image-item .title {
display: block;
background-color: #000;
color: #fff;
padding: 5px;
text-align: center;
font-size: 14px;
}
/*服务项目样式*/
.service-list {
display: flex;
justify-content: space-between;
margin: 20px 0;
}
.service-list .service-item {
width: 30%;
text-align: center;
}
.service-list .service-item a {
display: block;
text-decoration: none;
color: #333;
}
.service-list .service-item a:hover {
color: #f00;
}
.service-list .service-item img {
max-width: 100%;
height: auto;
}
.service-list .service-item .title {
font-size: 14px;
margin-top: 10px;
}
/*新闻列表样式*/
.news-list {
margin: 20px 0;
}
.news-list .news-item {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.news-list .news-item .title {
font-size: 14px;
width: 70%;
}
.news-list .news-item .date {
font-size: 14px;
width: 30%;
text-align: right;
}
.news-list .news-item .title {
font-size: 14px;
width: 70%;
text-decoration: none;
color: #333;
}
.news-list .news-item .title:hover {
color: #f00;
}
.news-list .news-item .date {
font-size: 14px;
width: 30%;
text-align: right;
}
/*公司简介样式*/
.company-desc {
margin: 20px 0;
text-align: justify;
}
/*管理团队样式*/
.team-list {
display: flex;
justify-content: space-between;
margin: 20px 0;
}
.team-list .team-item {
width: 30%;
text-align: center;
}
.team-list .team-item img {
max-width: 100%;
height: auto;
}
.team-list .team-item .name {
font-size: 14px;
margin-top: 10px;
text-decoration: none;
color: #333;
}
.team-list .team-item .name:hover {
color: #f00;
}
/*联系方式样式*/
.contact-info {
margin: 20px 0;
text-align: center;
}
.contact-info p {
font-size: 14px;
margin-bottom: 10px;
}
</style>
</code></pre>
</head>
<body>
<!--导航条-->
<div class="nav-bar">
<div>Logo</div>
<div>
<a href="#" class="nav-link">首页</a>
<a href="#" class="nav-link">产品</a>
<a href="#" class="nav-link">新闻</a>
<a href="#" class="nav-link">关于我们</a>
<a href="#" class="nav-link">联系我们</a>
</div>
</div>
<pre><code><!--幻灯片-->
<div class="slider-container">
<img src="https://picsum.photos/800/400" alt="">
<div class="slider-btn prev">&lt;</div>
<div class="slider-btn next">&gt;</div>
</div>
<!--图片列表-->
<div style="font-size: 18px; font-weight: bold; width: 100%; height: 40px; background-color: #ccc; text-align: center; line-height: 40px;">栏目标题</div>
<div class="image-list">
<div class="image-item">
<a href="#">
<img src="https://picsum.photos/300/200" alt="">
<span class="title">图片标题</span>
</a>
</div>
<div class="image-item">
<a href="#">
<img src="https://picsum.photos/300/200" alt="">
<span class="title">图片标题</span>
</a>
</div>
<div class="image-item">
<a href="#">
<img src="https://picsum.photos/300/200" alt="">
<span class="title">图片标题</span>
</a>
</div>
<div class="image-item">
<a href="#">
<img src="https://picsum.photos/300/200" alt="">
<span class="title">图片标题</span>
</a>
</div>
<div class="image-item">
<a href="#">
<img src="https://picsum.photos/300/200" alt="">
<span class="title">图片标题</span>
</a>
</div>
<div class="image-item">
<a href="#">
<img src="https://picsum.photos/300/200" alt="">
<span class="title">图片标题</span>
</a>
</div>
</div>
<!--服务项目-->
<div style="font-size: 18px; font-weight: bold; width: 100%; height: 40px; background-color: #ccc; text-align: center; line-height: 40px;">栏目标题</div>
<div class="service-list">
<div class="service-item">
<a href="#">
<img src="https://picsum.photos/200/200" alt="">
<div class="title">服务项目1</div>
</a>
</div>
<div class="service-item">
<a href="#">
<img src="https://picsum.photos/200/200" alt="">
<div class="title">服务项目2</div>
</a>
</div>
<div class="service-item">
<a href="#">
<img src="https://picsum.photos/200/200" alt="">
<div class="title">服务项目3</div>
</a>
</div>
</div>
<!--新闻列表-->
<div style="font-size: 18px; font-weight: bold; width: 100%; height: 40px; background-color: #ccc; text-align: center; line-height: 40px;">栏目标题</div>
<div class="news-list">
<div class="news-item">
<a href="#" class="title">新闻标题1</a>
<div class="date">2020-01-01</div>
</div>
<div class="news-item">
<a href="#" class="title">新闻标题2</a>
<div class="date">2020-01-02</div>
</div>
<div class="news-item">
<a href="#" class="title">新闻标题3</a>
<div class="date">2020-01-03</div>
</div>
<div class="news-item">
<a href="#" class="title">新闻标题4</a>
<div class="date">2020-01-04</div>
</div>
<div class="news-item">
<a href="#" class="title">新闻标题5</a>
<div class="date">2020-01-05</div>
</div>
<div class="news-item">
<a href="#" class="title">新闻标题6</a>
<div class="date">2020-01-06</div>
</div>
<div class="news-item">
<a href="#" class="title">新闻标题7</a>
<div class="date">2020-01-07</div>
</div>
<div class="news-item">
<a href="#" class="title">新闻标题8</a>
<div class="date">2020-01-08</div>
</div>
<div class="news-item">
<a href="#" class="title">新闻标题9</a>
<div class="date">2020-01-09</div>
</div>
<div class="news-item">
<a href="#" class="title">新闻标题10</a>
<div class="date">2020-01-10</div>
</div>
</div>
<!--公司简介-->
<div style="font-size: 18px; font-weight: bold; width: 100%; height: 40px; background-color: #ccc; text-align: center; line-height: 40px;">栏目标题</div>
<div class="company-desc">
<p>公司简介内容……</p>
</div>
<!--管理团队-->
<div style="font-size: 18px; font-weight: bold; width: 100%; height: 40px; background-color: #ccc; text-align: center; line-height: 40px;">栏目标题</div>
<div class="team-list">
<div class="team-item">
<a href="#">
<img src="https://picsum.photos/200/200" alt="">
<div class="name">姓名1</div>
</a>
</div>
<div class="team-item">
<a href="#">
<img src="https://picsum.photos/200/200" alt="">
<div class="name">姓名2</div>
</a>
</div>
<div class="team-item">
<a href="#">
<img src="https://picsum.photos/200/200" alt="">
<div class="name">姓名3</div>
</a>
</div>
</div>
<!--联系方式-->
<div style="font-size: 18px; font-weight: bold; width: 100%; height: 40px; background-color: #ccc; text-align: center; line-height: 40px;">栏目标题</div>
<div class="contact-info">
<p>联系电话：123456789</p>
<p>电子邮箱：abc@xxx.com</p>
<p>公司地址：XXX街道XXX号</p>
</div>
<script>
//幻灯片切换
var sliderIndex = 0;
var sliderCount = document.querySelectorAll('.slider-container img').length;
document.querySelector('.slider-container .prev').addEventListener('click', function() {
sliderIndex--;
if (sliderIndex < 0) {
sliderIndex = sliderCount - 1;
}
document.querySelector('.slider-container img').src = 'https://picsum.photos/800/400?random=' + sliderIndex;
});
document.querySelector('.slider-container .next').addEventListener('click', function() {
sliderIndex++;
if (sliderIndex >= sliderCount) {
sliderIndex = 0;
}
document.querySelector('.slider-container img').src = 'https://picsum.photos/800/400?random=' + sliderIndex;
});
//幻灯片自动播放
setInterval(function() {
sliderIndex++;
if (sliderIndex >= sliderCount) {
sliderIndex = 0;
}
document.querySelector('.slider-container img').src = 'https://picsum.photos/800/400?random=' + sliderIndex;
}, 5000);
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/mWXc 著作权归作者所有。请勿转载和采集!