菜单 搜索
首页 前端知识 （其他页面问题）基于HTML CSS JavaScript的网页项目大作业其他页面部分（含前后端，Jquery，Bootstrap，Animate.css，Node等）

（其他页面问题）基于HTML CSS JavaScript的网页项目大作业其他页面部分（含前后端，Jquery，Bootstrap，Animate.css，Node等）

2024-03-04 10:03:22 前端知识 前端哥 740 281 我要收藏

文章目录

    • 平台网页
        • 设计思路
          • 开始所想：
          • 实际开发过程
        • css代码
        • Html代码
    • 运营网页设计
        • 设计思路：
        • css代码
        • Html代码
        • JS代码
    • 登录页面设计
      • Logo部分
        • 设计思路
          • 开始所想
          • 实际开发过程
          • 改进方案
        • Css代码
        • Html代码
      • 登录部分
        • 设计思路
          • 开始所想
          • 实际开发过程中
          • 改进方案
        • Css代码
        • Html代码

平台网页

设计思路
开始所想：

根据内容分为两个部分，一个部分为图片样式，一部分为文字部分。通过定位对内容进行控制

实际开发过程

与设计所想相似

css代码
#platform{
    width:100%;
    height: 500px;
    /*background: url("https://www.qianduange.cn/upload/article/ABUIABACGAAg4Jj52AUosPrgjAcwgA842AQ.jpg.webp") no-repeat;*/
    /*background-size: cover;*/
    position: relative;

}
#platform>img{
    width: 100%;
    height: 100%;
}
#platformFont{
    width:370px ;
    height: 34px;
    position: absolute;
    bottom: 54px;
    right: 351px;
    /*background:goldenrod ;*/
    text-align: center;
}
#platformFont>a{
    color: rgb(73, 110, 232);
    text-decoration: none;
    font-size: 24px;

}
Html代码
<div id="platform">
  <img src="https://www.qianduange.cn/upload/article/ABUIABACGAAg4Jj52AUosPrgjAcwgA842AQ.jpg.webp" alt="">
  <div id="platformFont"><a href="http://cn.mikecrm.com/A3OHUWT">在&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;线&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;提&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;交&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;需&nbsp;&nbsp;&nbsp;&nbsp;求</a></div>
</div>

运营网页设计

设计思路：

与首页部分的

导航栏，视频部分，第三部分，第五部分，第六部分，第八部分，和第九部分，还有底部相同。

对于广告部分，设计相应格式，在点击关闭广告的按钮后实现display：none的效果

css代码
html,body{
    min-width: 1500px;
    position: relative;
}

#sticky-operate{
    position: fixed;
    width: 220px;
    height: 320px;
    right: 20px;
    top: 116px;
    z-index: 6;

}
#sticky-operate>img{
    width: 100%;
    height: 100%;
}
#close{
    position: absolute;
    top: 7px;
    right: 10px;
    width: 35px;
    height: 35px;
    /*background: #f80202;*/

}
Html代码
<!DOCTYPE html>
<html lang="ch" xmlns="http://www.w3.org/1999/html">
<head>
  <meta charset="UTF-8">
  <title>造点新货（原淘宝众筹）全案代运营服务商 策划设计审核运营推广一站式服务 深圳市红蚁电子商务有限公司</title>
  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="node_modules/swiper/dist/css/swiper.min.css">
  <link rel="stylesheet" href="node_modules/animate.css/animate.min.css">
  <link rel="stylesheet" href="public/css/reset.css">
  <link rel="stylesheet" href="public/css/public.css">
  <link rel="stylesheet" href="public/css/index.css">
  <link rel="stylesheet" href="public/css/operate.css">
</head>
<body>
<div id="sticky-operate">
  <img src="public/img/advertisement.png" alt="">
  <div id="close"></div>
</div>
<div id="header">
  <div>
    <a href="">
      <img src="https://www.qianduange.cn/upload/article/ABUIABACGAAgtJKy7AUomJ7K0AUwkAM4lgE!300x300.jpg.webp" alt="*">
    </a>
  </div>
  <div id="headerTheme">
    <div>
      <span>众筹方案咨询：139 2386 3320（微信同号）</span>
    </div>

    <ul>
      <li ><a href="/">首页</a></li>
      <li><a href="">服务</a></li>
      <li><a href="">众筹视频制作</a></li>
      <li class="active"><a href="/operate.html">众筹全案代运营</a></li>
      <li><a href="/platform.html">电商平台入住</a></li>
      <li><a href="">联系我们</a>
        <ul>
          <li><a href="">关于我们</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div><!--导航栏-->
