宣传类UI设计思路【HTM5界面】

来杯Sherry

发布于 2023-05-25 13:53:54

3740

发布于 2023-05-25 13:53:54

9.26~9.28 目的：想为社团做一个自己的宣传网站来迎新，同时积累UI设计经验 http://comesherry.xyz 感受或实际遇到的问题 （1）UIPC移动端兼容问题，（bootstrap 和layui提供的模块化帮助我搭建了自适应布局，不希望移动端出现的就不让它出现）（2）素材加载问题，图片视频导致网站加载缓慢（目前图片采用懒加载lay-src，视频预加载处理，并做了剪短处理）（3）图片大小一致性问题，大小不同杂乱，而且影响移动端响应式的展示。（word 的图片统一大小很好用）但直接修改图片尺寸图片质量会降低，推荐方案：ps处理兼顾品质和尺寸，并且对不同端提供相同内容不同品质的图片；或者ps 文件>导出>web格式（选择jpeg）,品质和大小还是很可观的（4）视频模糊，还想用，（加上浅灰色背景）视觉上有变强的感觉（5）视频背景头一次用，还有待完善（6）更加熟悉layui，但还不能跳出bootstrap他的范例，将功能实现在自己的框架上，而非他定义的容器中（7）layui弹出层是最大的惊喜，boostrap封闭的结构不太令人舒服，layui的样式更加自由丰富 (8)1M带宽服务器不推荐图片展示，目前已经换成1～5M轻量级服务器了，打开速度快点不止5倍

<!-- 附带一套很不错的boostrap在线js css引用模板-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Roller Club</title>
    <link rel="icon" href="./icon/favicon.ico">
    <link rel="stylesheet" href="./layui/css/layui.css">
    <!-- jquery -->
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  
</head>

<body>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    
</body>

</html>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2020-09-28，如有侵权请联系 cloudcommunity@tencent.com 删除