最近闲暇时候在研究前端的样式和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. springboot系列（三） 启动类中关键注解作用解析

    一.Springboot:请求入口 @SpringBootApplication @EnableAspectJAutoProxy @EnableScheduling @EnableTransactio ...

  2. sed & awk 概述

    概述 一般情况下,从grep到sed和awk的学习过程是很自然的.sed和awk是一般用户.程序员和系统管理员们处理文本文件的有力工具. sed的名字来源于其功能,它是个字符流编辑器(stream e ...

  3. RT-Thread--线程管理

    线程管理的功能特点 RT-Thread系统中线程是调度的最小单位: 线程分为:系统线程和用户线程,系统线程是由 RT-Thread 内核创建的线程,用户线程是由应用程序创建的线程,这两类线程都会从内核 ...

  4. python3 基础二——基本的数据类型二

    一.数字(Number) 1.Python支持三种不同的数值类型:整型(int),浮点型(float),复数(complex) 2.Python数字数据类型用于存储数值 3.数据类型是不允许改变的,这 ...

  5. vue-cli webpack打包后index.html引入文件没有引号

    参考地址:https://blog.csdn.net/i_coffer/article/details/81005733 在对vue-cli项目打包后出现index.html引入的css和js没有引号 ...

  6. 记录一下关于DQN的想法

    下载了几份代码,就两份没有报错通过了 DQN玩FlappyBird https://github.com/yenchenlin/DeepLearningFlappyBird DQN玩Cartpole ...

  7. JAVA遇见HTML——Servlet篇：Servlet基础

    代码实现: HelloServlet package servlet; import java.io.IOException; import java.io.PrintWriter; import j ...

  8. Java File类方法使用详解

    Java File类的功能非常强大,利用java基本上可以对文件进行所有操作.文本将对Java File 文件操作的类详细的分析,并将File类中的常用方法进行简单介绍. 构造函数 public cl ...

  9. gcc的作用

    把代码编译成二进制文件 预处理----头文件,宏定义展开,条件编译 干掉注释代码 编译成汇编代码 生成目标代码.o (还不能执行) 链接(动态库)生成可执行程序 xxx.out 运行前,内存已经存在分 ...

  10. python函数入参和返回值

    以下内容参考自runoob网站,以总结python函数知识点,巩固基础知识,特此鸣谢! 原文地址:http://www.runoob.com/python3/python3-function.html ...