在设计个人网站的列表页面时，你可以遵循以下建议来创建一个清晰、易于浏览和导航的用户界面：
- 明确标题和导航
标题：使用清晰、简洁的标题来标识列表页面的内容，如“我的作品列表”、“文章列表”或“服务列表”。
导航：确保列表页面在导航菜单中有一个明确的链接，方便用户快速找到。 - 一致的布局和设计
列表项格式：为每个列表项使用一致的格式和设计，包括字体、颜色、图标等，以提高可读性和用户体验。
排序和筛选：如果适用，提供排序和筛选选项，让用户可以根据自己的需求来查看列表项。 - 列表项内容
缩略图和图标：如果可能的话，为每个列表项添加相关的缩略图或图标，以增加视觉效果和吸引力。
标题和描述：为每个列表项提供简短的标题和描述，以便用户快速了解其内容。
链接：确保每个列表项都有一个链接，用户可以点击以查看更多详情或进行进一步的操作。 - 交互元素
鼠标悬停效果：为列表项添加鼠标悬停效果，如变色或显示额外的信息，以增加交互性和用户体验。
响应式设计：确保列表页面在不同设备和屏幕尺寸上都能良好地显示，包括桌面电脑、平板电脑和手机等。 - 分页和加载更多
分页：如果列表项数量较多，使用分页来将内容分成多个页面，以便用户浏览。
加载更多：如果适用，提供“加载更多”按钮，允许用户在不刷新页面的情况下查看更多列表项。 - 更新和维护
定期更新：随着新内容或项目的添加，定期更新列表页面。
维护：确保列表中的链接和内容都是有效的，并及时修复任何错误或问题。
通过遵循这些建议，你可以创建一个清晰、易于浏览和导航的列表页面，帮助用户快速找到他们感兴趣的内容，并提升整体的用户体验。
<!doctype html>
<html class="no-js" lang="en">
<head>
<!-- programb -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<!--font-family-->
<link href="programb" rel="stylesheet">
<link href="programb" rel="stylesheet">
<link href="programb" rel="stylesheet">
<!-- TITLE OF SITE -->
<title></title>
<!-- for title img -->
<link rel="shortcut icon" type="image/icon" href="assets/images/logo/favicon.png"/>
<!--font-awesome.min.css-->
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<!--linear icon css-->
<link rel="stylesheet" href="https://programb.linearicons.com/free/1.0.0/icon-font.min.css">
<!--animate.css-->
<link rel="stylesheet" href="assets/css/animate.css">
<!--hover.css-->
<link rel="stylesheet" href="assets/css/hover-min.css">
<!--owl.carousel.css-->
<link rel="stylesheet" href="assets/css/owl.carousel.min.css">
<link href="assets/css/owl.theme.default.min.css" rel="stylesheet"/>
<!--vedio player css-->
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<!--bootstrap.min.css-->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- bootsnav -->
<link href="assets/css/bootsnav.css" rel="stylesheet"/>
<!--style.css-->
<link rel="stylesheet" href="assets/css/style.css">
<!--responsive.css-->
<link rel="stylesheet" href="assets/css/responsive.css">
</head>
<body>
<!--header start-->
<section class="header">
<div class="container">
<div class="header-left">
<ul class="pull-left">
<li>
<a href="#">
<i class="fa fa-phone" aria-hidden="true"></i> +992 563 542
</a>
</li><!--/li-->
<li>
<a href="#">
<i class="fa fa-envelope" aria-hidden="true"></i>info@mail.com
</a>
</li><!--/li-->
</ul><!--/ul-->
</div><!--/.header-left -->
<div class="header-right pull-right">
<ul>
<li class="reg">
<a href="#" data-toggle="modal" data-target=".bs-example-modal-sm">
Register
</a>
/
<a href="#" data-toggle="modal" data-target=".bs-example-modal-lg">
Log in
</a>
<!-- small modal -->
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">
<i class="fa fa-close"></i>
</span>
</button>
<h4 class="modal-title" id="mySmallModalLabel">
Sign In
</h4>
<form class="sm-frm" style="padding:25px">
<label>Name :</label>
<input type="text" class="form-control" placeholder="Enter Email">
<label>Passoward :</label>
<input type="text" class="form-control" placeholder="Enter Passoward">
<label><input type="checkbox" name="personality"> Remenber Me</label>
<button type="button" class="btn btn-default pull-right">Submit</button>
</form>
</div>
</div>
</div>
</div>
<!-- large modal -->
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">
<i class="fa fa-close"></i>
</span>
</button>
<h4 class="modal-title" id="myLargeModalLabel">Register</h4>
<form class="lg-frm" style="padding:25px">
<label>Name :</label>
<input type="text" class="form-control" placeholder="Enter Name">
<label>Email :</label>
<input type="text" class="form-control" placeholder="Enter Email">
<label>Passoward :</label>
<input type="text" class="form-control" placeholder="Enter Passoward">
<button type="button" class="btn btn-default pull-right">Submit</button>
</form>
</div>
</div>
</div>
</div>
</li><!--/li -->
<li>
<div class="social-icon">
<ul>
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
</ul><!--/.ul -->
</div><!--/.social-icon -->
</li><!--/li -->
</ul><!--/ul -->
</div><!--/.header-right -->
</div><!--/.container -->
</section><!--/.header-->
<!--header end-->
<!--menu start-->
<section id="menu">
<div class="container">
<div class="menubar">
<nav class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
<img src="assets/images/logo/logo.png" alt="logo">
</a>
</div><!--/.navbar-header -->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li ><a href="index.html">Home</a></li>
<li
><a href="about.html">About</a></li>
<li ><a href="service.html">Service</a></li>
<li ><a href="project.html">Project</a></li>
<li ><a href="team.html">Team</a></li>
<li class="active"><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
<li>
<a href="#">
<span class="lnr lnr-cart"></span>
</a>
</li>
<li class="search">
<form action="">
<input type="text" name="search" placeholder="Search....">
<a href="#">
<span class="lnr lnr-magnifier"></span>
</a>
</form>
</li>
</ul><!-- / ul -->
</div><!-- /.navbar-collapse -->
</nav><!--/nav -->
</div><!--/.menubar -->
</div><!-- /.container -->
</section><!--/#menu-->
<!--menu end-->
<!--about-part start-->
<section class="about-part blog-part">
<div class="container">
<div class="about-part-details text-center">
<h2>blog</h2>
<div class="about-part-content
">
<div class="breadcrumbs">
<div class="container">
<ol class="breadcrumb">
<li><a href="index.html">home</a><span>//</span></li>
<li><a href="blog.html">blog</a></li>
</ol><!--/.breadcrumb-->
</div><!--/.container-->
</div><!--/.breadcrumbs-->
</div><!--/.about-part-content-->
</div><!--/.about-part-details-->
</div><!--/.container-->
</section><!--/.about-part-->
<!--about-part end-->
<!--nwes start -->
<section class="news">
<div class="container">
<div class="news-details">
<div class="section-header text-center">
<h2>our latest news</h2>
<p>
Pallamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
</div><!--/.section-header-->
<div class="news-card">
<div class="row">
<div class="col-md-8">
<div class="blog-left">
<div class="col-sm-6">
<div class="single-news-box news-mb-20">
<div class="news-box-bg">
<img src="assets/images/blog/bl2.jpg" alt="blog image">
<div class="isotope-overlay">
<a href="blog_single.html">
<span class="lnr lnr-link"></span>
</a>
</div>
</div><!--/.team-box-bg-->
<div class="news-box-inner">
<h3>
<a href="blog_single.html">
The Pros and Cons of Starting an Online Consulting Business
</a>
</h3>
<p class="news-meta">
Posted By: <span>Mick Steven</span> // On <span>12th June, 2017</span>
</p>
<!-- <a href="#" class="learn-btn">
learn more
</a> -->
</div><!--/.news-box-inner-->
</div><!--/.single-news-box-->
<div class="single-news-box news-mb-20">
<div class="news-box-bg">
<img src="assets/images/blog/bl1.jpg" alt="blog image">
<div class="isotope-overlay">
<a href="blog_single.html">
<span class="lnr lnr-link"></span>
</a>
</div>
</div><!--/.team-box-bg-->
<div class="news-box-inner">
<h3>
<a href="blog_single.html">
The Pros and Cons of Starting an Online Consulting Business
</a>
</h3>
<p class="news-meta">
Posted By: <span>Mick Steven</span> // On <span>12th June, 2017</span>
</p>
<!-- <a href="#" class="learn-btn">
learn more
</a> -->
</div><!--/.news-box-inner-->
</div><!--/.single-news-box-->
<div class="single-news-box news-mb-20">
<div class="news-box-bg">
<img src="assets/images/blog/bl4.jpg" alt="blog image">
<div class="isotope-overlay">
<a href="https://www.programb.com" class="vedio-play-icon mfp-iframe">
<img src="assets/images/blog/play-icon.png" alt="play-icon">
</a>
</div>
</div><!--/.news-box-bg-->
<div class="news-box-inner">
<h3>
<a href="#">
The Pros and Cons of Starting an Online Consulting Business
</a>
</h3>
<p class="news-meta">
Posted By: <span>Mick Steven</span> // On <span>12th June, 2017</span>
</p>
<!-- <a href="#" class="learn-btn">
learn more
</a> -->
</div><!--/.news-box-inner-->
</div><!--/.single-news-box-->
</div><!--.col-->
<div class=" col-sm-6">
<div class="single-news-box news-mb-20">
<div class="news-box-bg">
<img src="assets/images/blog/bl3.jpg" alt="blog image">
<div class="isotope-overlay">
<a href="blog_single.html">
<span class="lnr lnr-link"></span>
</a>
</div>
</div><!--/.team-box-bg-->
<div class="news-box-inner">
<h3>
<a href="blog_single.html">
The Pros and Cons of Starting an Online Consulting Business
</a>
</h3>
<p class="news-meta">
Posted By: <span>Mick Steven</span> // On <span>12th June, 2017</span>
</p>
<!-- <a href="#" class="learn-btn">
learn more
</a> -->
</div><!--/.news-box-inner-->
</div><!--/.single-news-box-->
<div class="single-news-box news-mb-20">
<div class="news-box-bg">
<img src="assets/images/blog/bl5.jpg" alt="blog image">
<div class="isotope-overlay">
<a href="blog_single.html">
<span class="lnr lnr-link"></span>
</a>
</div>
</div><!--/.team-box-bg-->
<div class="news-box-inner">
<h3>
<a href="blog_single.html">
The Pros and Cons of Starting an Online Consulting Business
</a>
</h3>
<p class="news-meta">
Posted By: <span>Mick Steven</span> // On <span>12th June, 2017</span>
</p>
<!-- <a href="#" class="learn-btn">
learn more
</a> -->
</div><!--/.news-box-inner-->
</div><!--/.single-news-box-->
<div class="single-news-box news-mb-20">
<div class="news-box-bg">
<img src="assets/images/blog/bl6.jpg" alt="blog image">
<div class="isotope-overlay">
<a href="blog_single.html">
<span class="lnr lnr-link"></span>
</a>
</div>
</div><!--/.team-box-bg-->
<div class="news-box-inner">
<h3>
<a href="blog_single.html">
The Pros and Cons of Starting an Online Consulting Business
</a>
</h3>
<p class="news-meta">
Posted By: <span>Mick Steven</span> // On <span>12th June, 2017</span>
</p>
<!-- <a href="#" class="learn-btn">
learn more
</a> -->
</div><!--/.news-box-inner-->
</div><!--/.single-news-box-->
</div><!--.col-->
<div class="pagination-part text-center">
<ul class="pagination">
<li class="active"><a href="#">1 <span class="sr-only">(current</span></a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li>
<a href="#">
Next
<span class="fa fa-angle-right">
</span>
</a>
</li>
<li>
<a href="#" aria-label="Next">
</a>
</li>
</ul>
</div><!--/.pagination-part(»)-->
</div><!--/.blog-left-->
</div><!--/.col-->
<div class="col-md-4">
<div class="blog-right">
<div class="blogs-widget">
<form>
<input type="text" class="form-control" placeholder="Search">
</form><!--/.form-->
<div class="blog-search-icon">
<a href="#">
<span class="lnr lnr-magnifier">
</span>
</a>
</div><!--/.blog-search-icon-->
</div><!--/.blog-widget-->
<div class="blogs-widget">
<h2>categories</h2>
<div class="blog-categories-list">
<ul>
<li><a href="#">all</a></li>
<li><a href="#">busisness</a></li>
<li><a href="#">consultency</a></li>
<li><a href="#">corporate</a></li>
<li><a href="#">politics</a></li>
<li><a href="#">marketing</a></li>
<li><a href="#">lifestyle</a></li>
</ul>
</div><!--/.blog-categories-list-->
</div><!--/.blog-widget-->
<div class="blogs-widget">
<h2>related news</h2>
<div class="blog-related-news">
<div class="bl-txt wow fadeInUp" data-wow-duration=".7s" data-wow-delay=".7s">
<div class="bl-img">
<a href="#">
<img src="assets/images/blog/rp1.jpg" alt="image" />
</a>
</div><!--/.bl-img-->
<p>
<a href="#">
CFOs focused on retaining key talent
</a>
<span>25th Feb, 2017</span>
</p>
</div><!--/.bl-txt-->
<div class="bl-txt">
<div class="bl-img">
<a href="#">
<img src="assets/images/blog/rp2.jpg" alt="image" />
</a>
</div><!--/.bl-img-->
<p>
<a href="#">
Accenture acquires for the undisclosed sum
</a>
<span>25th Feb, 2017</span>
</p>
</div><!--/.bl-txt-->
<div class="bl-txt">
<div class="bl-img">
<a href="#">
<img src="assets/images/blog/rp3.jpg" alt="image" />
</a>
</div><!--/.bl-img-->
<p>
<a href="#">
Startup investments drop on venturing rises
</a>
<span>25th Feb, 2017</span>
</p>
</div><!--/.bl-txt-->
</div><!--/.blog-related-news-->
</div><!--/.blog-widget-->
<div class="blogs-widget">
<h2>Archives</h2>
<div class="blog-categories-list">
<ul>
<li>
<a href="#">
<i class="fa fa-angle-right" aria-hidden="true">
</i>
November 2017
</a>
</li>
<li>
<a href="#">
<i class="fa fa-angle-right" aria-hidden="true">
</i>
October 2017
</a>
</li>
<li>
<a href="#">
<i class="fa fa-angle-right" aria-hidden="true">
</i>
September 2017
</a>
</li>
<li>
<a href="#">
<i class="fa fa-angle-right" aria-hidden="true">
</i>
August 2017
</a>
</li>
<li>
<a href="#">
<i class="fa fa-angle-right" aria-hidden="true">
</i>
July 2017
</a>
</li>
<li>
<a href="#">
<i class="fa fa-angle-right" aria-hidden="true">
</i>
June 2017
</a>
</li>
</ul>
</div>
</div><!--/.blog-widget-->
<div class="blogs-widget
">
<h2>popular tags</h2>
<div class="blog-tags">
<button type="button" class="btn btn-default">busisness</button>
<button type="button" class="btn btn-default">consultency</button>
<button type="button" class="btn btn-default">market</button><br />
<button type="button" class="btn btn-default">sales</button>
<button type="button" class="btn btn-default">corporate</button>
<button type="button" class="btn btn-default">politics</button>
</div><!--/.blog-tags-->
</div><!--/.blog-widget-->
</div><!--/.blog-right-->
</div><!--/.col-->
</div><!--/.row-->
</div><!--/.news-card-->
</div><!--/news-details-->
</div><!--/.container-->
</section><!--/news-->
<!--news end-->
<!-- new-project start -->
<section class="new-project">
<div class="container">
<div class="new-project-details">
<div class="row">
<div class="col-md-10 col-sm-8">
<div class="single-new-project">
<h3>
Want to start a new project with us? Let’s Start!
</h3>
</div><!-- /.single-new-project-->
</div><!-- /.col-->
<div class="col-md-2 col-sm-4">
<div class="single-new-project">
<a href="#" class="slide-btn">
start now
</a>
</div><!-- /.single-new-project-->
</div><!-- /.col-->
</div><!-- /.row-->
</div><!-- /.new-project-details-->
</div><!-- /.container-->
</section><!-- /.new-project-->
<!-- new-project end -->
<!--hm-footer start-->
<section class="hm-footer">
<div class="container">
<div class="hm-footer-details">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="hm-footer-widget">
<div class="hm-foot-title ">
<div class="logo">
<a href="index.html">
<img src="assets/images/logo/logo.png" alt="logo" />
</a>
</div><!-- /.logo-->
</div><!--/.hm-foot-title-->
<div class="hm-foot-para">
<p>
Lorem ipsum dolor sit amt conetur adcing elit. Sed do eiusod tempor utslr. Ut laboris nisi ut aute irure dolor in rein velit esse.
</p>
</div><!--/.hm-foot-para-->
<div class="hm-foot-icon">
<ul>
<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li><!--/li-->
<li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li><!--/li-->
<li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li><!--/li-->
<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li><!--/li-->
</ul><!--/ul-->
</div><!--/.hm-foot-icon-->
</div><!--/.hm-footer-widget-->
</div><!--/.col-->
<div class=" col-md-2 col-sm-6 col-xs-12">
<div class="hm-footer-widget">
<div class="hm-foot-title">
<h4>Useful Links</h4>
</div><!--/.hm-foot-title-->
<div class="footer-menu ">
<ul class="">
<li><a href="index.html" >Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Service</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact us</a></li>
</ul>
</div><!-- /.footer-menu-->
</div><!--/.hm-footer-widget-->
</div><!--/.col-->
<div class=" col-md-3 col-sm-6 col-xs-12">
<div class="hm-footer-widget">
<div class="hm-foot-title">
<h4>from the news</h4>
</div><!--/.hm-foot-title-->
<div class="hm-para-news">
<a href="blog_single.html">
The Pros and Cons of Starting an Online Business.
</a>
<span>12th June 2017</span>
</div><!--/.hm-para-news-->
<div class="footer-line">
<div class="border-bottom"></div>
</div>
<div class="hm-para-news">
<a href="blog_single.html">
The Pros and Cons of Starting an Online Business.
</a>
<span>12th June 2017</span>
</div><!--/.hm-para-news-->
</div><!--/.hm-footer-widget-->
</div><!--/.col-->
<div class=" col-md-3 col-sm-6 col-xs-12">
<div class="hm-footer-widget">
<div class="hm-foot-title">
<h4> Our Newsletter</h4>
</div><!--/.hm-foot-title-->
<div class="hm-foot-para">
<p class="para-news">
Subscribe to our newsletter to get the latest News and offers..
</p>
</div><!--/.hm-foot-para-->
<div class="hm-foot-email">
<div class="foot-email-box">
<input type="text" class="form-control" placeholder="Email Address">
</div><!--/.foot-email-box-->
<div class="foot-email-subscribe">
<button type="button" >go</button>
</div><!--/.foot-email-icon-->
</div><!--/.hm-foot-email-->
</div><!--/.hm-footer-widget-->
</div><!--/.col-->
</div><!--/.row-->
</div><!--/.hm-footer-details-->
</div><!--/.container-->
</section><!--/.hm-footer-details-->
<!--hm-footer end-->
<!-- footer-copyright start -->
<footer class="footer-copyright">
<div class="container">
<div class="row">
<div class="col-sm-7">
<div class="foot-copyright pull-left">
<p>
Copyright © 2019.Company name All rights reserved.<a target="_blank" href="http://www.programb.com/">网页模板</a></p>
</div><!--/.foot-copyright-->
</div><!--/.col-->
<div class="col-sm-5">
<div class="foot-menu pull-right
">
<ul>
<li ><a href="#">legal</a></li>
<li ><a href="#">sitemap</a></li>
<li ><a href="#">privacy policy</a></li>
</ul>
</div><!-- /.foot-menu-->
</div><!--/.col-->
</div><!--/.row-->
<div id="scroll-Top">
<i class="fa fa-angle-double-up return-to-top" id="scroll-top" data-toggle="tooltip" data-placement="top" title="" data-original-title="Back to Top" aria-hidden="true"></i>
</div><!--/.scroll-Top-->
</div><!-- /.container-->
</footer><!-- /.footer-copyright-->
<!-- footer-copyright end -->
<!-- jaquery link -->
<script src="assets/js/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!--modernizr.min.js-->
<script type="text/javascript" src="https://programb.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<!--bootstrap.min.js-->
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<!-- bootsnav js -->
<script src="assets/js/bootsnav.js"></script>
<!-- for manu -->
<script src="assets/js/jquery.hc-sticky.min.js" type="text/javascript"></script>
<!-- vedio player js -->
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<script type="text/javascript" src="https://programb.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<!--owl.carousel.js-->
<script type="text/javascript" src="assets/js/owl.carousel.min.js"></script>
<!-- counter js -->
<script src="assets/js/jquery.counterup.min.js"></script>
<script src="assets/js/waypoints.min.js"></script>
<!--Custom JS-->
<script type="text/javascript" src="assets/js/jak-menusearch.js"></script>
<script type="text/javascript" src="assets/js/custom.js"></script>
</body>
</html>
5563
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
