记录自己写的第一个有点响应式的页面-CSDN博客

本文链接：https://blog.csdn.net/css897154690/article/details/116808923

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>about me</title>
    <link rel="stylesheet" type="text/css" href="./css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="./style.css" />
</head>
<body>
    <!--左边-->
   <div class="left">
      <div class="bgimg">
     </div>
   </div>
      <!--右边-->
   <div class="right">
    <div class="header">
      <h1 class="title">01叔</h1>
      <p class="sub">独立开发者，终生学习者</p>
      <a href="#" target="_blank" class="button">Read my blog</a>
    </div>   
    <div class="photos">
        <div class="row">
            <div class="col l6 s12">
            <img src="https://unsplash.it/500/300?image=985" width="500" height="300" alt="生活">
            <img src="https://unsplash.it/500/900?image=874" width="500" height="900" alt="生活">
            <img src="https://unsplash.it/500/300?image=943" width="500" height="300" alt="生活">
        </div>
            <div class="col l6 s12">
                <img src="https://unsplash.it/500/500?image=964" width="500" height="500" alt="生活">
                <img src="https://unsplash.it/500/300?image=1047" width="500" height="300" alt="生活">
                <img src="https://unsplash.it/500/300?image=1070" width="500" height="300" alt="生活">
                <img src="https://unsplash.it/500/300?image=999" width="500" height="300" alt="生活">
            </div>
        </div>
    </div>   
    <div class="about">
        <h3>关于我</h3>
        <hr>
        <p >根据它的年度投资者报告，HubSpot在博客、Twitter、Facebook和Linkedin上共获得了超过600万人的粉丝。HubSpot的庞大的活跃粉丝规模被认为在软件行业中是规模最大的。它最为让人们所津津乐道的便是它所采取的“集客营销”理论。犹如火箭一般升空的增长势头，使得它在成功进行 IPO 的那一刻，成为了史上增长第二快的 SMB SaaS 公司，股价也不断创新高。</p>
    </div>   
   </div>
</body>
</html>

*{
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.row::after , .row::before {
content: "";
clear: both;
display: table;
}
.col{float: left;}
.m1{width: 8.33%;}
.l2{width: 16.66%;}
.l3{width: 25%;}
.l4{width: 33.33%;}
.l5{width: 41.66%;}
.l6{width:  50%;}
.l7{width: 58.33%;}
.l8{width: 66.66%;}
.l9{width:  75%;}
.m10{width: 83.33%;}
.m11{width: 91.66%;}
.m12{width:  100%;}

@media  only screen and(max-width:600px){
  .s1{width: 8.33%;}
  .s2{width: 16.66%;}
  .s3{width: 25%;}
  .s4{width: 33.33%;}
  .s5{width: 41.66%;}
  .s6{width: 50%;}
  .s7{width: 58.33%;}
  .s8{width: 66.66%;}
  .s9{width: 75%;}
  .s10{width: 83.33%;}
  .s11{width: 91.66%;}
  .s12{width: 100%;}  
}
@media  only screen and(min-width:601px) and(max-width:768px){
  .m1{width: 8.33%;}
  .m2{width: 16.66%;}
  .m3{width: 25%;}
  .m4{width: 33.33%;}
  .m5{width: 41.66%;}
  .m6{width: 50%;}
  .m7{width: 58.33%;}
  .m8{width: 66.66%;}
  .m9{width: 75%;}
  .m10{width: 83.33%;}
  .m11{width: 91.66%;}
  .m12{width: 100%;}
}

/*左边*/
.left {
  position:fixed;
  left:0;
  top:0;
  bottom:0;
  width:40%;
}
.bgimg{
  background: url(https://unsplash.it/g/500/900?image=1005);
  min-height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/*右边*/
.right{
  margin-left:40% ;
}
.header{
  padding: 220px 16px;
  text-align: center;
}
.title{
  font-size: 48px;
  letter-spacing: 4px;
}
.sub{
  font-size: 12px;
  letter-spacing: 4px;
  color: #666;
}
.button{
  text-decoration: none;
  border: none;
  background-color: #eee;
  color: #000;
  padding: 12px 24px;
  letter-spacing: 2px;
  font-size: 14px;
  display: inline-block;
  margin-top: 24px;
}
.button:hover{
  box-shadow: 0px 4px 10px rgb(0,0,0,0.2);
}
/*photos*/
.photos{
  padding: 24px 16px;
}
img{
  width: 100%;
  height: auto;
  padding: 8px;
}
/*about*/
.about{
  padding: 24px;
}
.about h3{
  color: #666;
}
hr{
  border: none;
  border-bottom:1px solid #666 ;
  margin: 16px 0;
}
.about p{
  color: #666;
  font-size: 14px;
  letter-spacing: 2px;
  line-height: 2;
  text-indent: 32px;
}

我写的第一个有点响应式的页面。