<div id="content">
<!--  <div id="topVideo">-->
    <video src="http://12063910.s21v.faiusr.com/58/ABUIABA6GAAgjIbogAYo8vHtHw.mp4" muted autoplay loop></video>
<!--  </div>&lt;!&ndash;视频&ndash;&gt;-->
  <div id="PartThree">
    <div id="ThreeHeader">
      <a href="https://login.taobao.com/member/login.jhtml?redirectURL=https://izhongchou.taobao.com:443/dreamdetail.htm/_____tmd_____/page/login_jump?rand=S3WxGHAgAt756EpznwfNzJq2AFA2qBNla3j6EINUS8We9dazM_iKElp8DwVSHZUevpC41Bx7RzivXIj9RnZgdg&_lgt_=d641a4bab2983ce209769b5e7b5b36c2___167165___df2446f45e1c988578ec27523d0a9c76___23e418033d927e424b4f6fd5d415899a688079c8d9cf6f982d8e03e90fc84e8d1893ab8ef77f6138c58256c196ab8e9dd13b727d4ed3d1348120dfded2853d89922577d4698af190cba6f9a24f5dd4382266002edbf0fad35fa342874bc446c936aef023cb574e983375e849e4cc0e564b4d464569335a71b6b51b1dab37f1c37e062c8e4c21cea1d0aa21ff1c6f4bd94911064be5e6c2205c64e045f3b8e58cf80dff6e3bfc39c114d7406a49e2af5d77ad16805d3dd340898bb5ce2b2f00271db9cdb49a0ab24a466d372e4fbcfcb60f26537787ace35b1cef6eaf19a262f13db28ac4019a2baeed6aa7fde6dbac1a095b916e1bd89c6575dac9ecd1bc05d738726091baf89abd6510c4dc4b2d891eff8b96012c35b7fe1795c31072d4147f&uuid=d641a4bab2983ce209769b5e7b5b36c2">
        <img src="https://www.qianduange.cn/upload/article/imageEffetc_magnifier.png?v=202104251101"
             alt="">
        <img src="https://www.qianduange.cn/upload/article/ABUIABACGAAgit-nngYohJXiuQYwgAo42AQ.jpg.webp" alt="">
      </a>
    </div>
    <div id="ThreeFooter">
      <a href="http://cn.mikecrm.com/B1KzN4U">
        <img src="https://www.qianduange.cn/upload/article/ABUIABADGAAgw_Tz2AUo98GAiwEwsAk4Qg.gif.webp" alt="">
      </a>
    </div>

  </div><!--第三部分-->
  <div id="PartFive">
    <div id="FiveHeader" class="animate__animated">
      <img src="https://www.qianduange.cn/upload/article/ABUIABACGAAgqsPv8AUooKOdywcwgA84-AI.jpg.webp" alt="">
    </div>
    <div id="FiverFooter">
      <div id="LinkExchange">
        <div><p>友情链接</p></div>
      </div>
      <div id="FiveLine">
        <a href="https://izhongchou.taobao.com/">造点新货</a>
      </div>
    </div>
  </div><!--第五部分-->
  <div id="PartSix">
    <div id="SixFont" class="animate__animated">
      <span>“</span>
      <span>&nbsp;众筹是一次与用户共建美好生活体验的过程&nbsp;</span>
      <span>”</span>
    </div>
  </div><!--第六部分-->
  <div id="PartEight">
    <div id="EightHeader" class="animate__animated">
      <p><strong>我们的优势</strong></p>
      <span>不断的努力，严格要求自己，真诚的为客户服务</span>
    </div>
    <div id="EightFooter" class="animate__animated">
      <div class="EightContent"><img
              src="https://www.qianduange.cn/upload/article/AD0IncmbBRAEGAAg0JSevgUo9arCHTB0OEo.png.webp" alt="">
        <p>10+</p>
        <span>每个项目独立运营负责</span></div>
      <div class="EightContent"><img
              src="https://www.qianduange.cn/upload/article/AD0IncmbBRAEGAAg0pSevgUogrbprgUwdDhK.png.webp" alt="">
        <p>2000+</p>
        <span>项目运营经验</span></div>
      <div class="EightContent"><img
              src="https://www.qianduange.cn/upload/article/AD0IncmbBRAEGAAg05SevgUo9NTA5gcwdDhK.png.webp" alt="">
        <p>1000+</p>
        <span>客户好评</span></div>
      <div class="EightContent"><img
              src="https://www.qianduange.cn/upload/article/AD0IncmbBRAEGAAg1ZSevgUooNGJkgIwdDhK.png.webp" alt="">
        <p>10000W+</p>
        <span>众筹金额</span></div>
    </div>
  </div><!--第八部分-->
  <div id="PartNine">
    <div id="NineContent">
      <div id="NineRight" class="animate__animated">
        <p>每一款产品都是作品</p>
        <div>
          <span>我们对于每一款的产品的理解是具有生命的，产品本身就具有人的特质。体现着创始人及团队的理想、努力、汗水。从创造它到传递给用户的过程，是一个全心全意培养、呵护的过程。每一刻都用心对待。</span>
        </div>
      </div>
    </div>
  </div><!--第九部分-->
