css巧用position

来源：互联网发布：警用证件夹淘宝编辑：程序博客网时间：2024/06/14 14:45

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title>    <link rel="stylesheet" type="text/css" href="index.css">    <script src="js/jquery.min.js"></script></head><body> <div id="intro">        <h1>无门慧开禅师</h1>        <ul>            <li><a href="#chun">spring</a></li>            <li><a href="#xia">summer</a></li>            <li><a href="#qiu">autumn</a></li>            <li><a href="#dong">winter</a></li>        </ul>    </div>        <div id="content">            <div class="scroll" id="chun">                <h1>春</h1>                <img src="imgs/3.jpg">                <p>春有百花<br><br><br><br><br><br></p>            </div>            <div class="scroll" id="xia">                <h1>夏</h1>                <img src="imgs/4.jpg">                <p>夏有凉风<br><br><br><br><br><br></p>            </div>            <div class="scroll" id="qiu">                <h1>秋</h1>                <img src="imgs/5.jpg">                <p>秋有雪<br><br><br><br><br><br></p>            </div>            <div class="scroll" id="dong">                <h1>冬</h1>                <img src="imgs/6.jpg">                <p>冬有雪</p>            </div>        </div></body></html>

---------------------------------------------------------------------------------------------------------

#intro{
position:absolute;
top: 3%;
left: 16%;
}


#intro h1{
font-size:66px;
text-transform:capitalize;/*文本中的每个单词以大写字母开头。*/

}

#intro ul{
margin:0;
padding:0;
list-style:none;
}

#intro li{
display:inline-block;
}

#intro lia{
color:deeppink;
font-size:55px;
text-decoration:none;
}

#content{
position:absolute;
right:3%;
width:333px;
padding:033px;
background:rgba(255,255,255,.11);
}
// #content{
// overflow: auto;
// height: 100%;
// }
#content .scroll {
width:333px;
text-align:center;
}
#content .scrollh1{
font-weight:bolder;/*更粗*/
size: 33px;
}
#content .scrollp{
font-size:22px;
}
#content .scrollimg{
margin-top:3px;/*图片距离标题的距离*/
}

body{
/*其他*/
// background-attachment :定义背景图片随滚动轴的移动方式
// 取值: scroll | fixed | inherit
// scroll: 随着页面的滚动轴背景图片将移动
// fixed: 随着页面的滚动轴背景图片不会移动
background-attachment:fixed;
}

#intro{
/*其他*/

// fixed    位置被设置为 fixed 的元素，
// 可定位于相对于浏览器窗口的指定坐标。
// 此元素的位置可通过 “left”、”top”、”right” 以及”bottom” 属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于 IE7（strict 模式）。
position:fixed;
}

阅读全文

0 0