使用“铭软(企业版)“开发官网体验(一)

已于 2024-06-28 15:46:35 修改
阅读量157 收藏
点赞数 2
文章标签： 个人开发
于 2024-06-28 09:50:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44149644/article/details/140033785
版权

https://www.mingsoft.net/
这个是官网,到官网上买的企业版.
需要开发的官网基本上都需要做到自适应.先说pc端的
如果没有设计图，或者对设计图要求一般可以使用bootstrap，（但是在铭软中，引入的链接容易失效，除非是特别稳定的国内的链接）
因为ui设计图的宽度为1920，内容宽度是1499，所以没有使用bootstrap
1.直接在html中写样式,(按照ul)设计图,写样式,为了满足自适应使用vw
vw是当前可视屏幕的宽度,常用在手机端,可以满足自适应.
设计图转换成对应页面的尺寸是 蓝湖尺寸/1920 = 对应的vw 尺寸
vw既可以设置宽也可以设置高
2.图片 ,图片的容器可以使用%,但是一定要有一层是设置的vw这种相对尺寸,如果都是%会走样

<div class="imgContainer">
    <img class="imgContainerImg"  src="./img.png" />
</div>
.imgContainerImg{
   width:100%;
   height:100%;
   object-fit: cover; /* 确保图片按比例缩放且不会变形 */

}

3.每一个元素都要设置样式名称,便于后期维护,
4.不要把样式写成行内元素.
5.不要使用 imgContainer>img这样的写法 后续适应手机端的媒体查询,不方便写,容易乱
6.直接按照蓝湖,对应的文字都写出来,包括循环,如果是5个就循环5遍
7.图片外面都需要添加容器,铭软上传图片是用户上传的,大小未知,所以我们得限制好图片的大小
8.使用flex:display布局,设计图的原则也是这样的,居中分散居中,两端对齐,居中也需要使用.
举例子:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="topImgInstruct">
    <!-- 这个是5篇文章，使用的是循环，所以最外层是一个循环 -->
    <div class="imgContainer"><img src="./组 181.png"></div>
    <div class="insideContainer">
      <div class="imgInsideContainer"><img class="imgInsideContainerImg" src="./组 181.png"></div>
      <div class="imgInsideContainer"><img class="imgInsideContainerImg" src="./组 181.png"></div>
      <div class="imgInsideContainer"><img class="imgInsideContainerImg" src="./组 181.png"></div>
      <div class="imgInsideContainer"><img class="imgInsideContainerImg" src="./组 181.png"></div>
    </div>
  </div>
  <div class="bottomImgInstruct">

    <div class="bottomContainerItem">
      <img src="./组 181.png" class="bottomContainerItemImg">
      <div class="bottomContainerItemContent">
        <div class="titleClass">视频名称视频名称</div>
        <div class="contentStyle">课程简介</div>
        <div class="contentButtonContainer">
          <div class="timeStyle">时长：02：20：20</div>
          <div class="buttonContainer"><button class="blue-border-button">立即观看</button></div>
        </div>
      </div>
    </div>
    <div class="bottomContainerItem">
      <img src="./组 181.png" class="bottomContainerItemImg">
      <div class="bottomContainerItemContent">
        <div class="titleClass">视频名称视频名称</div>
        <div class="contentStyle">课程简介</div>
        <div class="contentButtonContainer">
          <div class="timeStyle">时长：02：20：20</div>
          <div class="buttonContainer"><button class="blue-border-button">立即观看</button></div>
        </div>
      </div>
    </div>
    <div class="bottomContainerItem">
      <img src="./组 181.png" class="bottomContainerItemImg">
      <div class="bottomContainerItemContent">
        <div class="titleClass">视频名称视频名称</div>
        <div class="contentStyle">课程简介</div>
        <div class="contentButtonContainer">
          <div class="timeStyle">时长：02：20：20</div>
          <div class="buttonContainer"><button class="blue-border-button">立即观看</button></div>
        </div>
      </div>
    </div>
    <div class="bottomContainerItem">
      <img src="./组 181.png" class="bottomContainerItemImg">
      <div class="bottomContainerItemContent">
        <div class="titleClass">视频名称视频名称</div>
        <div class="contentStyle">课程简介</div>
        <div class="contentButtonContainer">
          <div class="timeStyle">时长：02：20：20</div>
          <div class="buttonContainer"><button class="blue-border-button">立即观看</button></div>
        </div>
      </div>
    </div>



  </div>

</body>
<style>
  .bottomImgInstruct {
    display: flex;
    flex-wrap: nowrap;
    width: 78vw;
    margin: auto;
    justify-content: space-between;
  }

  .bottomContainerItem {
    width: 24%
  }

  .bottomContainerItemImg {
    width: 100%;
    height: auto;
  }

  .bottomContainerItemContent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 28px;

  }

  .titleClass {
    font-weight: 500;
    font-size: 24px;
    color: #3F3E3E;
    line-height: 25px;
  }

  .contentStyle {
    font-family: SourceHanSansCN;
    font-weight: 400;
    font-size: 18px;
    color: #AEAEAE;
    line-height: 25px;
    margin-top: 18px;
  }

  .contentButtonContainer {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: baseline;
  }

  .timeStyle {
    font-family: SourceHanSansCN;
    font-weight: 400;
    font-size: 18px;
    color: #AEAEAE;
    line-height: 25px;
    margin-top: 14px;
  }

  .buttonContainer {}

  .buttonStyle {}

  .blue-border-button {
    background-color: white;
    /* color: black; */
    /* border: 2px solid blue; */
    padding: 8px 21px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    margin: 4px 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: SourceHanSansCN;
    font-weight: 400;
    font-size: 18px;
    color: #3463D7;
    line-height: 25px;
    border-radius: 56px;
    border: 1px solid #3463D7;
  }

  .blue-border-button:hover {
    background-color: #f1f1f1;
    /* 当鼠标悬停在按钮上时，更改背景颜色 */
  }

  .topImgInstruct {
    display: flex;
    width: 78vw;
    margin: auto;
    justify-content: space-between;
    flex-direction: row;
    margin-bottom: 20px;
  }

  .topImgInstruct .imgContainer {
    width: 50%;
  }

  .topImgInstruct .imgContainer img {
    width: 100%;
    height: auto;
  }

  .topImgInstruct .insideContainer {
    width: 49%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    align-content: space-between;
  }

  .imgInsideContainer {
    width: 49%;
  }

  .imgInsideContainerImg {
    width: 100%;
  }



  /* //使用手机端的时候需要使用的是 */
  @media screen and (min-width: 1024px) {
    body {
      /* background-color: lightblue; */
    }

    .topImgInstruct {
      display: flex;
      width: 78vw;
      margin: auto;
      justify-content: space-between;
      flex-direction: column;
      margin-bottom: 20px;
    }

    .topImgInstruct .imgContainer {
      width: 100%;
    }

    .topImgInstruct .insideContainer {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      align-content: space-between;
      flex-direction: column;
    }

    .imgInsideContainer {
      width: 100%;
    }

    .bottomImgInstruct {
      display: flex;
      flex-wrap: nowrap;
      width: 78vw;
      margin: auto;
      justify-content: space-between;
      flex-direction: column;
    }

    .bottomContainerItem {
      width: 100%;
    }
  }
</style>

</html>

开发官网的步骤
1.写完模板(可能用户需要看初版的,快速让用户看到效果.)
2.转换成铭软项目中认识的,可配置的(下一篇文章)

初梦依旧
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值