问题
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>
回答1:
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>来源：https://stackoverflow.com/questions/56047406/how-to-line-through-all-links-inside-a-border-and-bold-mark-certain-text-of-a-pa