乐山网站建设

专注高端品牌网站建设行业优质供应商！认准小谭建站！
028-86922220135-1821-9792
  • 首页
  • 网站建设
    网站设计包含服务 网站制作流程 有效沟通方式 售后服务
  • 微信开发
  • 案例展示
    乐山小谭建站公司作品案例展示
  • 新闻资讯
  • 解决方案
  • 小谭建站
  • 联系我们

    • 【Nodejs开发】第2章网站首页的布局

    请关注我的小站：http://oideas.herokuapp.com/

    1.布局之前的准备工作

    创新互联公司是一家专注于网站设计、网站建设与策划设计,纳溪网站建设哪家好?创新互联公司做网站,专注于网站建设10多年,网设计领域的专业建站公司;建站业务涵盖:纳溪等地区。纳溪做网站价格咨询:18982081108

    上一章我们已经搭建好了环境，本站就开始我们的OMinds的开发吧。

    在开始之前，先让我们来装点东西，打开cmd，切换到project目录，输入命令：

    npm install -g supervisor

    效果如下图（由于正在等待安装只截了一部分）：

    【Nodejs开发】第2章 网站首页的布局

    注意：每次我们更新代码后，都需要手动停止并重启应用，使用 supervisor 模块可以解决这个问题，每当我们保存修改的文件时，supervisor 都会自动帮我们重启应用。所以这里安装supervisor ，以便于我们能方便看到自己的布局效果。

    在任何你觉得合适的地方，建立一个文本文档，写入内容如下：

    @echo off
