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. Eclipse建立Java工程中的三个JRE选项的区别（Use an execution environment JRE，Use a project specific JRE，Use default JRE）

    本博客部分转载自: http://blog.csdn.net/wdjhzw/article/details/42086615  这篇博客写的非常好,很用心. 一.首先看新建Java Project时候 ...

  2. springmvc的异步处理

         关于异步的好处我在这里就不多说了,自从servlet3.1规范发布以来,控制层的异步处理也越来越多的被人提及.而Spring5的webflux诞生也意味着Spring全方位对异步提供了支持. ...

  3. xml与Excel转换

    使用Python将如下xml格式转换为Excel格式: xml转为xls格式文件: xml格式如下: <?xml version="1.0" encoding="U ...

  4. Python中property的使用

  5. mysql表分区案例

    0.整理表空间碎片optimize table tablename 1.表分区按年分区,季度子分区 alter table key_part partition by range(year(creat ...

  6. mysql 循环

    DELIMITER $$ DROP PROCEDURE IF EXISTS student_insert_while; $$ ), in birthday date, in age int) begi ...

  7. flask数据库迁移理解及命令

    前言: 使用数据库迁移,可以直接建表,而不用我们自己写sql语句用来建表.就是将关系型数据库的一张张表转化成了Python的一个个类. 在开发中经常会遇到需要修改原来的数据库模型,修改之后更新数据库, ...

  8. [转]使用docker-compose 大杀器来部署服务 上

    本文转自:https://www.cnblogs.com/neptunemoon/p/6512121.html 使用docker-compose 大杀器来部署服务 上 我们都听过或者用过 docker ...

  9. slf4j日志的使用

    slf4j(simple logging facade for Java)是Java的简单的日志门面,它不是具体的日志解决方案,它只服务于各种各样slf4j-logo的日志系统.这里的slf4j-lo ...

  10. MyBatis学习笔记(三) Configuration类

    一.初探Configuration类 我们先来看一下MyBatis的XML配置文件的结构,(摘自mybatis.org) 下面这个是Configuration类的部分变量 一点不一样是不是??? 其实 ...