Java最新【手把手】JavaWeb 入门级项目实战 -- 文章发布系统 （第二节），Redis如何实现高可扩展

最后

俗话说，好学者临池学书，不过网络时代，对于大多数的我们来说，我倒是觉得学习意识的觉醒很重要，这是开始学习的转折点，比如看到对自己方向发展有用的信息，先收藏一波是一波，比如如果你觉得我这篇文章ok，先点赞收藏一波。这样，等真的沉下心来学习，不至于被找资料分散了心神。慢慢来，先从点赞收藏做起，加油吧！

另外，给大家安排了一波学习面试资料：

以上就是本文的全部内容，希望对大家的面试有所帮助，祝大家早日升职加薪迎娶白富美走上人生巅峰！

本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录

需要这份系统化的资料的朋友，可以点击这里获取

.banner {

height: 380px ;

overflow: hidden ;

background: #ccc;

}

标题栏下面的的灰色区域就是我们打算放置banner的地方。

3.6.2 轮播图

我们就采用最基本的轮播图方式吧，为了把轮播图的制作讲清楚，我们单独开一个页面来说明。

加上banner区域

css：

• {

padding: 0;

margin: 0;

}

ul li {list-style: none;}

.banner {

height: 380px;

background: #ccc;

margin-top: 20px;

position: relative;

}

.banner .content {

width: 1060px;

height: 450px;

margin: 20px auto;

position: relative;

}

效果

我准备了五张图片，全部来自百度搜索。

• 
• 
• 
• 
• 

  因为是图片列表，所以我们习惯性的使用 ul li 来实现，当然，你使用div也可以，效果上都是差不多的，但是那样会令代码看起来不够清晰。

  如果我看别人的网页，发现p标签，我的第一反应，这应该是段落。当我发现 ul li ，那么我就知道这是一个列表。

  如果你全部用div，就达不到这个效果了。

  我们给每一张图片加一个高度和宽度。

  .banner ul li img {

  width: 1024px ;

  height: 380px ;

  }

  3.6.3 css样式优化

  这样子的话，所有的图片都会独占一行，所以，我们给每一张图片加一个浮动。

  你有没有发现，float，margin这些css样式用得特别频繁呢？

  是的，其实我们的css样式表中，充斥着很多这样的重复代码，那么有没有什么办法可以改善这种情况呢？

  答案肯定是有的，就是说，我能不能设置一种通用的class，比如float : left，我干脆专门写一个class类，谁想要左浮动，只要加上我这个class就行了。

  说干就干：

  .fl {float: left;}

  .fr {float: right;}

  fl 是 float : left 的简称。

  fr 是 float : right的简称。

  同时，为了容纳这么多图片在同一行展现，我们还需要给ul加一个非常大的宽度：

  .banner .content ul{

  width: 10000px;

  }

  给它10000px吧，肯定够了，毕竟只有5张图片。

  下一个问题，宽度有点太宽了，我们不需要把所有图片都显示出来。

  我们给banner加上一个 overflow: hidden;

  顺便把背景色去掉。

  .banner {

  height: 380px;

  margin-top: 20px;

  position: relative;

  overflow: hidden;

  }

  overflow: hidden;代表溢出隐藏。

  注意:现在我们需要给每一个li都加上fl：
• 
• 
• 
• 
• 
• 
• 

  3.6.4 左右按钮

  至于左右按钮，之前的项目中正好有这个素材，我就直接拿过来了。

  接下来，我们在content区域中，ul下面添加两个按钮，用来控制上一张和下一张。我这边就直接上代码了：

  css

  .btn_left,.btn_right{

  display: inline-block;

  width: 21px;

  height: 150px;

  background: url(banner_tb.png) no-repeat;

  position: absolute;

  left: -38px;

  top: 90px;

  }

  .btn_right{

  display: inline-block;

  width: 21px;

  height: 150px;

  background: url(banner_tb.png) no-repeat;

  background-position: -29px 0;

  position: absolute;

  left: 1041px;

  top: 90px;

  }

  总结

  面试前的“练手”还是很重要的，所以开始面试之前一定要准备好啊，不然也是耽搁面试官和自己的时间。

  我自己是刷了不少面试题的，所以在面试过程中才能够做到心中有数，基本上会清楚面试过程中会问到哪些知识点，高频题又有哪些，所以刷题是面试前期准备过程中非常重要的一点。

  面试题及解析总结

  

  大厂面试场景

  

  知识点总结

  

  本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录

  需要这份系统化的资料的朋友，可以点击这里获取

  e;

  left: 1041px;

  top: 90px;

  }

  总结

  面试前的“练手”还是很重要的，所以开始面试之前一定要准备好啊，不然也是耽搁面试官和自己的时间。

  我自己是刷了不少面试题的，所以在面试过程中才能够做到心中有数，基本上会清楚面试过程中会问到哪些知识点，高频题又有哪些，所以刷题是面试前期准备过程中非常重要的一点。

  面试题及解析总结

  [外链图片转存中…(img-JzcKEc2v-1715419757776)]

  大厂面试场景

  [外链图片转存中…(img-fYqHRMSF-1715419757776)]

  知识点总结

  [外链图片转存中…(img-juXiv2Se-1715419757776)]

  本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录

  需要这份系统化的资料的朋友，可以点击这里获取