Web前端新手入门系列：案例1 银行页面

已于 2024-01-18 14:56:28 修改
阅读量455 收藏 10
点赞数 9
分类专栏： Web前端学习 文章标签： 前端 html css
于 2024-01-18 14:40:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shiki217_/article/details/135674038
版权

一次比较复杂的网页设计(对初学者而言)

效果图

在这里插入图片描述

在这里插入图片描述

代码

可能不太符合规范，但效果一样(

HTML部分

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>招商银行</title>
    <link rel="stylesheet" href="ex.css" />
</head>
<body>
    <div class="wrapper">
    <div class="logo">
        <a href="#"><img src="tite.png" alt="logo" /></a>
    </div>
    <!--主导航-->
    <div class="border1">
        <ul class="guide1">
            <li><a href="#">主页</a></li>
            <li><a href="#">个人业务</a></li>
            <li><a href="#">公司业务</a></li>
            <li><a href="#">小企业</a></li>
            <li><a href="#">信用卡</a></li>
            <li><a href="#">i理财</a></li>
            <li><a href="#">商旅预定</a></li>
            <li><a href="#">今日招行</a></li>
        </ul>
    </div>
    <!--副导航-->
    <div class="border2">
        <span><a href="#">金葵花理财</a></span><span>|</span>
        <span><a href="#">私人银行</a></span><span>|</span>
        <span><a href="#">出国金融</a></span><span>|</span>
        <span><a href="#">个人贷款</a></span><span>|</span>
        <span><a href="#">空中银行</a></span><span>|</span>
        <span><a href="#">一卡通</a></span><span>|</span>
        <span><a href="#">财富账户</a></span><span>|</span>
        <span><a href="#">伙伴一生</a></span><span>|</span>
        <span><a href="#">电子银行</a></span><span>|</span>
        <span><a href="#">居家生活</a></span><span>|</span>
        <span><a href="#">储蓄业务</a></span><span>|</span>
        <span><a href="#">投资理财</a></span><span>|</span>
        <span><a href="#">网上个人业务</a></span>
    </div>
    <hr width="100%" align="center" color="#d3a7a8" height="2px"/>
    <!--主体-->
    <div class="container">
        <div class="guide2">
            <ul style="overflow:hidden;">
                <!--&nbsp是转义空格，美观一些-->
                <li>
                    <img src="double_arrow.png" alt="error"  />&nbsp;&nbsp;
                    <a href="#">生意货</a>
                    <img src="tri.png" alt="error" />
                </li>
                <li>
                    <img src="double_arrow.png" alt="error"  />&nbsp;&nbsp;
                    <a href="#">生意一卡通</a>
                    <img src="tri.png" alt="error" />
                </li>
                <li>
                    <img src="double_arrow.png" alt="error" />&nbsp;&nbsp;
                    <a href="#">特色创新功能</a>
                    <img src="tri.png" alt="error" />
                </li>
                <li>
                    <img src="double_arrow.png" alt="error" />&nbsp;&nbsp;
                    <a href="#">一手住房贷款</a>
                    <img src="tri.png" alt="error" />
                </li>
                <li>
                    <img src="double_arrow.png" alt="error" />&nbsp;&nbsp;
                    <a href="#">二手住房贷款</a>
                    <img src="tri.png" alt="error" />
                </li>
                <li>
                    <img src="double_arrow.png" alt="error" />&nbsp;&nbsp;
                    <a href="#">购房专享装修贷款</a>
                    <img src="tri.png" alt="error" />
                </li>
                <li>
                    <img src="double_arrow.png" alt="error" />&nbsp;&nbsp;
                    <a href="#">购房专享车位贷款</a>
                    <img src="tri.png" alt="error" />
                </li>
                <li>
                    <img src="double_arrow.png" alt="error" />&nbsp;&nbsp;
                    <a href="#">个人消费贷款</a>
                    <img src="tri.png" alt="error" />
                </li>
                <li>
                    <img src="double_arrow.png" alt="error" />&nbsp;&nbsp;
                    <a href="#">借用贷款</a>
                    <img src="tri.png" alt="error" />
                </li>
                <li>
                    <img src="double_arrow.png" alt="error" />&nbsp;&nbsp;
                    <a href="#">信用贷款</a>
                    <img src="tri.png" alt="error" />
                </li>
                <li>
                    <img src="double_arrow.png" alt="error" />&nbsp;&nbsp;
                    <a href="#">金葵花客户尊享贷款</a>
                    <img src="tri.png" alt="error" />
                </li>
                <li>
                    <img src="double_arrow.png" alt="error" />&nbsp;&nbsp;
                    <a href="#">金卡客户专享贷款</a>
                    <img src="tri.png" alt="error" />
                </li>
                <li>
                    <img src="double_arrow.png" alt="error" />&nbsp;&nbsp;
                    <a href="#">工资贷款</a>
                    <img src="tri.png" alt="error" />
                </li>
                <li>
                    <img src="double_arrow.png" alt="error" />&nbsp;&nbsp;
                    <a href="#">个人汽车贷款</a>
                    <img src="tri.png" alt="error" />
                </li>
                <li>
                    <img src="double_arrow.png" alt="error" />&nbsp;&nbsp;
                    <a href="#">商业用户贷款</a>
                    <img src="tri.png" alt="error" />
                </li>
                <li>
                    <img src="double_arrow.png" alt="error" />&nbsp;&nbsp;
                    <a href="#">个人留学贷款</a>
                    <img src="tri.png" alt="error" />
                </li>
                <li>
                    <img src="double_arrow.png" alt="error" />&nbsp;&nbsp;
                    <a href="#">全国个货中心</a>
                    <img src="tri.png" alt="error" />
                </li>
                <li>
                    <img src="double_arrow.png" alt="error" />&nbsp;&nbsp;
                    <a href="#">按揭货款月供计算器</a>
                    <img src="tri.png" alt="error" />
                </li>
            </ul>
        </div>
        <div class="content">
            <div class="content_title" style="text-indent:20px"
                 >
            <img src="right_arrow.png" alt="error" style="height:15px;width:15px;"/>
            个人消费贷款

            </div>
            <hr style="border: 4px solid #81331f;"  />
            <div class="main">
                <h4>适用客户</h4>
                <p>所有需要申请个人消费贷款的客户</p>
                <p>购车、装修、旅游、留学......各种用途任你选择！贷款金额最高可达2000万元！30年超长期限，全方位满足您各种消费需求！把您的房产变成提款机，尽情享用！</p>
                <p>期限：授信期限最长可达30年</p>
                <p>成数：最高7成</p>
                <h4>办理流程</h4>
                <p>距离您成功贷款，只有三步！</p>
                <p>第一步：提交申请</p>
                <p>第二步：银行审批</p>
                <p>第三步：提款消费</p>
                <h4>您需要准备的贷款申请资料</h4>
                <p>1.身份证，婚姻证明</p>
                <p>2.房产证</p>
                <p>3.住址证明【至少任选其一】：水、电、气、电话或物管等费用账单</p>
                <p>4.收入证明【至少任选其一】：工资证明/银行流水/所得税税单/社保记录/其他收入证明</p>
                <p>5.用途证明：提供相应的交易证明材料</p>
                <h4>如何找到招商银行个人贷款？</h4>
                <p>1.欢迎致电招商银行客户经理。</p>
                <p>2.向就近招商银行网点提出申请。</p>
                <p>3.拨打全国统一服务热线95555。</p>
            </div>
        </div>
    </div>
    <div class="footer">
        <span><a href="#">安全说明</a></span><span>|</span>
        <span><a href="#">网站声明</a></span><span>|</span>
        <span><a href="#">隐私保密条款</a></span><span>|</span>
        <span><a href="#">网站地址</a></span><span>|</span>
        <span><a href="#">友情链接</a></span><span>|</span>
        <span><a href="#">加入收藏夹</a></span><span>|</span>
        <span><a href="#">人才招聘</a></span><span>|</span>
        <span><a href="#">手机一网通</a></span>
    </div>
    </div>
</body>
</html>

CSS部分

*{
    margin:0;
    padding:0;
}
/*body用背景铺盖*/
body {
    font-size:18px;
    min-width:600px;
    background:url(bg.jpg) repeat center top;
}
/*取消超链接样式*/
a{
    text-decoration:none;
}
/*主导航*/
.guide1 {
    background-color: #ac1b0a;
    list-style-type: none;
    overflow: hidden;
    height: 50px;
}
.guide1 li a{
    color:white;
}
.guide1 li a:hover{
    color:#dbdbdb;
}
.guide1 li {
    margin-left: 40px;
    font-size: 18px;
    height: 25px;
    float: left; /*竖的变为横的*/
    color: white;
    font-family: 黑体;
    font-weight: bold;
    margin-top: 15px;
}
/*副导航*/
.border2 {
    margin-top:8px;
    margin-bottom:8px;
    margin-left:20px;
    font-size:0px;
    font-family:宋体;
    
}
.border2 span a{
    color:#777;
}
.border2 span a:hover{
    color:#000;
}
/*控制与|间隔*/
.border2 > span {
    margin-right: 7px;
    font-size: 14px;
}
/*最后一个没有与右边的间隔*/
.border2 > span:last-child {
    margin-right: 0;
}
/*应该用无序列表写border2（带竖线的导航栏）*/
/*
.border2 ul{
    text-align:center
    font-size:14px;
    font-weight:bold;
    padding:10px;
}
.border2 ul li{
    display:inline-block;
    border-right:1px solid #999;  使用border-right来控制右侧竖线
    padding-right:10px;
    margin-right:7px;
}
.border2 ul li:last-child{
    border-right:none;    清楚最后一个内容的右侧竖线
}
*/
/*文章内容主体设置*/
.wrapper{
    margin:20px auto;
    width:1200px;
}
/*主体内容*/
.container{
    overflow:hidden;
    width:100%;
}
/*侧边栏导航*/
.guide2 {
    background-color: #f2f2f2;
    width: 318px;
    float: left;
    margin-top: 10px;
    font-family: 宋体;
    line-height: 2em; 
    font-size: 14px;
/*    border: 1px solid #ccc;
    border-top: none;*/
    text-indent:1em;
    background-color: #f2f2f2;
}
.guide2 ul li {
    border:1px solid #d1d1d1;
    border-top:none;
    line-height:35px;
}
.guide2 ul li:first-child{
    border-top:1px solid #d1d1d1;
}
.guide2 ul li a{
    color:#000;
}
.guide2 ul li a:hover{
    color:#666;
}
/*<!--img图片的插入，可以用height和width控制大小来进行缩放，注意按比例，vertical-align用于微调在行间的距离-->*/
.guide2 ul li img:first-child {
    height: 14px;
    width: 14px;
    vertical-align: -2px;
}
/*<!--img图片的居右处理，可以先浮动居右，然后使用padding进行微调*/
.guide2 ul li > img + a + img {
    height: 14px;
    width: 14px;
    padding-top: 9px;
    padding-right: 10px;
    float: right
}
/*文章内容*/
.content {
    width: 853px;
    float:left;
    background-color: #f2f2f2;
    margin-top:10px;
    margin-left:25px;
    margin-right:0;
    border:1px solid #ddd;
}
.content_title{
    font-size:20px;
    font-weight:bold;
    font-family:仿宋;
    line-height:30px;
}
.main{
    margin:10px 20px;
    font-family:宋体;
    font-size:15px;
    line-height:1.5em;
}
/*段与段之间有明显间隔，使用margin控制*/
.main p{
    line-height:1.5em;
    margin:10px 0;
}
.main>h4{
    margin-top:20px;
}

/*页脚*/
.footer {
    line-height: 30px;
    margin-top: 10px;
    text-align: center;
    color: #f1f1f1;
    background-color: #ac1b0a;
    font-size: 0px;
}

.footer>span{
    font-size:12px;
    margin-right:15px;
}

.footer>span:last-child{
    margin-right:0;
}

.footer span a {
    color: #f1f1f1;
}
.footer span a:hover{
    color:#dbdbdb;
}
lsslcj
关注
  • 9
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
bank:样本银行页面
03-25
bank:样本银行页面
WEB前端开发-案例汇总(81例).zip
05-08
WEB前端开发-案例汇总(81例),前端资源大汇总；适合初学者进阶，几乎涵盖前端开发所有案例,可供学习及设计参考。
资料-Web前端入门教程资料下载地址.txt
03-30
|- javaScript零基础通关必备资料 |- 前端就业详情.jpg |- 京东项目02资料.zip |- 京东项目01资料.zip |- web前端培训班_web前端开发优质教程_前端工程师培训-黑马程序员.png |- HTML入门及基础02资料.zip |- HTML5入门及基础01资料.zip |- CSS3入门及提高 08资料.zip |- CSS3入门及提高 07资料.zip |- CSS3入门及提高 06资料.zip |- CSS3入门及提高 05资料.zip |- CSS3入门及提高 04资料.zip
WEB前端-案例汇总
11-08
WEB前端-案例汇总；史上最全的前端资源大汇总；适合初学者进阶，几乎涵盖前端开发所有案例。
web前端之表格标签的一个案例
04-25
分享一个web前端里面的表格标签的一个案例噢,非常的简单易懂,适合初学者使用噢
Web前端最全剑指Offer——银行考试，经典好文
2401_84437095的博客
05-09 967
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】1、职业形象（30%），基本体现为证件照；2、学校+成绩+校内表现（40%），体现为证书，成绩排名以及任职经历等；3、校外实践（20%），主要体现在工作实习、实践活动和培训经历三点；4、其他（10%），根据简历的完整性、准确性，进行综合评定。二、网申简历应注意哪些方面？1、考虑银行人的思维习惯（考虑岗位匹配度）
计算机毕业设计Node.js+Vue安卓手机银行客户端APP(程序+源码+LW+部署)
Node.js彤彤程序
02-11 162
该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流项目运行环境配置：项目技术：Express框架 + Node.js+ Vue 等等组成，B/S模式 +Vscode管理+前后端分离等等。环境需要1.运行环境：最好是Nodejs最新版，我们在这个版本上开发的。其他版本理论上也可以。2.开发环境：Vscode或HbuilderX都可以。推荐HbuilderX;3.mysql环境：建议是用5.7版本均可4.硬件环境：windows 7/8/10 1G内存以上；
vue下实现类似android或者ios通讯录（银行选择）-网页版
小超哥的博客
05-02 3万+
欢迎交流 小超哥 的博客 关键词：Swiper4（就是个js和css的控件，不用也可以，原生的js也不错，这个就是好看，好用）、Vue2.0、jQuery3.0 推荐次新或者最新版本，太老的东西没有太大价值； Swiper4（各种超炫滑的效果-最强王者！） Swiper(前称Swiper master) 是一款免费以及轻量级的移动设备触控滑块的js框架，使用硬件加速过渡（如果该...
计算机毕设Node.js+Vue银行招聘系统设计（程序+LW+部署）
nodejs毕设程序源码
12-31 73
项目运行环境配置：Node.js最新版+ Vs项目技术：Express框架+ Node.js+ Vue 等等组成，B/S模式 +Vscode管理+前后端分离等等。环境需要1.运行环境：最好是Nodejs最新版，我们在这个版本上开发的。其他版本理论上也可以。2.开发环境：Vscode或HbuilderX都可以。推荐HbuilderX;3.mysql环境：建议是用5.7版本均可4.硬件环境：windows 7/8/10 1G内存以上；
使用electron-vue开发桌面程序调工行H5支付,工行支付页面调出来了，密码点不了，点了没反应。
baiyajin的博客
12-22 335
使用electron-vue开发桌面程序调工行H5支付,工行支付页面调出来了，密码点不了，点了没反应。
web前端开发入门教程(20211215130803).pdf
11-17
web前端开发入门教程(20211215130803).pdf
免费的HTML商业模板-Hidayah
tyygming的专栏
10-22 147
在线演示 在线演示 本地下载  在这款模板中，你可以随意缩放大小，适合笔记本、平板电脑或手机，非常方便阅读。
web前端html期末大作业实例 (1500套)
热门推荐
HTML网页设计
10-03 8万+
临近期末，大一新生的各种考试和专业结课作业纷至沓来。web实训大作业、网页期末作业、web课程与设计、网页设计等，简直让人头大。你还在为网页设计老师的作业要求感到头大？网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求, 废话不多说，直接看效果。📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确
php对接一网通,Android招行一网通对接
weixin_35486456的博客
03-20 173
一、流程向招行申请测试对接一网通，招行提供一网通测试信息按照招行一网通开放文档用测试信息一步一步进行，保留测试结果向招行提交测试报告并申请生产状态信息修改测试信息为生产信息，开始使用二、Android端对接1 按照Android对接文档导入lib，res和Manifest里的配置Paste_Image.png2 添加一网通支付界面 包括Title(便于返回)和webview(加载一网通支付)a...
Java开发对接招行一网通支付功能的总结
MrWan的博客
07-03 4210
招商银行一网通支付JAVA开发 最近对接了招行一网通的支付功能,记录一下. 一.一网通支付方式主要分为6种:APP支付,H5支付,PC扫码支付,二维码支付,小程序支付,Apple Pay支付.本次开发主要针对H5支付和PC扫码支付. 二.测试开发准备工作: 1．对接分行工作人员开通测试环境账号(对申请方资质需要审核); 2．分行号,商户号,商户秘钥,签约功能进行配置(https...
css+html工商银行小项目
qq_50352386的博客
06-13 2055
完整代码html+css 效果展示
WEB转Flutter基础学习笔记（内含vue和flutter对比）
最新发布
小易不止于搬砖的博客
05-17 670
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1109
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
Unable to start ServletWebServerApplicationContext due to missing ServletWeb
s_sos0的博客
05-14 508
Unable to start ServletWebServerApplicationContext due to missing ServletWeb
android recyclerview item自适应高度_web前端入门到实战：css让一个盒子的高度自适应屏幕剩余的部分...
06-08
对于 Android RecyclerView 中的 Item 自适应高度，可以通过设置 Item 布局中的根布局为 `wrap_content`，并在代码中动态计算布局中的子 View 的高度之和来实现。具体实现步骤如下： 1. 在 Item 布局的根布局中设置 `android:layout_height="wrap_content"`，使其高度能够动态适应子 View 的高度。 2. 在代码中获取 Item 布局的根布局，并计算出其子 View 的高度之和。可以通过遍历子 View 来实现，具体代码如下： ```java ViewGroup rootLayout = itemView.findViewById(R.id.root_layout); int totalHeight = 0; for (int i = 0; i < rootLayout.getChildCount(); i++) { View childView = rootLayout.getChildAt(i); totalHeight += childView.getHeight(); } ``` 3. 将计算出的子 View 高度之和设置为根布局的高度，即可保证 Item 的高度能够自适应子 View 的高度。具体代码如下： ```java ViewGroup.LayoutParams layoutParams = rootLayout.getLayoutParams(); layoutParams.height = totalHeight; rootLayout.setLayoutParams(layoutParams); ``` 至于在 Web 前端中让一个盒子的高度自适应屏幕剩余的部分，可以通过设置该盒子的高度为 `calc(100vh - 已占用高度)` 来实现。具体代码如下： ```css .box { height: calc(100vh - 100px); /* 已占用高度为 100px */ } ``` 其中，`vh` 表示视口高度，`calc` 函数可以用来计算 CSS 属性值。这样设置后，`.box` 元素的高度将自适应屏幕剩余的部分。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值