html：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<link href="123.css" rel="stylesheet" type="text/css">

</head>

<body>

<div id="Container">

  <div id="Header">

    <div id="Logo"></div>

  </div>

  <div id="Content">

    <div id="LeftContent">

      <dl>

        <dt><a href="#xw">新闻</a><a href="#YL">娱乐</a><a href="#TY">体育</a></dt>

        <dd>

          <ul id="xw">

            <li>新闻1</li>

            <li>新闻2</li>

            <li>新闻3</li>

            <li>新闻4</li>

            <li>新闻5</li>

          </ul>

          <ul id="YL">

            <li>娱乐1</li>

            <li>娱乐2</li>

            <li>娱乐3</li>

            <li>娱乐4</li>

            <li>娱乐5</li>

            <li>娱乐6</li>

          </ul>

          <ul id="TY">

            <li>体育1</li>

            <li>体育2</li>

          </ul>

        </dd>

      </dl>

    </div>

    <div id="MainContent"> 主内容 </div>

  </div>

  <div class="clear"></div>

  <div id="Footer">页脚</div>

</div>

</body>

</html>

CSS:

@charset "utf-8";

/* CSS Document */

#Container {

    width: 1000px;

    margion:  auto;

    height: 1000px

}

#Header {

    height: 100Px;

    background: green;

}

#Logo {

    padding-left: 50px;

    padding-bottom: 20px;

    padding-top: 10px;

}

#Content {

    margin: , , , ;

    height: 600px;

}

#LeftContent {

    width: 300px;

    height: 800px;

    float: left;

    margion: 20px;

    background: red;

}

#MainContent {

    width: 700px;

    height: 800px;

    float: left;

    margion: 20px;

    background: #0C78DD;

}

.clear {

    clear: both;

}

#Footer {

    height: 100px;

    background: #0AF333;

}

dl {

    position: absolute;/*绝对的*/

    width: 200px;

    height: 200px;

    border: 10px solid #E9F5E9;

}

dd {

    width: 200px;

    height: 200px;

    overflow: hidden;

}

dt {

    position: absolute;

    right: 1px;

}

ul {

    margion: ;

    padding: ;

    width: 220px;

    height: 200px;

    list-style: none;

    border: 1px solid black

}

li {

    width: 207px;

    height: 27px;

    overflow: hidden;

}

dt a {

    display:block;

    /*margin: 1px;*/

    width: 30px;

    height: 56px;

    text-align: center;

    font:  12px/55px "宋体",sans-serif;

    color: #fff;

    text-decoration: none;

    background: #;

    /*display:block;

margin:1px;

width:30px;

height:56px;

text-align:center;

font:700 12px/55px "宋体",sans-serif;

color:#fff;

text-decoration:none;

background:#666;*/

}

dt a:hover{

    background:green;}

纯CSS选项卡的更多相关文章

  1. 利用radio实现纯css选项卡切换

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAtIAAABCCAIAAAD18aaXAAAG70lEQVR4nO3dO5KrPBCGYRY0VV4OEX

  2. 纯CSS实现tab选项卡切换

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cont ...

  3. 纯 CSS 利用 label + input 实现选项卡

    clip 属性 用于剪裁绝对定位元素. .class { position:absolute; clip:rect(0px,60px,200px,0px); } scroll-behavior: sm ...

  4. js进阶 11-21 纯css实现选项卡

    js进阶 11-21 纯css实现选项卡 一.总结 一句话总结:核心原理,a标签的锚点效果+父div限宽+多的部分隐藏. 1.如何实现a标签的锚点效果? href属性找到对应的位置就好,和选择器一样, ...

  5. 旁门左道通过JS与纯CSS实现显示隐藏层

    想必大家在开发前端页面时,肯定少不了显示隐藏层这一技术点.那么我简单粗暴地总结了以下两个小demo. 要实现该截图的功能:鼠标移动到我的好友这个选项卡时,灰色的隐藏层就会出现.

  6. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  7. 一个标签的72变，打造一个纯CSS图标库

    每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...

  8. 利用animation和text-shadow纯CSS实现loading点点点的效果

    经常在网上看到loading状态时的点点点的动态效果,自己也用JS写了一个,思路是使用一个计数参数,然后在需要添加点的元素后面利用setInterval一个一个加点,当计数到3时,把点变为一个--写完 ...

  9. 使用纯CSS实现带箭头的提示框

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...

随机推荐

  1. 【译】使用 ndb 调试 node 应用

    原文链接:Debugging Node.js Application Using ndb Google Chrome 实验室发布了一款新的 node debug 工具来提升开发者体验,本文将会全面介绍 ...

  2. MySQL笔记(7)---事务

    1.前言 前面具体讲了MySQL中的锁实现的方式,解释了是如何保证数据在并发情况下的可靠性,并提到了事务REPETABLE READ和READ COMMITTED,解释了一下这两种事务的不同.本章讲具 ...

  3. c#构造初使化的顺序

    这个很基础的知识,但我至今才意识到它.想想也很失败. 直接上代码:很简单 public class Base { ; public Base() { System.Console.WriteLine( ...

  4. 我们自研的那些Devops工具

    随着云技术以及容器技术的崛起,人肉运维的时代结束了 2018年为了解决日常运维中的痛点以及更高效的推进运维工作,我们自研并完善了几个工具系统,这些系统无一例外的帮我们节约了时间,提高了效率,这篇文章将 ...

  5. 通过 Ansible 创建 Jenkins Server

    创建 CI 流程的第一件事应该是安装 CI 工具,本文以最常见的 Jenkins 为例,介绍如何使用 Ansible 自动安装 Jenkins Server.说明:本文的演示环境为 ubuntu 16 ...

  6. 方便操作的命名范围scope

    <?php namespace Goods\Model; use Think\Model; class GoodsModel extends Model { protected $_scope ...

  7. 光流法详解之二（HS光流）

    Horn–Schunck光流算法[1]是一种全局方法估算光流场. 参考博文:https://blog.csdn.net/hhyh612/article/details/79216021 假设条件: H ...

  8. HTML XML 介绍

    一. HTML(HyperTextMark-upLanguage)即超文本标记语言,是WWW的描述语言. 二. XML即ExtentsibleMarkup Language(可扩展标记语言), XML ...

  9. net4log 添加自定义变量

    在log4net.config中 <parameter> <parameterName value="@czyid" /> <dbType value ...

  10. 启动设置mongodb

    启动 ①:启动之前,我们要给mongodb指定一个文件夹,这里取名为”db",用来存放mongodb的数据. ②:微软徽标+R,输入cmd,首先找到“mongodb”的路径,然后运行mong ...