【HTML作业】仿TIM界面

coding加油站

已于 2023-02-20 20:23:19 修改

阅读量301

点赞数

分类专栏： web前端作业 Html+Css+JavaScript期末大作业文章标签： html javascript 前端

于 2022-08-11 20:44:30 首次发布

本文链接：https://blog.csdn.net/pandas23/article/details/126292819

版权

web前端作业同时被 2 个专栏收录

58 篇文章 68 订阅

订阅专栏

Html+Css+JavaScript期末大作业

31 篇文章 26 订阅

订阅专栏

1、引言

在吗？是否有过相关设计结课作业,课程设计无处下手，网页要求的总数量太多？没有合适的模板？数据库，java，python，vue，html作业复杂工程量过大？毕设毫无头绪等等一系列问题。你想要解决的问题，在微信公众号“coding加油站”中全部会得到解决

2、作品介绍

仿TIM采用HTML5，css3等相关技术来实现，符合所学知识体系，适用于常见的作业以及课程设计，需要获取更多的作品，请关注微信公众号：coding加油站，获取，如需更多资料，可在微信后台留言。欢迎大家来提问，交流学习。

2.1、作品简介方面

仿TIM采用常规方式来实现，符合绝大部分的要求。代码配置有相关文档讲解，如需从代码中学到知识点，那么这个作品将是你的不二之选

2.2、作品二次开发工具

此作品代码相对简单，基本使用课堂中所学知识点来完成，只需要修改相关的介绍文字，一些图片，就可以改为自己独一无二的代码，网页作品下载后可使用任意编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用）。

2.3、作品技术介绍

html网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等相关技术来美化相关界面，部分采用了javascript来做校验。使用html5，以及css3等相关技术完成技术的布局，在本作品中，会使用常见的布局，常见的浮动布局，flex布局都会有使用到哦。

3、作品演示

3.1、登录页

登录页
相关代码：

<template>
  <div>
    <div class="login">
      <div class="login-top">
        <div class="button">
          <i class="fa fa-minus"></i>
          <i class="fa fa-close"></i>
        </div>
        <img src="../assets/logo.png" alt="" class="logo-size">
      </div>
      <div class="login-bottom clearfix">
        <div class="touxiang fl">
          <div class="green"></div>
        </div>
        <div class="login-input fl">
          <input type="text" class="zhanghao"  value="123456"><i class="fa fa-angle-down" style="margin: 0 4px"></i><span>注册账号</span><br>
          <input type="password" class="mima" value="12345612123"><i class="fa fa-keyboard-o" style="top: -5px;"></i><span>找回密码</span>
        </div>
        <div class="checkbox clearfix">
          <input type="checkbox"checked><span class="remberPassword">记住密码</span>
          <input type="checkbox"><span>自动登录</span>
        </div>
        <div class="login-bt1">
          <i class="fa fa-address-book-o i-icon-1"></i>
          <router-link to="/mainMianBan">
            <span><i class="fa fa-shield"></i>&nbsp;&nbsp;&nbsp;&nbsp; 安 全 登 录 </span>
          </router-link>
          <i class="fa fa-qrcode i-icon-2"></i>
        </div>
      </div>
    </div>
  </div>
</template>

3.2、首页

在这里插入图片描述
相关代码：

<template>
  <div>
    <div class="mianMianBan" >
      <div class="top-ban clearfix">
        <div class="sm-touxiang fl" @click="toplist=2,toplist1=2" :class="{ 'visible':toplist === 1,'sm-touxiang-border':toplist ===2}"></div>
        <div class="touxiang-list"  @click="toplist=1,toplist1=1" :class="{ 'hidden':toplist1 === 1,'visible':toplist1=== 2}">
          <div class="touxiang-name">
            <p>测试用户</p>
            <span>coding加油站</span>
          </div>
          <ul class="fa-ul">
            <li><i class="fa fa-cloud fa-fw"></i>微云</li>
            <li><i class="fa fa-calendar-check-o fa-fw"></i>日程</li>
            <li><i class="fa fa-star-o fa-fw"></i>收藏</li>
            <li><i class="fa fa-envelope-open-o fa-fw"></i>邮箱</li>
            <li><i class="fa fa-volume-down fa-fw"></i>消息管理器</li>
            <li class="fuli"><i class="fa fa-gift fa-fw"></i>福利</li>
            <li><b></b>在线</li>
            <li><b></b>切换账号</li>
            <router-link to="/"><li><b></b>退出账号</li></router-link>
          </ul>
        </div>
        <div class="found">
          <i class="fa fa-search"></i>
        </div>
        <div class="test-box clearfix">
          <router-link to="/Message">
            <div class="test-tab fl" @click="message = 1,friends = 2,onLineWord =2" :class="{ 'test-tab':message === 2,'active':message === 1 }">
              <i class="test fa fa-wechat op"></i><br>
              <span class="sanjiao op">&#9650</span>
            </div>
          </router-link>
          <router-link to="/Friends">
            <div class="test-tab fl" @click="message = 2,friends = 1,onLineWord =2" :class="{ 'test-tab':friends === 2,'active':friends === 1 }">
              <i class="test fa fa-address-card-o op"></i><br>
              <span class="sanjiao op">&#9650</span>
            </div>
          </router-link>
          <router-link to="/onLineWord">
            <div class="test-tab fl" @click="message = 2,friends = 2,onLineWord =1" :class="{ 'test-tab':onLineWord === 2,'active':onLineWord === 1 }" >
              <i class="test fa fa-file-o op"></i><br>
              <span class="sanjiao op">&#9650</span>
            </div>
          </router-link>
        </div>
        <div class="gongneng fl">
          <i class="fa fa-navicon"></i>
          <i class="fa fa-minus"></i>
          <i class="fa fa-square-o"></i>
          <i class="fa fa-times hover-red"></i>
        </div>
      </div>
    <router-view></router-view>
    </div>
  </div>
