css

[TOC]

一、例一,利用纯css实现菜单效果

1、来源及技术要点,原理

心血来潮,想到csdn上看看技术直播,随便一看,果然不虚此行。
一位老兄讲解的纯 css 实现页面效果,在几天前我做了一个任务,
花好多心思,好长时间也没搞定,效果很勉强,这位老兄15分钟,讲的清清楚楚。

主要是利用 html 的页内链接,以及 <div>限定区域外,内容不显示的原理

直接链接:
https://live.csdn.net/v/27147?utm_medium=distribute.pc_video_shortvideo.none-task-short_video-csdn#pc_video_shortvideo#short_video#27147-8.nonecase&depth_1-utm_source=distribute.pc_video_shortvideo.none-task-short_video-csdn#pc_video_shortvideo#short_video#27147-8.nonecase&

2、先上html 代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset='UTF-8' />
        <title>纯CSS实现点击切换效果</title>
        <link rel='stylesheet' type='text/css' href='./page1.css' />
    </head>
    <body>
        <div class='A'>
            <div class='title'>
                <a href='#list1'>按钮1</a>
                <a href='#list2'>按钮2</a>
                <a href='#list3'>按钮3</a>
            </div>
            <div class='content'>
                <div id='list1'>内容1</div>
                <div id='list2'>内容2</div>
                <div id='list3'>内容3</div>
            </div>
        </div>
    </body>
</html>

3、css代码

/*用星号去掉浏览器默认的外边距和内边距 */
*{
    margin:0;
    padding:0;
}
/* 对class=‘A’的 div 进行配置 */
div.A{
    width:750px;
    height:550px;
    background-color:#aaa;
    margin:0 auto;
}

/*对class='A'的div, 它里面 class='title' 的 div 进行配置*/
div.A div.title{
    width:750px;
    height:50px;
    background-color:purple;
}
/* 对 title 中的所有链接类型<a>进行设置 */
div.A div.title a{
    display:block; /* 将其设置为block类型,然后才能为其设置宽高 */
    width:200px;
    height:40px;
    float:left;
    background-color:#fff;
    margin: 5px 0 0 35px;
    text-align:center; /* 字体左右对齐 */
    line-height:40px;  /* 字体上下对齐,不能用center */
}

/*对class='A'的div, 它里面 class='content' 的 div 进行配置*/
div.A div.content{
    width:750px;
    height:500px;
    background-color:#bbb;
    overflow:hidden; /*对超出div范围的内容,不作显示*/
}
div.A div.content div#list1{
    width:100%;
    height:100%;
    font-size:50px;
    text-align:center;
    line-height:500px;
    background-color:red;
}
div.A div.content div#list2{
    width:100%;
    height:100%;
    font-size:50px;
    text-align:center;
    line-height:500px;
    background-color:green;
}
div.A div.content div#list3{
    width:100%;
    height:100%;
    font-size:50px;
    text-align:center;
    line-height:500px;
    background-color:blue;
}

发帖时间: css

发表评论