HTML5實例005-像素風(fēng)格頭像生成器

一篇里面的函數(shù)比較好的實現(xiàn)方式是：

function getIntRandom(alt, penSize) {
 return Math.floor(Math.random() * alt/penSize) * penSize;
}

先在一個范圍內(nèi)生成需要的數(shù)字，然后放大相應(yīng)的倍數(shù)不就好了嗎？感謝大神，行家一出手，就知有沒有，這是真真滴，在我用while去讓計算機做重復(fù)計算的時候，動下腦子，用數(shù)學(xué)思維就可以輕松解決了呀。

繼續(xù)實現(xiàn)那個畫小正方形的東西吧，

1, 新建一個html，寫入基礎(chǔ)頁面結(jié)構(gòu)代碼(為了等下方便解釋，給前面手工加了行號，要復(fù)制使用的話，想辦法把最前面的行號得取掉)：

001 <!doctype html>
002 <html lang="zh">
003 <head>
004 <meta charset="UTF-8">
005 <title>像素風(fēng)頭像生成器</title>
006 </head>
007 <body>
008 <div id="wrapper">
009 <canvas id="myCanvas" width="200" height="200" style="border:1px solid #d3d3d3;">
010 Your browser does not support the HTML5 canvas tag.
011 </canvas>
012 <p>
013 <a href="javascript：;" id="mkephoto" onclick="makePhoto();">生成</a>
014 </p>
015 </div>
016 
017 
018 <style type="text/css" media="screen">
019 html {
020 margin: 0;
021 padding: 0;
022 font: 62.5%/1 Georgia, "Microsoft Yahei", sans-serif;
023 }
024 body {
025 font: 1.2/1.5;
026 }
027 
028 #wrapper {
029 margin: 5em auto;
030 text-align: center;
031 }
032 
033 .ctlArea{
034 text-align: center;
035 border: 1px dashed #c0c0c0;
036 border-radius: 4px;
037 }
038 
039 </style>
040 </body>
041 </html>

效果是這樣子的

在第13行，給`<a>`標(biāo)簽加了`onclick`點擊事件，直接調(diào)用`makePhoto`這個函數(shù)，接下來咱就去實現(xiàn)這個函數(shù)。

去行號的話，用正則表達(dá)式來可以：將`^\d\d\d `替換成沒有就好了，再可以在列模式里面直接刪除，放一張圖吧，今天內(nèi)容少，覺得編輯器好用的，去搜EverEdit，也可以給我私信，個人覺得在windows里面比sublime好使，關(guān)鍵對于編碼這塊支持很好（不是免費的）。

正則表達(dá)式是一個好東西，強烈建議客官有時間去學(xué)習(xí)

2, 在`</body>`前面直接寫javascript部分：

039 </style>
040 
041 <script type="text/javascript">
042 
043 
044 function makePhoto () {
045 
046 var backColor = "transparent";
047 var imgWidth = 200;
048 var penSize = 40;
049 var penColor = "rgb("+getRemodInt(255)+","+getRemodInt(255)+","+getRemodInt(255)+")";
050 var c = document.getElementById("myCanvas");
051 
052 c.width = imgWidth;
053 c.height = imgWidth;
054 
055 var ctx=c.getContext("2d");
056 ctx.fillStyle="green";
057 //ctx.fillRect(40,0,10,10);
058 
059 // x從cab 0-50 取 值，再拿這個值取到對稱數(shù)，
060 // y 從0 到 100 做10 次增加
061 
062 ctx.fillStyle = backColor;
063 //console.log(backColor);
064 ctx.fillRect(0, 0, imgWidth, imgWidth);
065 ctx.fillStyle = penColor;
066 for (var yl = 0; yl <= c.height; yl += penSize) {
067 (function(rmd){
068 console.log(rmd);
069 for (var i = 0; i < rmd; i++) {
070 var x1 = getRemodIntByPenSize(imgWidth , penSize);
071 ctx.fillRect(x1, yl, penSize, penSize);
072 //ctx.fillRect(x2, yl, penSize, penSize);
073 }
074 })(getRemodInt(imgWidth / penSize));
075 }
076 
077 }
078 
079 //返回一個在(0,Alt]區(qū)間的能被penSize整除的數(shù)
080 //確定具體亮哪幾個像素
081 function getRemodIntByPenSize (alt, penSize) {
082 return Math.floor(Math.random() * alt / penSize) * penSize;
083 }
084 //返回指定范圍以內(nèi)的整數(shù) 傳入3返回 132
085 //確定一行亮幾個像素 
086 function getRemodInt(alt) {
087 return Math.floor(Math.random() * alt) + 1;
088 }
089 
090 makePhoto();
091 </script>
092 </body>