</template>

<script>
import Firends from './Friends.vue'
import Message from './Message.vue'
import onLineWord from './onLineWord.vue'
  export default {
  data(){
    return{
      message:1,
      friends:2,
      onLineWord:2,
      toplist:1,
      toplist1:1
    }
  },
    components:{
      Firends,
      Message,
      onLineWord,
    }
  }
</script>

<style scoped>
  .mianMianBan{
    margin-top: 5%;
    margin-left: auto;
    margin-right: auto;
    width: 800px;
  }
  .top-ban{
    height: 55px;
    background-image: url("../assets/banenr-logo.png");
    border-top-right-radius: 7px;
    border-top-left-radius: 7px;
    width: 800px;
    box-shadow: 0 -3px 9px #898989;
    position: relative;
    top: 4px;
  }
  .sm-touxiang{
    width: 40px;
    height: 40px;
    border-radius: 40px;
    background-image: url("../assets/touxiang.jpg");
    background-size: cover;
    position: relative;
    border: 1px solid #2E9BE9;
    top: 7px;
    left: 7px;
  }
  .touxiang-list{
    position: relative;
    background-color: #FFFFFF;
    z-index: 2;
    width: 182px;
    top: 55px;
    float: left;
    right: 41px;
  }
  .touxiang-list ul i{
    margin-right: 5px;
    color: #A0A0A1;
  }
  .touxiang-list ul b{
    margin-left: 25px;
  }
  .touxiang-list ul li{
    cursor: pointer;
    line-height: 35px;
    padding-left: 10px;
    margin-left: -11px;
    font-size: 14px;
  }
  .touxiang-list ul li:hover{
    background-color: #EBECEE;
  }
  .sm-touxiang:hover{
    border: 1px solid #D4EBFB ;
  }
  .sm-touxiang-border{
    border: 1px solid #D4EBFB ;
  }
  .touxiang-name{
    height: 65px;
    border-bottom: 1px solid #F5F5F5;
  }
  .touxiang-name p{
    padding: 10px 0 0 8px;
  }
  .touxiang-name span{
    padding-left: 8px;
    color: #767676;
    font-size: 12px;
  }
  .touxiang-list ul{
    padding-left: 10px;
    margin-left: 0;
  }
  .fuli{
    padding: 7px 0 7px 0;
    border-bottom: 1px solid #F5F5F5;
    border-top: 1px solid #F5F5F5;
  }
  .found{
    width: 95px;
    height: 22px;
    border-radius: 22px;
    border: 1px solid #FFFFFF;
    color: #FFFFFF;
    opacity: 0.4;
    position: relative;
    left: 80px;
    top: 15px;
  }
  .found i{
    position: absolute;
    left: 8px;
    top: 3px;

  }
  .found:hover{
    color: #FFFFFF;
    opacity: 1.0;
  }
  .test-box{
    margin-left: 10px;
    margin-top: -10px;
  }
  .test-tab{
    margin-right: 35px;
  }
  .test-tab .sanjiao{
    position: relative;
    color: #FFFFFF;
    top:0;
    left: 5px;
    opacity: 0;
  }
  .test-tab i{
    color: #FFFFFF;
    font-size: 25px;
    opacity: 0.7;
  }
  .test-box .active .op,.test-box .active .op{opacity: 1.0}
  .test-box .test:hover{opacity: 1.0}

  .gongneng{
    position: relative;
    left: 480px;
    top: -6px;
  }
  .gongneng i{
    color: #FFFFFF;
    opacity: 0.6;
    margin-right: 5px;
  }
  .gongneng i:hover{
    opacity: 1.0;
  }
  .hover-red{
    padding: 3px;
  }
  .hover-red:hover{
    background-color: red;
    padding: 3px;
  }
</style>

3.3、聊天页

在这里插入图片描述

<template>
<div class="chat">
  <div class="chat-top clearfix">
    <span class="fl">测试用户1</span>
    <div class="fl chat-top-icon">
      <i class="fa fa-desktop"></i>
      <i class="fa fa-phone"></i>
      <i class="fa fa-comments"></i>
      <i class="fa fa-cog"></i>
    </div>
  </div>
  <div class="chat-body">

  </div>
  <div class="chat-box clearfix">
    <div class="icon fl">
      <i class="fa fa-font fa-fw"></i>
      <i class="fa fa-meh-o fa-fw"></i>
      <span>
        <i class="fa fa-scissors fa-rotate-270 fa-fw"></i>
        <i class="fa fa-caret-down small-icon"></i>
      </span>
      <i class="fa fa-mobile-phone fa-fw"></i>
      <i class="fa fa-microphone fa-fw"></i>
      <i class="fa fa-picture-o fa-fw"></i>
      <span>
        <i class="fa fa-folder-o fa-fw"></i>
        <i class="fa fa-caret-down small-icon"></i>
      </span>
      <i class="fa fa-envelope-open-o fa-fw"></i>
    </div>
    <div class="history-message fl">
      <span>消息记录</span>
      <i class="fa fa-caret-down small-icon"></i>
    </div>
    <br>
    <textarea class="input-chat"></textarea>
    <button class="fasong">发送(<u>s</u>)&nbsp;<i class="fa fa-caret-down fasong-icon"></i></button>
  </div>
</div>
</template>