最近闲暇时候在研究前端的样式和js，以前都是从w3school上看看那些选择器和DOM操作方法很少去实际做demo来研究，做的过程当中才真切感觉到纸上得来终觉浅，看得懂跟能做出东西完全两码事，尤其在定位那块，要吃透并且灵活运用，确实不容易。下面是自己练习时写的实例，感觉还挺有价值的，因为涉及的知识点还是挺全面的，新手的话好好看看，应该有不少收获。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>实践题 - 选项卡</title>

    <style type="text/css">

        body{

            font-family: "microsoft yahei";

            font-size: 18px;

            color: #999;

            padding:0;

            margin:0;

        }

        .hide{

            display:none;

        }

        #tabs {

            width: 345px;

            height: 300px;

            margin: 25px auto;  /* 注意这里的居中显示 */

        }

        #tabs ul {

            padding-left: 50px; /* 标题整体后移 */

            border-bottom: 2px solid saddlebrown;

            list-style: none;   /* 去除排头的点 */

            height: 30px;

            margin: 0;

            color: black;

        }

        /*#tabs ul li {*/

            /*display: inline-block;*/

            /*width: 30%;*/

            /*height: 32px;*/

            /*padding-top: 12px;*/

            /*border: 1px solid #aaa;*/

            /*border-bottom: none;*/

        /*}*/

        #tabs ul li {

            /* 注意这种float定位的方式与我上面直接修改为inline-block是有差别的，看上去好像一样，但在边框部分是有细微差异的，

            因为浮动定位实际上已经将li从ul中剥离出来了，其不再以ul的子元素进行展示，所以这时候它的边框能覆盖父级ul的边框 */

            float: left;

            height: 28px;   /* 注意这里li高度的设置细节，恰好与父级ul相差2px，这也正是ul的border宽度*/

            line-height: 28px;  /* 设置行高与字体一样大小以居中显示 */

            padding: 0px 15px;

            border: 1px solid #aaa;

            border-bottom: none;

        }

        #tabs ul li.on{

            border-top: 2px solid saddlebrown;

            border-bottom: 2px solid #fff;  /* 将选中的li的底部边框修改为白色便可覆盖ul设置的下边框，达到上下一体的效果 */

        }

        #tabs div {

            line-height: 1.5em;

            border: 1px solid #336699;

            border-top: none;

            text-align: center;

            padding-top: 10px;

            padding-bottom: 12px;

            padding-right: 18px;

        }

    </style>

</head>

<body>

<!-- HTML页面布局 -->

<div id="tabs">

    <ul>

        <li class="on">客至</li>

        <li>蜀相</li>

        <li>黄鹤楼</li>

    </ul>

    <div>

    　　舍南舍北皆春水，但见群鸥日日来。<br>

    　　花径不曾缘客扫，蓬门今始为君开。<br>

    　　盘飧市远无兼味，樽酒家贫只旧醅。<br>

    　　肯与邻翁相对饮，隔篱呼取尽馀杯！<br>

    </div>

    <div class="hide">

    　　丞相祠堂何处寻？锦官城外柏森森。<br>

    　　映阶碧草自春色，隔叶黄鹂空好音。<br>

    　　三顾频烦天下计，两朝开济老臣心。<br>

    　　出师未捷身先死，长使英雄泪满襟！<br>

    </div>

    <div class="hide">

    　　昔人已乘黄鹤去，此地空余黄鹤楼。<br>

    　　黄鹤一去不复返，白云千载空悠悠。<br>

    　　晴川历历汉阳树，芳草萋萋鹦鹉洲。<br>

    　　日暮乡关何处是，烟波江上使人愁。<br>

    </div>

</div>

<script type="text/javascript">

    var myTabs = document.getElementById("tabs");

    var myDivs = myTabs.getElementsByTagName("div");

    var myUl = myTabs.getElementsByTagName("ul")[0];

    var myLis = myUl.getElementsByTagName("li");

    for (var i = 0,len = myLis.length; i < len; i++) {

        // 这里将被绑定事件的li的索引先放入其对应对象的属性中，方便后面在改变对应div的class属性的时候调用

        myLis[i].index = i;

        myLis[i].onclick = function () {

            for (var j = 0; j < len; j++) {

                myLis[j].className = "";

                myDivs[j].className = "hide";

            }

            this.className = "on";

            myDivs[this.index].className = "";

        }

    }

</script>

</body>

</html>

