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. UML类图中的六种关系(物理设计阶段)

    UML类图中经常会用到各种箭头和线条来表示不同类或者接口之间的关系,因此非常好的理解各个图标的含义是很有必要的. 在物理设计阶段可以通过EA工具将类图搭建好,然后直接生成物理类,这样也可以减少物理设计 ...

  2. [java初探10]__关于数字处理类

    前言 在我们的日常开发过程中,我们会经常性的使用到数字类型的数据,同时,也会有众多的对数字处理的需求,针对这个方面的问题,在JAVA语言中.提供解决方法的类就是数字处理类 java中的数字处理类包括: ...

  3. Linux_CentOS-服务器搭建 <六>

    修改MySQL编码: 二话不说先登录: mysql -u root -p 查看下神奇的mysql系统变量及其值: show variables like '%character%'; //记住分号哦, ...

  4. 安装和配置jBPM4,并举个hello.w

    至于网上很复杂,但又不懂的插件,我们先不鸟他. myeclipse8\dropins这里就是给我们放插件的,类似SVN之类的.所以小生也修改了下,共享了下.只有放在目录下,打开应该可以的.下面是链接. ...

  5. koa2搭建服务器

    首先初始化项目 npm init -y 安装koa2 npm install koa --save 项目根目录 新建 index.js //这是最基本的服务 const Koa = require(' ...

  6. 从零开始学 Web 之 JS 高级（二）原型链，原型的继承

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  7. 从零开始学 Web 之 jQuery（六）为元素绑定多个相同事件，解绑事件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  8. android开发（0）：android studio的下载安装与简单使用 | sdk的安装与编译运行

    android studio,简称AS,是集成开发环境,所谓集成,就是集编辑.编译.调试.打包等于一体.简单来说,通过AS,就可以开发出在android系统上运行的APP. 我使用的是macos系统. ...

  9. [转]JS实现千分位

    本文转自:https://www.cnblogs.com/lvmylife/p/8287247.html 方法一:正则实现 function format (num) { var reg=/\d{1, ...

  10. Maven之setting.xml配置文件详解

    setting.xml配置文件 maven的配置文件settings.xml存在于两个地方: 1.安装的地方:${M2_HOME}/conf/settings.xml 2.用户的目录:${user.h ...