웹 페이지 탐색 연습

내비게이션연습을 하면서 연습용으로 성공한 웹사이트의 소스코드를 살펴보았는데, 이 성공적인 코드를 통해 배울 수 있었으면 좋겠습니다. 엔지니어의 프로그래밍 아이디어를 구현합니다.
소스코드를 보면서 그동안 무시했던 내용도 많이 알게 되었고, 많은 유익을 얻은 기분이 들었습니다.

Lagou.com의 CSS 파일을 열면 첫 번째 부분에 주석이 표시되어 문서의 시간, 작성자, 스타일 내 특정 요소를 표시합니다. 색상, 너비, 높이를 쉽게 볼 수 있는 시트입니다.
두 번째 부분은 초기화된 요소 스타일과 초기화된 공개 클래스입니다.
세 번째 부분은 웹페이지 각 부분의 스타일입니다.

• 처음으로 했던 네비게이션 연습은 Lagou.com 네비게이션이었습니다.

  
  

  웹 페이지 탐색 연습

  관찰과 생각
  이를 위해서는 몇 단계의 중첩을 작성해야 합니까? 항해?
  2. 너비를 설정하시겠습니까, 아니면 100%를 사용하시겠습니까?
  3. 중앙에 맞추는 방법은?
  4. 로그인과 등록 사이의 얇은 경계를 구현하는 방법.
  이러한 문제는 제가 발견한 문제이며, 계속 진행하다 보면 분명 문제가 있을 것입니다.

• 주변 요소 스타일 설정

    #header{
        background: #fafafa;
        height: 60px;
        min-width: 1024px;
        border-top: 3px solid #00B38A;
    }
    #header .wrapper{
        width: 1024px;
        margin: 0 auto;
    }

  1. 가장 바깥쪽 주변 #header은 내비게이션의 높이와 내비게이션의 배경색을 설정합니다. 보더탑 스타일.
  2. 너비는 내부 .wrapper에 설정되고, 최소 너비는 외부 #header에 설정됩니다. 두 속성 은 모두 동일한 값을 갖습니다. 물론, 디스플레이 화면의 너비는 1024px보다 커야 하므로 .wrapper 안에 margin: 0 auto;를 추가하면 1024px 너비로 콘텐츠를 중앙에 배치할 수 있습니다.

• 내비게이션 요소 기본 레이아웃 수행

  
  

  웹 페이지 탐색 연습

    .wrapper .logo{
        float: left;
        margin-top: 7px;
        width: 229px;
        height: 43px;
        background: url(image/logo.png) no-repeat;
    }
    .wrapper .navheader{
        float: left;
        margin-left: 30px;
    }
    .navheader li{
        float: left;
    }
    .wrapper .loginTop{
        float: right;
    }
    .loginTop li{
        float: left;
    }

  1. 로고 이때 이미지의 원본 크기는 229×43이므로 이 설정에서는 이미지가 늘어나지 않습니다.
  2. 왼쪽에는 로고와 내비게이션 메뉴가 플로팅되고, 오른쪽에는 로그인 및 회원가입버튼이 플로팅됩니다.

