首页 > 其他分享 >Web前端新手入门系列：案例1 招商银行页面的制作

Web前端新手入门系列：案例1 招商银行页面的制作

时间：2024-01-18 14:23:35浏览次数：27  
标签：Web right color top 新手入门 nbsp font margin 页面

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

效果图

1705558094017

代码

可能不太符合规范，但效果差不多(

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;
}

标签：Web,right,color,top,新手入门,nbsp,font,margin,页面
From： https://www.cnblogs.com/lsslcj/p/17972416

相关文章

  • C# WebApi传参及Postman调试
    概述欢迎来到本文，本篇文章将会探讨C#WebApi中传递参数的方法。在WebApi中，参数传递是一个非常重要的概念，因为它使得我们能够从客户端获取数据，并将数据传递到服务器端进行处理。WebApi是一种使用HTTP协议进行通信的RESTful服务，它可以通过各种方式传递参数。在本文中，我们只会针对Ge......
  • 【SCTF-Round#16】 Web和Crypto详细完整WP
    每天都要加油哦！   ------2024-01-18 11:16:55[NSSRound#16Basic]RCE但是没有完全RCE<?phperror_reporting(0);highlight_file(__file__);include('level2.php');if (isset($_GET['md5_1']) && isset($_GET['md5_2'])) {    if ((str......
  • Web Components从技术解析到生态应用个人心得指北
    WebComponents浅析WebComponents是一种使用封装的、可重用的HTML标签、样式和行为来创建自定义元素的Web技术。WebComponents自己本身不是一个规范，而是一套整体技术，包含下面3个独立规范：CustomElements：允许开发者定义自己的HTML标签（考虑SEO，还是语义化为好）。Sha......
  • .NET Core如何调SAP接口-.NET Core如何调WebService接口
     情况说明 客户提供一个SAP接口，接口通过浏览器可以打开查看，如下图： 输入帐号密码后登录： 接口开发连接接口服务上述情况，SAP接口已就绪，现在开始开发接口调用。首先，创建.NETCoreWeb项目，然后如下图，连接接口服务。           创......
  • uni.setStorageSync在登录页面设置缓存，第一次进入首页在onload里面获取不到缓存数据的
    在onLoad里面获取不到缓存：onLoad(option){consttoken=uni.getStorageSync('token');if(!token){uni.showToast({title:"请先登录",icon:"error",......
  • 记一个vue2中使用路由时，在同一个页面跳转，但是url参数不同，不会重新渲染页面的问题
    vue2中使用路由时，页面自己跳转自己，但是携带的参数不一样预期想要的结果是：感冒2会跟随着url的参数进行变化，但是并没用 解决方法： 在App.vue这个页面中的router-view添加  :key="$route.fullPath"结果在自己跳转自己之后会刷新页面 达成：参考：https://blog.csdn.ne......
  • 探索Web开发的未来——使用KendoReact服务器组件
    KendoUI是带有jQuery、Angular、React和Vue库的JavaScriptUI组件的最终集合，无论选择哪种JavaScript框架，都可以快速构建高性能响应式Web应用程序。通过可自定义的UI组件，KendoUI可以创建数据丰富的桌面、平板和移动Web应用程序。通过响应式的布局、强大的数据绑定、跨浏览器兼容......
  • uniapp开发——h5版本页面切换无法重置页面滚动状态的处理方案
    前言：使用vue开发h5的时候，都会使用vue-router的scrollBehavior函数处理页面滚动状态，代码如下：constrouter=newVueRouter({mode:"hash",routes,scrollBehavior(to,from,savePosition){if(savePosition&&to.meta.keepAlive){returnsavePosition;......
  • webpack部分
    1.安装jquerynpminstalljquery-S2.引入到index.jsimport$from'jquery$(function(){})2.webpack的使用[email protected]@4.7.2-D2.1webpack.config.js配置在根目录下创建webpack.config.jsconstpath=requirt('path')module......
  • DevExpress Web Report Designer中文教程 - 如何自定义控件和表达式注册？
    获取DevExpressv23.2正式版下载DevExpress技术交流群9：909157416      欢迎一起进群讨论自定义控件集成DevExpress Reports中的自定义报表控件注册变得更加容易，为了满足web开发人员的需求，DevExpressv23.1+包括简化的自定义控件注册支持(在服务器级别实现)。如果您的解决......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99