簡體 English 中英

將 figma 轉換為 html 和 css

[英]convert figma to html and css

原文 2022-12-28 10:36:06 1 1 html/ css/ figma

我正在使用 figma 設計我的 web 頁面，但是當我嘗試將其轉換為 html 和 css 時，文本顯示沒有樣式，盡管我嘗試將 css 與 html 嵌入或將其與外部文件鏈接它不起作用，但有人知道嗎如何解決？ `

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <title>Desktop - 21</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Almarai%3A300%2C400%2C700"/>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro%3A300%2C400%2C700"/>
  <link rel="stylesheet" href="./styles/desktop-21.css"/>
</head>
<body>
<div class="desktop-21-Su8">
  <div class="auto-group-ntce-Q5G">
    <div class="auto-group-4ge6-XQn">
      <div class="auto-group-bez8-T3Y">
        <img class="image-11-NgJ" src="./assets/image-11-4SW.png"/>
        <div class="auto-group-jkh4-gwt">
          <div class="image-2-pHQ">
          </div>
          <p class="item--kRx">الدخول</p>
          <img class="lock-02-SZg" src="./assets/lock-02-zCr.png"/>
        </div>
        <p class="item--n7k">المساعدة والدعم</p>
        <p class="item--Fn2">الاسئلة المتكررة</p>
        <p class="item--YFL">
          <span class="item--YFL-sub-0">
          تعرف على
          <br/>
           
          </span>
          <span class="item--YFL-sub-1">حصيف</span>
        </p>
        <img class="image-10-o4n" src="./assets/image-10-hop.png"/>
      </div>
      <div class="line-6-7rA">
      </div>
      <p class="item--rYr">حصيف</p>
    </div>
    <p class="item--N1Q">الخدمات العدلية الالكترونية</p>
    <div class="auto-group-u3mu-E3c">
      <img class="chevron-left-vx2" src="./assets/chevron-left-wR4.png"/>
      <p class="item--rqg">الدخول</p>
    </div>
  </div>
  <div class="auto-group-nyy8-jea">
    <div class="frame-2-fHL">
      <p class="item--C2N">حصيف</p>
      <p class="item-920072390-79L">920072390</p>
    </div>
    <p class="item-1444-2020--cbt">جميع الحقوق محفوظة لحصيف ,المملكة العربية السعودية 1444 ه -2020 م</p>
    <div class="auto-group-vefu-2fc">
      <p class="item--xZG">مواقع التواصل الاجتماعي</p>
      <div class="auto-group-wyye-EWn">
        <div class="auto-group-m8ae-xhg">
          <img class="image-16-usp" src="./assets/image-16-HBY.png"/>
          <img class="image-15-3z2" src="./assets/image-15-8pS.png"/>
        </div>
        <img class="image-14-PY6" src="./assets/image-14-Mjp.png"/>
      </div>
    </div>
    <p class="item--dSS">
      <span class="item--dSS-sub-0">
      المساعدة والدعم
      <br/>
      
      <br/>
      
      </span>
      <span class="item--dSS-sub-1">
      الاسئلة الشائعة
      <br/>
       
      <br/>
      دليل المسخدم
      <br/>
      
      </span>
    </p>
  </div>
</div>
</body>

我嘗試在 figma 中使用 anima 和其他插件，但對我不起作用，function12.io 幫助我提取代碼，但它顯示為沒有樣式的文本