分类目录归档：css

css、web、前端

css

留下评论

一、例一，利用纯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'>按钮１</a>
                <a href='#list2'>按钮２</a>
                <a href='#list3'>按钮３</a>
            </div>
            <div class='content'>
                <div id='list1'>内容１</div>
                <div id='list2'>内容２</div>
                <div id='list3'>内容３</div>
            </div>
        </div>
    </body>
</html>

3、css代码

/*用星号去掉浏览器默认的外边距和内边距 */
*{
    margin:0;
    padding:0;
}
/* 对class=‘Ａ’的 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;
}

w3cschool.cn/css/css-sfrk2opy.html

很多网站是全背景图片的，而且适应各种主流分辨率，给人一种干净大气的感觉，实属设计派的一个耍酷良方，下面介绍几种实现全屏图片自适应缩放背景图片的方法。

1.帅气简单的CSS3方法

html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Safari 3+
Chrome Whatever+
IE 9+
Opera 10+
Firefox 3.6+

2.只使用CSS之方法一

img.bg {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px) {
img.bg {
left: 50%;
margin-left: -512px;
}
}

以下浏览器的任何版本: Safari / Chrome / Opera / Firefox
IE 6: （各种方案奈我何？！）
IE 7/8: 大部分工作，小屏幕的时候全屏，但是不是居中
IE 9: 没问题

3.只使用CSS之方法二

#bg {
position:fixed;
top:-50%;
left:-50%;
width:200%;
height:200%;
}
#bg img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
min-width:50%;
min-height:50%;
}
Safari / Chrome / Firefox
IE 8+
Opera

4.jQuery方法

#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
(window).load(function() { var theWindow = (window),
bg = ("#bg"),
aspectRatio = bg.width()/bg.height();
function resizeBg() {
if ( (theWindow.width()/theWindow.height()) bg .removeClass() .addClass('bgheight'); }else{ bg
.removeClass()
.addClass('bgwidth');
}
}
theWindow.resize(function() {
resizeBg();
}).trigger("resize");
});

IE7+
任何除了IE的浏览器的任何版本