做一个简单的上下翻页的html

最新推荐文章于 2024-04-22 10:23:43 发布

master_ning

最新推荐文章于 2024-04-22 10:23:43 发布

阅读量1w

点赞数 5

分类专栏： html 文章标签： html 内联块

本文链接：https://blog.csdn.net/master_ning/article/details/79673643

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这样的页面，在每个购物的网站都有，大家有没有想过是怎么做出来的呢，今天就给大家揭秘一下：

 
  <!DOCTYPE html 
  > 
 
 
  < 
  html 
  lang= 
  "en" 
  > 
 

 
  < 
  head 
  > 
 
 
  < 
  meta 
  charset= 
  "UTF-8" 
  > 
 
 
  < 
  meta 
  name= 
  "viewport" 
  content= 
  "width=device-width, initial-scale=1.0" 
  > 
 
 
  < 
  meta 
  http-equiv= 
  "X-UA-Compatible" 
  content= 
  "ie=edge" 
  > 
 
 
  < 
  title 
  >Document 
  </ 
  title 
  > 
 
 
  < 
  style 
  > 
 
 
  .con { 
 
 
  width: 
  960px; 
 
 
  height: 
  40px; 
 
 
  border: 
  1px 
  solid 
  #d1d1d1; 
 
 
  list-style: 
  none; 
 
 
  margin: 
  0; 
 
 
  padding: 
  0; 
 
 
  text-align: 
  center; 
 
 
  font-size: 
  0; 
 

   } 
 

 
  .con li { 
 
 
  margin: 
  7px 
  5px 
  0; 
 
 
  /*把li转为内联块 排成一排*/ 
 
 
  display: 
  inline-block; 
 

   } 
 
 
  /*把大小的改变加到a上 
 
 
   一般超链接的点击范围要大一些 
 
 
   */ 
 

 
  .con a { 
 
 
  /*转换为内联块 才可以增加a标签的大小*/ 
 
 
  display: 
  inline-block; 
 
 
  background: 
  gold; 
 
 
  /*14 12*/ 
 
 
  padding: 
  7px 
  10px; 
 
 
  font-size: 
  12px; 
 
 
  /*把行高设置和文字一样 方便计算a标签的高度*/ 
 
 
  line-height: 
  12px; 
 
 
  color: 
  #393c35; 
 
 
  text-decoration: 
  none; 
 

   } 
 

 
  .con a:hover { 
 
 
  color: 
  red; 
 
 
  background-color: 
  blue; 
 

   } 
 

 
  .con span { 
 
 
  font-size: 
  12px; 
 

   } 
 
 
  < 
  / 
  style 
  > 
 
 
  </ 
  head 
  > 
 

 
  < 
  body 
  > 
 


 
  < 
  ul 
  class= 
  "con" 
  > 
 
 
  < 
  li 
  > 
 
 
  < 
  a 
  href= 
  "" 
  >上一页 
  </ 
  a 
  > 
 
 
  </ 
  li 
  > 
 
 
  < 
  li 
  >< 
  a 
  href= 
  "" 
  >1 
  </ 
  a 
  ></ 
  li 
  > 
 
 
  < 
  li 
  >< 
  a 
  href= 
  "" 
  >2 
  </ 
  a 
  ></ 
  li 
  > 
 
 
  < 
  li 
  >< 
  a 
  href= 
  "" 
  >3 
  </ 
  a 
  ></ 
  li 
  > 
 
 
  < 
  li 
  >< 
  a 
  href= 
  "" 
  >4 
  </ 
  a 
  ></ 
  li 
  > 
 
 
  < 
  li 
  >< 
  span 
  >... 
  </ 
  span 
  ></ 
  li 
  > 
 
 
  < 
  li 
  >< 
  a 
  href= 
  "" 
  >17 
  </ 
  a 
  ></ 
  li 
  > 
 
 
  < 
  li 
  >< 
  a 
  href= 
  "" 
  >18 
  </ 
  a 
  ></ 
  li 
  > 
 
 
  < 
  li 
  >< 
  a 
  href= 
  "" 
  >19 
  </ 
  a 
  ></ 
  li 
  > 
 
 
  < 
  li 
  >< 
  a 
  href= 
  "" 
  >20 
  </ 
  a 
  ></ 
  li 
  > 
 
 
  < 
  li 
  >< 
  a 
  href= 
  "" 
  >下一页 
  </ 
  a 
  ></ 
  li 
  > 
 
 
  </ 
  ul 
  > 
 


 
  </ 
  body 
  > 
 

 
  </ 
  html 
  > 
 

里面有详细的备注，大家可以仔细的看看，练习一下

master_ning

关注

5
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
做一个简单的上下翻页的html

这样的页面，在每个购物的网站都有，大家有没有想过是怎么做出来的呢，今天就给大家揭秘一下：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-wid
复制链接

扫一扫