搜索
首页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
HTML与CSS和JavaScript:比较Web技术HTML与CSS和JavaScript:比较Web技术Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术:1.HTML定义网页结构,2.CSS负责网页外观,3.JavaScript提供网页动态和交互性,它们共同作用,打造出用户体验良好的网站。

HTML作为标记语言:其功能和目的HTML作为标记语言:其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定义网页的结构和内容,其目的在于提供一种标准化的方式来展示信息。1)HTML通过标签和属性组织网页的各个部分,如标题和段落。2)它支持内容与表现分离,提升维护效率。3)HTML具有可扩展性,允许自定义标签增强SEO。

HTML,CSS和JavaScript的未来:网络开发趋势HTML,CSS和JavaScript的未来:网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件,CSS的未来趋势是CSS-in-JS和CSSHoudini,JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果,Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积,CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡,Serverless简化开发但需优化冷启动问题。

HTML:结构,CSS:样式,JavaScript:行为HTML:结构,CSS:样式,JavaScript:行为Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是:1.HTML定义网页结构,2.CSS控制网页样式,3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来:网络设计的发展和趋势HTML的未来:网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript:比较概述HTML与CSS vs. JavaScript:比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是:HTML负责内容结构,CSS负责样式,JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容,确保语义化。2.CSS通过选择器和属性控制网页样式,使其美观易读。3.JavaScript通过脚本控制网页行为,实现动态和交互功能。

HTML:是编程语言还是其他?HTML:是编程语言还是其他?Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1)htmlStructures andFormatSwebContentusingtags.2)itworkswithcsssforstylingandjavascript for Interactivity,增强WebevebDevelopment。

HTML:建立网页的结构HTML:建立网页的结构Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义,使用、、等标签。2.提供语义化标记,如、、等,提升SEO效果。3.通过标签实现用户交互,需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号,需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

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脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

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

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

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

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版