HTMLCSS--案例| 超链接美化 | 模态框 | tab栏选项卡
一、超链接美化
二、模态框
三、tab栏选项卡
--------------------------------------------
一、超链接美化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航块超链接美化</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.nav{
width: 960px;
overflow: hidden;
background-color: purple;
margin: 100px auto 0;
border-radius: 5px; /*倒圆角*/
}
.nav ul{
list-style: none; /*清除列表前面的圆点*/
}
.nav ul li{
float: left;
width: 160px;
height: 40px;
text-align: center;
line-height: 40px;
}
/*颜色只能在a里设，不能被继承*/
.nav ul li a{
width: 160px;
height: 40px;
display: block;
color: white;
text-decoration: none; }
.nav ul li a:hover{
background-color: red;
font-size: 22px;
}
</style>
</head>
<body style="margin: 0 auto;">
<div class="nav">
<ul>
<li>
<a href="#">网站导航</a>
</li>
<li>
<a href="#">网站导航</a>
</li>
<li>
<a href="#">网站导航</a>
</li>
<li>
<a href="#">网站导航</a>
</li>
<li>
<a href="#">网站导航</a>
</li>
<li>
<a href="#">网站导航</a>
</li>
</ul>
</div>
</body>
</html>
二、模态框
模态框用的是固定定位设置z-index值来实现，
要注意z-index的值，要始终保持模态框的对话框z-index是在最大。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通用模态框</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.container{
visibility: hidden;
}
.bg{
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.3);
z-index: 1000;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.dialog-box{
position: fixed;
width: 300px;
height: 300px;
background-color: white;
top: 50%;
left: 50%;
transform: translate(-150px,-150px);
z-index: 1001;
border-radius: 5px;
}
.exit{
width: 30px;
height: 30px;
float: right;
background-color: darkgreen;
border-radius: 5px;
text-align: center;
line-height: 30px;
cursor: pointer;
}
.exit:hover{
background-color: red;
color: #ffffff;
}
</style>
</head>
<body>
<button id="btn">点击出现模态框</button>
<div id="container" class="container">
<div class="bg"></div>
<div class="dialog-box">
<a id="exit" class="exit">x</a>
</div>
</div>
</body>
</html> <script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
window.onload=function () {
$('btn').onclick=function () {
$('container').style.visibility='visible';
};
$('exit').onclick=function () {
$('container').style.visibility='hidden';
};
}
</script>
三、tab栏选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.clearfix:after{ content:'.'; clear:both; display:block; visibility:hidden; height:0 }
*{
padding: 0;
margin: 0;
}
ul{
list-style: none; }
ul li{
float: left;
width: 100px;
height: 30px;
cursor: pointer;
}
.container{
width: 300px;
}
.container p{
width: 100%;
height: 100px;
display: none;
}
li.active{
background-color: red;
color: white;
}
p.active{
background-color: indianred;
color: white;
display: block;
}
</style>
</head>
<body>
<div class="container">
<ul id="ul" class="clearfix">
<li class="active">导航</li>
<li>购买</li>
<li>促销</li>
</ul>
<p class="active">导航导航导航导航导航导航导航导航导航</p>
<p>买买买买买买买买买买买买</p>
<p>促销促销促销促销促销促销</p>
</div>
</body>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
var li_objs=$('ul').children;
var p_objs=document.getElementsByTagName('p'); for(var i=0;i<li_objs.length;i++){
//i是全局的，这里给每个标签存一个i
li_objs[i].index = i;
li_objs[i].onmouseover=function () {
for(var j=0;j<li_objs.length;j++){
li_objs[j].className='';
p_objs[j].className='';
}
this.className='active';
p_objs[this.index].className='active';
}
}
</script>
</html>
HTMLCSS--案例| 超链接美化 | 模态框 | tab栏选项卡的更多相关文章
- javascript实例:两种方式实现tab栏选项卡
方法1: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
- 拥Bootstrap入怀——模态框（modal）篇
置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<CSS绘制Android Robot> 作者主页:myvin 博主QQ:851399101(点击QQ和 ...
- 去除bootstrap模态框半透明阴影
当使用bootstrap模态框默认自带半透明阴影,如果想要去除阴影,需要怎么做呢? 今天在项目中我遇到了这个问题,想要去除模态框的阴影,试了好久都没解决.后来问同事的时候才知道,当模态框弹出后,会加上 ...
- bootstrap如何去除自带的样式----导航栏中的菜单实现平滑的过渡到对应的菜单区域-------动态跟换模态框中的内容
问题1:如何去除bootstap中css中自带的overflow:hidden这个样式 今天遇见在bootstap中轮播图上的 附带图 片不能够显示出来,图片始终有一部分的高度 被隐藏了 后来通 ...
- bootstrap-table：操作栏点击编辑按钮弹出模态框修改数据
核心代码: columns: [ { checkbox:true //第一列显示复选框 }, ... { field: 'fail_num', title: '失败数' }, { field: 'op ...
- Vue(小案例）底部tab栏和顶部title栏的实现
---恢复内容开始--- 一.前言 1.底部tab栏实现 2.顶部title栏实现 二.主要内容 1.底部tab栏实现(将底部导航提取到公共的组件中) 具体效果:当点击切换不同的tab的时候,对应 ...
- JS模态框 简单案例
演示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8 ...
- JS实现 Tab栏切换案例
要求:当鼠标点击上面相应的选项卡(tab),下面页面的内容也随之而改变. 结构分析: 全部的内容都放到一个大的盒子里面,盒子里面又可以分为上面和下面两个盒子. 上面的盒子放了 5个li,装着5个小的选 ...
- tab栏切换效果案例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- Webpack+Vue如何导入Jquery和Jquery的第三方插件
创建一个jquery-vendor.js文件 import $ from 'jQuery'; console.log($); window.$ = $; window.jQuery = $; expo ...
- 『素数 Prime判定和线性欧拉筛法 The sieve of Euler』
素数(Prime)及判定 定义 素数又称质数,一个大于1的自然数,除了1和它自身外,不能整除其他自然数的数叫做质数,否则称为合数. 1既不是素数也不是合数. 判定 如何判定一个数是否是素数呢?显然,我 ...
- SpringBoot入门教程(一)详解intellij idea搭建SpringBoot
最近公司有一个内部比赛(黑客马拉松),报名参加了这么一个赛事,在准备参赛作品的同时,由于参赛服务器需要自己搭建且比赛产生的代码不能外泄的,所以借着这个机会,本地先写了个测试的demo,来把tomcat ...
- SQL Sever 2008 R2版本添加Northwin数据库错误解决
一.环境: OS: Windows 7 ProfessionalSQL Server 2008 R2 二.示例数据库Northwind下载(mdf) Northwind 三.附加数据库: 打开Micr ...
- Scrum到底是个神马玩意儿
从前有一种非常火爆的体育运动,对阵双方各派出11位猛男,在宽阔的草皮球场内争抢一颗可怜的小皮球.哪方能够通过团队协作拿到皮球,并且运送到对方场地的特定位置即得分. 没错,你没有走错片场,快到超级碗里来 ...
- golang判断文件是否存在
判断一个文件是否存在是一个相当常见的需求,在golang中也有多种方案实现这一功能. 现在我们介绍其中两种最常用也是最简单的实现,第一种将是跨平台通用的,而第二种则在POSIX平台上通用. 跨平台实现 ...
- Python爬虫之使用celery加速爬虫
celery是一个基于分布式消息传输的异步任务队列,它专注于实时处理,同时也支持任务调度.关于celery的更多介绍及例子,笔者可以参考文章Python之celery的简介与使用. 本文将介绍 ...
- MySQL 笔记整理（5） --深入浅出索引（下）
笔记记录自林晓斌(丁奇)老师的<MySQL实战45讲> 5) --深入浅出索引(下) 这次的笔记从一个简单的查询开始: 建表语句是这样的 mysql> create table T ...
- Win10系统给文件夹添加备注
在Win10系统中,相信大多用户都没有看到过文件或者是文件夹上有备注信息.下面给大家分享下在Win10系统中给文件夹或文件添加备注的方法.在添加备注之前,首先我们要在需要显示备注的文件夹中显示&quo ...
- apply,call和bind的用法区别
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...