web前端——实例中学习css,javascript的更多相关文章

  1. 文成小盆友python-num14 － web 前端基础 html ，css, JavaScript

    本部分主要内容 html - 基础 css - 基础 一.html 标签 html 文档标签树如下: head 部分 Meta(metadata information) 提供有关页面的元信息,例:页 ...

  2. Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行

      H1/H2/H3/H4标题标签常常使用在一个网页中唯一标题.重要栏目.重要标题等情形下. H1在一个网页中最好只使用一次,如对一个网页唯一标题使用.H2.H3.H4标签则可以在一个网页中多次出现, ...

  3. 新手学习WEB前端流程以及学习中常见的误区

    学习web前端编程技术肯定是以就业拿到高薪工作为主要目的的,可是高薪不会那么轻易拿到,这是一个最简单的道理.没有付出就没有回报,在整个学习web前端编程技术的过程中,你需要付出时间.精力.金钱.废话不 ...

  4. web前端全栈学习之路

    web前端全栈学习之路 --- 陆续更新中 一.HTML相关 1.HTML常用标签:http://www.cnblogs.com/wyb666/p/8733699.html 2.HTML5基础: 3. ...

  5. web前端基础知识学习网站推介

    内容:一．基础知识及学习资料1. HTML入门学习:http://www.w3school.com.cn/html/index.aspHTML5 入门学习:http://www.w3school.co ...

  6. WEB前端开发职业学习路线初级完整版

    作者 | Jeskson 来源 | 达达前端小酒馆 下面小编专门为广大web前端开发职业者汇总了学习路线初级完整版,其实web前端开发工程师可算是高福利,高薪水的职业了,所以现在学习web前端开发的技 ...

  7. web前端面试试题总结---css篇

    CSS 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? (1)有两种, IE 盒子模型.W3C 盒子模型: (2)盒模型: 内容(content).填充(padding).边界(m ...

  8. 网站静态化处理—web前端优化—中（12）

    网站静态化处理—web前端优化—中(12) Web前端很多优化原则都是从如何提升网络通讯效率的角度提出的,但是这些原则使用的时候还是有很多陷阱在里面,如果我们不能深入理解这些优化原则背后所隐藏的技术原 ...

  9. Web前端开发(基础学习+坑）

    0.基本说明 0.内容为课堂所学基本知识,加自己踩过的坑 1.web基本框架:html+css+JavaScript,html为网页骨架,css为网页美化,JavaScript负责页面动态交互,脚本等 ...

随机推荐

  1. 还在用ABAP进行SAP产品的二次开发？来了解下这种全新的二次开发理念吧

    Jerry从2018年底至今,已经写了一系列关于SAP Kyma的文章,您可以移步到本文末尾获得这些文章的列表.Kyma是SAP开源的一个基于Kubernetes的云原生应用开发平台,能够允许SAP的 ...

  2. dockerfile构建nginx

    mkdir docker_demo cd docker_demo wget http://nginx.org/download/nginx-1.2.9.tar.gz vim Dockerfile FR ...

  3. 安装 ALC 解决 centos8 不能播放多媒体的问题

    装完centos8 后,发现看不到视频,听不到音乐,连web在线听音乐也不行.通过安装ALC可以解决. 1.三步安装VLC 这是 centos8 的安装包,曾使用 8 之前的版本安装是不成功的 sud ...

  4. 虚拟机mysql报错的问题

    Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' (111)解决方法   登陆mysql的时 ...

  5. Linux学习笔记（十四）磁盘管理（二）：格式化、挂载以及Swap分区

    一.格式化 第一种写法 mkfs.文件系统 [分区名称(设备文件路径)] 例如:对sdb硬盘的第一个分区以ext3文件系统进行格式化 第二种写法 mkfs -t 文件系统  [分区名称(设备文件路径) ...

  6. 微信小程序开发（十三）安卓手机调用wx.getConnectedWifi API失败

    安卓手机调用wx.getConnectedWifi API失败,返回的错误码是12000.需要先startWifi 接口: wx.startWifi({ success(res) { console. ...

  7. Python For嵌套循环 图形打印X型 nested loop - 练习题答案

    上一篇:Python For嵌套循环 图形打印X型 nested loop - 练习题 上一篇留的Python For嵌套循环 图形打印X型练习题的答案. 由于网上很多嵌套循环都是C++语言写的,用P ...

  8. Educational Codeforces Round 76 (Rated for Div. 2) D

    D题 原题链接 题意:就是给你n个怪兽有一个属性(攻击力),m个英雄,每个英雄有两种属性(分别为攻击力,和可攻击次数),当安排最好的情况下,最少的天数(每选择一个英雄出战就是一天) 思路:因为怪兽是不 ...

  9. Week08_day01 (Hive开窗函数 row_number()的使用 （求出所有薪水前两名的部门）)

    数据准备: 7369,SMITH,CLERK,7902,1980-12-17,800,null,20 7499,ALLEN,SALESMAN,7698,1981-02-20,1600,300,30 7 ...

  10. 大数据之路week06--day01（VMware的下载与安装、安装CentOS）

    好了,从今天开始就开始正式的进入大数据道路的轨道上了,当然了,Java 也是需要不断地在日后进行反复地学习,熟练掌握.(这里我要说一下,Java种还有一些I/O流.Lambda表达式和一些常用工具类有 ...