</div><!--中部-->
<div id="footer">
  <div class="container">
    <div class="row">
      <div id="footerOne">
        <h4 class="text-center">深圳市红蚁电子商务有限公司</h4>
        <ul class="animate__animated">
          <li>
            <div>
              <img src="https://www.qianduange.cn/upload/article/AD0IncmbBRAEGAAgvYL5vgUo0JageTAUOBg.png.webp"
                   alt="">
              <span>深圳市宝安区福永大道深彩大厦1002</span>
            </div>
          </li>
          <li>
            <div>
              <img src="https://www.qianduange.cn/upload/article/AD0IncmbBRAEGAAghYX5vgUoh6XCgwMwFjgW.png.webp"
                   alt="">
              <span>联系电话：13923863320</span>
            </div>
          </li>
          <li>
            <div>
              <img src="https://www.qianduange.cn/upload/article/AD0IncmbBRAEGAAg44b5vgUoxaPp7AUwFjgW.png.webp"
                   alt="">
              <span>工作时间：09:00—18：00</span>
            </div>
          </li>
          <li>
            <div>
              <img src="https://www.qianduange.cn/upload/article/AD0IncmbBRAEGAAgj4f5vgUolIqV4gYwGTgR.png.webp"
                   alt="">
              <span>735360728@qq.com</span>
            </div>
          </li>

        </ul>
      </div>
      <div id="line">
        <span>———————————————————————————————————————————————————————————————————————————————————————————</span>
      </div>
    </div>
  </div>
  <div class="container-fluid">
    <div class="row">
      <p id="copyright" class="text-center">
        <span class="text-center">首页</span>
        <br>
        版权由：深圳市红蚁电子商务有限公司　所有
        <br>
        <a href="http://m.hy-c.cn/">手机版</a>|
        <a href="https://beian.miit.gov.cn/#/Integrated/index">粤ICP备18030295号</a>
      </p>

    </div>
  </div>


</div><!--底部-->

</body>
</html>
<!--<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>-->
<script src="node_modules/swiper/dist/js/swiper.min.js"></script>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="public/js/index.js"></script>
<script src="public/js/operate.js"></script>
JS代码
$(()=>{
    $("#close").on('click',()=>{
        $('#sticky-operate').css('display','none')
    })
})

登录页面设计

Logo部分

设计思路
开始所想

将内容分为左右两部分，通过定位让文本分布在左右两边。左边设计成H1标签，右边设计为div标签右浮动

实际开发过程

过程中右边的部分通过左浮动不太好定位，对齐放方式是下方对齐

改进方案

改用定位将文本进行精准定位

Css代码
#header{
    width: 80%;
    height: 88px;
    margin: 0 auto;
    left: 0;
    right: 0;
    background: #FFFFFF;
    top: 0;
    z-index: 18;
    position: relative;
}
#header-right{
    position: absolute;
    right: 0;
    top: 0;

    text-decoration: none;
    font-size: 12px;
    z-index: 18;
    height: 100%;
    vertical-align: top;
}
#accessibility{
    color: #666;

}
#accessibility:hover{
    color: #f40;
    text-decoration: none;
}
#header>h1{
    width: 72px;
    height: 42px;
    background: url("data:image/png;base64,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") no-repeat 0 0/100% 100%;

}
Html代码
<div id="header">
    <h1>
        <a href="https://www.taobao.com/"></a>
    </h1>
    <div id="header-right">
        <a href="javascript:void(0)" id="accessibility" >网站无障碍</a><br>
        <a href="https://survey.taobao.com/survey/Q095thIx2">"登录页面"改进建议</a>
    </div>
</div>

登录部分

设计思路
开始所想

一边为背景图，中间再设计一个div,在这个定位div内再设置一个div右浮动设计其中的样式，其中左边为链接设置为a标签

对于登录页面的设计采用了登录表单样式

实际开发过程中

对于”密码登录“，“短信登录”的button按钮加下边框，一直没有效果

改进方案

通过对”密码登录“，“短信登录”的button按钮内部加入div标签，使其拥有下边框

