纯CSS选项卡

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">55555555555555555</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: 0 auto;
    height: 1000px
}
#Header {
    height: 100Px;
    background: green;
}
#Logo {
    padding-left: 50px;
    padding-bottom: 20px;
    padding-top: 10px;
}
#Content {
    margin: 5, 5, 5, 5;
    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: 0;
    padding: 0;
    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: 700 12px/55px "宋体",sans-serif;
    color: #fff;
    text-decoration: none;
    background: #666;
    /*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;}
时间: 2024-10-15 16:55:26

纯CSS选项卡的相关文章

利用radio实现纯css选项卡切换

代码文件如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>radio选项卡切换</title> 6 <style type="text/css"> 7 *{margin:0;padding:0;} 8 .test-box{width: 50%;ma

纯 CSS 利用 label + input 实现选项卡

clip 属性 用于剪裁绝对定位元素. .class { position:absolute; clip:rect(0px,60px,200px,0px); } scroll-behavior: smooth; 作用在容器元素上,可以让容器(非鼠标手势触发)的滚动变得平滑.利用这个css属性可以一步将原来纯css标签直接切换,变成平滑过渡切换效果. 代码: <!DOCTYPE html> <html lang="en"> <head> <met

旁门左道通过JS与纯CSS实现显示隐藏层

想必大家在开发前端页面时,肯定少不了显示隐藏层这一技术点.那么我简单粗暴地总结了以下两个小demo. 要实现该截图的功能:鼠标移动到我的好友这个选项卡时,灰色的隐藏层就会出现.  1.    通过纯CSS实现. 该方法最简单,最粗暴. 这是部分HTML代码. <div class="myfriends" >     我的好友     <div class="myfriendsList" >         <ul>        

三种纯CSS方法实现等高列

在这篇文章里, 我会介绍三种使用纯css的方式来实现等高列的方法.在网页布局中设置列等高是比较常见的, 所以写这篇文章就是要总结下一些优雅的纯CSS解决方案. 插图自己弄得,不喜莫喷 哈哈.. 下面介绍的三种方法都只用到了CSS , 不涉及jQuery.JavaScript计算实现的方法,所以我把它这篇文章标题设为:三种纯CSS方法实现等高列. 方法-1: 使用Margins, Paddings和 Overflow来实现 第一种方法使用margins, paddings和overflow来迫使列

淘宝分类导航条;纯css实现固定导航栏

效果如下: 页面如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="t

【技能】使用纯CSS+html写出方向箭头,简单大方,好看

使用纯CSS+html写出方向箭头,贴出来就可以用,100%原创 <html> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> .pointsRule{ display: inline-blo

CSS之纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等)

图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome,当然IE也能看一部分的.那好,下面就一起来看看我们是如何用纯CSS来画这些图形的,如果你也觉得很震撼,推荐给你的朋友吧. 1.正方形 最终效果: CSS代码如下: 复制代码 代码如下: #square { width: 100px; height: 100px; background: red; }

纯css实现的三级水平导航菜单

vscode练习使用开发纯css的三级水平导航菜单.先上图: 1.html5布局 1 <html> 2 3 <head> 4 <meta charset="UTF-8"> 5 <title>水平导航菜单</title> 6 <link rel="stylesheet" href="reset.css"> 7 <link rel="stylesheet"

2 纯CSS的菜单

使用纯CSS实现菜单的原理:将下拉框隐藏,当鼠标在菜单时显示隐藏的菜单. html代码: <nav> <ul> <li> <a>菜单1</a> <ul> 子菜单.... </ul> </li> </ul> </nav> 核心CSS代码 nav ul li:hover > ul { display: block; } nav li ul { display: none; positi