解釋一下，

第44~77行是makePhoto函數(shù)，

46~49行定義了畫布大小，背景顏色，像素大小，畫筆顏色這些東西。

50行拿到了`canvas`，也就是畫布，后面兩行定義了畫布的長寬。

62~64行把畫布整個用背景色涂了一遍。

66~75行，用一個for循環(huán)確定要畫的像素點的y坐標(biāo)，就是一行一行地往下移動。

79~83行,84~88行的兩個函數(shù)，一個負(fù)責(zé)確定這一行里面畫出來幾個像素，一個負(fù)責(zé)確定要畫的這幾個像素的x坐標(biāo)放在哪。

67~74行，是一個閉包，確保每次循環(huán)過來的時候，內(nèi)部執(zhí)行的東西是一個獨立的，不受上一次循環(huán)時候留下的一些變量影響。

69~73行，一個小循環(huán)，就是畫一行的像素點，畫幾個由`rmd`這個值決定，`rmd`是要傳入這個閉包函數(shù)的值，在74行調(diào)用的時候用`getRemodInt(imgWidth / penSize)`給算出來傳了進(jìn)去。（這里如果不懂的話，沒關(guān)系，只要知道這個東西是個閉包，有興趣的話，可以去搜索學(xué)習(xí)一下）

就這些了，先設(shè)法看到效果再說，不要怕里面不懂的地方。（高能預(yù)警）個人覺得哈，學(xué)編程就得拿來先用，先試試再說，然后再給解剖了，看看具體是怎么個實現(xiàn)的，用到了哪些知識點，再一個個小知識點地去把它給理解，化為已用，所以，不要覺得有一個地方不懂或者做不出來的時候，就放手，及時搜索，及時求助，及時嘗試。和小孩子學(xué)說話一樣，剛開始總會跑音，太正常了，學(xué)習(xí)本身就是一點點積累的過程。

就這樣。效果圖再來一張，不然沒法放封面呀。

神奇的封面

面

在現(xiàn)代網(wǎng)頁設(shè)計中，個人主頁是一個展示個人信息、技能、事件等的重要載體。為了吸引訪客的注意力并提供良好的用戶體驗，設(shè)計師通常會運用各種技巧和效果來增加頁面的吸引力。本文將介紹如何使用CSS創(chuàng)建一個驚嘆的個人主頁介紹卡片，展示獨特魅力；

PREVIEW

創(chuàng)建HTML結(jié)構(gòu)

首先，需要定義基本的HTML結(jié)構(gòu)來容納個人主頁介紹卡片；

這里外層使用一個div包裹，里面使用三個<div>元素作為包裹容器布局，并在其中添加所需的圖像、內(nèi)容和按鈕等：

<div class="card">
  <div class="box">
    <div class="img_box">
      <video 
        src="./assets/video.mp4"
        muted
        autoplay
        loop
      />
    </div>
  </div>

  <div class="box">
    <div class="content">
      <h2>
        Alexa
        <br>
        <span>
          Professional Artist
        </span>
      </h2>

      <ul>
        <li>
          Posts
          <span>22</span>
        </li>
        <li>
          Followers
          <span>999+</span>
        </li>
        <li>
          Following
          <span>7</span>
        </li>
      </ul>

      <button>Follow</button>
    </div>
  </div>

  <div class="circle">
    <div class="img_box">
      <img src="./assets/user.jpg" alt="">
    </div>
  </div>
</div>

外層是card容器，視頻和文本內(nèi)容區(qū)域是上下布局的，分別使用box容器包裹，最后是circle容器包裹頭像在定位在中間左邊超出；

注：
video設(shè)置屬性：靜音(muted)可實現(xiàn)自動播放(autoplay)，接著設(shè)置循環(huán)播放(loop)；
img>和video>的父容器是一個類名img_box；

