最近闲暇时候在研究前端的样式和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. sql计算两个时间之间的差，并用时分秒表示

    这是自己写的方法,总觉得会有更好的办法实现这个效果呢? SELECT then ))))+'秒' then )))+'秒' then ))+'秒' else CONVERT(nvarchar,DATE ...

  2. perl自定义简易的面向对象的栈与队列类

    perl中的数组其实已经具备了栈与队列的特点,下面是对数组经过一些封装的stack,queue对象 1.Stack类 创建一个Stack.pm文件 package Stack; sub new{ $s ...

  3. U盘不能复制4G以上的单个文件如何处理？

    制作好雨后清风U盘启动盘后,有朋友在将雨后清风系统镜像文件拷贝传输至U盘时,会发现U盘提示文件过大,无法进行传输,但是U盘的剩余存储空间明显还足够,这是怎么回事呢? 其实这是U盘文件系统格式的原因,如 ...

  4. 安装mysql 好不容易成功了 却连不上

    [mysqld] skip-grant-tables datadir=/var/lib/mysql socket=/var/lib/mysql/mysql.sock # Disabling symbo ...

  5. Python——DataFrame转list（包含两种）

    import pandas as pd df = pd.DataFrame({'a':[1,3,5,7,4,5,6,4,7,8,9], 'b':[3,5,6,2,4,6,7,8,7,8,9]}) df ...

  6. 使用fiddler进行接口测试

    我们来说说如何使用fiddler做接口测试? 测试准备,抓到相应的接口和入参或者找接口文档,我这里就用聚合数据里面的接口做样例, 接口如下: 测试接口:http://japi.juhe.cn/qqev ...

  7. Paper Reading:Receptive Field Block Net for Accurate and Fast Object Detection

    论文:Receptive Field Block Net for Accurate and Fast Object Detection 发表时间:2018 发表作者:(Beihang Universi ...

  8. 有关PHPstorm的git环境的配置和git密钥的生成总结

    phpstorm上配置git环境的配置总感觉很简单,没发现看似简单的东西浪费我好多时间.我在网上查了一下关于phpstorm的git环境的配置没有具体的总结 所以我把自己的配过程简单总结了一下 接下来 ...

  9. zznu-oj-2134- 发红包！！！-【多项式加法，模拟题目】

    2134: 发红包!!! 题目描述 给你两个最简多项式,请输出两个多项式相加后的结果.给定的多项式的格式为ax^num1+bx^num2+...其中x前面的a,b代表系数num代表指数(次方数),输入 ...

  10. 大数据之路week05--day01（I/O流阶段一 之File）

    众所周知,我们电脑中有许许多多的文件夹和文件,文件的形式也有许多不同的格式,文件夹中也可以新建文件夹的存在,也就是多层的一步一步的嵌套. 我们想要实现I/O操作,就必须知道硬盘上文件的表现形式. 而J ...