前端页面----昵图网（简单版）

昵图网（源网址：）https://www.nipic.com/index.html

图片为昵图网大致页面，还有很多细节没有写到！！！
前端小白新手，记录自己成长为前端工程师的过程，写的有点乱，欢迎赐教哈~~~

<!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>Document</title>
</head>
<!-- 在这里引入custom.css public.css -->
<link rel="stylesheet" href="./css0/custom.css">
<link rel="stylesheet" href="./css0/public.css"><body><div class="page-container"><!-- 顶部 --><div class="header"><div class="content layout-flex-between"><div class="logo"></div><div class="nav-bar"><a href="">首页</a><a href="">设计</a><a href="">摄影</a><a href="">多媒体</a></div><div class="about-user"><input class="btn btn-primary" type="button" value="登录"><input class="btn btn-normal" type="button" value="注册"></div></div></div><!-- 中间区域 --><div class="main"><div class="content"><div class="banner-container"><img src="./image/top1.jpg" alt=""><div class="search-bar layout-flex-between border-box"><input class="border-box" type="text" placeholder="请输入"><input class="btn btn-primary" type="button" value="搜索"></div><span class="pre "></span><span class="next "></span></div></div><div class="top-middle"><div class="top-middle-img layout-flex-between"><div class="img1"><img src="./image/Chun-Ji-Mei-Chen.jpg" alt=""><div class="label-hidden">春季美陈</div></div><div class="img1"><img src="./image/Xin-Cha-Shang-Shi.jpg" alt=""><div class="label-hidden">春季美陈</div></div><div class="img1"><img src="./image/Cai-Cha-Cha-Hua.jpg" alt=""><div class="label-hidden">春季美陈</div></div><div class="img1"><img src="./image/JinZhe.jpg" alt=""><div class="label-hidden">春季美陈</div></div></div><div class="character1 layout-flex-around"><input class="btn1  " type="button" value="星空"><input class="btn1  " type="button" value="打折促销海报"><input class="btn1  " type="button" value="美食海报"><input class="btn1  " type="button" value="旅游海报"><input class="btn1  " type="button" value="党建雕塑"><input class="btn1  " type="button" value="虎年美陈"><input class="btn1  " type="button" value="最新图片"><input class="btn1  " type="button" value="查看更多>>"></div></div><div class="last-middle"><div class="last-middle-img layout-flex-between"><div class="last-middle-img-left "><img style=" width: 280px;" src="./image/Huo-Dong-Ce-Hua.jpg" alt=""></div><div class="last-middle-img-right "><div class="right-top layout-flex-between"><img src="./image/flower.jpg" alt=""><img src="./image/Fang-Di-Chang.jpg" alt=""><img src="./image/hunli.jpg" alt=""></div><div class="right-bottom layout-flex-between"><img src="./image/flower.jpg" alt=""><img src="./image/JinZhe.jpg" alt=""><img src="./image/flower.jpg" alt=""></div></div></div><div class="character1 layout-flex-around"><input class="btn1  " type="button" value="工作总结"><input class="btn1  " type="button" value="邀请函"><input class="btn1  " type="button" value="黄昏"><input class="btn1  " type="button" value="道德讲堂"><input class="btn1  " type="button" value="商务办公"><input class="btn1  " type="button" value="APP界面设计"><input class="btn1  " type="button" value="周年庆海报"><input class="btn1  " type="button" value="查看更多>>"></div></div><!-- 底部 --><div class="footer"><div class="footer-inside layout-flex-between"><div class="table"><div class="table-in"><h3>免费素材</h3><h6 style="color: rgb(207, 204, 204);">海量共享图任你选择</h6><input class="btn-last" type="button" value="去看看"></div></div><div class="table"><div class="table-in"><h3>原创精品</h3><h6 style="color: rgb(207, 204, 204);">海量共享图任你选择</h6><input class="btn-last" type="button" value="去看看"></div></div><div class="table"><div class="table-in"><h3>正版图库</h3><h6 style="color: rgb(207, 204, 204);">海量共享图任你选择</h6><input class="btn-last" type="button" value="汇图网"></div></div><div class="table"><div class="table-in"><h3>汇图悬赏</h3><h6 style="color: rgb(207, 204, 204);">海量共享图任你选择</h6><input class="btn-last" type="button" value="去看看"></div></div></div></div></div><!-- 最底部 --><div class="bottom"><div class="bottom-top"><div class="bt-in layout-flex-between"><div class="bt-in-table"><div class="bt1"><p style="font-size: 13px;">关于昵图</p><a href="">昵图简称</a><a href="">网站公约</a><a href="">版权申明</a><a href="">昵图简称</a><a href="">网站公约</a><a href="">版权申明</a></div></div><div class="bt-in-table"><div class="bt1"><p style="font-size: 13px;">常见问题</p><a href="">昵图简称</a><a href="">网站公约</a><a href="">版权申明</a><a href="">昵图简称</a><a href="">网站公约</a><a href="">版权申明</a></div></div><div class="bt-in-table"><div class="bt1"><p style="font-size: 13px;">联系我们</p><p style="font-size: 10px;">QQ在线时间 08:30-21:30</p><img src="./image/qq1.png" alt=""></div></div><div class="bt-in-table"><div class="bt1"><p style="font-size: 13px;">友情链接</p><img style=" width: 150px;height:  40px;" src="./image/zhaohang_logo.png" alt=""></div></div></div></div><div class="bottom-bottom "><div class="bb1 layout-flex-around1"><span style="font-size: 8px;"> Copyright © 2022 NiPic.com All Rights Reserved　版权所有·昵图网 昵图网是网络服务平台方，若您的权利被侵害，请联系 copyright@nipic.com 本站法律顾问：陈明律师 </span></div><div class="bb2 layout-flex-around1"><p style="font-size: 8px;"><a href="">浙ICP备14012994号-1 增值电信业务经营许可证：浙B2-20140130</a> 违法和不良信息举报电话：0571-89267010</p></div><div class="bb3 layout-flex-between"><div class="bb3-1"><P style="font-size: 8px;margin-left: 30px;">网络工商电子营业执照</P></div><div class="bb3-2"><P style="font-size: 8px;margin-left: 30px;"> 浙公网安备 33011002011092号</P></div></div></div></div></div>
</body></html>

        /* custom.css */html,body {margin: 0;padding: 0;width: 100%;height: 100%;min-width: 1260px;}.page-container {width: 100%;height: 100%;}.header {width: 100%;height: 75px;box-shadow: 0px 0px 10px #b6b3b3;/* x轴偏移量 y轴偏移量 阴影大小 yanse */}.header .content {width: 1000px;height: 100%;margin: auto;box-sizing: border-box;}.logo {width: 149px;height: 100%;background-image: url("   https://static.ntimg.cn/original/images/soso.png");background-size: 309px 45px;background-position-y: 15px;background-repeat: no-repeat;/* float: left; */}.nav-bar {width: 370px;height: 100%;/* float: left; */margin-right: 300px;}.nav-bar a:first-child {color: skyblue;}.nav-bar a {line-height: 75px;margin-left: 30px;text-decoration: none;color: rgb(0, 0, 0);}.nav-bar a:hover {color: skyblue;}.main {width: 100%;height: 1282px;}.banner-container {width: 100%;height: 100%;position: relative;}.banner-container:hover .pre {display: inline-block;left: 30px}.banner-container:hover .next {display: inline-block;right: 30px;}.banner-container img {width: 100%;height: 100%;}.search-bar {width: 692px;height: 58px;position: absolute;top: calc(50% - 29px);left: calc(50% - 346px);border: 3px solid rgba(10, 10, 10, 0.4);box-sizing: border-box;}/* 减号两边一定要有空格 */.search-bar input:first-child {width: 588px;height: 100%;outline: none;box-sizing: border-box;}.search-bar input:last-child {width: 97px;height: 100%;}.search-bar input:first-child::placeholder {font-size: 15px;color: chartreuse;}.banner-container .pre,.next {display: inline-block;width: 80px;height: 120px;background-color: rgb(123, 126, 121);background-size: 100% 100%;position: absolute;top: calc(50% - 60px);transition: all 0.5s;}.banner-container .pre {left: -80px;background-image: url("./../image/arr-l.png");}.banner-container .next {right: -80px;background-image: url("./../image/arr-r.png");}.top-middle {width: 100%;height: 388px;position: relative;}.top-middle-img {width: 1100px;height: 202px;/* background-color: darkblue; */position: absolute;top: calc(50% - 101px);left: calc(50% - 550px);}/* .top-middle-img .img {width: 240px;height: 200px;} */.top-middle img {width: 240px;height: 200px;position: relative;}.character1 {width: 1100px;height: 48px;position: absolute;margin-top: 320px;left: calc(50% - 550px);}.last-middle {width: 100%;height: 608px;position: relative;background-color: rgb(246, 246, 246);}.last-middle-img {width: 1100px;height: 418px;position: absolute;top: calc(50% - 209px);left: calc(50% - 550px);}.last-middle-img-left {width: 280px;height: 408px;}.last-middle-img-right {width: 810px;height: 418px;}.last-middle-img-right img {width: 240px;height: 200px;}.right-top {width: 810px;height: 209px;}.right-bottom {width: 810px;height: 209px;}.last-middle .character1 {margin-top: 530px;}.footer {width: 100%;height: 286px;position: relative;}.footer-inside {width: 1100px;height: 186px;position: absolute;top: calc(50% - 93px);left: calc(50% - 550px);}.table {width: 414px;height: 186px;border: 1px solid rgb(233, 232, 232);position: relative;}.table-in {width: 180px;height: 160px;top: calc(50% -80px);left: calc(50% - 90px);position: absolute;}.bottom {width: 100%;height: 300px;background-color: rgb(246, 246, 246);margin-top: 450px;}.bottom-top {width: 100%;height: 150px;position: relative;}.bt-in {width: 1100px;height: 100px;position: absolute;top: calc(50% - 50px);left: calc(50% - 550px);position: absolute;}.bottom-bottom {height: 150px;position: relative;}.bt-in-table {width: 275px;height: 100px;border: 1px solid rgb(238, 237, 237);position: relative;}a {text-decoration: none;font-size: 10px;color: #333;}a:hover {color: rgb(19, 158, 212);}.bt1 {width: 170px;height: 100px;position: absolute;top: calc(50% - 50px);left: calc(50% - 85px);}.bb3 {width: 410px;height: 29px;position: absolute;left: calc(50% - 200px);}.bb3-1 {width: 200px;height: 29px;background-image: url("./../image/gongan_icon.png");background-repeat: no-repeat;}.bb3-2 {width: 210px;height: 29px;background-image: url("./../image/webgongshang_icon.png");background-repeat: no-repeat;}/* 细节补充 */.btn-last:hover {background-color: rgb(19, 158, 212);}.btn1:hover {color: rgb(49, 204, 255)}

/* public  公共部分，方便调用 */.border-1s {border: 1px solid black;
}.btn {min-width: 60px;min-height: 30px;font-size: 16px;color: black;border-radius: 3px;
}.btn1 {min-width: 130px;min-height: 48px;background-color: white;border: 1px solid rgb(214, 215, 216);font-size: 14px;/* color: rgb(49, 204, 255); */border-radius: 3px;
}.btn-last {min-width: 140px;min-height: 42px;border: 1px solid rgb(49, 204, 255);background-color: white;font-size: 16px;color: skyblue;border-radius: 3px;
}.btn-primary {background-color: rgb(49, 204, 255);border: 1px rgb(49, 204, 255) solid;color: white;
}.btn-normal {background-color: white;border: 1px rgb(49, 204, 255) solid;color: black;
}.btn-normal:hover {background-color: skyblue;cursor: pointer;
}.btn-primary:hover {background-color: skyblue;cursor: pointer;
}.layout-flex-center {display: flex;justify-content: center;align-items: center;
}.layout-flex-around {display: flex;justify-content: space-around;align-items: center;
}.layout-flex-around1 {display: flex;justify-content: space-around;
}.layout-flex-between {display: flex;justify-content: space-between;align-items: center;
}.layout-flex-middle {display: flex;justify-content: center;
}.layout-align-middle {display: flex;justify-content: center;
}.border-box {box-sizing: border-box;
}.hidden {display: none;
}.label-hidden {width: 240px;height: 50px;text-align: center;line-height: 50px;position: absolute;background-color: rgb(109, 99, 87);margin-top: -55px;opacity: 0;
}.label-hidden:hover {opacity: 0.7;color: white;
}

前端页面----昵图网（简单版）相关推荐

html5制作webar,实战 | 前端WebAR实现简单版pokemon Go
原标题:实战 | 前端WebAR实现简单版pokemon Go 最近AR的话题很火,如前段时间pokemon Go游戏,和支付宝的AR红包,加上最近看到了一些关于前端运用webRTC技术实现WebAR ...
前端页面结构简单介绍
1.head和body 为了使用python进行爬虫,所以需要先前端页面结构进行初步认识,可以在pycharm里新建一个.html文件,自动就会生成一个框架 <!DOCTYPE html> ...
前端页面中iOS版微信长按识别二维码的bug与解决方案
发现问题页面做出来后测试,发现在安卓版微信能正常识别,但iOS 版微信(iPhone 或 iPad)皆无法正常识别.出来问题一开头固然是怀疑自己的代码有问题,上网搜索相关资料,尝试以下方案均无法解决 ...
Android studio 仿微信朋友圈页面（简单版）
好友动态页面,里面是好友发布的动态布局xml文件 <?xml version="1.0" encoding="utf-8"?> <Linear ...
前端页面中iOS版微信长按识别二维码的bug
问题描述: H5首页banner图,在安卓微信内长按可识别二维码,但在ios部分机型上,长按图片识别不了二维码. 测试机型: iphone6s plus 系统12.1 微信版本6.7.4 iphone ...
低代码前端页面可视化搭建
目录 1.低代码/无代码/传统企业应用开发商介绍 2.低代码平台 2.3. 具备外部接口的调用能力前端页面可视化 3.低代码平台的自动化测试 3.1 关于自动化低代码测试 3.2 低代码测试的机会在 ...
active server pages 错误 asp 0126_微信小程序全栈开发课程【视频版】2.1 小程序前端页面初始配置、ESlint格式错误...
点击观看视频 ↓↓↓ 小程序前端页面初始配置.ESlinthttps://www.zhihu.com/video/1195030595196223488 课程文字版 1.修改src/pages文件夹 ...
Spring+SpringMVC+MyBatis明日方舟版人员信息管理系统前端页面代码前后端交互+SSM框架管理员登录游客登录普通用户登录人员的增删改查信息更新图片上传分页查询）
Spring+SpringMVC+MyBatis明日方舟版人员信息管理系统前端页面代码(前后端交互+SSM框架管理员登录游客登录普通用户登录人员的增删改查信息更新图片上传分页查询修改密 ...
博客系统前端页面代码实现及页面展示(代码版)
hi,大家好,今天为大家带来博客系统的前端代码及页面展示我们使用VS code 这个编码工具来编写代码博客系统前端页面分为四个部分 1.博客列表页 2.博客编辑页 3.博客登录页 4.博客详情页

前端页面----昵图网（简单版）

昵图网（源网址：）https://www.nipic.com/index.html

前端页面----昵图网（简单版）相关推荐

最新文章

热门文章