练习一美化界面

2018/5/30 16:16:03 加载中...

前面我们的页面已经出来了，只是比较丑陋。

下面我们使用 Bootstrap 来美化界面，同时还要自适应电脑端和移动端。

bootstrap

https://getbootstrap.com/docs/4.1/getting-started/introduction/

在 head 标签中引入 css

<!-- Bootstrap CSS -->   
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

修改列表展示

<div class="container">
	<div class="h1" style="margin-top: 21px"></div>
	<div class="jumbotron p-3 p-md-5 text-white rounded bg-dark">		
		<h1 class="display-4 font-italic text-center">Java资源</h1>
	</div>
  	
  		<div>
          		<table class="table">		  
                	  <tbody>
                	    <tr th:each="item : ${items}">		      
                	      <td th:text="${item.name}">Mark</td>
                	      <td><a href="/" th:href="${item.url}" th:text="${item.url}" target="_blank">view</a></td>		      
                	    </tr>    
                	  </tbody>
                	</table>
  		</div>
</div>

添加页脚

<footer class="blog-footer">
      <p>前端 by <a href="https://getbootstrap.com/">Bootstrap</a> 后台 by <a href="/">Java</a> <a href="/">thymeleaf</a></p>
      <p>
        所有者 <a href="http://www.sqber.com">sqber</a>
      </p>
      <p>2017-2018 冀ICP备17029815</p>
</footer>

添加自定义样式

    <style>
            a{   
                    word-wrap: break-word;
                    word-break: break-all;
            }
            .blog-footer {
                padding: 2.5rem 0;
                color: #999;
                text-align: center;
                background-color: #f9f9f9;
                border-top: .05rem solid #e5e5e5;
            }                
    </style>

添加 meta，有利于搜索引擎抓取。

<meta name="description" content="SQBER的博客,Java资源" />
<meta name="keywords" content="SQBER的博客,sqber,Java资源,Java" />

浏览下页面效果：

调整完毕，重新打包发布即可。

最终HTML：

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="SQBER的博客,Java资源" />
<meta name="keywords" content="SQBER的博客,sqber,Java资源,Java" />
 
    <title>Java资源</title>
   
    <!-- Bootstrap CSS -->   
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
  
   
    <style>
            a{   
                    word-wrap: break-word;
                    word-break: break-all;
            }
            .blog-footer {
    padding: 2.5rem 0;
    color: #999;
    text-align: center;
    background-color: #f9f9f9;
    border-top: .05rem solid #e5e5e5;
}                
    </style>           
</head>
 
<body>
 
<div>
<div style="margin-top: 21px"></div>
<div class="jumbotron p-3 p-md-5 text-white rounded bg-dark">                
<h1 class="display-4 font-italic text-center">Java资源</h1>
</div>
          
                  <div>
                  <table>                 
  <tbody>
    <tr th:each="item : ${items}">                     
      <td th:text="${item.name}">Mark</td>
      <td><a href="/" th:href="${item.url}" th:text="${item.url}" target="_blank">view</a></td>                     
    </tr>   
  </tbody>
</table>
                  </div>
</div>
 
<footer>
      <p>前端 by <a href="https://getbootstrap.com/">Bootstrap</a> 后台 by <a href="/">Java</a> <a href="/">thymeleaf</a></p>
      <p>
        所有者 <a href="http://www.sqber.com">sqber</a>
      </p>
      <p>2017-2018 冀ICP备17029815</p>
    </footer>
 
</body>
</html>

扫码分享

版权说明

作者：SQBER

文章来源：http://blog.sqber.com/articles/ava-test1-beauty-page.html

本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

练习一 美化界面

练习一美化界面