zoukankan      html  css  js  c++  java
  • JavaScript网站设计实践(一)网站结构以及页面效果设计

    这是JavaScript DOM编程艺术里的构建JavaScript网站设计的例子,这本书给我学习JavaScript带来许多启发,在这个乐队宣传网站中,把前面学到的知识点整合在这个项目了。在这里记录下实现这个乐队的宣传网站的具体过程,加深理解。好,从现在开始来实现这个JavaScript网站实战。

    一、网页的结构

    由三个部分组成:头部、导航、内容

    效果图是这样的(勉强看,有点不美观。哈哈):

    二、网站的的结构

    这是我的项目目录。

    images——放置所有的要使用到的图片资源。

    style——放置使用到的层叠样式表

    js——放置所有要使用到的js文件

    5个html文件对应导航栏的5个菜单

             Home:网站主页

       About:乐队介绍

       Photos:乐队演出日程

             Live:乐队的演出日程

             Contact:供访者与乐队进行交流

    网站主页的代码:

    webDesign.html

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8" />
     5         <title>webDesign</title>
     6         <link rel="stylesheet" href="style/webdesign.css" />
     7         <link rel="stylesheet" href="style/color.css" />
     8         <link rel="stylesheet" href="style/typography.css" />
     9         
    10     </head>
    11     <body>
    12         <div id="header">
    13             <img src="images/weblogo.gif" />
    14         </div>
    15         
    16         <div id="navigation">
    17             <ul>
    18                 <li><a href="webDesign.html">Home</a></li>
    19                 <li><a href="about.html">About</a></li>
    20                 <li><a href="photos.html">Photos</a></li>
    21                 <li><a href="live.html">Live</a></li>
    22                 <li><a href="contact.html">Contact</a></li>
    23             </ul>
    24         </div>
    25         <div id="content">
    26             <h1> Lorem Ipsum DOlor</h1>
    27             <p>
    28                 Lorem ipsun dolor sit amet ,consectruer adipiscing elit.Nullam iaculis vestibulun 
    29                 Lorem ipsun dolor sit amet ,consectruer adipiscing elit.Nullam iaculis vestibulun 
    30                 Lorem ipsun dolor sit amet ,consectruer adipiscing elit.Nullam iaculis vestibulun 
    31                 Lorem ipsun dolor sit amet ,consectruer adipiscing elit.Nullam iaculis vestibulun 
    32                 Lorem ipsun dolor sit amet ,consectruer adipiscing elit.Nullam iaculis vestibulun 
    33             </p>
    34             
    35             </p>
    36         </div>
    37     </body>
    38 </html>

     css样式

    webdesign.css

     1 * {
     2     margin: 0;
     3     padding: 0;
     4 }
     5 body{
     6     margin:1em 10%;
     7 }
     8 
     9 #header{
    10     background-image: url(../images/guitarist.gif);
    11     background-color: #000;
    12     background-repeat: no-repeat;
    13     background-position: bottom right;
    14     border- .1em;
    15     border-style: solid;
    16     border-bottom- 0;
    17 }
    18 #navigation{
    19     background-image: url(../images/nav-bg.png);
    20     background-position: bottom left;
    21     background-repeat: repeat-x;
    22     border- .1em;
    23     border-style: solid;
    24     border-bottom- 0;
    25     border-top- 0;
    26     padding-left: 10%;
    27 }
    28 #navigation ul{
    29     100%;
    30     overflow: hidden;
    31     border-left- .1em;
    32     border-left-style: solid;
    33     
    34 }
    35 #navigation li{
    36     display: inline;
    37 }
    38 #navigation li a{
    39     display: block;
    40     float: left;
    41     padding: .5em 2em;
    42     border-right: .1em solid;
    43 }
    44 #content{
    45     border- .1em;
    46     border-style: solid;
    47     border-top- 0;
    48     padding: 2em 10%;
    49     line-height: 1.8em;
    50 }

    typography.css

    body {
        font-size: 76%;
        font-family: helvetica,arial,sans-serif;
    }
    body *{
        font-size: 1em;
    }
    a{
        font-weight: bold;
        text-decoration: none;
    }
    #navigation{
        
        font-family: "lucida grande", helvetica ,arial,sans-serif;
    }
    #navigation a{
        text-decoration: none;
        font-weight: bold''
    }
    #content{
        line-height: 1.8en;
    }
    #content p{
        margin:1em 0;
    }
    h1{
        font-family: georgia,"times new roman",sans-serif;
        font: 2.4em normal;
    }
    h2{
        font-family: georgia,"times new roman",sans-serif;
        font: 1.8em normal;
            margin-top: 1em;
    }
    h1{
        font-family: georgia,"times new roman",sans-serif;
        font: 1.4em normal;
        margin-top: 1em;
    }

    color.css

    body {
        color: #fb5;
        background-color: #334;
    }
    a:link{
        color: #445;
        background-color: #eb6;
    }
    a:visited{
        color: #345;
        background-color: #eb6;
    }
    a:hover{
        color: #667;
        background-color: #fb5;
    }
    a:active{
        color: #778;
        background-color: #667;
    }
    #header{
        color: #ec8;
        background-color: #334;
        border-color: #667;
    }
    #navigation{
        color: #455;
        background-color: #789;
        border-color: #667;
    }
    #content{
        color: #223;
        background-color: #edc;
        border-color: #99a; 
    }
    #navigation ul{
        border-color: #99a;
    }
    #navigation a:link,#navigation a:visited{
        color:#eef;
        background-color: transparent;
        border-color: #99a;
    }
    #navigation a:hover{
        color: #445;
        background-color: #eb6;
    }
    #navigation a:active{
        color: #667;
        background-color: #ec8;
    }

    然后,,打开谷歌浏览器浏览,看到的 页面是:

     网站总体布局完成了。接下来的就是写每一个页面,以及每个页面用到的JavaScript。

    每天进步一点点~~~~

  • 相关阅读:
    2016.07.13-map的使用(以leetcode1-Two Sum为例)
    2016.6.26——Maximum Depth of Binary Tree
    centos7下docker发布第一个微服务应用(Eureka)
    centos7下快速安装Nginx服务器
    java队列Queue及阻塞队列
    JConsole连接远程linux服务器配置
    mysql时间与字符串之间相互转换
    Tomcat启动报错:org.apache.catalina.LifecycleException: Failed to start component...java.util.zip.ZipException: error in opening zip file
    java post请求的表单提交和json提交简单小结
    wagon-maven-plugin实现自动打包部署到服务器
  • 原文地址:https://www.cnblogs.com/wuyinghong/p/3722399.html
Copyright © 2011-2022 走看看