问如何在标题和简介框的左侧添加彩色框
EN

Stack Overflow用户

提问于 2020-05-25 01:52:03

回答 1查看 37关注 0票数 2

我正在尝试在"Solve 4 Success“和"Member”文本的左边插入一个蓝色方框。我试着让它们直接放在另一个的上面，文本框在左边。如果我的解释令人困惑，这里有一张图片。

如果你能帮上忙，请告诉我。我是HTML和CSS的新手，所以任何东西都可以帮助我。谢谢

@font-face {
  font-family: 'futuralight';
  src: url('../Fonts/Futura Light/futura_light_regular-webfont.woff2') format('woff2'),
       url('../Fonts/Futura Light/futura_light_regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'tekoregular';
  src: url('../Fonts/Teko/teko-regular-webfont.woff2') format('woff2'),
       url('../Fonts/Teko/teko-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'playfair_displayregular';
  src: url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff2') format('woff2'),
       url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'poppinsmedium';
  src: url('../Fonts/Poppins/poppins-medium-webfont.woff2') format('woff2'),
       url('../Fonts/Poppins/poppins-medium-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
*{
    margin:0px;
    padding:0px;
    border:0px;
}
.topnav {
    background-color: rgb(84,104,217);
    overflow: hidden;
    font-family: 'futuralight';
    font-weight:900;
 }
  .topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 20px 21px;
    text-decoration: none;
    font-size: 19px;
    position: relative;
    left:2%;
  }
  .topnav a:before {
    content: "";
    position: absolute;
    width: 84%;
    height: 2px;
    bottom: 6px;
    left: 8%;
    background-color: white;
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.3s ease-in-out 0s;
  }
 .topnav a:hover:before {
    visibility: visible;
    transform: scaleX(1);
  }
.topnav a.active-menu:before {
    content: "";
    position: absolute;
    width: 84%;
    height: 2px;
    bottom:6px;
    left: 8%;
    background-color: white;
    visibility: visible;
    transform: scaleX(1);
    transition: all 0.3s ease-in-out 0s; 
    }
  .bigcomser{
    text-align:center;
    font-size: 80px;
  }
.bodycs{
  background-color:  #EEF0FC;
  height:8000px;
}
.comser{
  font-family: 'tekoregular';
  padding-top:42px;
  font-family: 'playfair_displayregular';
  font-weight:900;
}
.abtcomser{
  padding-top: 48px;
  padding-bottom: 28px;
  font-size: 20px;
  position: relative;
  left:10%;
  width:80%;
}
.s4s{
  position: relative;
  left:10%;
  margin-top:60px;
  height:350px;
  width:80%;
  background-color: white;
  box-shadow:
  0 2.8px 2.2px rgba(0, 0, 0, 0.034),
  0 6.7px 5.3px rgba(0, 0, 0, 0.048),
  0 12.5px 10px rgba(0, 0, 0, 0.06),
  0 22.3px 17.9px rgba(0, 0, 0, 0.072),
  0 41.8px 33.4px rgba(0, 0, 0, 0.086),
  0 100px 80px rgba(0, 0, 0, 0.12);
  border-radius: 5px;
}
.s4simage{
  width:38.3%;
  position: absolute;
  right:0%;
  padding-top:10px;
  padding-right:10px;
}
.s4stitle{
  position: relative;
  left:4%;
  padding-top:30px;
  color:rgb(84,104,217);
  font-weight:900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
}
.s4slink{
  text-decoration:none;
  color:rgb(84,104,217);
}
.titles4s{
  padding-top:2px;
  font-size:22px;
  padding-left:4%;
  font-family: 'futuralight';
  font-weight:300;
}
.s4sparagraph{
  width:55%;
  position: relative;
  left:4%;
  font-size:17px;
  top:60px;  
  font-family: 'futuralight';
}
.bluebox{
  background-color: rgb(84,104,217);
  padding-top: 80px;
  width:2%;
  position: relative;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css"  href="../CSS/stylecomser.css" />
    <title>Community Service</title>
</head>
<body class='bodycs'>
    <header class="topnav" id="topnav">
        <a class="link" href="../index.html">Home</a>
        <a class="link" href="#Academics">Academics</a>
        <a class="link" href="#Projects">Projects</a>
        <a class="active-menu" href="../Pages/communityservice.html">Community Service</a>
      </header>
      <div class='bigcomser'>
        <p class='comser'>
            Community Service
        </p>
      </div>
      <div class='abtcomser'>
        <p>Lorem, ipsum dolor sit amet consectetur adipisici
            ng elit. Dicta, libero! Recusandae provident est quam quisquam.
             Sequi itaque suscipit tempore corrupti officia maxime 
             nihil consequatur perspiciatis repellat placeat sed, voluptatum vitae.lor
             em Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro similique, prov
             ident libero laudantium amet odit unde dolor eaque earum qui impedit possimus natus est
              distinctio commodi quod aut numquam temporibus?
        </p>
    </div>
    <div class='s4s'>
        <img class='s4simage' src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File">
        <p class='s4stitle'>
            <a class='s4slink' href="https://www.solve4success.org" target="_blank">Solve 4 Success</a>
        </p>
        <div class='bluebox'>
        </div>
        <p class='titles4s'>
            Member
        </p>
        <p class='s4sparagraph'>
            Lorem ipsum dolor sit amet consectetu
            r adipisicing elit. Eaque minus ab doloribus nulla quidem esse re
            pellat, asperiores ex vero minima saepe. Est officia accusamus odio et ver
            itatis placeat sapiente laudantium?Lorem ipsum dolor sit amet 
            consectetur, adipisicing elit. Nesciunt blanditiis alias officiis ducimus tenetur, ipsa moll
            itia dicta error aliquam aliquid aperiam est repellat iure vitae
            bum exercitationem nihil, accusam
            us libero.
        </p>
    </div>
    
</body>
</html>

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-05-25 02:04:34

将.bluebox替换为position: absolute;的::before元素。并将.s4slink和.titles4s放在.s4stitle中。现在，左行的高度将是两个标题高度的总和。请看。

@font-face {
  font-family: 'futuralight';
  src: url('../Fonts/Futura Light/futura_light_regular-webfont.woff2') format('woff2'),
       url('../Fonts/Futura Light/futura_light_regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'tekoregular';
  src: url('../Fonts/Teko/teko-regular-webfont.woff2') format('woff2'),
       url('../Fonts/Teko/teko-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'playfair_displayregular';
  src: url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff2') format('woff2'),
       url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'poppinsmedium';
  src: url('../Fonts/Poppins/poppins-medium-webfont.woff2') format('woff2'),
       url('../Fonts/Poppins/poppins-medium-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
*{
    margin:0px;
    padding:0px;
    border:0px;
}
.topnav {
    background-color: rgb(84,104,217);
    overflow: hidden;
    font-family: 'futuralight';
    font-weight:900;
 }
  .topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 20px 21px;
    text-decoration: none;
    font-size: 19px;
    position: relative;
    left:2%;
  }
  .topnav a:before {
    content: "";
    position: absolute;
    width: 84%;
    height: 2px;
    bottom: 6px;
    left: 8%;
    background-color: white;
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.3s ease-in-out 0s;
  }
 .topnav a:hover:before {
    visibility: visible;
    transform: scaleX(1);
  }
.topnav a.active-menu:before {
    content: "";
    position: absolute;
    width: 84%;
    height: 2px;
    bottom:6px;
    left: 8%;
    background-color: white;
    visibility: visible;
    transform: scaleX(1);
    transition: all 0.3s ease-in-out 0s; 
    }
  .bigcomser{
    text-align:center;
    font-size: 80px;
  }
.bodycs{
  background-color:  #EEF0FC;
  height:8000px;
}
.comser{
  font-family: 'tekoregular';
  padding-top:42px;
  font-family: 'playfair_displayregular';
  font-weight:900;
}
.abtcomser{
  padding-top: 48px;
  padding-bottom: 28px;
  font-size: 20px;
  position: relative;
  left:10%;
  width:80%;
}
.s4s{
  position: relative;
  left:10%;
  margin-top:60px;
  height:350px;
  width:80%;
  background-color: white;
  box-shadow:
  0 2.8px 2.2px rgba(0, 0, 0, 0.034),
  0 6.7px 5.3px rgba(0, 0, 0, 0.048),
  0 12.5px 10px rgba(0, 0, 0, 0.06),
  0 22.3px 17.9px rgba(0, 0, 0, 0.072),
  0 41.8px 33.4px rgba(0, 0, 0, 0.086),
  0 100px 80px rgba(0, 0, 0, 0.12);
  border-radius: 5px;
}
.s4simage{
  width:38.3%;
  position: absolute;
  right:0%;
  padding-top:10px;
  padding-right:10px;
}
.s4stitle{
  position: relative;
  left:4%;
  padding-top:30px;
  color:rgb(84,104,217);
  font-weight:900;
  font-size: 40px;
  font-family: 'futuralight';
  text-decoration: none;
  line-height: 1;
}
.s4stitle::before {
  content: '';
  background-color: rgb(84,104,217);
  width:10px;
  height: 100%;
  position:absolute;
  left: -4%; 
  top: 30px; /* = padding-top of parent */
}
.s4slink{
  text-decoration:none;
  color:rgb(84,104,217);
}
.titles4s{
  padding-top:2px;
  font-size:22px;
  padding-left:4%;
  font-family: 'futuralight';
  font-weight:300;
}
.s4sparagraph{
  width:55%;
  position: relative;
  left:4%;
  font-size:17px;
  top:60px;  
  font-family: 'futuralight';
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css"  href="../CSS/stylecomser.css" />
    <title>Community Service</title>
</head>
<body class='bodycs'>
    <header class="topnav" id="topnav">
        <a class="link" href="../index.html">Home</a>
        <a class="link" href="#Academics">Academics</a>
        <a class="link" href="#Projects">Projects</a>
        <a class="active-menu" href="../Pages/communityservice.html">Community Service</a>
      </header>
      <div class='bigcomser'>
        <p class='comser'>
            Community Service
        </p>
      </div>
      <div class='abtcomser'>
        <p>Lorem, ipsum dolor sit amet consectetur adipisici
            ng elit. Dicta, libero! Recusandae provident est quam quisquam.
             Sequi itaque suscipit tempore corrupti officia maxime 
             nihil consequatur perspiciatis repellat placeat sed, voluptatum vitae.lor
             em Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro similique, prov
             ident libero laudantium amet odit unde dolor eaque earum qui impedit possimus natus est
              distinctio commodi quod aut numquam temporibus?
        </p>
    </div>
    <div class='s4s'>
        <img class='s4simage' src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File">
        <p class='s4stitle'>
            <a class='s4slink' href="https://www.solve4success.org" target="_blank">Solve 4 Success</a>
            <p class='titles4s'>
            Member
            </p>
        </p>
        
        <p class='s4sparagraph'>
            Lorem ipsum dolor sit amet consectetu
            r adipisicing elit. Eaque minus ab doloribus nulla quidem esse re
            pellat, asperiores ex vero minima saepe. Est officia accusamus odio et ver
            itatis placeat sapiente laudantium?Lorem ipsum dolor sit amet 
            consectetur, adipisicing elit. Nesciunt blanditiis alias officiis ducimus tenetur, ipsa moll
            itia dicta error aliquam aliquid aperiam est repellat iure vitae
            bum exercitationem nihil, accusam
            us libero.
        </p>
    </div>
    
</body>
</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61990030

复制

相似问题

问如何在标题和简介框的左侧添加彩色框
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在标题和简介框的左侧添加彩色框EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在标题和简介框的左侧添加彩色框
EN