写的有不周到的地方,还请评论修改,谢谢!
经过几天的学习,总算是掌握了html及css的皮毛,自己也动手写了几个静态网页,从简单到稍微复杂一点,对网页的编程也算有了初步的认识,有了一点收获。斗胆再贴一下我第四阶段的学习内容吧~~~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href="css/css0.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
<title>作业四</title>
</head>
<body>
<div class="main-wrapper">
<header>
<nav>
<li class="logo">
<a href="#">宋小墙</a>
</li>
<ul>
<li>
<a href="#" class="active">首页</a>
</li>
<li>
<a href="#">连接二</a>
</li>
<li>
<a href="#">连接三</a>
</li>
<li>
<a href="#">连接四</a>
</li>
</ul>
</nav>
<div id="banner">
<div class="inner">
<div style="height: 1px; width:40%;background:whitesmoke;margin:0 100px 8px 60px;"></div>
<h1>宋小墙</h1>
<div style="height: 1px; width:40%;background:whitesmoke;margin:8px 60px 0 120px;"></div>
<p style="margin:20px;line-height: 30px;">I Love You</p>
<button>了解我</button>
<div class="more"><a href="#">更多</a></div>
</div>
<div class="arrow-down"><i class="fa fa-arrow-down"></i></div>
</div>
</header>
<!--
作者:1115178050@qq.com
时间:2018-08-15
描述:页头
-->
<div>
<section class="green-section">
<div class="wrapper">
<div>
<h2 style="margin: 0;">一个标题</h2>
<div class="hr"></div>
<p style="font-size:16px;">It turns the heading into a section title, and then places everything up to the next heading into that section.</p>
</div>
<div class="icon-group">
<span class="icon"><div class="abc"><i class="fa fa-diamond rotate"></i></div></span>
<span class="icon"><div class="abc"><i class="fa fa-heart-o rotate"></i></div></span>
<span class="icon"><div class="abc"><i class="fa fa-code rotate"></i></div></span>
</div>
</div>
</section>
<section class="gary-section">
<div class="article-preview">
<div class="picture-section">
<img src="img/66.jpg" alt="找不到图片">
</div>
<div class="text-section">
<h2>一个标题</h2>
<div class="sub-heading">副标题</div>
<p>It turns the heading into a section title, and then places everything up to the next heading into that section.It turns the heading into a section title, and then places everything up to the next heading into that section.</p>
</div>
</div>
<div class="article-preview">
<div class="text-section">
<h2>一个标题</h2>
<div class="sub-heading">副标题</div>
<p>It turns the heading into a section title, and then places everything up to the next heading into that section.It turns the heading into a section title, and then places everything up to the next heading into that section.</p>
</div>
<div class="picture-section">
<img src="img/67.jpg" alt="找不到图片">
</div>
</div>
<div class="article-preview">
<div class="picture-section">
<img src="img/68.jpg" alt="找不到图片">
</div>
<div class="text-section">
<h2>一个标题</h2>
<div class="sub-heading">副标题</div>
<p>It turns the heading into a section title, and then places everything up to the next heading into that section.It turns the heading into a section title, and then places everything up to the next heading into that section.</p>
</div>
</div>
</section>
<section class="purple-section">
<div class="wrapper">
<div class="head-wrapper">
<h2>一个标题</h2>
<div class="hr"></div>
<div class="sub-heading">
<p>It turns the heading into a section title, and then places everything up to the next heading into that section.It turns the heading into a section title, and then places everything up to the next heading into that section.</p>
</div>
<div class="card-group clear-fix">
<div class="card">
<h3>标题三</h3>
<p>then places everything up to the next heading into that section</p>
</div>
<div class="card">
<h3>标题三</h3>
<p>It turns the heading into a section title</p>
</div>
<div class="card">
<h3>标题三</h3>
<p>then places everything up to the next heading into that section</p>
</div>
<div class="card">
<h3>标题三</h3>
<p>It turns the heading into a section title</p>
</div>
<div class="card">
<h3>标题三</h3>
<p>then places everything up to the next heading into that section</p>
</div>
<div class="card">
<h3>标题三</h3>
<p>It turns the heading into a section title</p>
</div>
</div>
</div>
</div>
</section>
</div>
<!--
作者:1115178050@qq.com
时间:2018-08-15
描述:内容
-->
<footer>
<div class="img-footer"></div>
<div class="img-text">
<ul class="share-group">
<li><a href="#"><i class="fa fa-photo scale"></i></a></li>
<li><a href="#"><i class="fa fa-commenting-o scale"></i></a></li>
<li><a href="#"><i class="fa fa-envelope scale"></i></a></li>
<li><a href="#"><i class="fa fa-briefcase scale"></i></a></li>
<li><a href="#"><i class="fa fa-paper-plane scale"></i></a></li>
</ul>
<div class="copy">
© 宋小墙
</div>
</div>
</footer>
<!--
作者:1115178050@qq.com
时间:2018-08-15
描述:页脚
-->
</div>
</body>
</html>
.clear-fix:after{
content:'';
display:block;
clear:both;
}
a{
text-decoration: none;
color:whitesmoke;
}
ul{
margin:0;
}
nav{
background:rgba(0,0,0,0.1);
height:50px;
}
header div{
background:transparent;
height:680px;
}
nav ul{
list-style: none;
margin:0 ;
float:right;
}
nav ul li{
margin-top:-8px;
}
nav ul li,nav .logo{
display:inline-block;
line-height: 50px;
margin-right:20px;
}
nav ul li a{
line-height:inherit;
text-decoration:none;
display:inline-block;
height:inherit;
color:white;
}
nav ul li.logo {
float:left;
padding:10px;
}
#banner{
float:inherit;
position: relative;
}
#banner .inner{
max-width: 300px;
text-align:center;
margin:0 auto;
position: relative;
top:140px;
height:320px;
color:whitesmoke;
}
#banner .inner .line{
width:30%;
height:1px;
background: #000;
}
#banner .inner h1{
margin:0;
letter-spacing:2px;
}
button{
border:none;
background: #9796a5;
color:#333;
padding:7px 10px;
}
#banner button{
padding:12px 30px;
}
#banner .inner .more{
margin-top:280px;
height:50px;
letter-spacing: 1.5px;
}
.arrow-down{
color:gainsboro;
text-align: center;
width:30px;
height:50px;
transform: scale(1.5,1.8);
position:absolute;
left:735px;
bottom:20px;
padding-top:60px;
}
.logo{
font-size:20px;
font-weight: 700;
letter-spacing: 5px;
}
.logo a{color:white;}
.hr{
width:100%;
height:2px;
background:#096 ;
margin:20px auto;
}
header{
background: rgba(0,0,0,0.1);
}
.green-section{
text-align: center;
background: #399;
color:white;
padding:160px;
}
.green-section .hr{
width:60%;
height:2px;
background: #6cc;
}
.rotate{
transform: rotate(320deg);
transform: scale(2,2);
text-align: center;
}
.abc{
transform: rotate(-45deg);
margin:12px auto;
}
.green-section .icon-group .icon{
display:inline-block;
width:50px;
height:50px;
background: #066;
transform: rotate(45deg);
margin:20px;
}
.green-section .icon-group{
margin:25px;
}
.wrapper{
max-width: 970px;
margin:0 auto;
}
.gary-section{
background:#322d2b;
color:whitesmoke;
font-size:0;
}
.gary-section .picture-section{
width:45%;
}
.picture-section img{
height:400px;
width:100%;
}
.gary-section .text-section{
width:55%;
}
.article-preview > div{
float:left;
}
.article-preview:after{
content:'';
display:block;
clear:both;
}
.article-preview:nth-child(odd){
background-color: rgba(200,200,200,0.1);
}
.text-section{
position:relative;
top:50px;
left:60px;
}
.text-section h2{
font-size:22px;
margin:20px;
}
.text-section p{
font-size:18px;
letter-spacing: 1px;
}
.text-section > *{
max-width: 90%;
}
.article-preview .sub-heading{
font-size:20px;
margin-top: 0 ;
}
.purple-section{
background:#352c5b;
color:whitesmoke;
height:1000px;
}
h2{
margin:0;
font-size:26px;
}
h3{
font-size:18px;
}
.purple-section .head-wrapper{
text-align: center;
}
.purple-section .hr{
background:#3f3968;
width:60%;
}
.purple-section .wrapper .head-wrapper h2{
padding-top:40px;
}
.card{
float:left;
width:50%;
min-height:250px;
padding:50px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
p{
font-size:16px;
letter-spacing: 1px;
}
.card:first-child{
background:rgba(0,0,0,0.05);
}
.card:nth-child(2){
background:rgba(0,0,0,0.08);
}
.card:nth-child(3){
background:rgba(0,0,0,0.11);
}
.card:nth-child(4){
background:rgba(0,0,0,0.14);
}
.card:nth-child(5){
background:rgba(0,0,0,0.17);
}
.card:nth-child(6){
background:rgba(0,0,0,0.20);
}
footer{
color:#e1e2e7;
min-height: 180px;
text-align:center;
}
.img-footer{
height:200px;
width:100%;
background: rgba(0,0,0,0.1);
}
.img-text {
background: rgba(0,0,0,0.4);
width:100%;
height:280px;
}
ul.share-group {
display:block;
width:970px;
margin: 0 auto;
padding:45px;
padding-top:65px;
}
ul li{
display:inline-block;
padding:12px;
}
.scale{
transform: scale(1.3,1.3);
}
.copy{
padding-top: 20px;
}
.main-wrapper{
background: #444 url(../img/69.jpg);
background-attachment:fixed;
background-repeat:no-repeat ;
background-size:cover ;
background-position:center center;
}