CSS 프레임 워크 문제

Question

쉬운 웹 사이트를 개발해야하는데, 웹 개발에별로 좋지는 않지만 노력했지만 그 결과는 http://www.pes.herobo.com입니다.

페이지가 너무 좋지 않다고 생각하고 크기를 조정하려고하면 결과가 끔찍합니다. 또한 스마트 폰 및 태블릿과 같은 휴대 기기에서 웹 사이트에 액세스 할 수 있어야합니다.

이러한 문제의 원인 CSS 프레임 워크를 사용하기로 결정했습니다. 매우 흥미로운 부트 스트랩을 발견했습니다. (트위터가 잘 이해할 수 있다면) 트위터에서 개발 한 것이므로, 웹 사이트와 시스템을 사용하여 모든 웹 사이트를 재 작성했습니다. 결과는 웹 사이트가 올바른 방식으로 크기를 조정하는 것이 훨씬 더 낫습니다. 휴대폰에서 보면 모양이 완벽합니다.

그러나 올바른 방법으로 이미지를 사용하는 방법에 대해 궁금해합니다. 웹 페이지의 모든 요소를 ​​크기를 조정하여이 솔루션을 채택 했으므로 이미지를 사용해야하는지 알고 싶습니다. 맞다.

CSS 클래스 imagine은 다음과 같습니다

.imagine { 
    width:100%; 
    height:auto; 
} 

코드는 다음과 같습니다

<div class="row"> 
      <div class="span8" style="position:relative"> 
      <img src="img/image.jpg" class="imagine" style="z-index:0 id="img_oxf"> 
      <img src="img/site_under_construction.png" class="imagine" style="position:absolute;top:0;left:0;width:30%;z-index:1"; id="img_under_constr"> 
      <img src="img/blue_strap.png" class="imagine" ">  
      </div> 
      <div class="span4"> 
      <div id="main_paragraph"> 
      </div> 
    </div> 

Answer 1

귀하의 HTML은 대단히 유효하지 않습니다. 잘못된 HTML은 예측할 수없는 결과와 일관성없는 브라우저에서의 렌더링을 초래합니다. 다른 문제를 해결하기 전에 올바른 HTML로 시작하십시오.

---

이 잘못 ...

<img src="img/image.jpg" class="imagine" style="z-index:0 id="img_oxf"> 

당신은 브라우저가 id="img_oxf는 style 내부에 있어야하는데 생각하게 할 수있다 style에 닫는 따옴표를 놓치고있어.

<img src="img/site_under_construction.png" class="imagine" style="position:absolute;top:0;left:0;width:30%;z-index:1"; id="img_under_constr"> 

당신은 HTML 사이에 세미콜론 속성을 가지고 ... 그것은해야합니다 ...

<img src="img/image.jpg" class="imagine" style="z-index:0;" id="img_oxf"> 

---

그리고 이것은 잘못된 것입니다.

<img src="img/blue_strap.png" class="imagine" "> 

당신은 브라우저가 클래스 imagine" 대신이라고 생각 될 수 있습니다 추가 인용 "이 ...이 ...

<img src="img/site_under_construction.png" class="imagine" style="position:absolute;top:0;left:0;width:30%;z-index:1;" id="img_under_constr"> 

---

해야합니다 그리고 이것은 잘못된 것입니다 imagine. 그것은해야합니다 ...

<img src="img/blue_strap.png" class="imagine"> 

---

그리고 당신은 닫는 </div> 태그 곳을 누락 될 것으로 보인다.