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类的部分变量 一点不一样是不是??? 其实 ...