如何在边框内的所有链接之间加线并以粗体标记段落的某些文本 [英] How to line-through all links inside a border and bold mark certain text of a paragraph
本文介绍了如何在边框内的所有链接之间加线并以粗体标记段落的某些文本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我应该创建的最终产品，目前我正在过程的这一阶段，我被困在如何进行底部边框的3/4直行链接以及如何进行以粗体标记两个边界的最后一段.以及如何在两个边界之间创建空间，如最终产品所示
This is the end product i'm supposed to create and i'm currently during this stage of the process and i'm stuck on how to do a line-through 3/4 links of the bottom border and how to bold mark both borders final paragraph. and also how to create space between the 2 borders as shown in the end product
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8" />
<title>Uppgift 4E</title>
<style>
html {
background-color: lightslategrey;
}
body {
margin: auto;
width: 500px;
padding-bottom: 0.1px; /*knep för div margin */
background-color: #f0ffff;
text-align: center;
font-family: sans-serif;
}
h1 {
Color: purple;
}
#billy {
color: darkred;
border-style: solid;
border-color: purple;
border-width: 1.5px;
border-radius: 5px;
text-align: left;
}
#bob {
color: darkgreen;
border-style: solid;
border-color: purple;
border-width: 1.5px; /* border tjockhet */
border-radius: 5px; /* rundiga kanter på border */
text-align: left;
}
.two {
font-size: large;
}
.three {
font-size: small;
}
}
#bob > .two > a {
text-decoration: underline overline;
}
#bob > .three > a {
text-decoration: line-through;
}
</style>
</head>
<body>
<h1>Uppgift 4E</h1>
<div id="billy">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
</p>
<p class="two">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
</p>
<p class="three">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
</p>
</div>
<div id="bob">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
</p>
<p class="two">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
</p>
<p class="three">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
</p>
</div>
</body>
</html>
推荐答案
添加两件事可以帮助您在p标签的左边距和右边距以及div的页边距
Adding two things help you margin left and right for the p tag and margin for div
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8" />
<title>Uppgift 4E</title>
<style>
html {
background-color: lightslategrey;
}
body {
margin: auto;
width: 500px;
padding-bottom: 0.1px; /*knep för div margin */
background-color: #f0ffff;
text-align: center;
font-family: sans-serif;
}
h1 {
Color: purple;
}
#billy {
color: darkred;
border-style: solid;
border-color: purple;
border-width: 1.5px;
border-radius: 5px;
text-align: left;
margin: 10px;
}
#bob {
color: darkgreen;
border-style: solid;
border-color: purple;
border-width: 1.5px; /* border tjockhet */
border-radius: 5px; /* rundiga kanter på border */
text-align: left;
margin: 10px;
}
p {
margin-left: 5px;
margin-right: 5px;
}
.two {
font-size: large;
}
.three {
font-size: small;
}
}
#bob > .two > a {
text-decoration: underline overline;
}
#bob > .three > a {
text-decoration: line-through;
}
</style>
</head>
<body>
<h1>Uppgift 4E</h1>
<div id="billy">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
</p>
<p class="two">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
</p>
<p class="three">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
</p>
</div>
<div id="bob">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
</p>
<p class="two">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
</p>
<p class="three">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse imperdiet velit sit amet neque tempor et imperdiet augue <a href="">porttitor</a>.
</p>
</div>
</body>
</html>
这篇关于如何在边框内的所有链接之间加线并以粗体标记段落的某些文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
