css+html工商银行小项目

完整代码html+css

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>中国工商银行</title><link rel="stylesheet" href="./css/index.css">
</head><body><div class="header"><div class=" container"><div><div>个人客户</div><div>企业客户</div><div>本网站支持IPV6</div></div><ul><li>全球主站</li><li>分支机构</li><li>服务网点</li><li>客户服务</li><li>人才招聘</li><li>繁体/EN</li></ul></div></div><div class="logo"><div class="container"><div><img src="./image/logo.png" alt=""></div><div><div><input type="text" placeholder="请输入关键字"></div><div><img src="./image/search_icon.png" alt="搜索"></div></div></div></div><div class="nav"><div class="container"><ul><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="#">金融市场</a></li></ul></div></div><div class="banner"><img src="./image/banner.jpg" alt="banner"><div><div><span>个人网上银行登录</span><ul><li>注 册</li><li>业务指南</li><li>网银助手</li><li>客户端下载</li><li>安全专区</li><li>防范假网站</li></ul></div><div><span>企业网上银行登录</span><ul><li>注 册</li><li>业务指南</li><li>网银助手</li></ul></div><div><span>融 e 购电商平台</span><ul><li>个人商城</li><li>企业商城</li><li>扶贫馆</li></ul></div></div></div><div class="notice"><div class="container"><div><div><span>重要公告∶关于调"人民币和美元账户钯金报价价差的通告</span></div><div>更多公告</div></div><hr><div><ul><li><img src="./image/serveTop1_1.png" /><div>常用查询</div></li><li><img src="./image/serveTop2_1.png" /><div>注册申请</div></li><li><img src="./image/serveTop3_1.png" /><div>在线预约</div></li><li><img src="./image/serveTop4_1.png" /><div>生活缴费</div></li><li><img src="./image/serveTop5_1.png" /><div>行情工具</div></li></ul></div></div></div><div class="aside"><div><img src="./image/xiaoevid.png" alt=""></div><div><img src="./image/sideNav_er_b_ie8.png" alt=""></div><div><img src="./image/xiaoevid.png" alt=""></div><div><img src="./image/sideNav_er_b_ie8.png" alt=""></div></div><div class="main"><div class="container"><div class="title">投资理财</div><div class="nav1"><ul><li>理财</li><li>贵金属</li><li>基金</li><li>外汇</li><li>保险</li></ul></div><div class="news"><div class="head"><div><div>最新披露</div>2019年第106期中国工商银行个人人民币结构性...</div><div>更多...</div></div><div class="middle"><div>理财精选<div><p>保本稳利364天理财</p><p>预期年化收益率/业装基准</p><p>3.45%-3.60%</p><p>数据日期(2019-08-12 )</p><p>投资期限最短364天</p><p>起购金额1万</p><div>立即抢购</div></div></div><div>大家都在买<div><p>保本型个人随心E1号理财</p><p>期限短，收益高</p><div>立即抢购</div></div><div><p>保本型个人随心E1号理财</p><p>期限短，收益高</p><div>立即抢购</div></div><div><p>保本型个人随心E1号理财</p><p>期限短，收益高</p><div>立即抢购</div></div></div><div><img src="./image/jjmhtoutu325_460_190530.jpg" alt=""></div></div></div><div class="fincal"><div>便利金融</div><div><ul><li>融e购</li><li>汇款支付</li><li>消费旅游</li><li>留学服务</li><li>移动金融</li><li>个人贷款</li></ul></div><div class="end"><div class="left"><img src="./image/bljr_1.jpg" alt=""></div><div class="right"><div><div> e购超市</div><div>品类齐全轻松购物</div><div>每日秒杀人放价</div><div class="details">了解详情</div><div class="img"><img src="./image/bljr_3.png" alt=""></div></div><div><div> e购超市</div><div>品类齐全轻松购物</div><div>每日秒杀人放价</div><div class="details">了解详情</div><div class="img1"><img src="./image/bljr_2.png" alt=""></div></div></div></div></div></div></div><div class="footer"><div class="container"><div><ul><li>网站声明</li><li>服务网点</li><li>网站地图</li><li>联系我行</li><li>服务热线</li></ul></div><div>中国工商银行版权所有 京ICP证 030247号</div></div></div>
</body></html>