添加元素樣式

接下來，我們將使用CSS來為個人主頁介紹卡片添加樣式。以下是一些關(guān)鍵的樣式屬性和技巧，可以使卡片看起來更加漂亮和吸引人；

Base CSS

使用通配符選擇器*來為頁面中的所有元素設(shè)置相同的樣式，清除默認(rèn)樣式，使用怪異盒子模型；
選擇文檔的根元素（HTML中的 <html>）定義顏色CSS變量；
body使用flex把card容器布局在頁面水平、垂直居中；
card使用flex把三個子容器實現(xiàn)垂直排列并兩端對齊；

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --clr: #083d41
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: var(--clr);
}

.card {
  background-color: var(--clr);
  position: relative;

  width: 320px;
  height: 430px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 先把容器基本樣式調(diào)整一下 */
.card .box {
  background-color: tomato;
  position: relative;
  
  width: 110%;
  height: 200px;
  /* 文本內(nèi)容區(qū)域圓角 */
  border-radius: 20px;
}

/* 頭像容器則使用定位布局 */
.card .circle {
  width: 180px;
  height: 180px;
  position: absolute;
  left: -70px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 10px solid var(--clr);
}

/* 調(diào)整img和video共有的父容器樣式 */
.card .box .img_box,
.card .circle .img_box {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* img的圓角 */
  border-radius: 50%; 
}
.card .box .img_box {
  /* video的圓角 */
  border-radius: 15px;
}

/* 調(diào)整圖片和視頻的樣式 */
.card .box .img_box video,
.card .circle .img_box img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

視頻區(qū)域CSS

調(diào)整card下的第一個box容器樣式，也就是包裹視頻的容器：

包圍圖片的邊框部分，優(yōu)化成圓角使其看上去不是那么突兀；
使用::before，::after創(chuàng)建兩個偽元素用于需要優(yōu)化的兩角；
設(shè)置偽元素的左下角邊框圓角程度與box保持一致，當(dāng)然也可以自行調(diào)整；
最后給偽元素添加陰影效果覆蓋住box的角，然后陰影顏色設(shè)置為與背景色一致，就能實現(xiàn)了：屬性可設(shè)置的值包括陰影的 X 軸偏移量、Y 軸偏移量、模糊半徑、擴(kuò)散半徑和顏色；比如本次設(shè)置的值對應(yīng)：X軸偏移-6px Y軸偏移6px 顏色；

.card .box:nth-child(1)::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: transparent;
  
  position: absolute;
  z-index: 10;
  top: 106px;
  left: -1px;
  border-bottom-left-radius: 20px;
  box-shadow: -6px 6px var(--clr);
}

/* 樣式同before類似，注意定位樣式 */
.card .box:nth-child(1)::after {
  content: "";
  width: 20px;
  height: 20px;
  background-color: transparent;
  
  position: absolute;
  z-index: 10;
  bottom: -1px;
  left: 105px;
  border-bottom-left-radius: 20px;
  box-shadow: -6px 6px var(--clr);
}

目前添加樣式效果圖，可以在調(diào)試階段更改明顯色彩用于調(diào)整距離、位置等；

文本內(nèi)容CSS

調(diào)整card下的第二個box容器樣式，也就是包含文字信息的容器：

包圍圖片的邊框部分，優(yōu)化成圓角樣式同上面類似，部分需要調(diào)整的看代碼；
注意這里設(shè)置的是偽元素的左上角圓角程度，然后添加陰影顏色實現(xiàn)；
此外，還對卡片內(nèi)部的標(biāo)題、段落和列表應(yīng)用了特定的樣式，以使其在視覺上更加吸引人；

.card .box:nth-child(2) {
  background-color: #fff;

  width: 100%;
  height: 220px;
}

.card .box:nth-child(2)::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: transparent;

  position: absolute;
  z-index: 10;
  bottom: 106px;
  left: -1px;
  border-top-left-radius: 20px;
  box-shadow: -6px -6px var(--clr);
}
.card .box:nth-child(2)::after {
  content: "";
  width: 20px;
  height: 20px;
  background-color: transparent;

  position: absolute;
  z-index: 10;
  top: -1px;
  left: 109px;
  border-top-left-radius: 20px;
  box-shadow: -6px -6px var(--clr);
}

