模仿“少数派”某页面——原图
原图
作业效果图
作业效果图
代码展示
- bean-Article类
package com.niit.week2.bean;
import lombok.Data;
/**
* @author jzy
*/
@Data
public class Article {
private String avatar;
private String name;
private String time;
private String title;
private String introduction;
private String img;
private int love;
private int comment;
public Article() {
}
public Article(String avatar, String name, String time, String title, String introduction, String img, int love, int comment) {
this.avatar = avatar;
this.name = name;
this.time = time;
this.title = title;
this.introduction = introduction;
this.img = img;
this.love = love;
this.comment = comment;
}
}
- bean-Commend类
package com.niit.week2.bean;
import lombok.Data;
@Data
public class Commend {
private String commendImg;
private String commendTitle;
public Commend() {
}
public Commend(String commendImg, String commendTitle) {
this.commendImg = commendImg;
this.commendTitle = commendTitle;
}
}
- ArticleDAO类
package com.niit.week2.dao;
import com.niit.week2.bean.Article;
import org.springframework.context.annotation.Configuration;
import java.util.Arrays;
import java.util.List;
/**
* @author jzy
*/
@Configuration
public class ArticleDAO {
public List<Article> getArticles(){
Article[] articles = {
new Article("https://cdn.sspai.com/user/136_1488222798404.jpg?imageMogr2/quality/95/thumbnail/!80x80r/gravity/Center/crop/80x80",
"文刀漢三",
"09月01日",
"发布会临近，换上这 38 张苹果 Logo 壁纸提前充值信仰",
"如果你没有接触过设计，想要提高点儿设计感，懂得一些「性价比高」的设计常识。这套教程将会是一个很好的开始。",
"https://cdn.sspai.com/article/eabe4534-26f9-a927-5b04-5d1f39cecbd9.jpg?imageMogr2/quality/95/thumbnail/!360x220r/gravity/Center/crop/360x220",
100,
39),
new Article("https://cdn.sspai.com/2018/06/07/ad1a9afa20cdbcf093680131480932d2.jpg?imageMogr2/quality/95/thumbnail/!80x80r/gravity/Center/crop/80x80",
"Adventure",
"08月31日",
"iOS 12 用户遭遇系统「疯狂」弹窗，但目前并没有很好的解决方法",
"所有使用 iOS 12 测试版的用户今天都遇到恼人的「系统升级弹窗」问题，但目前并没有很好的解决办法。",
"https://cdn.sspai.com/article/363fd7da-3714-18ab-f4fb-61ec20660164.jpg?imageMogr2/quality/95/thumbnail/!360x220r/gravity/Center/crop/360x220",
31,
62),
new Article("https://cdn.sspai.com/2017/05/19/4425a22e74cd252352e81d8eea541537.jpg?imageMogr2/quality/95/thumbnail/!80x80r/gravity/Center/crop/80x80",
"Vanilla",
"08月31日",
"发布会临近，换上这 38 张苹果 Logo 壁纸提前充值信仰",
"九月发布会邀请函火热出炉，已经有设计师将它做成了好看的壁纸。除此之外，还有很多历届苹果的发布会邀请函和各地 Apple Store 的宣传海报也被做成了各种天马行空的壁纸。一起来看看吧～",
"https://cdn.sspai.com/article/e3559089-e88b-6162-83d4-7685dced9119.jpg?imageMogr2/quality/95/thumbnail/!360x220r/gravity/Center/crop/360x220",
138,
19),
new Article("https://cdn.sspai.com/2018/04/25/a53a02caef475b75f859a46c65329e08.jpg?imageMogr2/quality/95/thumbnail/!80x80r/gravity/Center/crop/80x80",
"i9NGbgNq",
"08月30日",
"画函数、写公式、导出 Markdown……这 7 个插件让 Google 文档更好用",
"本文将为大家介绍 7 个有关排版样式的 Google 文档插件，让你的文档变得美观好看。",
"https://cdn.sspai.com/article/c8153f7a-63dd-4663-d914-96d96d0fe14e.jpg?imageMogr2/quality/95/thumbnail/!360x220r/gravity/Center/crop/360x220",
93,
7),
new Article("https://cdn.sspai.com/2017/12/26/18f38bad2b0724b4419b7e8bae24bd6e.jpg?imageMogr2/quality/95/thumbnail/!80x80r/gravity/Center/crop/80x80",
"少数派编辑部",
"09月07日",
"一派 | 苹果秋季发布会你最期待什么新产品？",
"这一期的一派，少数派编辑们对下周的苹果秋季发布会谈了谈自己最期待的产品以及购置计划。同时我们也想听听大家的想法。",
"https://cdn.sspai.com/article/2dc0061b-a251-e8df-a24c-31c66204a981.jpg?imageMogr2/quality/95/thumbnail/!360x220r/gravity/Center/crop/360x220",
25,
150),
new Article("https://cdn.sspai.com/2018/06/07/ad1a9afa20cdbcf093680131480932d2.jpg?imageMogr2/quality/95/thumbnail/!80x80r/gravity/Center/crop/80x80",
"Adventure",
"09月07日",
"5 种方法，在电脑和手机上告别百度搜索里的广告",
"百度上各种广告对用户搜索体验造成的不良影响已不是什么新鲜事。在这篇文章中，我将向大家介绍一些在电脑和手机上减少百度推广广告出现的方法，还你干净快捷的搜索体验。",
"https://cdn.sspai.com/article/4b52f103-4493-69f4-07c7-2feab9a4c70f.jpg?imageMogr2/quality/95/thumbnail/!360x220r/gravity/Center/crop/360x220",
156,
60),
new Article("https://cdn.sspai.com/avatar/f0a995804d04cc8a064e21110cb04210.jpg?imageMogr2/quality/95/thumbnail/!80x80r/gravity/Center/crop/80x80",
"洛世",
"09月05日",
"Chrome 在 10 周年之际发布了新版，除了好看还更安全",
"Google 在 Chrome 十周年之际向全平台推送了 Chrome 69 正式版的更新，为我们带来了采用全新设计的 Google material theme 主题",
"https://cdn.sspai.com/article/6adffdd2-2a2c-d67a-bd3c-a27e7268cd95.jpg?imageMogr2/quality/95/thumbnail/!360x220r/gravity/Center/crop/360x220",
65,
76)
};
List<Article> articleList = Arrays.asList(articles);
return articleList;
}
}
- CommendDAO类
package com.niit.week2.dao;
import com.niit.week2.bean.Commend;
import org.springframework.context.annotation.Configuration;
import java.util.Arrays;
import java.util.List;
/**
* @author jzy
*/
@Configuration
public class CommendDAO {
public List<Commend> getCommends(){
Commend[] commends = {
new Commend("https://cdn.sspai.com/topic/26a76ccb-288e-6126-6da4-cd36c8a354fd.jpg?imageMogr2/quality/95/thumbnail/!828x445r/gravity/Center/crop/828x445",
"跑步好搭档"),
new Commend("https://cdn.sspai.com/topic/0f501728-95c1-769a-d1ec-56474f9fbfd6.jpg?imageMogr2/quality/95/thumbnail/!828x445r/gravity/Center/crop/828x445",
"给现代人的护眼小技巧"),
new Commend("https://cdn.sspai.com/topic/72f63d62-0094-812c-8be3-1f5b16d677e0.jpg?imageMogr2/quality/95/thumbnail/!828x445r/gravity/Center/crop/828x445",
"青年居家生活指南"),
new Commend("https://cdn.sspai.com/topic/9eb4e572-c283-e5ac-5fd9-9e3fcc54dda5.jpg?imageMogr2/quality/95/thumbnail/!828x445r/gravity/Center/crop/828x445",
"你该知道的PPT技巧")
};
List<Commend> commendList = Arrays.asList(commends);
return commendList;
}
}
- SspaiController类
package com.niit.week2.controller;
import com.niit.week2.bean.Article;
import com.niit.week2.bean.Commend;
import com.niit.week2.dao.ArticleDAO;
import com.niit.week2.dao.CommendDAO;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.GetMapping;
import javax.annotation.Resource;
import java.util.List;
/**
* @author jzy
*/
@Controller
public class SspaiController {
@Resource
private ArticleDAO articleDAO;
@Resource
private CommendDAO commendDAO;
@GetMapping("sspai")
public String sspai(ModelMap map){
List<Article> articleList = articleDAO.getArticles();
map.addAttribute("articles",articleList);
List<Commend> commendList = commendDAO.getCommends();
map.addAttribute("commends",commendList);
return "sspai";
}
}
- sspai.html
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>少数派</title>
<link rel="stylesheet" href="webjars/bootstrap/3.3.7-1/css/bootstrap.css">
<link rel="stylesheet" href="css/sspai.css">
</head>
<body>
<nav class="navbar navbar-fixed-top">
<div class="container nav-container">
<div class="row">
<div class="col-lg-4">
<a href="#">
<img src="img/logo.png">
</a>
</div>
<div class="col-lg-4 text-center">
<p class="navbar-title">#热门文章</p>
</div>
<div class="col-lg-4 text-right">
<a href="#"><span class="glyphicon glyphicon-pencil navbar-icon1"></span></a>
<a href="#"><span class="glyphicon glyphicon-search navbar-icon2"></span></a>
<input class="login-btn" type="button" value="登录">
</div>
</div>
</div>
<div class="navbar-static-top nav-next">
<div class="container">
<div class="col-lg-2">
<span>正版软件</span>
</div>
<div class="col-lg-2">
<span>付费栏目</span>
</div>
<div class="col-lg-2">
<span>专题广场</span>
</div>
<div class="col-lg-2">
<span>热门文章</span>
</div>
<div class="col-lg-2">
<span>应用推荐</span>
</div>
<div class="col-lg-2">
<span>生活方式</span>
</div>
</div>
</div>
</nav>
<div class="container main-container">
<div class="col-lg-8">
<div class="row article-content" th:each="article:${articles}">
<div>
<div class="row">
<div class="col-lg-1 avatar">
<img class="img-circle"
th:src="${article.avatar}">
</div>
<div class="col-lg-11">
<div class="row">
<p th:text="${article.name}"></p>
</div>
<div class="row">
<p th:text="${article.time}"></p>
</div>
</div>
</div>
<div class="row article-text">
<div class="col-lg-8">
<div class="row article-title"><span th:text="${article.title}"></span></div>
<div class="row article-introduce"><span th:text="${article.introduction}"></span>
</div>
</div>
<div class="col-lg-4">
<img class="article-img"
th:src="${article.img}">
</div>
</div>
<div class="row article-look">
<div class="col-lg-8"></div>
<div class="col-lg-4">
<span class="article-love glyphicon glyphicon-heart"></span><span th:text="${article.love}"></span>
<span class="article-comment glyphicon glyphicon-comment"></span><span th:text="${article.comment}"></span>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="row">
<span>推荐专题</span>
<span class="pull-right">查看全部</span>
</div>
<div class="row recommend" th:each="commend:${commends}">
<div class="center-block pull-right recommend-content">
<img class="recommend-img" th:src="${commend.commendImg}">
</div>
<div class="pull-right recommend-introduction">
<div class="center-block text-center">
<span th:text="${commend.commendTitle}">跑步好搭档</span>
</div>
<div>
<input class="login-btn" type="button" value="查看专题">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
- sspai.css
nav {
height: 100px;
background-color: #29251f;
}
.nav-container {
height: 60px;
background-color: #29251f;
}
.nav-next{
height: 40px;
background-color: #ffffff;
}
.col-lg-4{
height: 60px;
}
.navbar-title{
margin: 0 0;
padding: 0 0;
font-size: 28px;
color: #f8f5f8;
height: 60px;
line-height: 60px;
}
.navbar-icon1{
color: #9b9b9b;
margin: 0 20px;
}
.navbar-icon2{
color: #9b9b9b;
margin: 0 30px 0 10px;
}
.login-btn{
margin: 15px 0;
padding-left: 25px;
padding-right: 25px;
border: 1px solid #f8f5f8;
border-radius: 20px;
background-color: transparent;
color: #f8f5f8;
height: 30px;
}
.nav-next{
border: 1px solid #e0e0e0;
}
.nav-next .col-lg-2{
height: 40px;
font-weight: bold;
text-align: center;
line-height: 40px;
border: 1px solid #e0e0e0;
}
.main-container{
background-color: #fafbfc;
/*background-color: aqua;*/
margin-top: 120px;
}
.article-content{
border: 1px solid #9b9b9b;
margin-top: 20px;
}
.article-content .col-lg-11 p{
font-size: 12px;
}
.article-content .col-lg-11 .row:nth-child(2){
color: #9b9b9b;
}
.article-content > div{
padding: 30px 30px 0 30px;
}
.article-content .col-lg-8 .row{
margin-left: 0px;
}
.avatar{
margin-right: 0px;
padding-right: 5px;
}
.avatar img{
float: right;
width: 40px;
height: 40px;
}
.article-text{
margin-top: 25px;
}
.article-title{
font-size: 24px;
font-weight: 700;
}
.article-introduce{
font-size: 16px;
font-weight: 400;
}
.article-img{
width: 180px;
height: 110px;
}
.article-look{
margin-top: 25px;
}
.article-love{
padding: 0 20px;
font-size: 14px;
font-weight: 400;
color: #9b9b9b;
}
.article-comment{
padding: 0 20px;
font-size: 14px;
font-weight: 400;
color: #9b9b9b;
}
.main-container .col-lg-4 > .row:nth-child(1) > span:nth-child(1){
margin-left: 80px;
font-weight: 800;
border-bottom: 1px solid #29251f;
}
.main-container .col-lg-4 > .row:nth-child(1) span{
padding-bottom: 5px;
border-bottom:1px solid #e0e0e0 ;
margin-bottom: 5px;
}
.recommend-content{
background-color: #000000;
}
.recommend-img{
width: 300px;
height: 161px;
opacity:0.6; filter: alpha(opacity=60);
}
.recommend{
position: relative;
margin-top: 15px;
}
.recommend-introduction{
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 100%;
margin-left: 80px;
color: #f8f5f8;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.recommend-introduction span{
font-weight: 500;
font-size: 18px;
}
