iT邦幫忙

2022 iThome 鐵人賽

DAY 12
0
自我挑戰組

30天製作專題紀錄-虛擬女友系列 第 12

Day12 30天製作專題紀錄-製作UI

  • 分享至 

  • xImage
  •  

昨天把外框架的部分處理好了~
那接下來就先來處理倒退鍵及名稱的部分/images/emoticon/emoticon07.gif


倒退鍵

.myIcon {
      cursor: pointer;
    }
    .myIcon img {
      width: 20px;
      height: auto;
    }

圖片的寬設置是20px
圖片的高設置是auto
他的高會隨著邊框的大小作改變

  • CSS cursor
    這個屬性是用來指定當滑鼠指標指向哪個物件時,顯示不同的游標。

名稱

.vName {
      width: 400px;
      font-size: 25px;
      border: none;
      background-color: #fff;
    }

width是離框的左邊平行距離400px
font-size就是設置字體的大小
border設置none可以把字體的邊框隱藏
隱藏前
隱藏前
隱藏後
隱藏後
而到這聊天室的上方部分的呈現就完成了~


上一篇
Day11 30天製作專題紀錄-製作UI
下一篇
Day13 30天製作專題紀錄-製作UI
系列文
30天製作專題紀錄-虛擬女友30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言