位置: IT常识 - 正文

原 !神静态网页布局详解,html+css布局实战,附详细代码

编辑:rootadmin
原 !神静态网页布局详解,html+css布局实战,附详细代码 代码整体效果展示

推荐整理分享原 !神静态网页布局详解,html+css布局实战,附详细代码,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

 1页面布局思路

       本次界面的布局主要采用定位流的方式来进行布局。因为界面具有很多透视效果,以及背景图片的重叠。接下来我将详细讲解布局

第一层定位流:素材:

 此图片作为总体背景应该放在第一层,因为其他的元素都应该在其上面,否则背景图会覆盖其他元素。

第二层定位流:素材:

 

 第三层:素材注意: 

 中间有一条竖线,是通过定义宽度为1px的容器<div>加上背景色制作而成。

第四层:原 !神静态网页布局详解,html+css布局实战,附详细代码

到了这一步基本上大功告成了,剩下的就是html页面的常规布局。

 分别可以分为左边部分,中间部分,底部部分。

左边部分代码块​​ <ul> <li class="li1"> <div class="hover1"> <span>蒙德城</span> </div> <div class="div2"></div> &nbsp;<span class="city">蒙德城</span> </li> <li> <div class="hover1"> <span>璃月城</span> </div> <div></div> &nbsp;<span>璃月城</span> </li> <li> <div class="hover1"> <span>稻妻城</span> </div> <div></div> &nbsp;<span>稻妻城</span> </li> <li> <div class="hover1"> <span>须弥城</span> </div> <div></div> &nbsp;<span>须弥城</span> </li> <li> <div></div> &nbsp;<span>敬请期待</span> </li> </ul>​​中间部分代码段 <div class="right-troduction"> <div class="troduction-border"></div> <div class="name"><span>琴</span></div> <div class="cv"> <div class="left-cv"> <div class="cv-symbol"></div> <div class="cv-character">CV: 林溯</div> <div class="voice-symbol"> </div> </div> <div class="right-cv"> &nbsp;<span>日</span> <div class="circle"></div> </div> </div> <div class="text"> <div class="text-symbol"></div> <div class="text-primary"> <p>身为西风骑士团的代理团长,琴一直忠于职守,为人们带来安宁.虽然并非天赋异禀,但通过刻苦训练,如今的她已然能够独当一面。</p> <p>当风魔龙的威胁开始临近,这位可靠的代理团长早已做好了准备,誓要守护蒙德。</p> </div> </div> </div> <div class="wind-listen-to-me"> </div> </div>底部部分代码块  <div class="bottom"> <div class="left-point"></div> <div> <div class="image qin"></div> <div class="span-bg"><span>琴</span></div> </div> <div> <div class="image an"></div> <div class="span-bg"><span>安珀</span></div> </div> <div> <div class="image lisha"></div> <div class="span-bg"><span>丽莎</span></div> </div> <div> <div class="image kaiya"></div> <div class="span-bg"><span>凯亚</span></div> </div> <div> <div class="image babala"></div> <div class="span-bg"><span>芭芭拉</span></div> </div> <div> <div class="image diluke"></div> <div class="span-bg"><span>迪卢克</span></div> </div> <div class="right-point"></div> </div>

 上面的静态网页加入了部分动态效果,可以让自己的网页显得更厉害。

最后附上原神cos区静态页面展示

国庆七天,悄悄练一手,回到学校耍耍酷,或者在女朋友面前露两手。让对象不仅爱原神,更爱你!

同时附上详细代码以及图片素材:

详细代码https://download.csdn.net/download/qq_60614034/86732367?spm=1001.2014.3001.5501

本文链接地址:https://www.jiuchutong.com/zhishi/287145.html 转载请保留说明!

上一篇:怎么注册滴滴快车司机(怎么注册滴滴快车司机客户端)

