最近闲暇时候在研究前端的样式和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. 将用户赋予sudo权限：配置sudoers文件

    xxx is not in the sudoers file.This incident will be reported.的解决方法   1.切换到root用户下,怎么切换就不用说了吧,不会的自己百 ...

  2. Spark学习笔记2——RDD（上）

    目录 Spark学习笔记2--RDD(上) RDD是什么? 例子 创建 RDD 并行化方式 读取外部数据集方式 RDD 操作 转化操作 行动操作 惰性求值 Spark学习笔记2--RDD(上) 笔记摘 ...

  3. .NET Framework 简介

  4. 【问题】bzip2 --version 2>&1 < /dev/null

    https://unix.stackexchange.com/questions/230887/what-does-dev-null-mean https://stackoverflow.com/qu ...

  5. Linux学习笔记（十五）用户和用户组

    一.四个配置文件 解释: (1)当组内仅有一个用户且用户名和组名相同时,[组中用户列表]可省略不写 (2)root用户组的组号为0 (3)组号1-499位系统预留组号,是预留给安装在系统中的软件或服务 ...

  6. 移动Web前端开发 3移动web开发现状

    移动端的手机浏览器内核一般都是Webkit内核,只需要适配Webkit就可以了 适配问题 屏幕尺寸不一

  7. input 更改 pleaseholder 的字体样式

    /* WebKit browsers */input::-webkit-input-placeholder {    color: red;    font-size: 14px;}/* Mozill ...

  8. SpringMVC利用AOP实现自定义注解记录日志

    作者:飞翔的拖鞋up 推荐:彻底征服 Spring AOP 之 实战篇 推荐:jason_zhangz 本文抛砖引玉,并没有详细的介绍更全面的内容,通过一个例子让初次使用的人能够快速入门,简单的介绍一 ...

  9. BZOJ 3925: [Zjoi2015] 地震后的幻想乡(概率DP)

    这里有一篇很好很强的博客%%% YouSiki大佬的博客 多理解一会就行了- 代码 #include <bits/stdc++.h> using namespace std; typede ...

  10. Codeforces Round #554 (Div. 2) F2. Neko Rules the Catniverse (Large Version) （矩阵快速幂 状压DP）

    题意 有nnn个点,每个点只能走到编号在[1,min(n+m,1)][1,min(n+m,1)][1,min(n+m,1)]范围内的点.求路径长度恰好为kkk的简单路径(一个点最多走一次)数. 1≤n ...