• 탐색 메뉴 기본 스타일 수정
  참고: 마우스가 a 위로 지나갈 때 3px 테두리-하단이 있어야 합니다. 그런데 이 3px는 #header을 넘을 수 없습니다. li 높이를 60px, a 높이를 57px로 하여 마우스가 지나갔을 때 아래쪽 가장자리가 튀어나오지 않게 표시되도록 해야 합니다. .

  
  

  웹 페이지 탐색 연습

    .navheader li{
        height: 60px;
        padding: 0px 20px;                
    }
    .navheader li a{
        display: block;
        line-height: 57px;
        text-decoration: none;
        color: #999;
        font-size: 20px;
    }
    .navheader li a:hover{
        color: #333;
        border-bottom: 3px solid #00B38A;
    }
    .loginTop li{
        height: 30px;
        line-height: 30px;
        color: #FFF;
        background: #00B38A;
    }
    .loginTop li a{
        display: block;
        line-height: 30px;
        padding: 0px 10px;
        color: #fff;
        text-decoration:none ;
    }
    .loginTop li a:hover{
        color: #CCEAE3;
    }

  1. a는 인라인 요소이며 블록으로 변환해야 합니다. level 요소는 높이를 설정하는 것과 같습니다. 인라인 요소를 블록 레벨로 설정하지 않고 줄 높이를 직접 설정하면 높이를 변경하여 문서 흐름을 차지할 수 있지만 줄 높이가 차지하는 공간은 a에 속하지 않습니다.
  2. 주의 깊게 보면 행 높이만 설정하고 a 높이를 설정하지 않은 것을 알 수 있습니다. 왜냐하면 IE6 및 7 버전의 브라우저에서는 높이가 설정되지 않았을 때, a 찾았습니다. 실제 블록 수준 요소처럼 상위 요소를 채울 너비가 없습니다. 그런데 높이를 설정하고 나니 갑자기 블록레벨 요소의 특성을 갖게 된 것을 발견했습니다. 하지만 우리는 그가 그렇게 하는 것을 원하지 않기 때문에 키를 쓰지 않겠습니다. 이 효과는 호환됩니다. 작성해 보면 아주 간단합니다. float<a href="http://www.php.cn/wiki/974.html" target="_blank">:left<code>float<a href="http://www.php.cn/wiki/974.html" target="_blank">:left</a>만 추가하면 됩니다. a
  3. IE6은 png 형식의 이미지를 지원하지 않습니다. . . . .

• 사실 언뜻 보기에는 그런 모습을 하고 있는 것 같지만, 메뉴에 마우스를 올리면 메뉴의 변화가 갑작스러운 것이 아니라 점진적인 것을 발견했습니다.

    .navheader a,.loginTop a{
        transition: all .2s ease-in-out ;
        -webkit-transition: all .2s ease-in-out ;
        -moz-transition: all .2s ease-in-out ;
        -o-transition: all .2s ease-in-out ;
    }

  transition이 속성을 설정할 수 있으며, 요소의 특정 스타일이 변경되면 그라데이션도 변경될 수 있습니다. 더욱 흥미로운 사진을 얻을 수 있으며 html5에 대한 관련 지식을 배워야 합니다. 계속해서 배울 것입니다.

• *{<a href="http://www.php.cn/wiki/938.html" target="_blank">개요<code>*{<a href="http://www.php.cn/wiki/938.html" target="_blank">outline</a>:none;}:없음 ;}기본적으로 모든 요소의 윤곽선을 없음으로 설정합니다.

• body,p,a,span,ul,li{margin: 0;padding: 0;} 모든 요소의 내부 여백 을 0으로 설정합니다.

• ul.<a href="http://www.php.cn/wiki/1081.html" target="_blank">reset</a>{list-style:none;}去除掉列表的默认样式

• 首先分出body与footer两个部分。这里面还涉及相应的height与min-height设置，但是这些又涉及一些兼容的问题，所以我就先不写了，回头再另写一篇。

• 最外层嵌套使用id='header'标记，方便寻找里面子元素，里面就可以用class啦，.wrapper可以用作包围元素做公共类使用。class="navheader"与class="loginTop"可以作为查找元素使用。

• ul>li>a，一般的导航基本上都是这样的结构。

• ul前的a可以以背景为图片，做链接。

• 第一步：设计出html结构，并为元素设置相应的id与类

      <p>
          </p><p>
              </p><p>
                  <a></a>
                  </p>

                      
  • 首页
                      
  • 论坛
                      
  • 我的简历
                      
  • 发布职位
                  
                  
                      
  • 登录
                      
  • |
                      
  • 注册
                  
                                             

      

• 对网页进行全局的css设置。
  我先写下做导航时我用到的

• 对导航进行css设置

위 내용은 웹 페이지 탐색 연습의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!