cd E:\nworks\OMinds
supervisor app.js


    其中cd E:\nworks\OMinds 是你的项目目录，保存之后，重命名为server.bat，以后启动server只需点击server.bat即可。

    注意：假如你的project在e盘，而bat在桌面上，那么需要在以上代码@echo off后面添加一行代码：

     e:

    表示切换到e盘。

    OK，准备工作已经做好，让我们跑一下server看看吧：

    【Nodejs开发】第2章 网站首页的布局

    2.开始布局（本站只使用chrome浏览器做效果，如果你自己的网站布局已做好，可以跳过这一章）

    首先实现导航栏，在public文件夹下建立p_w_picpaths、js两个目录，加上已经存在的stylesheets目录，共3各目录，打开style.css，清空里面的内容，加入以下css：

    body{
    margin: 0 auto;
    padding: 0;
    background: url(../p_w_picpaths/bgnoise_lg.png) repeat left top;
    font: bold 12px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
ul {
    list-style: none;  
}
#navigation {
    margin: 20px auto; 
    text-transform: uppercase;
    color: #444;
}
#navigation:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
#navigation ul {   
     margin: 0 auto;
     padding:0;
}
#navigation li {
    float: left;
    border-style: solid;
    border-width: 1px;
    border-color: #BABABA #BABABA #BABABA #FFF;
    box-shadow: 0 1px rgba(255,255,255,1) inset;
    -webkit-box-shadow: 0 1px rgba(255,255,255,1) inset;
    background: #F7F7F7; /* Old browsers */
    background: -moz-linear-gradient(top, #F7F7F7 0%, #EDEDED 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F7F7F7), color-stop(100%,#EDEDED)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #F7F7F7 0%,#EDEDED 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #F7F7F7 0%,#EDEDED 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #F7F7F7 0%,#EDEDED 100%); /* IE10+ */
    background: linear-gradient(top, #F7F7F7 0%,#EDEDED 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7', endColorstr='#EDEDED',GradientType=0 ); /* IE6-9 */   
}
#navigation li:hover, #navigation li.current {
    box-shadow: 0 1px rgba(255,255,255,0.2) inset;
    -webkit-box-shadow: 0 1px rgba(255,255,255,0.2) inset;
    border-color: #262626 !important;
    background: #4D4D4D; /* Old browsers */
    background: -moz-linear-gradient(top, #4D4D4D 0%, #262626 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4D4D4D), color-stop(100%,#262626)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #4D4D4D 0%,#262626 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #4D4D4D 0%,#262626 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #4D4D4D 0%,#262626 100%); /* IE10+ */
    background: linear-gradient(top, #4D4D4D 0%,#262626 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4D4D4D', endColorstr='#262626',GradientType=0 ); /* IE6-9 */
}
#navigation a {
    display: block;
    padding: 10px 15px;
    color: #444;
    text-decoration: none;
    text-shadow: 0 1px #FFF;
}
#navigation a:hover, #navigation li.current a {
    color: #FFF;
    text-shadow: 0 1px #000;
}
#navigation li:first-child {
    border-left-color: #BABABA;
    border-radius: 100px 0 0 100px;
}
#navigation li:last-child {
    border-radius: 0 100px 100px 0;
}

    在p_w_picpaths文件夹里把我们的背景图片添加进去：

    【Nodejs开发】第2章 网站首页的布局

    打开views下的inde.ejs文件，在此之前，先让我们调整一下项目的编码，在eclipse下，右键->properties->resource，text file encoding 选择utf-8，由于目前不支持gbk，index.ejs内容如下（是设置编码格式的）：

    

  
    
    <%= title %>


    打开浏览求看一下导航的效果：

    【Nodejs开发】第2章 网站首页的布局

    可以看到搜索与登录之间有一块留白，这个可以根据自己需要进行调整，我的想法是当点击搜索时向右拉出搜索框，不过暂时不着急。

    其次，实现内容布局，再次打开style.css，添加以下css代码：

    .content {
    max-width: 690px;
    margin: 20px auto;
}
.cell {
    margin: 0 auto;
    background-color: #fff;
    clear: both;
    padding: 18px 20px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    margin-bottom: 20px;
    border-radius: 4px;
}
.cell_loc{
    float:right;
    padding:2px 6px;
    background:url(../p_w_picpaths/bgnoise_lg.png);
    border-radius: 9px;
    border-color: #BABABA #BABABA #BABABA #FFF;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2) inset,
                0 0 0 1px rgba(0, 0, 0, 0.2) inset;
    font-size:6px;
}
.cell_author {
    font-size: 14px;
    vertical-align: middle;
    line-height: 100%;
    margin: 0 0 17px;
}
.cell_author img {
    border-radius: 20px;
    box-shadow: 0 0 6px hsla(0, 27%, 42%, .5);
    width: 40px;
    height: 40px;
    max-width: 100%;
    vertical-align: middle;
    margin: 0 10px 0 0;
    border: 0;
}
.cell_author img:hover{
    box-shadow: 0 0 8px hsla(350, 89%, 48%, 0.69);
}
.cell_author a {
    color: #9b8878;
}
.cell_author a:hover {
    color: #300;
}
.cell_text {
    word-break: break-all;
    line-height: 160%;
}
.cell_bar {
    margin: 15px 0 0 0;
    height: 30px;
    font-size: 12px;
}
.cell_bar ul li {
    float: left;
}
.cell_bar ul li a {
    display: block;
    height: 28px;
    line-height: 30px;
    margin-right: 10px;
    text-indent: 20px;
    color: #BEBEBE;
    width: 80px;
    font-weight: 500;
}
.cell_bar ul li a:hover {
    color: #9e8c7b;
}
.cell_bar_comm {
    float: right;
    margin: 0;
    padding: 0;
}
.cell_bar_comm li {
    float: left;
}
.cell_share {
    float: right;
}
.share_icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    overflow: hidden;
    background: url(../p_w_picpaths/share_logo.png) no-repeat;
}
.share_sn {
    float: right;
    margin-right: 5px;
    background-position: -50px 0px;
}
.share_tc {
    float: right;
    margin-right: 15px;
    background-position: -100px 0px;
}
.share_rr {
    float: right;
    margin-right: 5px;
    background-position: -150px 0px;
}

    打开index.ejs，在之后添加代码：

    
        
    
            
    
                
                OMinds
                1#
            
    
            
    
                OMinds，发表你的心事，你可以不用登录，不用在乎是否会被别人嘲笑，因为在这里大家都是一样的没有谁会嘲笑你。                
            
    
            
    
                
                
      
                    
    • 评[10]
      •

    其中p_w_picpaths/tem.jpg为：

    【Nodejs开发】第2章 网站首页的布局

    好，刷新浏览器看看效果如何：

    【Nodejs开发】第2章 网站首页的布局

    好基本上小站原型已成，下面做一下修剪，在views目录下新建header.ejs、footer.ejs文件，将index.ejs中以上的代码全部拷贝到header.ejs中，并在index.ejs的最顶端添加代码：

    <%- include header%>

    将index.ejs中最后一个

    及以后的代码提取到footer.ejs中，并在indes.ejs中添加代码:

    <%- include footer%>

    那么，最后index.ejs中应该为：

    <%- include header%>
    
    
        
    
            
    
                
                OMinds
                1#
            
    
            
    
                OMinds，发表你的心事，你可以不用登录，不用在乎是否会被别人嘲笑，因为在这里大家都是一样的没有谁会嘲笑你。                
            
    
            
    
                
                
      
                    
    • 评[10]
      •
    <%- include footer%>


    以上的首页是没什么问题了，有了显示，就需要有数据来源，来源就是通过投稿页，那么下面来布局投稿页面，先在header.ejs中把代码：

  • 投稿

    • 修改为：

  • 投稿


    • 表示我们通过upminds地址访问投稿页面，直接拷贝复制index.ejs文件命名为：upminds.ejs，将header和footer以外的代码删除。再次打开style.css添加css：

    .upideas_content {
    position: relative;
    width: 690px;
    margin: 0 auto;
    padding: 0 10px 0 10px;
}
.clear_fix {
    display: block;
}
.clear_fix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.up_content {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    background: #fff;
    padding: 20px;
    margin-bottom: 20px;
    margin-top: 20px;
    display: block;
    border-radius: 4px;
}
.up_bar {
    color: #666;
    width: 200px;
    float: right;
}
.up_bar h4 {
    font-size: 16px;
    padding: 0 0 20px 0;
    margin: 0;
}
.up_bar ol li {
    padding: 15px 0;
    border-top: 1px solid #efefef;
    list-style-position: inside;
    list-style-type: decimal;
    line-height: 140%;
}
.up_content_text {
    width: 422px;
    float: left;
}
.up_idea_text {
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.1);
    border: 1px solid #ccc;
    background: #f9f9f9;
    font-size: 14px;
    line-height: 18px;
    padding: 10px;
    resize: none;
    width: 400px;
}
.up_idea_err{
    float: left;
    color:#FF0000;
    padding: 10px 0 0 0;
}
.up_idea_btn {
    border-radius: 2px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    background: #FF8000;
    color: #fff;
    font-size: 14px;
    line-height: 18px;
    padding: 10px 20px 10px 20px;
    border: 0 none;
    float: right;
}

    upminds.ejs中的代码：

    <%- include header%>
    
    
        
    
            
    
                
    
                
    投稿须知
    
                
      
                    
    1. 分享自己或朋友的Minds（心事），不浮夸、有意义，不含政治、×××、广告、诽谤、歧视等内容。
      2. 
                    
    2. 分享的Minds（心事），将在审核之后发布。
      3. 
                    
    3. 转载请注明出处，任何由Minds引发的法律等纠纷，本站概不负责。
      4. 
                    
    4. 不得盗用站内其他会员的Minds。
      5. 
                
    
                
    
                
    
                    
    
                        
                        
                    
    
                
    
            
    
        
    
    
    
