목차
大学生网
大学生论坛
daxues.cn
웹 프론트엔드 HTML 튜토리얼 小试牛刀1:制作一个简单的导航栏页面_html/css_WEB-ITnose

小试牛刀1:制作一个简单的导航栏页面_html/css_WEB-ITnose

Jun 24, 2016 am 11:32 AM

页面效果大概目标:http://www.daxues.cn/forum.php

 

一、布局

  从页面来看,可以分为三个部分,第一部分是导航栏,第二部分是有“大学生论坛”字样的蓝色部分,余下的是第三部分也可以分为二部分:搜索栏和主要内容区域;而主要内容区域又可分为:导航栏、主体、底部。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>大学生论坛</title> 6     <style type="text/css"> 7         *{margin:0;padding:0;} 8         body{ 9             margin:0;    10             width:100%;11             height:1000px;    12         }13         .header-nav{width:80%;margin:0 auto;height:50px;}14         .section{15             width:100%;16             height:100px;17             background-color:#726FEA;18         }19         .main{width:100%;height:850px;background-color:#D5F5FB;}20         .main-header{width:80%;height:100px;margin:0 auto;}21         .container{width:80%;height:750px;margin:0 auto;}22         .main-nav{height:100px;}23         .content{height:600px;}24         .footer{height:50px;}25     </style>26 </head>27 28 <body>29     <div class="header-nav"></div>30     <div class="section"></div>31     <div class="main">32         <div class="main-header"></div>33         <div class="container">34             <div class="main-nav"></div>35             <div class="content"></div>36             <div class="footer"></div>37         </div>38     </div>39 </body>40 </html>
로그인 후 복사

  大概效果如下:

   (下面还有一个底部,这里没有显示出来)

二、现在开始设计第一、二两大部分

  第一部分主要是导航等,第二部分就是图片和文字。第三部分就是表单、导航等。

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  2 <html xmlns="http://www.w3.org/1999/xhtml">  3 <head>  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  5 <title>大学生论坛</title>  6     <style type="text/css">  7         *{margin:0;padding:0;}  8         body{  9             margin:0;     10             width:100%; 11             height:1000px;     12         } 13          14         /*header-nav部分*/ 15         .header-nav{width:80%;margin:0 auto;height:50px;} 16         h3{color:red;float:left;padding-right:25px;margin-top:5px;} 17         ul{list-style-type:none;margin-top:5px;} 18         li{display:inline;padding-right:10px;} 19         .header-nav a{text-decoration:none;color:#000;} 20         .header-nav a:hover,a:active{text-decoration:underline;color:red;} 21         #inset{margin-top:-15px;margin-left:400px;} 22         .righter a{float:right;border-right:#CCC solid thin;padding:0 5px;} 23         .righter{margin-top:-20px;} 24          25          26         /*section部分*/ 27         .section{ 28             width:100%; 29             height:100px; 30             background-color:#726FEA; 31         } 32         h1{color:#FFF;float:left;margin-top:20px;margin-left:130px;} 33         small{color:#FFF;float:left;margin-left:-150px;padding-top:40px;} 34          35          36         /*main部分*/ 37         .main{width:100%;height:850px;background-color:#D5F5FB;} 38          39         /*main-header部分*/ 40         .main-header{width:80%;height:100px;margin:0 auto;} 41         h2{color:red;} 42         h4{color:blue;} 43         .search{text-align:center;} 44          45          46          47         /*container部分*/ 48         .container{width:80%;height:750px;margin:0 auto;background-color:snow;border:1px #E8FDEF solid;} 49          50         /*main-nav部分*/ 51         .main-nav{height:100px;} 52         .main-nav ul{list-style-type:none;} 53         .main-nav li{display:inline;} 54         .main-nav a{ 55             text-decoration:none; 56             color:snow; 57             background-color:#FFB366; 58             float:left; 59             padding:10px 25px; 60         } 61         .main-nav a:hover,a:active{ 62             background-color:#C44000;     63         } 64          65          66          67         /*content部分*/ 68         .content{height:600px;} 69          70         /*footer部分*/ 71         .footer{height:50px;} 72          73          74          75     </style> 76 </head> 77  78 <body> 79     <div class="header-nav"> 80         <h3 id="大学生网">大学生网</h3> 81         <ul> 82             <li><a href="#">社区</a></li>     83             <li><a href="#">新闻</a></li> 84             <li><a href="#">励志</a></li> 85             <li><a href="#">网校</a></li> 86             <li><a href="#">淘学生</a></li> 87             <li><a href="#">导航</a></li> 88         </ul> 89         <input id="inset" type="text" /> 90         <div class="righter"> 91             <a href="#">登录</a> 92             <a href="#">注册</a> 93         </div> 94     </div> 95     <div class="section"> 96         <h1 id="大学生论坛">大学生论坛</h1><br /> 97         <small>daxues.cn/forum.php</small> 98     </div> 99     <div class="main">100         <div class="main-header">101             <h2 id="大学生网">大学生网</h2>102             <h4 id="daxues-cn">daxues.cn</h4>103             <div class="search">104                 <input type="text" id="inset2" />105                 <input type="button" value="搜索" />106             </div>107         </div>108         <div class="container">109             <div class="main-nav">110                 <ul>111                     <li><a href="#">论坛</a></li>112                     <li><a href="#">门户</a></li>113                     <li><a href="#">新闻</a></li>114                     <li><a href="#">家园</a></li>115                     <li><a href="#">励志</a></li>116                     <li><a href="#">网校</a></li>117                     <li><a href="#">书库</a></li>118                     <li><a href="#">淘学生</a></li>119                     <li><a href="#">签到</a></li>  120                     <li><a href="#">手机客户端下载</a></li> 121                 </ul>   122             </div><hr />123             <div class="content"></div><hr />124             <div class="footer">125             </div>126         </div>127     </div>128 </body>129 </html>
로그인 후 복사

  效果:

    

      难点在于第一部分的所有内容要求在同一水平线上,实例中我是运用float、margin和padding来实现的,但是这种方法有一个弊端,它只适用于我的电脑,如果换一台比较大或者比较小的电脑,每个部分的排序可能会打乱。

  (技术不是很好,只做出了一个大概的模板~大家有更好的建议可以提出来!o(╯□╰)o)

 

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? 공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? Mar 04, 2025 pm 12:32 PM

공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까?

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? Mar 17, 2025 pm 12:27 PM

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까?

웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? 웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? Mar 04, 2025 pm 02:39 PM

웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까?

& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? & lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? Mar 20, 2025 pm 06:05 PM

& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까?

& lt; meter & gt의 목적은 무엇입니까? 요소? & lt; meter & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:35 PM

& lt; meter & gt의 목적은 무엇입니까? 요소?

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? Mar 17, 2025 pm 12:20 PM

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까?

& lt; Progress & Gt의 목적은 무엇입니까? 요소? & lt; Progress & Gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:34 PM

& lt; Progress & Gt의 목적은 무엇입니까? 요소?

내비게이션 및 SEO에 HTML 링크를 효과적으로 사용하려면 어떻게합니까? 내비게이션 및 SEO에 HTML 링크를 효과적으로 사용하려면 어떻게합니까? Mar 18, 2025 pm 02:39 PM

내비게이션 및 SEO에 HTML 링크를 효과적으로 사용하려면 어떻게합니까?

See all articles