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/ ...
随机推荐
- C语言实现顺序栈的初始化&进栈&出栈&读取栈顶元素
/*顺序表实现栈的一系列操作*/ #include<stdio.h> #include<stdlib.h> #define Stack_Size 50 //设栈中元素个数为50 ...
- Python机器学习笔记 异常点检测算法——Isolation Forest
Isolation,意为孤立/隔离,是名词,其动词为isolate,forest是森林,合起来就是“孤立森林”了,也有叫“独异森林”,好像并没有统一的中文叫法.可能大家都习惯用其英文的名字isolat ...
- vue webpack打包背景图片
vue的背景图 和 img标签图大于10KB都不会转成base64处理,可以设置limit(不推荐),所以要设置一个公共路径,解决办法如下
- Gartner 2018 数据库系列报告发布 巨杉数据库连续两年入选
近期,Gartner陆续发布了2018年的数据库系列报告,包括<数据库魔力象限><数据库核心能力>以及<数据库推荐报告>.其中,SequoiaDB巨杉数据库作为业界 ...
- 一统江湖的大前端（3） DOClever——你的postman有点low
<一统江湖的大前端>系列是自己的前端学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有 ...
- webpack4.0各个击破（5）—— Module篇
webpack4.0各个击破(5)-- Module篇 webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决 ...
- 【微服务No.2】polly微服务故障处理库
熔断.降级: 熔断:熔断就是我们常说的“保险丝”,意为当服务出现某些状况时,切断服务,从而防止应用程序不断地常识执行可能会失败的操作造成系统的“雪崩”,或者大量的超时等待导致系统卡死等情况,很多地方也 ...
- C# 提取PPT文本和图片的实现方案
在图文混排的文档中,我们可以根据需要将文档中的文字信息或者图片提取出来,通过C#代码可以提取Word和PDF文件中的文本和图片,那么同样的,我们也可以提取PPT幻灯片当中的文本和图片.本篇文档将讲述如 ...
- Form提交表单后页面刷新不跳转的实现
<form action="" id="" method="post" target="nm_iframe"> ...
- vue 页面跳转的两种方式
1,标签跳转 <router-link to='two'><button>点我到第二个页面</button></router-link> 2,点 ...