我想用 HTML 創建我的簡歷
我需要幫助：
頁面的尺寸是否與 A4 一樣好？
如何定位圖片中的文本，但我想要沒有 div？
以及如何使頁面和文本像 PDF 或 Word 一樣固定，以便在列印時保持一致？
這是我的代碼：
#name {
font-size: 26pt;
font-family: garamond;
font-weight: bold;
display: inline;
}
/*ignore line break*/
.title {
font-size: 12pt;
}
.sous-title {
font-weight: bold;
}
body {
font-size: 11pt;
font-family: Verdana;
color: rgb(64, 64, 64);
max-width: 44em;
/*3ordh*/
padding: 65 45px;
margin: 6em auto 19em;
position: relative;
box-shadow: 0 0.3em 1em rgb(110, 110, 110);
height: 90em
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="portfolionotabs.css">
<title>Resume</title>
</head>
<body>
<p id="name">Med Amine <br>Terbah</p>
14, St.Echifaa, Riadh [email protected]
<br> Sousse 4023 216 216 20690405
<hr />
<p class="title">Objective</p>
A highly motivated student looking for a first time position within a retail environment. Through my studies, i have demonstrated high levels of motivation, work ethic, and teamwork to achieve my predicted grades. I wish to utilise these skills to work
with customers and satisfy their needs.
<hr />
<p class="title">Education</p>
ISGS
<p class="sous-title">IT management</p>
September 2014 - July 2017<br> Graduated: No<br> Completed 2nd year
<hr /> CSFMTS
<p class="sous-title"></p>International trade</p>
September 2019 - Current<br> Graduated: Yes<br> Currently on internship
<hr />
<p class="title">Work experience</p>
<p class="sous-title"></p>Ben Ahmed Transit (Internship)</p>
Beb Bhar, Sousse<br> October 2021 - November 2021<br>
<hr />
<p class="title">Languages</p>
English ?????<br> French ?????<br> Italian ?????
<hr />
<p class="title">Skills</p>
Problem-solving Reasonably experienced<br> Communication Reasonably experienced<br> Adaptability
<br> Active Listening
<hr />
<p class="title">Technical skills</p>
Ms-office Advanced level<br> Ciel 2019 Advanced level<br>
<hr />
<p class="title">Hobbies and interests</p>
Exercising and healthcare<br> Yoga and meditation<br> Volunteering
</body>
</html>uj5u.com熱心網友回復：
也許我可以回答你的兩個問題。
如何定位圖片中的文本，但我想要沒有 div ..？
Divs真的不是太難，是html的核心概念，所以學習如何使用它們會有好處。您可以在MDN Web Docs div details上找到一些很好的解釋來幫助您。但既然你要求替代，我可以提供一個：表格。現在，我個人不喜歡使用表格，但它可以勝任。一個警告是，表格會使在小螢屏上運行良好的回應式網站變得更加困難。但是由于您希望模仿列印的檔案，因此它會起作用。
例子：
<hr />
<table>
<tr>
<td>
<p class="title">Objective</p>
</td>
<td>A highly motivated student looking for a first time position within a retail environment. Through my studies, i have demonstrated high levels of motivation, work ethic, and teamwork to achieve my predicted grades. I wish to utilise these skills to
work with customers and satisfy their needs.</td>
</tr>
</table>
<hr />這有點基本，與您想要的樣式不匹配，但可以讓您了解如何并排放置兩列。當然，您需要添加適當的屬性以將單元格大小、填充和間距設定為您想要的值。
基本原則是<tr>用于每一行和行<td>中的每個單元格。然后像在 Word 檔案中構建電子表格或表格一樣構建。
以及如何使頁面和文本像 pdf 或 word 一樣固定，以便在列印時保持一致？
如果使用表格，則可以使用固定寬度（以像素為單位）。那可以做到這一點。一個很好的參考是MDN 上帶有文本溢位的固定寬度表格。但是，再次警告。這種方法可能會在較小的螢屏上造成困難；它不是回應式設計。
編輯：在另一個答案中，用戶將您的整個代碼更新到表格中。但要使其始終列印相同，您可能需要添加固定寬度。我確實希望我的回答向您解釋了表格是一種選擇的方式以及它們可能存在的問題。
uj5u.com熱心網友回復：
#name{
font-size: 26pt;
font-family: garamond;
font-weight: bold;
display:inline;
} /*ignore line break*/
.title{font-size: 12pt;}
.sous-title{font-weight: bold;}
body{
padding: 10px;
font-size: 11pt;
font-family: Verdana;
color: rgb(64, 64, 64);
max-width: 44em; /*3ordh*/
padding: 65 45px;
margin: 6em auto 19em;
position: relative;
box-shadow: 0 0.3em 1em rgb(110, 110, 110);
height: 90em
}
.fright{
float: right;
margin: 0 20px;
}<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="portfolionotabs.css">
<title>Resume</title>
</head>
<body>
<p id="name">Med Amine <br>Terbah</p>
<span class="fright">
[email protected]<br>
216 20690405
</span>
<span class="fright">
14, St.Echifaa, Riadh<br>
Sousse 4023 216
</span>
<hr />
<table>
<tr>
<td valign="top" width="230px">Objective</td>
<td>
A highly motivated student looking for a first time position within a retail environment. Through my studies, i have demonstrated high levels of motivation, work ethic, and teamwork to achieve my predicted grades. I wish to utilise these skills to work with customers and satisfy their needs.
</td>
<tr>
<tr>
<td colspan="2"><hr></td>
</tr>
<tr>
<td valign="top">Education</td>
<td>
ISGS<br>
<b>IT management</b><br>
September 2014 - July 2017<br>
Graduated: No<br>
Completed 2nd year
</td>
</tr>
<tr>
<td colspan="2"><hr></td>
</tr>
<tr>
<td></td>
<td>
CSFMTS<br>
<b> International trade</b><br>
September 2019 - Current<br>
Graduated: Yes<br>
Currently on internship
</td>
</tr>
<tr>
<td colspan="2"><hr></td>
</tr>
<tr>
<td>Work experience</td>
<td>
<b>Ben Ahmed Transit (Internship)</b><br>
Beb Bhar, Sousse<br>
October 2021 - November 2021<br>
</td>
</tr>
<tr>
<td colspan="2"><hr></td>
</tr>
<tr>
<td>Languages</td>
<td>
English ?????<br>
French ?????<br>
Italian ?????
</td>
</tr>
<tr>
<td colspan="2"><hr></td>
</tr>
<tr>
<td>Skills</td>
<td>
Problem-solving Reasonably experienced<br>
Communication Reasonably experienced<br>
Adaptability<br>
Active Listening
</td>
</tr>
<tr>
<td colspan="2"><hr></td>
</tr>
<tr>
<td>Technical skills</td>
<td>
Ms-office Advanced level<br>
Ciel 2019 Advanced level<br>
</td>
</tr>
<tr>
<td colspan="2"><hr></td>
</tr>
<tr>
<td>Hobbies and interests</td>
<td>
Exercising and healthcare<br>
Yoga and meditation<br>
Volunteering
</td>
</tr>
</table>
</body>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/384468.html
上一篇：識別以前的CSS