zoukankan      html  css  js  c++  java
  • 第 31 章 项目实战-PC 端固定布局[3]

    学习要点:

    1.搜索区

    2.插入大图

    3.搜索框

    主讲教师:李炎恢

    本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现。

    一.搜索区

    本节课,我们接着 header 头部往下,来设计一块搜索区。这个区域,可以是广告大图,也可以是用户注册,也可以是一个搜索条,都是一个大幅背景,内嵌一个表单。具体造型如下:

    从表面上来分析,就是插入一张背景大图,然后居中一个搜索条。但是,我们要求最小在 1280 分辨率、最大在 1920 分辨率能保持最佳的观看效果。而对于超过 1920 分辨率还要保持大图的位置合理。

    二.插入大图

    首先,为了满足最小的 1280 分辨率,大图本身的宽度必须大于 1280。而主流分辨率一般小于 1920,所以图片宽度设置为 1920 即可满足几乎所有用户。注:超过 1920 分辨率,即 2k+以上的分辨率一般不适合浏览网页了,会眼瞎。

    我们从网上搜索一张风景图,原图的分辨率为:1920 x 1200。我们截取了中间一段变成:1920 x 600。那么被插入的背景区块应该怎么设置长度呢?

    //创建一个搜索区域

    <div id="search"></div>

    //可以直接设置宽度为 1920 吗?

    #search {
        width: 1920px;
        height: 600px;
    }

    如果使用 1920 的宽度,势必在底部产生滚动条,非常的难看。那不采用 1920 的宽度,整张大图无法全面显示。那么我们的设计理念是,1280 分辨率显示大图中部区域的图片内容,而浏览器不断增大,就显示的内容越多。超过 1920 分辨率,让图片居中,两边空白即可。

    //使用 100%,并插入背景图片

    #search {
        width: 100%;
        height: 600px;
        background: url(../img/search.jpg);
    }

    当我们故意缩小分辨率时,小于 1280 时,底部会出现滚动条。当我们拉动滚动条时,发现右侧出现的大量空白。这时由于之前采用了 100%自适应导致的,那我们强行设置这里虽然是 100%。但如果小于 1280 分辨率,就必须固定在 1280 即可。

    //不能小于 1280 分辨率

    #header {
        min-width: 1263px;
    }
    
    #search {
        min-width: 1263px;
    }

    对于大于 1920 的分辨率,我们将背景图片居中显示即可,两边留白。当然,还有一种方式,是专门设计这张大图的过渡渐变,两边快要接近纯色是,添加背景过渡。

    //大于 1920 分辨率时 

    #search {
        background: url(../img/search.jpg) no-repeat center;
    }

    三.搜索框

    我们希望在大图中间安插一个搜索框,先安插一个半透明的区块。

    //创建一个区块

    <div id="search">
        <div class="center"></div>
        <input type="text" class="search" placeholder="请输入旅游景点或城市">
        <button class="button">搜索</button>
    </div>

    //将区块半透明且居中

    #search .center {
        width: 600px;
        height: 60px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -30px 0 0 -300px;
        border-radius: 10px;
        opacity: 0.6;
    }

    //父元素设置相对点

    #search {
        position: relative;
    }

    //搜索框和按钮样式

    #search .search {
        width: 446px;
        height: 54px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -27px 0 0 -296px;
        border-radius: 10px;
        border: 1px solid #666;
        font-size: 24px;
        color: #666;
        outline: none;
        padding: 0 10px;
    }
    
    #search .button {
        width: 120px;
        height: 54px;
        position: absolute;
        top: 50%;
        left: 50%;
        cursor: pointer;
        margin: -27px 0 0 175px;
        font-size: 22px;
        border-radius: 10px;
        border: none;
        color: #666;
        font-weight: bold;
        outline: none;
    }
  • 相关阅读:
    .net core读取appsettings.config中文乱码问题
    vs2017错误:当前页面的脚本发生错误
    VS Code中无法识别npm命令
    Visual Studio报错/plugin.vs.js,行:1074,错误:缺少标识符、字符串或数字
    记录一次在生成数据库服务器上出现The timeout period elapsed prior to completion of the operation or the server is not responding.和Exception has been thrown by the target of an invocation的解决办法
    Java集合框架
    java hash表
    Java Dictionary 类存储键值
    java数据结构 栈stack
    java封装
  • 原文地址:https://www.cnblogs.com/zfc2201/p/5539201.html
Copyright © 2011-2022 走看看