Question

我正在尝试使用以下html和CSS代码来制作＆＃34; John Smith＆＃34;和联系信息在同一个框中，但我希望使联系信息不同的字体，字体颜色等。我尝试使用a但联系信息刚刚移动到新行。

＆＃13;

* {
  box-sizing: border-box;
}

.name {
  color: black;
  font-family: "bookman old style";
  width: 500px;
  padding: 20px;
  border: 2px solid grey;
  border-radius: 10px;
  background-color: lightblue;
  font-size: 40px;
  text-align: center;
  margin: 0;
  height: 300px;
}

.aboutme {
  color: black;
  font-family: calibri;
  width: 500px;
  height: 250px;
  border: 2px solid grey;
  border-radius: 10px;
  margin-left: 100px;
  background-color: lightblue;
  margin: 10px 0px 0px 0px;
  font-size: 20px;
  padding: 10px;
}

#photo {
  border: 3px solid black;
  margin: 0;
}

body {
  background-color: #CEF6F5;
}

#contactinfo {
  text-align: left;
  color: black;
  font-family: calibri;
  font-size: 20px;
}

＆＃13;

<img id="photo" src="https://sites.psu.edu/siowfa16/files/2016/10/YeDYzSR-
    10apkm4.png" width="500">
<p class="name">
  <strong>John Smith</strong><br>
  10 Chicken Street<br>
  Australia<br>
  00000000<br>
  srdtfj@gmail.com
</p>
<p class="aboutme">About Me</p>

＆＃13;

Answer 1

您可以在div中打包联系人信息，然后添加id="contactinfo"，现在您可以从 John Smith 单独自定义联系信息。

注意：

如果您没有在网站上安装该字体，则无法使用，因此在这种情况下您必须使用已安装的（默认）字体。

* { box-sizing: border-box; } body { background-color: #CEF6F5; } .name { color: black; font-family: "bookman old style"; width: 500px; padding: 20px; border: 2px solid grey; border-radius: 10px; background-color: lightblue; font-size: 40px; text-align: center; margin: 0; height: 300px; } .aboutme { color: black; font-family: calibri; width: 500px; height: 250px; border: 2px solid grey; border-radius: 10px; margin-left: 100px; background-color: lightblue; margin: 10px 0px 0px 0px; font-size: 20px; padding: 10px; } #photo { border: 3px solid black; margin: 0; } #contactinfo { text-align: left; color: black; font-family: calibri; font-size: 20px; }

<img id="photo" src="https://sites.psu.edu/siowfa16/files/2016/10/YeDYzSR- 10apkm4.png" width="500"> <div class="name"> <strong>John Smith</strong> <div id="contactinfo"> <br>10 Chicken Street <br>Australia <br>00000000 <br>srdtfj@gmail.com</div> </div> <p class="aboutme">About Me</p>

Answer 2

你可以用跨度和样式包裹地址以获得所需的ont，字体颜色等。这里我给出了联系信息的smaple样式。 Here是工作示例。

<img id="photo" src="https://sites.psu.edu/siowfa16/files/2016/10/YeDYzSR-
10apkm4.png" width="500">
<p class="name">
    <strong>John Smith</strong><br>
    <span>
      10 Chicken Street <br>Australia<br>00000000<br>srdtfj@gmail.com
    </span>
</p>
<p class="aboutme">About Me</p>

这是给出的额外风格。

.name span {
  font-family: sans-serif;
  font-size: 20px;
  color: green;
  font-weight: 400;
}

定位一个句子，但在同一个框中保留有针对性的句子

2 个答案: