搜索
首页web前端html教程练习:90%的css实现淘宝话费充值等快捷应用栏_html/css_WEB-ITnose

效果

主要的功能有

1. 网格设计
2. 充话费独占2行2列
3. 充话费鼠标移入有字体缩小的动画
4. 充话费等第一行的四个应用鼠标移入时,图标会向上弹一下
5. 充话费等第一行的四个应用鼠标移入时,会有更多的应用内容以框的显示显示在该应用下面,如:

本文的价值
1. 在html结构,css逻辑方面,有一些自己的想法可供参考和交流
2. 熟悉css的transition和animation的简单应用
3. 学习如何通过浮动和负的的margin值,实现这种网格效果
4. 学习如何利用less,编写更加清晰和易于修改的css
5. 见识下淘宝的iconfront的威力

html结构:该找个演示代码的工具了。。。贴代码不好

<div class="toolbox">                <ul>			<li class="tb-item tb-rs-2 tb-cs-2">				<a class="tb-item-wrapper tb-item-big  tb-item-hbox tb-item-huafei" href="javascript:;" title="话费充值">					<div class="tb-item-iwrapper">						<i class="tb-item-icon iconfont icon-icon"></i>						<p class="tb-item-text">充值</p>					</div>					<div class="tb-item-box">					</div>				</a>			</li>			<li class="tb-item">				<a class="tb-item-wrapper tb-item-hbox tb-item-youxi" href="javascript:;" title="游戏充值">					<div class="tb-item-iwrapper">						<i class="tb-item-icon iconfont icon-youxi"></i>						<p class="tb-item-text">游戏</p>					</div>					<div class="tb-item-box">					</div>				</a>			</li>			<li class="tb-item">				<a class="tb-item-wrapper tb-item-hbox tb-item-lvxing" href="javascript:;" title="旅行">					<div class="tb-item-iwrapper">						<i class="tb-item-icon iconfont icon-hanglvxingye"></i>						<p class="tb-item-text">旅行</p>					</div>					<div class="tb-item-box">					</div>				</a>			</li>			<li class="tb-item">				<a class="tb-item-wrapper tb-item-hbox tb-item-baoxian" href="javascript:;" title="保险">					<div class="tb-item-iwrapper">						<i class="tb-item-icon iconfont icon-baoxian"></i>						<p class="tb-item-text">保险</p>					</div>					<div class="tb-item-box">					</div>				</a>			</li>			<li class="tb-item">				<a class="tb-item-wrapper" href="javascript:;" title="彩票">					<div class="tb-item-iwrapper">						<i class="tb-item-icon iconfont icon-caipiao"></i>						<p class="tb-item-text">彩票</p>					</div>				</a>			</li>                     ...		</ul>	</div>

最后几个省略,跟彩票应用实现相同。

结合html结构,描述下实现思路,主要是各个html元素的作用和css类的组织:

1. 整个应用包裹在div里,加了一个toolbox的类标识它这个容器
2. toolbox>ul,这个ul元素没有必要加css类,因为toobox的子元素从需求考虑不会再有其它元素,如果要对这个ul添加样式,利用子元素选择器即可
3. 每个li元素都加了一个类,一方面是为了结构更加清晰,另一方面是因为有些应用内部还会有div包括它的具体内容,这些内容很有可能也会用li元素来实现,所以要对跟应用直接相关的li元素添加css类,以便对它设置的样式不会影响更加深远的后代li元素,其实因为这个原因,li元素下面的a,div,i,p都必须加css类,道理同理
4. tb-item表示一个应用,同时考虑到话费对应的tb-item,占了两行两列,所以单独加了两个类tb-rs-2,tb-cs-2,表示rowspan或colspan为2,命名简便了点,有注释的话,代码就不难理解了,原本是想借助less的循环和mixin,将这个占多行多列的类做的更加灵活,从实际结果来看,这个还是不太好实现。。。。
5. li下面直接元素是a元素,因为字体大小,颜色和图标闪一下的动画效果都需要利用a元素的hover伪类实现
6. a元素还有一些其他的辅助类,如tb-item-big的作用是可以利用它,对需要显示大字体的应用进行处理,如tb-item-hbox,其实是tb-item-hasbox的简写,意思是它里面还有更多的内容,需要一个box来包裹,所以它里面has a box,如tb-item-huafei,tb-item-youxi,这个是用来单独标识每一个应用的,利用它可以实现它里面的box在显示的时候,left值可以得到不同的控制,以便box的左右边框总是能够跟toolbox的两边重合。
7. a元素里面有两个元素,第一个元素时tb-item-iwrapper,它把tb-item-icon和tb-item-text包裹起来,目的是为了在显示box的时候,这个iwrapper元素的底部能够把box的border-top盖住一部分以便,这个元素与box看起来是一种连通的效果;第二个元素是tb-item-box,这个没啥好说的。这两个元素都是绝对定位的,默认的时候tb-item-box不会显示,top值为父元素的100%,当父元素hover的时候,tb-item-box就会显示出来了。然后控制好left等等,微调之后就能实现效果了。
8. 网格的实现,可以这么干:每个tb-item都设置border,然后全部左浮动,并且都设置margin-top: -1px ,margin-left: -1px就搞定了。

css代码实现

<strong>@import (inline)"icon-font.css";* {  box-sizing: border-box}@tb-cols: 5;//5行@tb-rows: 3;//3列@tb-item-width: 59px;//每个item的宽@tb-item-height: 78px;//每个item的高@tb-item-bdcolor: #EAEAEA;//item默认的边框颜色@tb-item-icon-small-size: 24px;//图标默认的字体大小@tb-item-icon-big-size: 60px;//大图标的字体大小body {    font: 12px/1.5 tahoma,arial,'Hiragino Sans GB',sans-serif;}/*设置整站的a元素,ul元素,li元素的默认样式*/a {  text-decoration: none;}ul {  list-style: none;}ul,li {  margin: 0;  padding: 0;}//以上元素应该在整站做一些整体样式的设置,以便整个网站的风格能够一致@-webkit-keyframes toTopFromBottom {  49% {    -webkit-transform: translateY(-100%);  }  50% {    opacity: 0.3;    -webkit-transform: translateY(40%);  }  51% {    opacity: 1;  }/* 假如动画动画声明的时候使用了forwards,在动画结束后,元素将保持在to定义的状态,如果没有定义to这个状态,即使配置了forwards,元素在动画结束后会回到起始状态   意思就是本例中,不使用forwards也没有关系  to {    opacity: 0.3;  } */}//从bootstrap中找出来的清除浮动的mixin.clearfix() {  &:before,  &:after {    content: " ";    display: table;  }  &:after {    clear: both;  }}//forwards 参考:http://www.w3school.com.cn/cssref/pr_animation-fill-mode.asp,.toTopFromBottom() {  -webkit-animation: toTopFromBottom 0.3s forwards;  -moz-animation: toTopFromBottom 0.3s forwards;  animation: toTopFromBottom 0.3s forwards;}.toolbox {  //这部分样式设置其实是根据需求定的,比如宽度跟定位,本例只是为了实现效果,毕竟这个toolbox的样式不太关键  width: 600px;  height: 600px;  position: fixed;  top: 50%;  left: 50%;  margin-left: -300px;  margin-top: -300px;  //组件内部可能还包含有其它的ul,li,p,a,i等元素,先用元素选择器定义一些统一的样式,针对不同位置的元素,可以结合类选择器来单独定义  //设置本组件内p元素的默认样式,之所以不设置在外面,是因为不是整站的p元素都需要清掉padding和margin,段落还是带一些行距要好看些  p {    margin: 0;    padding: 0;  }  ul {    //根据行列数跟每个item的高宽计算整个ul元素的高宽    width: @tb-item-width * @tb-cols - @tb-cols + 1;    height: @tb-item-height * @tb-rows - @tb-rows + 1;    .clearfix();  }  .tb-item {    float: left;    width: @tb-item-width;    height: @tb-item-height;    border: 1px solid @tb-item-bdcolor;    margin-left: -1px;    margin-top: -1px;    position: relative;    //定义占两列的item宽度    &.tb-cs-2 {        width: @tb-item-width * 2 - 1;    }    //定义占两行的item高度    &.tb-rs-2 {      height: @tb-item-height * 2 - 1;    }  }    .tb-item-wrapper {    text-align: center;    &,& .tb-item-iwrapper {      position: absolute;      top: 0;      right: 0;      left: 0;      bottom: 0;    }    & .tb-item-iwrapper {      overflow: hidden;    }    //图标    .tb-item-icon {      display: block;      color: #ff4400;      font-size: @tb-item-icon-small-size;      margin-top: 12px;    }    //文本    .tb-item-text {      transition: color 0.3s ease-in-out;      color: #6c6c6c;    }    //大图标    &.tb-item-big .tb-item-icon {      font-size: @tb-item-icon-big-size;      transition: font-size 0.3s ease-in-out;    }    .tb-item-box {      position: absolute;      display: none;      background-color: #fff;      top: @tb-item-height - 2;      height: @tb-item-height * 2 - 1;      width: @tb-item-width * @tb-cols - @tb-cols + 1;      border: 1px solid #ff4400;      z-index: 1;    }    //以下几处控制每个应用的box的left    &.tb-item-huafei .tb-item-box {           left: -1px;    }    &.tb-item-youxi .tb-item-box {           left: -@tb-item-width * 2 + 1;    }    &.tb-item-lvxing .tb-item-box {           left: -@tb-item-width * 3 + 2;    }    &.tb-item-baoxian .tb-item-box {           left: -@tb-item-width * 4 + 3;    }    &:hover .tb-item-text {      color: #ff4400;    }    //定义带box的wrapper元素hover时候的样式,主要是为了显示红色的边框,并且盖住父的item元素的边框    &.tb-item-hbox:hover {      top: -1px;      left: -1px;      bottom: -1px;      right: -1px;      border: 1px solid #ff4400;      z-index: 1;      .tb-item-iwrapper {              bottom: -1px;        z-index: 2;        background-color: #fff;      }    }    &.tb-item-big:hover .tb-item-iwrapper {              bottom: @tb-item-height - 2;    }    &.tb-item-hbox:hover .tb-item-box {      display: block;    }    &.tb-item-big:hover .tb-item-icon {      font-size: @tb-item-icon-small-size;    }    &:hover .tb-item-icon {      .toTopFromBottom();    }  }  //tb-on的添加和删除是通过js控制的,完全通过css做实现不了,主要是为了鼠标在滑入游戏,保险,旅行等item时,话费item的文字大小能够跟它们保持一致  &.tb-on {    .tb-item-big {      .tb-item-icon{        font-size: @tb-item-icon-small-size;      }    }  }}</strong>

Js部分:

<script type="text/javascript">		(function() {			var $tb = $('.toolbox');			var toggleTb = function(e){				$('.toolbox').toggleClass('tb-on');				}			$('.toolbox').on('mouseenter','.tb-item-hbox',toggleTb).on('mouseleave','.tb-item-hbox',toggleTb);		})();	</script>

这个tb-on的作用是为了实现,比如鼠标滑过游戏这个应用,话费这个应用的图标能够设置成普通的字体大小而不是大图标大小。

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?Mar 04, 2025 pm 12:32 PM

公众号网页更新缓存,这玩意儿,说简单也简单,说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章,结果用户打开还是老版本,这滋味,谁受得了?这篇文章,咱就来扒一扒这背后的弯弯绕绕,以及如何优雅地解决这个问题。读完之后,你就能轻松应对各种缓存难题,让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存,说白了就是浏览器或者服务器为了提高访问速度,把一些静态资源(比如图片、CSS、JS)或者页面内容存储起来。下次访问时,直接从缓存里取,不用再重新下载,速度自然快。但这玩意儿,也是个双刃剑。新版本上线,

如何使用HTML5表单验证属性来验证用户输入?如何使用HTML5表单验证属性来验证用户输入?Mar 17, 2025 pm 12:27 PM

本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

如何高效地在网页中为PNG图片添加描边效果?如何高效地在网页中为PNG图片添加描边效果?Mar 04, 2025 pm 02:39 PM

本文展示了使用CSS为网页中添加有效的PNG边框。 它认为,与JavaScript或库相比,CSS提供了出色的性能,详细介绍了如何调整边界宽度,样式和颜色以获得微妙或突出的效果

HTML5中跨浏览器兼容性的最佳实践是什么?HTML5中跨浏览器兼容性的最佳实践是什么?Mar 17, 2025 pm 12:20 PM

文章讨论了确保HTML5跨浏览器兼容性的最佳实践,重点是特征检测,进行性增强和测试方法。

&lt; datalist&gt;的目的是什么。 元素?&lt; datalist&gt;的目的是什么。 元素?Mar 21, 2025 pm 12:33 PM

本文讨论了html&lt; datalist&gt;元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

&gt; gt;的目的是什么 元素?&gt; gt;的目的是什么 元素?Mar 21, 2025 pm 12:34 PM

本文讨论了HTML&lt; Progress&gt;元素,其目的,样式和与&lt; meter&gt;元素。主要重点是使用&lt; progress&gt;为了完成任务和LT;仪表&gt;对于stati

我如何使用html5&lt; time&gt; 元素以语义表示日期和时间?我如何使用html5&lt; time&gt; 元素以语义表示日期和时间?Mar 12, 2025 pm 04:05 PM

本文解释了HTML5&lt; time&gt;语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性(ISO 8601格式)的重要性,并在人类可读文本旁边,增强Accessibilit

&lt; meter&gt;的目的是什么。 元素?&lt; meter&gt;的目的是什么。 元素?Mar 21, 2025 pm 12:35 PM

本文讨论了HTML&lt; meter&gt;元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了&lt; meter&gt;从&lt; progress&gt;和前

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器