.card .box .content {
  position: absolute;
  inset: 0;
  padding: 30px 10px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* 姓名和Title樣式 */
.card .box .content h2 {
  width: 100%;
  padding-left: 120px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.1em;
  font-size: 1.15em;
  font-weight: 600;
  color: #333;
}
.card .box .content h2 span {
  letter-spacing: 0.05em;
  font-size: 0.75em;
  font-weight: 400;
  color: tomato;
  text-transform: initial;
}

/* 列表樣式 */
.card .box .content ul {
  position: relative;
  top: 15px;

  width: 100%;
  padding: 0 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.card .box .content ul li {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 10px;
  font-size: 0.85em;
  font-weight: 500;
  color: #999;
}
.card .box .content ul li:not(:last-child)
{
 border-right: 1px solid #ccc; 
}
.card .box .content ul li span{
  font-size: 1.65em;
  color: #333;
}

/* 按鈕樣式 */
.card .box .content button {
  position: relative;
  top: 25px;
  padding: 8px 30px;
  border: none;
  outline: none;
  background-color: #03a9f4;
  border-radius: 30px;
  color: #fff;
  font-size: 1em;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  border: 5px solid var(--clr);
  box-shadow: 0 0 0 10px #fff;
  transition: .5s;
}
.card .box .content button:hover {
  letter-spacing: 0.5em;
  background-color: #ff3d7f;
}

進(jìn)一步優(yōu)化

由于按鈕的圓角與文本內(nèi)容卡片的交界處看上去顯得有些過于突兀了；所以現(xiàn)在把它們的交界處優(yōu)化成弧形，樣式類似box的偽元素，這里也給按鈕創(chuàng)建兩個偽元素，用于優(yōu)化兩邊的交界處：

.card .box .content button::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: transparent;
  position: absolute;
  top: 23px;
  left: -29px;
  border-top-right-radius: 20px;
  box-shadow: 5px -7px #fff;
}

.card .box .content button::after {
  content: "";
  width: 20px;
  height: 20px;
  background-color: transparent;
  position: absolute;
  top: 23px;
  right: -29px;
  border-top-left-radius: 20px;
  box-shadow: -5px -7px #fff;
}

最后

除了基本樣式之外，還進(jìn)一步優(yōu)化個人主頁介紹卡片的細(xì)節(jié)。一些可選的技巧包括：

添加過渡效果：通過為button的容器元素添加過渡效果，使卡片在鼠標(biāo)懸停時平滑地改變樣式(背景色、字符間距)；
使用偽元素添加box-shadow技巧覆蓋比較突兀的地方，使各個元素之間的交界處有過渡感，可以增加視覺上的吸引力；
通過給元素設(shè)置與body背景相同的顏色，可以使其在頁面中更加突出和立體；

通過運用CSS的各種樣式屬性和技巧，我們可以輕松地創(chuàng)建漂亮的個人主頁介紹卡片。這些卡片不僅能夠有效地展示個人信息和技能，還能夠吸引訪客的注意力并提供良好的用戶體驗。記得嘗試不同的樣式和效果來定制你自己獨特的個人主頁卡片！

CSS創(chuàng)作個人主頁介紹卡片，展示獨特魅力
原文鏈接：https://juejin.cn/post/7260709771870060603

加完用戶提交博客內(nèi)容的代碼之后，應(yīng)用程序看起來比任何時候都要好，但是還是有個問題。我們把所有關(guān)注者的 blog 展示在首頁上。如果數(shù)量超過上千的話會發(fā)生些什么？或者上百萬？你可以想象得到，處理如此大數(shù)據(jù)量的列表對象將會及其低效的。

相反，如果我們分組或者分頁顯示大量的 blog？效率和效果會不會好一些了？

Flask-SQLAlchemy 天生就支持分頁。比如如果我們想要得到用戶關(guān)注者的前三篇 blog，我們可以這樣做:

posts = g.user.followed_posts().paginate(1, 3, False).items

paginate 方法能夠被任何查詢調(diào)用。它接受三個參數(shù):

頁數(shù)，從 1 開始，
每一頁的項目數(shù)，這里也就是說每一頁顯示的 blog 數(shù)，
錯誤標(biāo)志。如果是 True，當(dāng)請求的范圍頁超出范圍的話，一個 404 錯誤將會自動地返回到客戶端的網(wǎng)頁瀏覽器。如果是 False，返回一個空列表而不是錯誤。

從 paginate 返回的值是一個 Pagination 對象。這個對象的 items 成員包含了請求頁面項目(本文是指 blog)的列表。在 Pagination 對象中還有其它有幫助的東西，我們將在后面能看到。

現(xiàn)在讓我們想想如何在我們的 index 視圖函數(shù)中實現(xiàn)分頁。我們首先在配置文件中添加一些決定每頁顯示的 blog 數(shù)的配置項(文件 config.py):

# paginationPOSTS_PER_PAGE = 3

在最后的應(yīng)用程序中我們當(dāng)然會使用每頁顯示的 blog 數(shù)大于 3，但是測試的時候用小的數(shù)量更加方便。

接著，讓我們看看不同頁的 URLs 是什么樣的。我們知道 Flask 路由可以攜帶參數(shù)，因此我們在 URL 后添加一個后綴表示所需的頁面:

http://localhost:5000/ <-- page #1 (default)
http://localhost:5000/index <-- page #1 (default)
http://localhost:5000/index/1 <-- page #1
http://localhost:5000/index/2 <-- page #2

這種格式的 URLs 能夠輕易地通過在我們的視圖函數(shù)中附加一個 route 來實現(xiàn)(文件 app/views.py):

我們新的路由需要頁面數(shù)作為參數(shù)，并且聲明為一個整型。同樣我們也需要在 index 函數(shù)中添加 page 參數(shù)，并且我們需要給它一個默認(rèn)值。

現(xiàn)在我們已經(jīng)有可用的頁面數(shù)，我們能夠很容易地把它與配置中的 POSTS_PER_PAGE 一起傳入 followed_posts 查詢。

現(xiàn)在試試輸入不同的 URLs，看看分頁的效果。但是，需要確保可用的 blog 數(shù)要超過三個，這樣你就能夠看到不止一頁了！

我們現(xiàn)在需要添加鏈接允許用戶訪問下一頁以及/或者前一頁，幸好這是很容易做的，F(xiàn)lask-SQLAlchemy 為我們做了大部分工作。

我們現(xiàn)在開始在視圖函數(shù)中做一些小改變。在我們目前的版本中我們按如下方式使用 paginate 方法:

posts = g.user.followed_posts().paginate(page, POSTS_PER_PAGE, False).items

通過上面這樣做，我們可以獲得返回自 paginate 的 Pagination 對象的 items 成員。但是這個對象還有很多其它有用的東西在里面，因此我們還是使用整個對象(文件 app/views.py):

posts = g.user.followed_posts().paginate(page, POSTS_PER_PAGE, False)

為了適應(yīng)這種改變，我們必須修改模板(文件 app/templates/index.html):

<!-- posts is a Paginate object -->
{% for post in posts.items %}
<p>
{{post.author.nickname}} says: <b>{{post.body}}</b>
</p>
{% endfor %}

這個改變使得模版能夠使用完全的 Paginate 對象。我們使用的這個對象的成員有:

has_next：如果在目前頁后至少還有一頁的話，返回 True
has_prev：如果在目前頁之前至少還有一頁的話，返回 True
next_num：下一頁的頁面數(shù)
prev_num：前一頁的頁面數(shù)

有了這些元素后，我們產(chǎn)生了這些(文件 app/templates/index.html):

因此，我們有了兩個鏈接。第一個就是名為 “Newer posts”，這個鏈接使得我們能夠訪問上一頁。第二個就是 “Older posts”，它指向下一頁。

當(dāng)我們?yōu)g覽第一頁的時候，我們不希望看到有上一頁的鏈接，因為這時候是不存在前一頁。這是很容易被監(jiān)測的，因為 posts.has_prev 會是 False。我們簡單地處理這種情況，當(dāng)用戶瀏覽首頁的時候，上一頁會顯示出來，但是不會有任何的鏈接。同樣，下一頁也是這樣的處理方式

在線咨詢

上一篇：PHP語言在網(wǎng)站建設(shè)上有哪些優(yōu)勢？
下一篇：怎么把Excel表格轉(zhuǎn)換成HTML格式？Excel轉(zhuǎn)HTML

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商