基于Html的个性化资讯资讯网页设计

当前进度第二阶段完成。

1.2 模块划分

1、用户模块，包括用户的注册、登陆等界面。

2、资讯模块，包括了热点资讯页面，推荐资讯页面与推测用户喜爱资讯页面等。

3、论坛模块，包括了热点话题页面、推荐话题页面与推测用户喜爱话题页面等。

4、评论模块，包括了热点资讯对应热点评论页面、推荐评论页面与推测用户喜爱资讯的热门评语页面等

5、搜索模块，包括了搜索返回页面等。

6、公共模块，包括了资讯主体页面与资讯板块通用显示页面。

2 模块原型设计 2.1 主页模块原型设计 图2-1主页面 – 展示

图2-2主页面

– 文章列表

图2-3主页面

– 页脚

2.2 关于模块原型设计

图2-4关于页面

2.3 文章模块原型设计

图2-5文章页面 – 文章分类与排版

图2-6文章页面 – 页脚

图2-7文章页面 – 示例文章页面

图2-8文章页面 – 示例文章页脚

2.4 登录模块原型设计

图2-9登录界面

– 后台登录主界面

2.5 后台模块原型设计

图2-10后台管理页面 – 仪表盘主页面

图2-11后台管理页面 – 文章管理

图2-11后台管理页面 – 写文章及发布页面

图2-12后台管理页面 – 全局设置页面

图2-13后台管理页面 – 更改密码页面

3 页面实现 3.1静态交互实现

**模块的交互效果代码，如表3-1、3-2所示。

表3-1 login.html *** 部分代码

表3-2 ***.html *** 部分代码

js代码分别实现了登陆时以ajax方式向后台进行提交，注册时，对用户名、密码、手机号进行条件判断，并验证后台回传的验证码与输入的验证码是否相同，当所有条件都满足时，才可按下注册按钮。

其余模块js代码主要作用为控制切换皮肤，仅以index.html页面为例，如表3-3所示。

表3-3 index.html 部分代码

上述代码完成了对三套css代码进行切换。

**模块的静态交互效果，如图3-1所示。

图3-1 login.html交互效果

3.2 样式实现

3.3 页面实现 3.3.1 主页模块的页面实现

height: 100vh;
    background: url('../imgs/bg.png') no-repeat center center;

采用绝对布局 控制高度和颜色 内容滚动方式

position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
    /* 内容大小 */
    width: 100vw;
    height: 100vh;
    /* 背景图像不随内容滚动 */
    background-attachment: fixed;
    
    background-color: rgba(50, 50, 50, 0.2);

首页文章展示 – 标题 摘要内容 日期 分类 标签

使用的 容器类 栅格布局进行对齐和间距设计

        

            

                

                    

                        
                        

                            

                                
                                
                                    
Ajax Step-In
                                
                                

                                    
Ajax Asynchronous JavaScript and XML
                                
                                
                                

                                    2019-11-19
                                    Codes
                                    Web Learning
                                
                            
                        

css

# board {
    position: relative;
    margin-top: -3rem;
    background-color:#fff;
border-radius: 0.5rem;
/* 平滑角 */
    z-index: 3;
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, .24)
, 0 17px 50px 0 rgba(0, 0, 0, .19);
/* 阴影 */
    /* 间距控制 */
    padding-top: 3rem;
    padding-bottom: 3rem;
}

3.3.2 关于模块的页面实现

CSS

.aboutAvatar{
    margin: -8rem auto 1rem;
    max-width: 10rem;
}

ID 内容

居中

            

                

                   

                       

                           
Ge15emium
                           
Perfectionist / CTF Noob / Front-End / Resume Driven Developer
                       
                   
                
            

3.3.3 文章模块的页面实现

文章列表显示 与主页面的文章展示基本相同 控制好间距 字重 对齐 统计 年份分类 文章标题 + 日期

3.3.4 登录模块的页面实现

账号输入页

密码输入框

3.3.5 后台模块的页面实现

    

      menu
      控制台
      返回首页
      

      
Ge15emium
      
    

卡片设计 展示数据与运行情况

    

      

        

          

            

              

                

                  
文章
                
                

                   
                
              
              

                

                  
4
                
    
              
            
          
        

  

    管理文章
    写文章
  

                

                    

                        
标题
                        
状态
                        
访问量
                        
发布时间
                        
编辑
                    
                
                

                    

                        
Ajax Step-In
                        
fiber_manual_record已发布
                        
40
                        
2019-11-19 16:45:00
                        
删除
                    
                    

                        
Ajax Step-In
                        
fiber_manual_record已发布
                        
40
                        
2019-11-19 16:45:00
                        
删除
                    
                    

                        
Ajax Step-In
                        
fiber_manual_record已发布
                        
40
                        
2019-11-19 16:45:00
                        
删除
                    
                    

                        
Ajax Step-In
                        
fiber_manual_record已发布
                        
40
                        
2019-11-19 16:45:00
                        
删除
                    
                    

                        
Ajax Step-In
                        
fiber_manual_record发布失败
                        
40
                        
2019-11-19 16:45:00
                        
删除
                    
                
            

写文章模块

标题栏

   输入标题
   

内容栏可向下自由拉伸长度 自适应长度

  

      开始编辑
      
  

系统设置页面

用户名 邮箱 个人描述的更改

与文章编写的代码基本一致

更改密码部分

为了提高安全性 需要输入原密码

并重复输入新密码

与上述代码基本一致 修改部分内容即可

资源下载地址：

资源下载地址：