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. [EXP]Drupal < 8.6.10 / < 8.5.11 - REST Module Remote Code Execution

    Analyzing the patch By diffing Drupal and , we can see that in the REST module, FieldItemNormalizer ...

  2. Oracle 基本知识回顾

    1.查找数据库所用的字符集编码:SELECT USERENV('language') FROM DUAL;2.将一个表中的字段,插入到这个表:INSERT INTO TABLE SELECT * FR ...

  3. Spring Boot + Spring Cloud 实现权限管理系统 后端篇（二十四）：权限控制（Shiro 注解）

    在线演示 演示地址:http://139.196.87.48:9002/kitty 用户名:admin 密码:admin 技术背景 当前,我们基于导航菜单的显示和操作按钮的禁用状态,实现了页面可见性和 ...

  4. Java中锁分类

    锁的分类大致如下:公平锁/非公平锁可重入锁/不可重入锁独享锁/共享锁乐观锁/悲观锁分段锁 1.公平锁/非公平锁公平锁就是严格按照线程启动的顺序来执行的,不允许其他线程插队执行的:而非公平锁是允许插队的 ...

  5. SpringBoot+Mybatis+Pagehelper分页

    1.pom.xml <!-- mybatis分页插件 --> <dependency> <groupId>com.github.pagehelper</gro ...

  6. 关于const用法的学习

    被const修饰的东西都受到强制保护,可以预防意外的变动,能提高程序的健壮性.所以很多C++程序设计书籍建议:“Use const whenever you need”.1.const作函数参数 例如 ...

  7. 设计模式教程（Design Patterns Tutorial）笔记之一 创建型模式（Creational Patterns）

    目录 · 概述 · Factory · What is the Factory Design Pattern? · Sample Code · Abstract Factory · What is t ...

  8. Spring的第三天AOP之xml版

    Spring的第三天AOP之xml版 ssm框架 spring  AOP介绍 AOP(Aspect Oriented Programming),面向切面编程.它出来的目的并不是去取代oop,而是对它的 ...

  9. C# 匿名类型序列化、反序列化

    前言 现在提倡前后端分离,分离后服务全部采用接口的方式给前端提供服务,当我们处理自定义查询时必定会多表查询,而处理多表查询时我们又懒的去建view model,建的过多项目也凌乱的很,所以在dao层处 ...

  10. 菜鸟入门【ASP.NET Core】10：Cookie-based认证实现

    准备工作 新建MVC项目,然后用VSCode打开 dotnet new mvc --name MvcCookieAuthSample 在Controllers文件夹下新建AdminController ...