手机端网站设计：导航链接样式优化
<!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;
}
.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;
}
</code></pre>
<p>/<em>图片列表样式</em>/
.image-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 20px 0;
}</p>
<p>.image-list .image-item {
width: 49%;
margin-bottom: 20px;
}</p>
<p>.image-list .image-item img {
max-width: 100%;
height: auto;
margin-bottom: 10px;
}</p>
<p>.image-list .image-item .title {
display: block;
background-color: #000;
color: #fff;
padding: 5px;
text-align: center;
font-size: 14px;
}</p>
<p>.image-list .image-item a {
text-decoration: none;
color: #000;
}</p>
<p>.image-list .image-item a:hover {
color: #f00;
}</p>
<pre><code> /*服务项目样式*/
.service-list {
display: flex;
justify-content: space-between;
margin: 20px 0;
}
.service-list .service-item {
width: 30%;
text-align: center;
}
.service-list .service-item img {
max-width: 100%;
height: auto;
}
.service-list .service-item .title {
font-size: 14px;
margin-top: 10px;
}
.service-list .service-item a {
text-decoration: none;
color: #000;
}
.service-list .service-item a:hover {
color: #f00;
}
/*新闻列表样式*/
.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 a {
text-decoration: none;
color: #000;
}
.news-list .news-item a:hover {
color: #f00;
}
/*公司简介样式*/
.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;
}
.team-list .team-item a {
text-decoration: none;
color: #000;
}
.team-list .team-item a: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 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 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 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 class='company-desc'>
<p>公司简介内容……</p>
</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 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/mVzB 著作权归作者所有。请勿转载和采集!