一、超链接美化

二、模态框

三、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. SignalR学习笔记（四） 性能优化

    限制消息发送次数 这种方式在学习笔记(二)-  高并发应用中介绍过,在客户端和服务器端使用定时器来减少消息发送的次数 减少消息数据的大小 服务器端,可以使用JsonIgnore, 来忽略不需要序列化的 ...

  2. 服务测试碰钉子Server GC

    如果发现你的dotnet core服务并发上不去,但cpu资源还比较充足那就要注意了!因为这很有可能是你没有设置一个运行项导致...,下面要提到的就是GC.Server这玩意,实际上项目编译中并没有这 ...

  3. Spring Boot（十二）单元测试JUnit

    一.介绍 JUnit是一款优秀的开源Java单元测试框架,也是目前使用率最高最流行的测试框架,开发工具Eclipse和IDEA对JUnit都有很好的支持,JUnit主要用于白盒测试和回归测试. 白盒测 ...

  4. 适用于app.config与web.config的ConfigUtil读写工具类

    之前文章:<两种读写配置文件的方案(app.config与web.config通用)>,现在重新整理一个更完善的版本,增加批量读写以及指定配置文件路径,代码如下: using System ...

  5. Centos 7.0 zabbix 部署

    1.LAMP 环境搭建 初次安装可以先关闭selinux 和 firewall [root@localhost ~]# setenforce [root@localhost ~]# systemctl ...

  6. .Net语言 APP开发平台——Smobiler学习日志：如何调用API进行短信发送

    最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便 一.目标样式 我们要实现上图中的效果,需要如下的操作: 二.发送短信代码 VB: Pr ...

  7. Linux学习笔记之Django项目部署（CentOS）----进阶篇

    一.引入 当我们开发好了一个Django项目之后是需要部署到服务器上的,这样才能正式使用这个项目.之前用了一个运行.sh文件的方法让项目得以在后台运行,其实随着学习的深入,这种方法其实是有点low的, ...

  8. 消息队列_MSMQ（1）简单了解

    MSMQ (微软消息队列)   MSMQ 百度百科 MicroSoft Message Queuing(微软消息队列)是在多个不同的应用之间实现相互通信的一种异步传输模式,相互通信的应用可以分布于同一 ...

  9. 【开源】Netty轻松实现聊天室，附带数据记录，聊天历史

    阅读本文约“2.5分钟” 听说快七夕······ 不对,这不是今天的主题,嘿嘿. 今天说说一个小的网页聊天室,功能如下 群聊无限制 记录用户群聊信息 下次登录显示聊天历史 消息发送速度(光速) 聊天历 ...

  10. 为什么要学习Java虚拟机

    为什么要学习Java虚拟机? 为什么要学习JVM? 学习Java虚拟机有什么好处? 这些问题就好像在问Java程序猿:你为什么要变强大! C++程序编译后可直接运行于物理机CPU上.而Java程序则不 ...