下一篇:最小的U盘是什么(体积最小的u盘)

  • 三星watch4颜色(三星手表颜色为嘛是黑白)

    三星watch4颜色(三星手表颜色为嘛是黑白)

  • 苹果6与7屏幕一样吗(苹果6与7屏幕一样大吗)

    苹果6与7屏幕一样吗(苹果6与7屏幕一样大吗)

  • 微信群语音聊天怎么进去(微信群语音聊天怎么开)

    微信群语音聊天怎么进去(微信群语音聊天怎么开)

  • 苹果钱包靠近读卡器没反应(苹果钱包靠近读卡器没反应咋回事)

    苹果钱包靠近读卡器没反应(苹果钱包靠近读卡器没反应咋回事)

  • 为什么软件打不开(为什么软件打不开电脑)

    为什么软件打不开(为什么软件打不开电脑)

  • oppo手机闪充在哪里设置(oppo闪充的时候显示图什么?)

    oppo手机闪充在哪里设置(oppo闪充的时候显示图什么?)

  • 苹果x容易发热正常吗(苹果x容易发热能修吗)

    苹果x容易发热正常吗(苹果x容易发热能修吗)

  • 苹果7plus有耳机孔吗(苹果耳机5代)

    苹果7plus有耳机孔吗(苹果耳机5代)

  • 微信好友批量转移到另一个号(微信好友批量转移到企业微信)

    微信好友批量转移到另一个号(微信好友批量转移到企业微信)

  • 腾讯会议共享ppt为什么不会翻页(腾讯会议共享ppt怎么看备注)

    腾讯会议共享ppt为什么不会翻页(腾讯会议共享ppt怎么看备注)

  • 表格怎么返回上一步(表格怎么返回上一个表格)

    表格怎么返回上一步(表格怎么返回上一个表格)

  • r15右上角有个耳机(oppor15手机右上角有一个耳机)

    r15右上角有个耳机(oppor15手机右上角有一个耳机)

  • 坚果pro2可以插内存卡吗(坚果pro2接口)

    坚果pro2可以插内存卡吗(坚果pro2接口)

  • 抖音的小时榜是什么意思(抖音小时榜是怎么计算的)

    抖音的小时榜是什么意思(抖音小时榜是怎么计算的)

  • pr支持什么格式的视频(pr支持什么格式的音频导入)

    pr支持什么格式的视频(pr支持什么格式的音频导入)

  • word怎么添加页码(word怎么添加页眉横线)

    word怎么添加页码(word怎么添加页眉横线)

  • 手机怎么导航(驾车走国道手机怎么导航)

    手机怎么导航(驾车走国道手机怎么导航)

  • iqooneo855支不支持nfc(iQOONeo855支不支持无线充电)

    iqooneo855支不支持nfc(iQOONeo855支不支持无线充电)

  • surface型号1724是几代(surface 型号1631)

    surface型号1724是几代(surface 型号1631)

  • 三星s10怎么隐藏home键(三星s10怎么隐藏应用)

    三星s10怎么隐藏home键(三星s10怎么隐藏应用)

  • 抖音战斗力检测怎么玩(抖音战斗力检测怎么弄)

    抖音战斗力检测怎么玩(抖音战斗力检测怎么弄)

  • 怎样修改手机银行支付密码(怎样修改手机银行转账额度)

    怎样修改手机银行支付密码(怎样修改手机银行转账额度)

  • 唯品会怎么删除订单记录(唯品会怎么删除收货地址)

    唯品会怎么删除订单记录(唯品会怎么删除收货地址)

  • 华为mate20可以用5g网络吗(华为mate20可以用6a数据线吗)

    华为mate20可以用5g网络吗(华为mate20可以用6a数据线吗)

  • 详解Linux系统中inode索引节点已满问题的解决方法(linux is)

    详解Linux系统中inode索引节点已满问题的解决方法(linux is)

  • 公司有买社保就要交税吗
  • 增值税开票软件在哪下载
  • 税金及附加怎么记忆
  • 个税申报状态失败,如何更正申报
  • 监理公司成本核算方法
  • 装修工程一切险
  • 抵扣进项税怎么做凭证
  • 一般纳税人必须先有进项才能开出来发票吗
  • 生产企业出售空调设备
  • 长期股权投资权益法下初始投资成本
  • 退休后补发退休前的工资需要扣社保吗
  • 负债与递延收益的区别
  • 分月计提利息会计分录
  • 存货的坏账准备转回吗
  • 个人出租房屋应该注意什么
  • 金税三期个人所得税税率
  • 出纳长短款项应按日结清,但不需要计算
  • 我公司只开了普票未开专票是否需要发票认证?
  • 为什么收到的劳务费税点打星号?
  • 公司员工租金取得专用发票能否抵扣?
  • 出租房屋的房产税怎么算
  • 关于增值税的问题有哪些
  • 工程施工成本发票未到会计分录及账务处理
  • 个人独资企业出资额是注册资本吗
  • 营改增后挂靠工程会计分录具体怎么做?
  • 企业停工期间发放工资
  • 金蝶软件测试笔试题及答案
  • 鸿蒙系统怎么切换回安卓
  • 代收消费税计算
  • mac休眠后黑屏无法开机正常吗
  • 在windows7操作具有
  • win10预览版21337
  • linux添加系统用户命令
  • 小微企业所得税怎么算
  • windows11更新多大
  • 海关交税标准表
  • syms命令
  • php curl file_get_contents
  • php xml转字符串
  • 二次封装机
  • bert获取中文词向量
  • vue角色管理
  • 【超直白讲解opencv RGB与BGR】RGB模式与BGR模式有什么不同,如何相互转换?
  • sar参数设置4个数
  • 财务章和公章下面数字一样吗
  • mysql的索引是什么
  • sqlserver 15247
  • 民间非营利组织会计科目
  • 应交税费的账务处理一般纳税人
  • 以货换货如何做账
  • 车船税税金及附加
  • 个体工商户分配所得
  • 刚开业的健身房
  • 定额发票怎么领?
  • 账户分类的作用是什么
  • 给个人的销售返现合法吗
  • 应收账款的余额百分比
  • 企业付的快递费怎么做账
  • 残保金怎么办理
  • 商品流通企业流程
  • 商业批发是什么意思
  • wdcp面板
  • 笔记本电脑的触摸板怎么开启和关闭
  • winxp远程桌面
  • reminder.exe - reminder是什么进程 有什么用
  • windows8怎么新建word文档
  • w10 2021年更新
  • linux yum安装apache
  • win7系统屏幕保护设置禁用如何开启
  • opengl纹理叠加
  • 浅谈自己对教育的理解
  • 点击滑块是什么意思
  • portainer集群管理
  • js文件里面有什么
  • vue3目录解析
  • linux中scp命令和scp命令用法大全
  • Python循环遍历的题
  • jquery页面关闭事件
  • 电子税务局打印发票提示本机未检测到
  • 临沂国税地税局领导班子
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设