Make your own navigation page and act now! _html/css_WEB-ITnose

WBOY
Release: 2016-06-24 12:34:35
Original
1177 people have browsed it

I believe everyone has used navigation websites, and I am no exception. However, one day I suddenly thought, why not make a navigation for myself? There used to be so many local or online APIs, and it took me a long time to find them every time I used them. Now I have built a small navigation page, which is clear at a glance, haha!

This is the source code of my navigation page, a sincere gift:

< html xmlns = "http://www.w3 .org/1999/xhtml" >

< head >

< meta http-equiv = "Content-Type" content = "text/html; charset=GB2312" / >

< title >My Homepage

< style type = "text/css" >

.main {

margin-top: 50px;

background-color: #D9FF99;

.title {

font-size: 40px;

color: #CC6633;

font-family: "汉正光典", "小元", "Microsoft亚黑", sans-serif;

text-shadow: 2px 2px 2px rgba(200, 200, 200, 0.5);

.content ul {

display: block;

width: 960px;

height: 400px;

list-style-type: none;

margin: 0;

padding: 20px 0px;

.content li {

display: block;

width: 192px;

height: 100px;

float: left;

text-align: center;

font-family: consolas,"Microsoft Yahei", sans-serif;

font-size: 24px;

.content li a {

display: block;

width: 140px;

height: 60px;

color: white;

text-align: center;

line-height: 60px;

background-color: green;

text-decoration: none;

margin: 18px 25px; : 1px solid #CCC;

.content li a:hover {

background-color: #0C0C35;

< body >

< table width = "960" border = "0" cellpadding = "0" cellspacing = "0" class = "main " align = "center" >

< tr >

         < table  width = "960"  border = "0"  cellspacing = "0"  cellpadding = "0" >

             < tr >

             < td  width = "382" >< img 

             src = "http://images.cnitblog.com/blog/343602/201310/28113106-18da6293d7a44fed97ce8b1dadaa6c30.jpg"

             width = "382"  height = "101"  border = "0" />

             < td  width = "578"  align = "center"  bgcolor = "#D5EDB3" >< span  class = "title" >我 的 主 页

            

        

    

< tr  height = "10" >

     < td  bgcolor = "#004000" >

< tr >

     < td  class = "content" >

         < ul >

            

             < li >< a  href = "jquery/index.html" >jQuery

             < li >< a  href = "android/index.html" >Android

             < li >< a  href = "hibernate/index.html" >Hibernate

             < li >< a  href = "groovy-api/index.html" >Groovy

             < li >< a  href = "grails/index.html" >Grails

             < li >< a  href = "five/index.html" >HTML5

             < li >< a  href = "bootstrap/index.html" >Bootstrap

         < ul >

    

 

这就是最终效果:

 

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!