css巧用position

最新推荐文章于 2023-04-03 17:07:59 发布

li3196672779

最新推荐文章于 2023-04-03 17:07:59 发布

阅读量228

点赞数

分类专栏： css布局

css布局专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!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 
  : 
  66 
  px; 
 
  text-transform 
  : 
  capitalize; 
  /*文本中的每个单词以大写字母开头。*/ 
 
   } 
 
  #intro 
  ul{ 
 
  margin 
  : 
  0; 
 
  padding 
  : 
  0; 
 
  list-style 
  : 
  none; 
 
   } 
 
  #intro 
  li{ 
 
  display 
  : 
  inline-block; 
 
   } 
 
  #intro 
  li 
  a{ 
 
  color 
  : 
  deeppink; 
 
  font-size 
  : 
  55 
  px; 
 
  text-decoration 
  : 
  none; 
 
   } 
 
  #content{ 
 
  position 
  : 
  absolute; 
 
  right 
  : 
  3 
  %; 
 
  width 
  : 
  333 
  px; 
 
  padding 
  : 
  0 
  33 
  px; 
 
  background 
  : 
  rgba( 
  255, 
  255, 
  255, 
  .11); 
 
   } 
 
  // #content{ 
 
  // overflow: auto; 
 
  // height: 100%; 
 
  // } 
 
  #content 
  .scroll { 
 
  width 
  : 
  333 
  px; 
 
  text-align 
  : 
  center; 
 
   } 
 
  #content 
  .scroll 
  h1{ 
 
  font-weight 
  : 
  bolder; 
  /*更粗*/ 
 
  size 
  : 
   33 
  px; 
 
   } 
 
  #content 
  .scroll 
  p{ 
 
  font-size 
  : 
  22 
  px; 
 
   } 
 
  #content 
  .scroll 
  img{ 
 
  margin-top 
  : 
  3 
  px; 
  /*图片距离标题的距离*/ 
 
   } 
 
  body{ 
 
  /*其他*/ 
 
  // background-attachment :定义背景图片随滚动轴的移动方式 
 
  // 取值: scroll | fixed | inherit 
 
  // scroll: 随着页面的滚动轴背景图片将移动 
 
  // fixed: 随着页面的滚动轴背景图片不会移动 
 
  background-attachment 
  : 
  fixed; 
 
   } 
 
  #intro{ 
 
  /*其他*/ 
 
  // fixed    位置被设置为 fixed 的元素， 
 
  // 可定位于相对于浏览器窗口的指定坐标。 
 
  // 此元素的位置可通过 “left”、”top”、”right” 以及”bottom” 属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于 IE7（strict 模式）。 
 
  position 
  : 
  fixed; 
 
   }