html5 및 css3에서의 메뉴 작동 방식 이해

안녕하세요! 나는 html 5와 css3에서 멋진 메뉴를 만드는 법을 배우려하고있다. 이 언어들에 대한 저의 작은 경험으로 메뉴 뒤에있는 논리가 빠져 있다는 것을 곧 발견했습니다. 이 스레드의 아이디어는 메뉴의 논리와 스타일을 이해하는 방법 (또는이 스레드 이후에 이해)을 확인하는 것입니다.html5 및 css3에서의 메뉴 작동 방식 이해

두 부분으로 나뉘어집니다. 두 번째 부분은 코딩 자체에 중점을두고, 첫 번째 부분은 이론에 중점을 둡니다.

그래, 내가 읽은 것/알아 낸 것, 모든 메뉴의 아이디어는 기본적으로 사용자 정의 스타일 목록입니다. 지금까지 잘 모르겠지만 무엇을 이해하지 못했는지 정확하게 알 수는 있습니다. < li> 요소의 스타일을 지정하는 방법과 정확히 얼마만큼의 형식을 지정해야하는지 알 수 있습니다. 이 요소들 안에 무엇이 있는지 말하면 많은 사람들이 버튼 위로 요소를 사용하는 것을 선호합니다. 표준 또는 스타일 기본 설정입니까? 요소가 < 인 경우 이점이 있습니까?

나는 이것이 실제 코드에 대한 이론을 다루고 있다고 생각합니다. 나는 내가 할 수있는 것으로부터 작은 메뉴를 처음부터 만들었다. 예를 들어 li:last-child 및 li:first-child 부분의 CSS와 같이 작동하지 않는 부분이 있습니다.

1) 오류가있는 곳을 알고 싶습니다. 2)이 코드를 개선 할 수있는 방법을 알고 싶습니다.

<!DOCTYPE html> 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8" /> 
<style> 
    /* this should remove all padding, margins and outlines*/ 
    * { 
    margin: 0; 
    padding: 0; 
    outline: none; 
} 
    /*This will style the list itself*/ 
     ul { 
     list-style: none; 
     margin: 3% 40%; 
    } 
     li:first-child { 
      border-top-left-radius: 10px; 
      border-bottom-left-radius: 10px; 
     } 
    li:last-child { 
     border-top-right-radius: 10px; 
     border-bottom-right-radius: 10px; 
    } 
    li { 
     float : left;  
     } 
    /*This will style the buttons*/ 
    .buttonStyle { 
     width : 60px; 
     height : 20px; 
     border-radius: 1px; 
     } 
    /*This should make them change their color when they are hovered*/ 
    .buttonStyle:hover { 
          background: #383;        
     /*this line :*/  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F7F7F7', endColorstr='#EDEDED',GradientType=0); 
         } 

</style> 
</head> 
<body> 

    <!-- custom made list to store the buttons--> 
    <ul > 
     <!-- Just some buttons to make it look like a menu--> 
     <li><input type="button" class="buttonStyle" /></li> 
     <li><input type="button" class="buttonStyle"/></li> 
     <li><input type="button" class="buttonStyle"/></li> 
     <li><input type="button" class="buttonStyle"/></li> 
     <li><input type="button" class="buttonStyle"/></li> 
    </ul> 
</body> 
</html>

출처

2013-06-21 Bloodcount

A와 INPUT의 차이/버튼은 단락을 구성하지 않는 것이 :

여기에 내부의 의견 전체 소스 코드입니다. 표현 컨텐트 만 포함하지 않는 경우. 나는 이것이 보통 선호된다고 생각한다.

https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories

에 관한 : 첫 아이 : 마지막 자식 pseudoclasses, 당신은 제대로 사용되지 않을 수 있습니다.

어쩌면 당신은이 작업을 수행하려는 :

li:first-child input { 
    border-top-left-radius: 10px; 
    border-bottom-left-radius: 10px; 
} 
li:last-child input{ 
    border-top-right-radius: 10px; 
    border-bottom-right-radius: 10px; 
}

http://jsfiddle.net/3uw6p/

출처

2013-06-21 10:05:25 Scipion

html5 및 css3에서의 메뉴 작동 방식 이해

답변

관련 문제