标签：box about 记录 color 100% 响应 background width 页面
<!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;
}
我写的第一个有点响应式的页面。
标签：box,about,记录,color,100%,响应,background,width,页面 来源： https://blog.csdn.net/css897154690/article/details/116808923
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。