一、超链接美化

二、模态框

三、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栏选项卡的更多相关文章

  1. javascript实例:两种方式实现tab栏选项卡

    方法1: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  2. 拥Bootstrap入怀——模态框(modal)篇

    置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<CSS绘制Android Robot> 作者主页:myvin 博主QQ:851399101(点击QQ和 ...

  3. 去除bootstrap模态框半透明阴影

    当使用bootstrap模态框默认自带半透明阴影,如果想要去除阴影,需要怎么做呢? 今天在项目中我遇到了这个问题,想要去除模态框的阴影,试了好久都没解决.后来问同事的时候才知道,当模态框弹出后,会加上 ...

  4. bootstrap如何去除自带的样式----导航栏中的菜单实现平滑的过渡到对应的菜单区域-------动态跟换模态框中的内容

    问题1:如何去除bootstap中css中自带的overflow:hidden这个样式 今天遇见在bootstap中轮播图上的  附带图  片不能够显示出来,图片始终有一部分的高度  被隐藏了 后来通 ...

  5. bootstrap-table:操作栏点击编辑按钮弹出模态框修改数据

    核心代码: columns: [ { checkbox:true //第一列显示复选框 }, ... { field: 'fail_num', title: '失败数' }, { field: 'op ...

  6. Vue(小案例)底部tab栏和顶部title栏的实现

    ---恢复内容开始--- 一.前言 1.底部tab栏实现 2.顶部title栏实现 二.主要内容   1.底部tab栏实现(将底部导航提取到公共的组件中) 具体效果:当点击切换不同的tab的时候,对应 ...

  7. JS模态框 简单案例

    演示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8 ...

  8. JS实现 Tab栏切换案例

    要求:当鼠标点击上面相应的选项卡(tab),下面页面的内容也随之而改变. 结构分析: 全部的内容都放到一个大的盒子里面,盒子里面又可以分为上面和下面两个盒子. 上面的盒子放了 5个li,装着5个小的选 ...

  9. tab栏切换效果案例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. MetaEditor中MQL使用方法

    MT4程序--帮助--MQL5文档,转到网页,切换到中文,点击旁边搜索图标. MetaEditor编辑器,点击相应关键字,按F1键,即可启动MT4对应的MQL4的对应关键字用法帮助.但是英文. 时间序 ...

  2. asp.net mvc简单实现基于Razor的分页控件

    最近在写一些web应用了解了一下asp.net mvc发现的确好用,所以直接就干上了.不过在使用asp.net mvc的Razor模板的情况并不向传统webform那样可以使用控件.但从Razor的功 ...

  3. leetcode — subsets

    import java.util.ArrayList; import java.util.Arrays; import java.util.List; /** * Source : https://o ...

  4. Linux常用监控命令简介 - top

    top -hv | -bcisS -d delay -n iterations -p pid [, pid ...] 指令介绍-b : 批次模式运行.-c : 显示执行任务的命令行.-d : 设定延迟 ...

  5. SQL 中的一些小巧但常用的关键字

    前面的几篇文章中,我们大体上介绍了 SQL 中基本的创建.查询语句,甚至也学习了相对复杂的连接查询和子查询,这些基本功相信你也一定掌握的不错,那么本篇则着重介绍几个技巧方面的关键字,能够让你更快更有效 ...

  6. Mac下如何用SSH连接远程Linux服务器

     终端命令 a).打开Mac的命令终端 b).输入ssh -p 22 root@102.210.86.213 它会提示你输入密码,输入正确的密码之后,你就发现已经登陆成功了.(22: 端口号 root ...

  7. [HTTP] tcp/ip详解 链路层 网络层 传输层 应用层

    1.可以把七层协议简化成四层协议链路层 网络层 传输层 应用层 2.通过路由器连接的两个网络网络层ip提供的是一个逐跳协议,提供了一种不可靠的服务,中间有可能会丢传输层tcp在ip的基础上提供了可靠的 ...

  8. 【查漏补缺】File的path、absolutePath和canonicalPath的区别

    背景 在学习Idea的插件开发时,用到了相关的VirtualFileSystem这个东西,里面的VirtualFile有一个getCanonicalPath()方法引起了我的注意,我发现我不知道-- ...

  9. nodejs cookie与session

    cookie.session cookie:在浏览器保存一些数据,每次请求都会带过来 *不安全.有限(4K) session:保存数据,保存在服务端 *安全.无限 ------------------ ...

  10. TypeScript,初次见面,请多指教 ?

    为什么用 TS ? 说实话,最开始并没有想把 TS 用到实际项目中来,一来是感觉"类型"会限制 JS 的优势(好吧,就是浪写浪惯了):二来听闻 TS + Redux 的酸爽滋味,有 ...