저는 웹 개발이 처음이고 웹 사이트 포트폴리오를 만들고 있습니다. 제 웹 사이트는 www.laurenschaller.com입니다. 모든 것이 내가 원하는 방식으로 작동합니다. 단 가끔 (항상 그런 것은 아니지만 새로 고침하면 정상으로 돌아갑니다) 크롬에서 열 때 "Who I Am"텍스트를 감싸는 두 물결이 해당 텍스트와 겹칩니다. 이 http://imgur.com/Zxt7bEE
다음은 html입니다.
<div class="wave1div">
<div id="waveBlue1"></div>
<img class="wave1" src="img/loadingwave.png" alt="leftwave">
</div>
<div class="whoIAm">
<h1>WHO I AM</h1>
</div>
<div id="waveBlue2"></div>
<div class="wave2div">
<img class="wave2" src="img/loadingwave.png" alt="rightwave">
</div>
</div>
<!-- Waves end -->
그리고 여기에 내가 스타일을 지정했습니다.
.waveHeader {
text-align: center;
}
.wave1div, .wave2div, .whoIAm {
display: inline-block;
}
.wave1div, .wave2div, #waveBlue2 {
position: absolute;
top: 270px;
}
.wave1, .wave2{
width: 200px;
position: absolute;
display: block !important;
}
#waveBlue2, #waveBlue1 {
height: 43px;
background: $blue;
position: absolute;
display: inline-block;
text-align: center;
}
#waveBlue1 {
width: 0px;
max-width: 198px;
right:15px;
bottom:-43px;
margin-left: -50px;
}
#waveBlue2 {
max-width: 200px;
}
.prog-bar1, .wave1 {
left: -213px;
}
잘못 코딩 된 것이 있으면 사과드립니다. 내가 말했듯이, 나는 배우기에 매우 익숙하며 도움을 주셔서 감사합니다.
"waves"div를 삭제하고 다음과 같이 제목을 그대로 둡니다.
<section class="about">
<h1>WHO I AM</h1>
</section>
그런 다음 헤딩 자체의 : before 및 : after 의사 요소에 대한 배경으로 웨이브를 추가합니다.
.about h1:before, .about h1:after {
content:'';
width:200px;
height:44px;
display:inline-block;
background:url('img/loadingwave.png') no-repeat;
background-color:#86c3c1;
background-size:200px 44px;
}
.about h1:before {
margin-right:30px;
}
.about h1:after {
margin-left:30px;
}
의사 요소는 매우 멋지고이 요소로 많은 효과를 낼 수 있습니다. 읽어보세요 :
CSS에서 : before 및 : after 의사 요소 사용 방법 배우기
이를 수행 할 수있는 또 다른 방법은 다음과 같이 범위 안에 제목의 내용을 넣는 것입니다.
<h1><span>WHO I AM</span></h1>
그런 다음 범위의 배경을 흰색으로 설정하고 파도를 h1 요소의 배경으로 사용할 수 있습니다.
.about span {
background:#FFF;
}
.about h1 {
background:url('files/wave-orig.png') center repeat-x;
background-color:#86c3c1;
background-size:200px 44px;
}
스팬 방식으로 가기로 결정한 경우 많은 마크 업을 수정해야합니다. 제목을 블록 레벨 요소로 만들고 적절한 높이를 선언하고 컨테이너의 너비를 조정하는 등의 작업을 수행해야합니다.
나는 이것에 대해 다른 옵션으로 말하고 있지만 의사 요소 방식은 현재 레이아웃으로 구현하는 것이 가장 쉽습니다.
그건 그렇고, 나는 또한 당신이 margin-bottom:rhythm상당한 양의 요소를 사용 하고 있음을 발견했습니다 -유효한 CSS가 아니며 아무것도하지 않습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다