-2
저는 CSS 초보자입니다. 난 그냥 다음 코드를 사용하여 기본 HTML 페이지를 그릴 :이 CSS 코드를 최적화하는 방법은 무엇입니까?
여기<html>
<head>
<title>Hey</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header class="top-menu"></header>
<div class="container">
<div class="left-side"></div>
<div class="main-content"></div>
</div>
<div class="foot"></div>
</body>
</html>
있는 style.css되어 목적은 CSS를 몇 가지 문제 같은를 crap.even 보이는 straightforward.But됩니다
.top-menu{
position: fixed;
top: 0;
left: 70px;
right: 70px;
height: 50px;
background-color: #000000;
}
.container{
margin: 70px 70px 20px 70px;
display: inline-block;
width: 91%;
}
.left-side {
width: 30ex;
min-height: 30ex;
float: left;
background-color: blue;
}
.main-content {
width: 80ex;
float: right;
background-color: red;
min-height: 100ex;
}
.foot {
background-color: green;
height: 5ex;
width: 91%;
margin-left: 10ex;
}
가 물어보고 싶은 일부 질문 :
1. 컨테이너의 왼쪽과 오른쪽 여백은 70px이며 최상위 메뉴와 동일하지만 크롬 페이지 뷰에서 왜 정렬되지 않습니까?
2. '컨테이너'너비를 100 %로 설정하면 가로 스크롤 막대가 나타납니다 (발 부분과 동일)?
3. 컨테이너의 디스플레이를 '인라인 블록'으로 설정하지 않은 경우 발 부분이 공중에 날아간 이유는 무엇입니까? (심지어 내가 '블록'으로 설정)
4. 나에게 더 나은 CSS 스타일 코드를 줄 수 있습니까?
감사합니다. 나는 모든 요소들로부터 모든 최소 높이를 타고 있습니다. 컨테이너의 상태를 표시해야하는 이유는 디스플레이 속성을 사용하면 발 부분이 컨테이너 부분과 겹칠 것입니다. 어떤 아이디어? – LeoShi
많은 사람들이 IE6/7을 더 이상 사용하지 않습니다. 0.3 & IE6 및 1.2 % IE7. 대부분의 IE 사용자는 IE8을 사용하지만 OP는 항상 ie9.js와 같은 것을 사용하여 HTML5 요소와의 호환성을 강제합니다. – Kyle
IE6를 0.3 % 이상 사용하지 않아서 고맙습니다. 나는 html5의 채택에 시간이 걸린다는 생각을 단순히 암시하고 있었고,이 전환기에는 예상대로 작동하지 않을 특정 HTML 태그' '을주의해야합니다. – ProfileTwist