最近闲暇时候在研究前端的样式和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. List、Set、Map集合的遍历方法

    一.List集合遍历 public class TraversingList { /** * @author zhuxun describe: 定一个List集合并遍历 */ /** 定义一个List ...

  2. IntelliJ IDEA详细配置和使用教程(适用于Java开发人员)

    关闭Intellij IDEA自动更新在File->Settings->Appearance & Behavior->System Settings->Updates下 ...

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

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

  4. HTTP的原理和工作机制

    HTTP到底是什么? 两种最直观的印象:①.浏览器地址栏输入地址,打开网页:②.Android中发送网络请求,返回对应的内容: HyperText Transfer Protocal 超文本传输协议. ...

  5. 单元测试框架之unittest(五)

    一.摘要 单元测试里很重要的一个部分就是断言,unittest为我们提供了很多断言方法,断言方法分为三类,一种是用来断言被测试的方法的,另一种是测试是否抛正确异常的,第三种是用来断言日志是否包含应有信 ...

  6. electronic初体验

    面试被问到electronic,就是之前了解electronic打包桌面应用.哎回来就好奇捣鼓捣鼓呗!为了快速的上手去除配置的繁琐过程,直接用了electron-vue脚手架了解了下 electron ...

  7. JS export 异步导出

    function getUrl () { req().then(res => { console.log(res); }).catch(err => { console.log(err); ...

  8. 【H5】 经纬度位置获取navigator.geolocation.getCurrentPosition

    navigator.geolocation.getCurrentPosition(function(){})经度 : coords.longitude 纬度 : coords.latitude 准确度 ...

  9. [唐胡璐]Selenium技巧- Prop.Properties配置测试应用的环境和其他配置项

     prop.propertiesfile contains important info that needs to be changed before the test is run, such a ...

  10. request.querystring和request.form的区别

    1,request.querystring和request.form的区别 request.querystring是用来接收地址里面问号“?”后面的参数的内容,  用get方法读取的 不安全 requ ...