前端小白系列——纯CSS重现捕鱼猎人页面
来源:互联网 发布:手机里变钱魔术软件 编辑:程序博客网 时间:2024/06/10 00:10
学了一段时间,找个项目练练手,捕鱼猎人就是一个很好的素材嘛~点击链接去看,会发现这个布局还是很简单的,现在让我们一起来开始这个页面的还原吧~(注:所有的图片都可以在上面链接对应的页面上右键保存)
首先对HTML结构分析,不难发现,这个页面的结构是上中下结构,上面是header
部分,中间是content
部分,下面是footer
部分。header
部分是一个banner
宣传图片;content
部分分为4个小块,Part1
是一个并排的两个盒子,分别显示一个列表和一个小的轮播组件, Part2
是一个大的轮播盒子,Part3
则是友商链接,另外还有一个侧边栏aside
。footer
部分是公司的版权声明。
<body><header> <div id="banner"></div></header><div id="content"> <div class="part1"> <div class="part1-left"></div> <div class="part1-right"></div> </div> <div class="part2"></div> <div class="part3"></div> <aside class="floater"></aside></div><footer> <div class="copyright"></div></footer></body>
整体框架就是以上代码,其他的内容代码在上面的框架中添加就可以了,是不是很简单~在这里用到了HTML5新标签<header>
、<aside>
、<footer>
标签来取代之前常用的<div id="header">
、<div id="aside">
、<div id="footer">
,避免了一系列盒子的嵌套。
再来看一下CSS的难点:首先难点在于列表项的切换,part1-left
部分是一个可以切换的列表,一般情况下这里是用的JS控制,我在网上搜索了一下,用的是单选按钮来替换JS的控制;其次是part1-right
的纯CSS的轮播组件,我在这里用得是网上的模板,关于这个部分,我会在之后自己去尝试写一个可运行的代码;最后一个小小的难点就是友商链接的浮动了,当然这个问题相对来说是比较简单的。让我们一一攻破:
<!-- 问题1:纯CSS的列表项切换对应的HTML结构 --><ul class="tab-list"> <li> <input type="radio" name="tabs" id="tab1" checked/> <label for="tab1">新闻</label> <div id="tab-cont1" class="tab-content"> <ul class="news-list"> <li><a href="#" class="news-content">这里是链接内容1</a></li> <li><a href="#" class="news-content">这里是链接内容1</a></li> </ul> </div> </li> <li> <input type="radio" name="tabs" id="tab2"/> <label for="tab2">活动</label> <div id="tab-cont2" class="tab-content"> <ul class="news-list"> <li><a href="#" class="news-content">这里是链接内容2</a></li> <li><a href="#" class="news-content">这里是链接内容2</a></li> </ul> </div> </li> <li> <input type="radio" name="tabs" id="tab3"/> <label for="tab3">公告</label> <div id="tab-cont3" class="tab-content"> <ul class="news-list"> <li><a href="#" class="news-content">这里是链接内容3</a></li> <li><a href="#" class="news-content">这里是链接内容3</a></li> </ul> </div> </li> </ul>
通过以上结构,我们会有一个简陋原始的可点击的单选列表,然后此时CSS要做的事情就是改变这个单选列表的显示方式。看这里看这里~~~
* { padding: 0; margin: 0;}body { background-color: #ccc;}/* 清除无序列表的自带样式 */ul { list-style: none;}.part1-left { position: relative; width: 550px; height: 365px; float: left; padding: 1.5%; margin-top: 1%; margin-left:1%; margin-bottom: 1%; overflow: hidden; background-color: #fff; -webkit-box-shadow: 0 5px 5px rgba(0,15,15,0.5); -moz-box-shadow: 0 5px 5px rgba(0,15,15,0.5); box-shadow: 0 5px 5px rgba(0,15,15,0.5);}.tab-list { position: relative; /*overflow: hidden;*/ text-align: center; /*background-color: #fff;*/}.tab-list li { display: block; float: left; margin-left: 1%; margin-bottom: 1%;}/* 将单选按钮移出屏幕可见区域 */.tab-list input[type="radio"] { position: absolute; top: -9999px; left: -9999px;}.tab-list label { position: relative; /*top: 4px;*/ display: block; padding: 5px 10px; font-size: 20px; font-weight: normal; color: #333; background-color: #fff; border-radius: 2px 2px 0 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; cursor: pointer;}.tab-list label:hover { color: #fff; background: #1E1478; box-shadow: 0 5px 10px rgba(0, 15, 15, 0.5);}.tab-list .tab-content { position: absolute; top: 50px; left: 0; display: none; width: 100%; padding-bottom: 5px; overflow: hidden; text-align: left; font-size: 18px; line-height: 20px;}.tab-content a{ text-decoration: none; color: #333;}.tab-content a:hover { text-decoration: underline; color: #0B0141;}.tab-list [id^="tab"]:checked + label { top: 0; padding-top: 5px; color: #fff; background-color: #1E1478; box-shadow: 0 5px 10px rgba(0,15,15,0.5);}.tab-list [id^="tab"]:checked ~ [id^="tab-cont"] { display: block;}.news-list { width: 99%; overflow: hidden; border: 1px outset #ccc;}.news-list li { display: block; float: none;}
这样,一个纯CSS多列表切换就完成了。当然能够完成这样的项目基本上要归功于HTML5和CSS3的一些新变化,例如HTML5中自带页面验证,CSS3中添加了盒模型的阴影显示等。另外这里会有一个小小的问题,就是这边每次点击大标题“新闻”、“活动”、“公告”时,都会自动返回到页面顶端,我试过了一些方法,也没有得到解决,希望有大神能够告诉我解决方案~
关于第二个难点,纯CSS的轮播组件,这一块我还没有深入研究,所以我是直接用的网上的模板纯CSS的图片切换幻灯片代码。这个代码我觉得是非常炫酷,是我自己对纯CSS轮播不够熟悉和清晰,过一段时间我也会尝试去自己完成一个可以到处使用的轮播模板。
至于第三个问题,我倒觉得是小问题,讲道理对盒子内的所有图片左浮动然后调一下间距就可以了。这部分的HTML结构十分简单,就是一个无序列表,在列表中规定图片大小为指定大小(150*50),设置每个列表项左浮动,即可完成该部分。
所有的代码可见(资源之后会上传)。另外,我写的这个代码里有一些问题,在没有使用媒体查询的情况下,用百分比对页面各部分布局会有明显的短板——当我的页面缩放时,part1
的两个部分会由于位置不足变为上下两个部分,用滚动条查看,这显然不是想要的效果。所以我会再写一个Bootstrap版本的网站实现~
参考网址
http://www.buyulieren.com/
http://sc.chinaz.com/jiaoben/160218243950.htm
- 前端小白系列——纯CSS重现捕鱼猎人页面
- 前端小白系列——Bootstrap重现捕鱼猎人页面
- 【前端框架系列】Pure : 来自雅虎的纯 CSS 框架
- 前端基础小案例:纯css制作旋转披萨
- 前端小案例-纯css做缩略图悬停效果
- 前端小白系列之——导言
- 前端小白系列(0)——工程构建
- 前端小白系列(1)——背景
- 前端小白系列(3)—— 分页
- 前端小白系列——打字游戏
- 前端的小玩意(8)——旋转的盒子(纯CSS动画效果)+可自由拖动(js)
- WEB前端-HTML-CSS-后台管理页面布局小例
- web前端开发参考手册系列——CSS参考手册
- CSS系列——前端进阶之路:初涉Less
- CSS系列——前端进阶之路:初涉Less
- 前端学习的小笔记——CSS
- 微信小程序开发系列——5.前端页面开发
- 抛砖引玉式炫技:日历图标的纯CSS实现【前端开发技能必备系列】
- java中方法中的return用法(技巧)
- 邮箱的正则表达式
- JavaScript跳出iframe框架
- Loaded plugins: fastestmirror, refresh-packagekit, security Loading mirror speeds from cached hostf
- SPOJ DQUERY
- 前端小白系列——纯CSS重现捕鱼猎人页面
- [BZOJ 1051][POJ 2186] 受欢迎的牛/Popular Cows Tarjan缩点+判断出度
- 组件、插件、控件的区别
- Oracle 树操作、递归查询(select…start with…connect by…prior)
- HDOJ2028求n个数的最小公倍数
- Combined Character
- 关于TexturePacker中 Allow free sizes的问题
- Java 对Java24种设计模式的想法和理解
- 一次搞定"=="和equals(),含源码解析