첫째, 구문에 많은 문제가 있습니다. 예를 들어 <img>코드 내에서 코드 를 이동 해야 <body>합니다. 또한 <h1>코드 내부의 맨 아래에 있는 코드 도 이동해야합니다 <body>. 적절한 HTML 구문과 마크 업에 대한 자세한 내용은 Mozilla의 HTML 소개를 참조하십시오.
둘째, 많은 CSS 스타일링에 대해 외부 CSS 파일을 사용하는 것이 좋습니다 (다른 커뮤니티와 함께). 코드 개선을 시작 하려면 이 JSFiddle 을 참조하십시오 . CSS에 대한 훌륭하고 자세한 정보는 Mozilla의 CSS 개발자 가이드 를 참조하십시오.
다음 두 가지 이유로 "쇼핑" 텍스트가 중앙에서 벗어납니다.
하나 : 해결되지 않은 float항목이 CSS. CSS는 스타일 이 위에서 아래로 계단식으로 배열 됨을 의미합니다 . 순서가 중요합니다! 에서 요소 인 경우 다음 요소 아래에 있어야 합니다. 그렇지 않으면 그 이후의 모든 CSS 속성에 동일한 속성이 적용됩니다.CascadingStyle SheetsfloatCSSclearfloat
2 : 당신은 당신의 대한 폭 설정이없는 CSS문서가 가능성의 폭을 사용하려고, 그래서 속성을 <img>당신에 태그를 HTML,하는 것입니다 719px. 이것은 width: 719px;기본적으로를 중심으로 "Shop"텍스트를 만드는 것 입니다. 위의 JSFiddle 링크에 이러한 수정 사항을 추가했지만 중복성을 위해 코드를 대체해야하는 CSS 코드는 다음 <h1>과 같습니다.
h1 {
clear: both;
width: 100%;
color: #FFFFFF;
text-align:center;
background-color:#00a651;
}
이것은 당신을 도울 것입니다 : http://jsfiddle.net/L2nZQ/5/
그러나 당신은 정말로 기초를 배우기 시작해야합니다.
<html>
<head>
<title>Your Title</title>
<style>Your CSS</style>
</head>
<body>
Your Code
</body>
</html>
http://www.w3schools.com/ 을 수행하기에 좋은 사이트입니다 .
http://validator.w3.org/에서 코드를 확인할 수 있습니다.
출처
https://stackoverflow.com/questions/22079894