Css代码
#content{
    width: 100%;
    height: 600px;
    background-position:50% ;
    background-repeat:no-repeat ;
    background-size: cover;
    background-image: url(https://www.qianduange.cn/upload/article/O1CN01h1szGY1CDZQBe1yQu_!!6000000000047-2-tps-2500-600.png);
    position: relative;
    top: 0;
    left: 0;
    z-index: 9;
    padding-top: 120px;
}
#position{
    width: 70%;
    margin: auto ;
    background: #f80202;
    /*height: 350px;*/
}

#position-left{
    float: left;
    width: 630px;
    height: 440px;
}

#position-right{
    float: right;
    width: 350px;
    height: 350px;
    background: #fff;
    padding: 25px 25px 23px;
}

#logo-box{
    width: 300px;
    height: 293px;
    /*background: #4e6cf2;*/
}

#btnBox {

    /*border-bottom: 1px solid rgb(235, 235, 235);*/
    height: 30px
}
 .active{

    border-bottom: 3px solid black;
}
#btnBox> button {
    height: 18px;
    background: #fff;
    border: 0;
    cursor: pointer;
    float: left;
    font-weight: 700;
    line-height: 2;
    font-size: 16px;

}
#btnBox>button>div{
    width: 100%;
}
#logo-box .accountPassword {
    width: 100%;
    height: 44px;
    border: 0;
    outline: none;
    font-size: 14px;
    margin-top: 20px;
}

#logo-box input[type="text"], #logo-box input[type="password"] {
    border-bottom: 1px solid rgb(255, 255, 255);
}

#logo-box input[type="text"]:focus, #logo-box input[type="password"]:focus {
    border-bottom-color: #f40;
}

#logo-box a:first-of-type {
    float: right;
    text-decoration: none;
    font-size: 14px;
    margin-top: 20px
}
#logo-box > form > span {
    color: rgb(153, 153, 153);
    font-size: 12px
}

#logo-box > form > a {
    color: #ff4400;
    font-size: 12px;
    text-decoration: none;
}

#logo-box > form > a:hover {
    text-decoration: underline
}

#logo-box input[type="submit"] {
    color: #fff;
    background-color: #f40;
    font-size: 18px;
    margin-bottom: 20px
}
Html代码
<div id="content">
    <div id="position">
        <a id="position-left" href="https://www.taobao.com/m?spm=a2107.1.0.0.33ab11d9HlG46P">
        </a>
        <div id="position-right">
            <div id="logo-box">
                    <div id="btnBox">

                        <button><div class="active"> 密码登录</div></button>


                        <button><div>短信登录</div></button>
                    </div>
                    <form action="">
                        <input type="text" class="accountPassword" placeholder="请输入常用手机号/邮箱">
                        <input type="password" class="accountPassword" placeholder="请输入密码">
                        <a href="">忘记密码？</a>
                        <input type="submit" class="accountPassword" value="登            录">
                        <input type="checkbox"><span>进入即代表你已同意</span><a href="">《用户协议》</a><a href="">《隐私政策》</a>
                    </form>
            </div>
        </div>
    </div>
</div>
转载请注明出处或者链接地址：https://www.qianduange.cn//article/3227.html
标签
课程设计bootstrap
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

如何升级 Blazor Asp.net Identity 脚手架自带的 jQuery ,jQuery Validation, Unobtrusive validation 版本，去掉CDN

2024-03-26 08:03:18

Jquery提供的load方法

2024-03-26 08:03:18

jQuery学习笔记之jQuery常用方法(1)

2024-03-26 08:03:15

echarts：去掉markLine

2024-03-26 08:03:08

jquery 3D旋转banner图效果，在线学习前端开发

2024-03-26 08:03:08

jQuery总结

2024-03-11 10:03:12

pyecharts图例过多时导致图例和图表重叠如何解决（已解决）

2024-03-26 08:03:05

vue后台的一个项目遇到的一些问题和解决办法的记录

2024-03-26 08:03:52

ECharts 饼状图颜色设置教程 - 4 种方式设置饼图颜色

2024-03-26 08:03:47

调整echarts中图与legend的距离

2024-03-26 08:03:47

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
2

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
3

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
4

移动端css布局大全

2024-02-06 15:02:421000
5

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
6

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
7

echarts 图表，定时器实现数据实时动态

2024-03-13 00:03:28999
8

jQuery事件处理

2024-03-12 01:03:32999
9

HTML5实现下拉列表的标签有哪些

2024-03-11 10:03:35999
10

成都工业学院Web技术基础（WEB）实验一：HTML5排版标签使用

2024-02-27 11:02:41999

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！