*{margin: 0;padding: 0;
}
.container{width: 1000px;margin: 0 auto;
}
.header{height: 35px;text-align: center;line-height: 35px;background-color: #f2f2f2;
}
.header>div>div>div{float: left;width: 90px;
}
.header>div>div>div:hover{background-color: #c7000b;
}
.header>div>div>div:last-child{width: 120px;margin-left: 40px;
}
/* .header>div:nth-last-child(){margin-left: 50px;
} */
.header ul{float: right;
}
.header ul li{width: 90px;float: left;list-style: none;
}
.header ul li:hover{background-color: #c7000b;
}
/* logo */
.logo {height: 80px;
}
.logo .container>div:first-child{height: 76px;margin-top: 4px;float: left;
}
.logo .container>div:last-child{float: right;margin-right: 15px;
}
.logo input{height: 36px;border-right: none;border: dashed 0.5px grey;/* 调节字间距 */letter-spacing: 3px;text-indent: 10px;
}
.logo .container>div:last-child>div{height: 34px;margin-top: 22px;float: left;
}
.logo .container>div:last-child>img{margin-top: 22px;
}/* 导航 */
.nav{height: 45px;background-color: #c7000b;
}
.nav ul{width: 1000px;height: 45px;background:url(../image/shu.png) no-repeat right 15px;margin: 0 auto;position: relative;}
.nav ul li{width: 165px;float: left;list-style: none;text-align: center;line-height: 45px;background: url(../image/shu.png) no-repeat left 15px;
}
.nav ul li a{text-decoration:none;
}
.nav .container ul li a{text-decoration:none;color: white;
}/* 轮播图 */
.banner{height: 380px;overflow: hidden;position: relative;
}
.banner img{position: absolute;left: calc(50% - 1900px/2);
}
.banner>div{width: 268px;height: 345px;position: absolute;top: 20px;left: calc(50% - 500px);background-color: white;
}
.banner>div>div{background-color: #c7000b;height: 42px;width: 238px;margin-top: 10px;margin-bottom: 60px;margin-left: 15px;text-align: center;line-height:42px ;color: white;
}
.banner>div>div:first-child{margin-bottom: 90px;
}
.banner>div>div:first-child>ul>li{float: left;width: 78px;height: 40px;color: black;list-style: none;font-size: 13px;line-height:40px ;margin-top: 3px;
}
.banner>div>div:nth-child(2)>ul>li{float: left;width: 78px;height: 46px;color: black;list-style: none;font-size: 13px;line-height:46px ;margin-top: 3px;
}
.banner>div>div:nth-child(3)>ul>li{float: left;width: 78px;height: 46px;color: black;list-style: none;font-size: 13px;line-height:46px ;margin-top: 3px;
}/* 公告 */
.notice{height: 240px;background-color: #f2f2f2;
}
.notice>.container>div:first-child{height: 40px;
}.notice>.container>div:first-child>div:first-child{float: left;
}
.notice>.container>div:first-child>div:first-child>span{line-height: 40px;text-align: center;
}
.notice>.container>div:first-child>div:last-child{float: right;line-height: 40px;
}
.notice>.container>div:last-child ul{height: 200px;
}
.notice>.container>div:last-child ul li{list-style: none;float: left;width: 140px;padding-left: 60px;position: relative;height: 200px;margin-top: 30px;
}
.notice>.container>div:last-child ul li>div{margin-top: 30px;
}
.notice hr{width: 100%;border: 0.1px solid grey;
}
/* 侧边栏 */
.aside{position: fixed;right: 20px;bottom: 100px;}
.aside div{margin-top: 10px;
}
/* 主体 */
.main{height: 1180px;
}
.main .title{height: 60px;/* margin-left: 30px; */font-size: 22px;/* margin-top: 40px; */border-bottom: 5px solid #d0d0d0;
}
.main .nav1{height: 70px;
}
.main .nav1 ul{height: 70px;text-align: center;line-height: 70px;
}
.main .nav1 ul li{float: left;list-style: none;width: 115px;
}/* 最新消息 */
.news .head{height: 80px;line-height: 80px;
}
.news .head div{float: left;
}
.news .head div>div{height: 30px;width: 90px;background-color: #ff6200;color: white;text-align: center;line-height: 30px;margin-top: 24px;
}
.news .head div:nth-child(2){margin-left: 135px;
}
.news .middle>div:nth-child(1){font-size: 20px;float: left;
}
.news .middle>div>div{width: 328px;height: 330px;text-align: center;border: 1px solid #e5e5e5;line-height: 46px;
}
.news .middle>div>div>p:nth-child(3){font-size: 30px;color: #ff6200;
}
.news .middle>div>div>p:nth-child(1){font-size: 22px;font-weight: bold;
}
.news .middle>div>div>p:nth-child(5){font-size: 22px;font-weight: bold;
}
.news .middle>div>div>p:nth-child(6){font-size: 22px;font-weight: bold;
}
.news .middle>div>div>p:nth-child(2){font-size: 20px;color: #9999b3;
}
.news .middle>div>div>p:nth-child(4){font-size: 20px;color: #9999b3;
}
.news .middle>div>div>div{width: 180px;height: 40px;background-color: #ff6200;color: white;margin-left: 80px;
}
.news .middle>div:nth-child(2){font-size: 20px;float: left;width: 328px;height: 360px;/* text-align: center; */margin-left: 15px;
}
.news .middle>div:nth-child(2)>div{height: 109px;
}
.news .middle>div:nth-child(2)>div>p:nth-child(1){font-size: 18px;
}
.news .middle>div:nth-child(2)>div>p:nth-child(2){color: #ff6200;line-height: 20px;font-size: 18px;
}
.news .middle>div:nth-child(2)>div>div{height: 36px;width: 90px;background-color: #f2f2f2;float: right;margin-right: 10px;font-size: 18px;line-height: 36px;
}
.news .middle>div:nth-child(3){height: 360px;
}
.news .middle>div:nth-child(3)>img{height: 360px;margin-left: 70px;
}
.main .fincal>div:nth-child(1){border-bottom: #9999b3 5px solid;font-size: 22px;height: 40px;margin-top: 12px;}
.main .fincal div:nth-child(2) ul{height: 80px;line-height: 80px;text-align: center;
}
.main .fincal div:nth-child(2) ul li{list-style: none;float: left;width: 120px;
}
.main .fincal .end>div:first-child{height: 450px;width: 680px;border-bottom: none;
}
.main .end .left{float: left;
}
.main .end>div:nth-child(2){width: 300px;height: 450px;/* background-color: #9999b3; */float: right;/* margin-top: 10px; */
}
.main .end .right div{font-size: 16px;margin-left: 10px;line-height: 30px;color: #0d1368;margin-top: 20px;
}
.main .end .right .details{width: 75px;height: 30px;background-color: #ff6200;color: white;text-align: center;font-size: 18px;margin-top: 20px;
}
.main .end .right>div:first-child{position: relative;
}
.main .end .right .img{float: right;position: absolute;right: 5px;top: 65px;
}
.main .end .right>div:nth-child(2){position: relative;
}
.main .end .right .img1{float: right;position: absolute;right: 5px;top: 60px;
}
.main .end{border-top: 0.5px solid #9999b3;
}
.footer {height: 40px;background-color: #474747;line-height: 40px;color: white;
}
.footer .container>div:nth-child(1) li {list-style: none;float: left;margin-left: 10px;float: left;
}
.footer .container>div:nth-child(2){float: right;
}

效果展示

css+html工商银行小项目相关推荐

css --- [练手小项目]样式小结(字体、颜色的语义清除浮动的使用)
说明源代码 1.1 CSS属性书写顺序(重点) 建议遵循以下顺序: 1.布局定位属性: display / position / float / clear / visibility / overf ...
ssm练手小项目_20 个 JavaScript+Html+CSS 练手的小项目
前言: 最近在 GitHub 上发现了一个 vanillawebprojects[1] 开源仓库,里面收集了 20 个 JavaScript+Html+CSS的练手项目,没有使用任何框架,可以让你从基 ...
CSS样式小项目实战 - 网页变色小按钮
小项目练手实战 - 变色小按钮 [背景分析] 为了满足用户体验,提高项目网页的视觉冲击力,各大网站上都有一些有颜色的按钮,当鼠标划上去的时候会变色,让用户的体验非常好.为了满足用户需求,同时让代码效率 ...
台式小风扇（HTML+CSS+JS练手小项目）
台式小风扇(HTML+CSS+JS练手小项目) 功能介绍外观展示 HTML代码 CSS代码 JS代码总结功能介绍前段时间看到这样的风扇特效,感觉还挺好玩,就自己也写一个练练手. 风扇有四个档位 ...
html+css+js之20个练手小项目（一）
html+css+js之20个练手小项目(一)--Hangman 前言一.HTML 二.CSS 三.JS 前言前端新手练习,记录不迷失. 主要练习html和CSS布局以及JS. 来源github, ...
web实践小项目一:简单日程管理系统（涉及html/css，javascript，python，sql，日期处理）...
暑假自学了些html/css,javascript和python,苦于学完无处练手几乎过目即忘...最后在同学的建议下做了个简单日程管理系统.借第一版完成之际,希望能将实践期间犯过的错误和获得的新知进 ...
前端小项目（一）| 电影院座位预定（html，css，js）
前端小项目(一)| 电影院座位预定前言开始好好学习前端啦.学紫色爱心记录一波!! 初步学了html,css,js,在github上找了几个前端小项目模仿着练练手.第一个就是电影院座位预定页面,主要 ...
618快到了送上自制前端小项目（html css js）
目录 ??.自定义播放器 ??.图片自动消失 .小轮播图 ??.旋转音乐盒前言:这些小项目全都是自创的. 如果需要应用,或则转发的话请与博主联系,感谢你们的理解, 1.自定义播放器在页面中放置2 ...
html+css入门小项目巩固练习
html+css入门小项目巩固练习在B站通过视频复习了之前在学校学习的前端知识,然后在B站找了一个小的实战项目跟着练习,花了半天的时间实现如下: 1.首页 2.关于我们 3.联系我们码云源码地址: ...
0301 - 一个比价的小项目
这两天帮朋友做了个比价的小项目,主要是为了练手 Vue 及相关网站开发. 主要功能: 批量查询产品对应的京东价格手动根据京东价格调整批发价格将产品及价格信息,以网页形式分享出去由于是私人项目 ...

css+html工商银行小项目

css+html工商银行小项目相关推荐

最新文章

热门文章