项目实训十（2021-07-19）

界面样式与模板优化

最新推荐文章于 2025-05-18 20:29:33 发布

原创最新推荐文章于 2025-05-18 20:29:33 发布 · 116 阅读

0 ·

CC 4.0 BY-SA版权

项目实训专栏收录该内容

14 篇文章

订阅专栏

本周主要进行了系统优化与测试，重点在于统一界面风格和样式调整。网页设计采用山大官网类似配色，主体内容区以淡灰色背景和白色模块展示，保持与顶栏的视觉一致性。样式代码中定义了各种元素的样式，包括字体、颜色、边框、布局等，以实现精致的用户体验。同时，界面调整注重了模块间的一致性和交互性，提升了整体的视觉效果。

项目实训第四周（十）

第四周计划
- 模板界面
- 样式调整

第四周计划

系统优化与测试，样式模板调整，统一界面风格并进行样式优化，针对系统中出现的问题制定解决方案。

模板界面

模块之间共用一个相同的顶部状态栏，模块之间的跳转通过顶栏上的“主页”按钮联系到主页。网页配色采用与山大官网类似的风格，正文使用黑色，标题字体、按钮背景色、超链接与顶栏配色一致，字体统一使用微软雅黑。网页背景为淡灰色，主体内容放在白色模块内展示。主体内容自由发挥，与顶栏保持一定距离，尽量居中。
在这里插入图片描述

样式调整

<style>
    * {
        font-family: "Microsoft YaHei", serif
    }

    .container {
        width: 100%;
        min-width: 1200px;
        height: 100%;
        overflow: hidden;
        margin: 50px auto;
        text-align: center;
    }

    #myModel {
        position: absolute;
        top: 0;
        left: 0;
        display: none;
        background-color: rgba(9, 9, 9, 0.63);
        width: 100%;
        min-height: 700px;
        min-width: 1250px;
        height: 100%;
        z-index: 1000;
    }

    #modelResult {
        position: absolute;
        top: 0;
        left: 0;
        display: none;
        background-color: rgba(9, 9, 9, 0.63);
        width: 100%;
        min-height: 700px;
        min-width: 1250px;
        height: 100%;
        z-index: 1001;
    }

    .model-content {
        width: 35%;
        height: 60%;
        min-width: 600px;
        min-height: 310px;
        text-align: center;
        background: #E8E8E8;
        border-radius: 6px;
        margin: 8% auto;
        line-height: 30px;
        z-index: 10001;
    }

    .first_btn {
        width: 8%;
        height: 50px;
        border: none;
        border-radius: 50px;
        outline: none;
        color: #ffffff;
    }

    .model-content > p > button {
        width: 15%;
        height: 50px;
        border: none;
        border-radius: 50px;
        outline: none;
        color: #ffffff;
    }

    #secondDiv > button {
        width: 36%;
        height: 50px;
        border: none;
        margin-top: 4%;
        border-radius: 50px;
        outline: none;
        color: #ffffff;
    }

    #input_img_father_div {
        position: relative;
        left: 5%;
        top: 30px;
        width: 90%;
        height: 310px;
        vertical-align: middle;
        opacity: 60;
        background-color: white;
        display: flex; /*flex弹性布局*/
        justify-content: center;
        align-items: center;
    }

    #upload_input {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        opacity: 0;
        width: 100%;
        height: 100%;
        z-index: 999999;
    }

    #input_img_btn_div {
        text-align: center;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column; /*元素的排列方向为垂直*/
        justify-content: center; /*水平居中对齐*/
        align-items: center; /*垂直居中对齐*/
    }

    #input_img_btn_span {
        font-size: 24px;
        vertical-align: middle;
    }

    img#upload {
        position: relative;
        top: auto;
        width: 65%;
        height: auto;
    }

    button {
        background-color: #9B0D14;
    }

    #secondDiv div {
        float: left;
        text-align: left;
    }
</style>