<%- include footer%>


    打开routes/index.js文件，内容最终为：

    module.exports = function(app) {
  app.get('/', function (req, res) {
    res.render('index', { title: 'OMinds' });
  });
  app.get('/upminds', function (req, res) {
        res.render('upminds', { title: 'OMinds' });
  });
};

    打开浏览器，点击投稿导航，效果：

    【Nodejs开发】第2章 网站首页的布局

    好了，本站的基本布局以及OK了，有些同学可能会说了，导航里面不是还有很多东西没实现吗，不要紧，当前已经能基本满足需求，别人能投稿，能显示别人的投稿不就ok了吗，其他的慢慢来。

    下一章将会链接db，来动态显示内容，不然，一直静态的多没意思啊。

    注：有些同学可能回觉得，呀，你做这个教程干嘛啊，直接把源码给我们不久ok了吗，还在这墨迹个什么啊，我写的代码很乱，是之前ideas项目的代码，现在做的是Ominds,完全是从头开始做的，一步一步做的，不过，不用担心，我一定会做完的，也没多少东西，每天一章的话，基本上1周半就完事了。

    请关注我的小站http://oideas.herokuapp.com/，最好是能注册一下，当然，由于用的是外机，很卡，不能要求什么了。

    源码已上传到git，点击这里下载

    ideas-ominds交流群：158325682，有想要一起做的，或者有什么不懂的都可以找我哦。


    csdn全blog地址：http://blog.csdn.net/joveth/article/category/1862915


    文章标题：【Nodejs开发】第2章网站首页的布局
    URL链接：http://lszwz.com/article/gdgisc.html

    其他资讯

    售后响应及时

    7×24小时客服热线

    数据备份

    更安全、更高效、更稳定

    价格公道精准

    项目经理精准报价不弄虚作假

    合作无风险

    重合同讲信誉，无效全额退款

    联系我们

    TEL

    135-1821-9792

    028-86922220

    地址：乐山市太升南路288号锦天国际

    快捷导航

    Shortcut

    二维码

    QR CODE

    • 微信公众号

    • 手机端网站

    乐山小谭建站工作室是一家专注从事于高品质视觉体验及互联网设计开发，乐山网站建设，乐山网站设计，乐山网页设计，乐山网站制作，品牌网站建设，营销网站建设，集团网站建设，企业网站建设，外贸网站建设，响应式网站建设，小程序开发，微信开发，企业形象设计，企业宣传视频等服务，小谭建站位于乐山市龙岗区大运软件小镇，小谭建站拥有经验丰富的高级网站建设工程师和一流的网页高端设计人员，具备各种规模与类型网站建设的雄厚实力，在网站建设领域树立了自己独特的设计风格。
    友情链接 交换友情链接
    定制网站设计   成都木托盘   成都h5建站开发   网站seo优化   德阳电信机房   成都全屋定制   物流公司网站建设方案   网站建设方案   微官网开发   成都展柜制作   

    Copyright © 2022 青羊区小谭信息技术咨询服务工作室 乐山建站工作室 All Rights Reserved   蜀ICP备2021004003号-25

    Copyright © 2022 青羊区小谭信息技术咨询服务工作室 乐山建站工作室 

    蜀ICP备2021004003号-25