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. 内链接、左右连接、union并集

    第一个:内连接接 inner join select   *   from   a   inner   join   b   on   a.id=b.id where a.id =b.id (这种用法 ...

  2. nohup后台执行

    由于使用nohup时,会自动将输出写入nohup.out文件中,如果文件很大的话,nohup.out就会不停的增大,这是我们不希望看到的,因此,可以利用/dev/null来解决这个问题. nohup ...

  3. MLlib之NaiveBayes算法源码学习

    package org.apache.spark.mllib.classification import breeze.linalg.{DenseMatrix => BDM, DenseVect ...

  4. Django--Admin 组件

    Django 提供了admin 组件 为项目提供基本的管理后台功能(对数据表的增删改查). Django 提供了基于 web 的管理工具. Django 自动管理工具是 django.contrib ...

  5. 微信小程序treeview

    这是昨晚加班的时候,用微信小程序写的一个treeview组件. 先来看看效果图吧! 比较简单吧,直接view布局. 移动端实现treeview类似的效果,有大的局限性.首先受设备宽度的影响,如果像PC ...

  6. nginx如何实现高并发

    nginx如何实现高并发 简单来讲,就是异步,非阻塞,使用了epoll和大量的底层代码优化. 稍微详细一点展开的话,就是nginx的特殊进程模型和事件模型的设计. 进程模型 nginx采用一个mast ...

  7. Java 动态生成 PDF 文件

    每片文章前来首小诗:   今日夕阳伴薄雾,印着雪墙笑开颜.我心仿佛出窗前,浮在半腰望西天.  --泥沙砖瓦浆木匠 需求: 项目里面有需要java动态生成 PDF 文件,提供下载.今天我找了下有关了,系 ...

  8. Linux_CentOS-服务器搭建 <三> 补充

    今天 才发现,服务器上 JDK 都没有好好的安装下.在这里补充说下. 1.看看机子上JDK的安装了多少 $ rpm -qa |grep java 会出现类似: java-1.6.0-openjdk-1 ...

  9. JAVA基础 <一>

    java基础的学习要领,多写多写. 学习方法很简单,了解  到  理解  到 熟悉  到 精通 先讲变量吧: public static void main(String[] args) { int ...

  10. Structs+Spring+Hibernate快速入门

    Structs+Spring+Hibernate,这是很经典的一个搭配,它的开发流程也比较程式化,下面以用户注册为例.     注册页面代码: <%@page contentType=" ...