每周一個網頁
阿新 • • 發佈：2018-06-16
pre img first already doctype justify 20px url round html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="./reset.css">
<link rel="stylesheet" type="text/css" href="./lesson.css">
</head>
<body>
<nav>
<!-- 左邊logo -->
<div class="logo">
<img src="./images/icrowdme-PSD---cssauthor_03.png">
</div> <!-- 右邊菜單欄 -->
<div class="menu">
<ul>
<li>HOME</li>
<li>HOW IT WORKS</li>
<li>DISCOVER A PROJECT</li>
<li>BLOG</li>
<li>FIND OUT MORE</li>
<li>LOGIN</li>
</ul>
</div>
</nav> <article>
<!-- Intellectual Property has the Shelf Life of a Banana. -->
<div class="bgd-img">
<div>
<p>Intellectual Property has the Shelf Life</p>
<p class="nr">of a Banana.</p>
<div class="btn">Become a Member</div>
</div> <div>
<img src="./images/icrowdme-PSD---cssauthor_04.png">
<img src="./images/icrowdme-PSD---cssauthor_05.png">
</div>
</div>
<!-- Our work is the presentation of our capabilities. --> <div class="second">
<div>
<img src="./images/english_0003s_0004s_0000_Shape-846.png">
</div>
<div>
<h2>Our work is the presentation</h2>
<h2>of our capabilities.</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora animi, deserunt rerum deleniti nobis. Inventore porro, quas doloremque iusto. Dicta dolor totam autem quae eveniet aspernatur</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora animi, deserunt rerum deleniti nobis. Inventore porro, quas doloremque iusto. Dicta dolor totam autem quae eveniet aspernatur</p> <div class="bottom">
<ul>
<li>
<span class="round">1</span>
<span class="font">Simple</span>
</li>
<li>
<span class="round round-color">2</span>
<span class="font">Transparent</span>
</li>
<li>
<span class="round round-color">3</span>
<span class="font">Collaborative</span>
</li>
</ul>
<!-- Browse projects, like booking a hotel online ! -->
<div class="browse">
<div>
<img src="./images/english_0003s_0003s_0000s_0000_glasses.png">
</div>
<div>
<p>Browse projects, like booking a hotel online !</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta aspernatur aliquam vel veniam beatae adipisci, eligendi est voluptatem repudiandae sit, minima iste. Repellat tempore velit, deserunt ad. Magnam, quia. Perferendis?</p>
</div>
</div>
</div>
</div> <!-- find -->
<div class="find">
<!-- 左邊 -->
<div class="find-left">
<div>
<p><img src="./images/english_0003s_0002s_0001s_0002_Vector-Smart-Object.png"></p>
<div>
<h4>Find Properties</h4>
<p>Sign up to browse the portfolio. Your journey to becoming a real estate baron starts here.</p>
<div class="find-btn">Become A Member</div>
</div>
</div>
</div>
<!-- 右邊 -->
<div class="find-left find-left-bgd-color">
<div>
<p><img src="./images/english_0003s_0002s_0000s_0000_Vector-Smart-Object.png"></p>
<div>
<h4>Find Buyers</h4>
<p>Sign up to browse the portfolio. Your journey to becoming a real estate baron starts here.</p>
<div class="find-btn btn-color">Submit Your Project</div>
</div>
</div> </div> </div>
<!-- Featured Projects -->
<div class="featured-box">
<div class="featured">
<div class="featured-left">
<p>Featured Projects</p>
<p class="content">Brief details of new and popular projects. To view full listings,you will be required to sign up and become a member.</p>
</div> <div class="featured-btn">
Become a Member
</div>
</div> <div class="featured-middle">
<img src="./images/icrowdme-PSD---cssauthor_07.png">
<img src="./images/icrowdme-PSD---cssauthor_035.png">
<img src="./images/icrowdme-PSD---cssautho_051.png">
</div> <!-- Be Part of a Growing International Community -->
<div class="featured-bottom">
<div>
<p>Be Part of a Growing International Community</p>
<p>One of the challenges in networking is everybody thinks it‘s making cold calls to strangers.Actually,it‘s the people who already have strong trust relatiorships with you</p>
</div> <div class="dialogue">
<div class="dialogue-bgd-img">
<div>
<p>One of the Best</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, illum odit libero culpa fuga ipsum error numquam!</p>
</div>
<div>
<img src="./images/english_0003s_0000s_0001s_0003_Layer-23.png">
<span>David Beckham</span>
</div>
</div> <div class="dialogue-bgd-img">
<div>
<p>One of the Best</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, illum odit libero culpa fuga ipsum error numquam!</p>
</div>
<div>
<img src="./images/english_0003s_0000s_0000s_0003_Layer-24.png">
<span>David Beckham</span>
</div>
</div>
</div>
</div>
</div>
</article>
<footer>
<div class="footer-top">
<img src="./images/english_0004s_0002_Layer-25.png">
</div>
<p>Copyright © 2001 - 2014 Cssauthor.com</p>
</footer>
</body>
</html> css
width: 100%;
height: 85px;
display: flex;
justify-content:space-around;
}
.logo,
.menu{
line-height: 85px;
} .menu>ul{
display: flex;
}
.menu>ul>li{
margin:20px 30px 30px 0;
color: #c1c1c1;
}
.menu>ul>li:last-child{
width: 100px;
height: 38px;
background-color:rgb(188,218,92);
border-radius: 20px;
text-align: center;
line-height: 38px;
color: #fff;
margin:40px 0 0 75px;
} article{
margin-top: 20px;
}
/*Intellectual Property has the Shelf Life of a Banana.*/
.bgd-img{
background: url(‘./images/icrowdme-PSD---cssauthor_02.png‘) no-repeat;
height: 570px;
background-size: 100%;
position: relative;
}
.bgd-img>div:first-child{
padding-top: 170px;
width: 690px;
margin: 0 auto;
} .bgd-img>div:first-child>p{
color: #fff;
font-size: 38px;
margin-bottom: 24px;
}
.nr{
font-size: 30px;
font-weight: 100;
text-align: center;
}
.btn{
width: 255px;
height: 74px;
background-color: rgb(153,197,10);
text-align: center;
line-height: 74px;
margin: 0 auto;
border-radius: 10px;
color: #fff;
font-size: 20px;
} .bgd-img>div:last-child{
position: absolute;
bottom: 48px;
right: 138px;
}
.bgd-img>div:last-child>img{
margin-left: 30px;
}
/* Our work is the presentation of our capabilities. */
.second{
width: 100%;
background-color: #fff;
}
.second>div:first-child{
width: 58px;
margin: 0 auto;
margin-top: 100px;
} .second>div:nth-child(2){
margin-top: 52px;
width: 500px;
text-align: center;
margin: 0 auto;
}
h2{
font-size: 22px;
margin-bottom: 30px;
}
.second>div:nth-child(2)>h2:last-child{
margin-bottom: 70px;
}
.second>p{
width: 920px;
height: 50px;
text-align: center;
margin:0 auto;
color: #c1c1c1;
margin-bottom: 46px;
} .bottom{
width:100%;
margin-top: 155px;
}
.bottom>ul{
width: 963px;
height: 85px;
display: flex;
justify-content: space-between;
margin: 0 auto;
border-bottom: 1px solid rgb(230,230,230);
margin-bottom: 65px;
} .bottom>ul>li:hover{
padding-bottom: 40px;
border-bottom: 1px solid rgb(173,209,54);
} .round{
display: inline-block;
width: 45px;
height: 45px;
border-radius: 50%;
background-color: rgb(173,209,54);
text-align: center;
line-height: 45px;
color: #fff;
margin-right: 30px;
}
.round-color{
background-color: rgb(95,95,95);
} .font{
font-size: 24px;
font-weight: 100;
} /*Browse projects, like booking a hotel online ! */
.browse{
width: 863px;
height: 244px;
margin: 0 auto;
display: flex;
} .browse>div:first-child{
margin-top: 30px;
} .browse>div:last-child{
width: 644px;
margin-left: 106px;
} .browse>div:last-child>p{
font-size: 26px;
color: rgb(173,209,54);
}
.browse>div:last-child>p:last-child{
margin-top: 40px;
font-size: 16px;
color: #c1c1c1;
line-height: 2;
} /* find */
.find{
width: 100%;
display: flex;
justify-content: space-between;
} .find-left{
width: 50%;
background-color: rgb(226,248,255);
}
.find-left>div{
padding: 48px 0;
width: 435px;
margin: 0 auto;
display: flex;
}
.find-left>div>p{
margin-right: 45px;
margin-top: 38px;
} .find-left>div>div>h4{
font-size: 20px;
margin-bottom: 34px;
}
.find-left>div>div>p{
font-size:16px;
font-weight: 200;
line-height: 2;
}
.find-btn{
width: 188px;
height: 50px;
background-color: rgb(38,166,209);
border-radius: 10px;
text-align: center;
line-height: 50px;
color: #fff;
font-size: 14px;
margin-top: 30px;
}
.find-left-bgd-color{
width: 50%;
background-color: rgb(245,249,235);
}
.btn-color{
background-color: rgb(173,209,54);
}
/* Featured Projects */
.featured-box{
margin-top: 80px;
width: 100%;
background-color: #fff;
}
.featured{
width: 1000px;
margin: 0 auto;
display: flex;
padding-bottom: 67px;
}
.featured-left{
width: 677px;
}
.featured-left>p:first-child{
font-size: 28px;
font-weight: 500;
margin-bottom: 30px;
}
.content{
font-size: 16px;
color: #c1c1c1;
line-height: 2;
}
.featured-btn{
width: 182px;
height: 54px;
border:1px solid #c1c1c1;
border-radius: 10px;
text-align: center;
line-height: 54px;
color: #c1c1c1;
margin-left: 120px;
margin-top: 37px;
} .featured-middle{
width: 1000px;
margin: 0 auto;
display: flex;
justify-content: space-between; }
.featured-bottom{
background: url(‘./images/english_0003s_0000s_0002_bg.png‘) no-repeat center;
height: 670px;
background-size:100% ;
}
.featured-bottom>div{
width: 1000px;
margin: 0 auto;
margin-bottom: 100px;
}
.featured-bottom>div>p:first-child{
font-size: 30px;
color: rgb(158,192,45);
padding-top: 80px;
margin-bottom: 40px;
margin-left: 52px;
}
.featured-bottom>div>p:last-child{
font-size: 16px;
color: #c1c1c1;
line-height: 2;
text-align: center;
margin-left: 30px;
}
.dialogue{
display: flex;
justify-content: space-between;
} .dialogue-bgd-img{
background-image: url(‘./images/english_0003s_0000s_0000s_0002_Rounded-Rectangle-12.png‘);
width: 397px;
height: 166px;
}
.dialogue-bgd-img p:first-child{
font-size: 20px;
color: rgb(158,192,45);
font-weight: 500;
text-align: center;
padding-top: 25px;
margin-bottom: 10px;
}
.dialogue-bgd-img p:last-child{
font-size: 14px;
color: #c1c1c1;
line-height: 2;
text-align: center;
} .dialogue-bgd-img>div:last-child{
margin: 70px 50px;
}
.dialogue-bgd-img>div:last-child span{
margin-left: 20px;
font-weight: bold;
} /* footer*/
.footer-top{
width: 100%;
height: 133px;
text-align: center;
line-height: 133px;
border-bottom: 1px solid #c1c1c1;
}
footer>p{
height: 65px;
text-align: center;
font-size: 14px;
color: #c1c1c1;
line-height: 65px;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="./reset.css">
<link rel="stylesheet" type="text/css" href="./lesson.css">
</head>
<body>
<nav>
<!-- 左邊logo -->
<div class="logo">
<img src="./images/icrowdme-PSD---cssauthor_03.png">
</div> <!-- 右邊菜單欄 -->
<div class="menu">
<ul>
<li>HOME</li>
<li>HOW IT WORKS</li>
<li>DISCOVER A PROJECT</li>
<li>BLOG</li>
<li>FIND OUT MORE</li>
<li>LOGIN</li>
</ul>
</div>
</nav> <article>
<!-- Intellectual Property has the Shelf Life of a Banana. -->
<div class="bgd-img">
<div>
<p>Intellectual Property has the Shelf Life</p>
<p class="nr">of a Banana.</p>
<div class="btn">Become a Member</div>
</div> <div>
<img src="./images/icrowdme-PSD---cssauthor_04.png">
<img src="./images/icrowdme-PSD---cssauthor_05.png">
</div>
</div>
<!-- Our work is the presentation of our capabilities. --> <div class="second">
<div>
<img src="./images/english_0003s_0004s_0000_Shape-846.png">
</div>
<div>
<h2>Our work is the presentation</h2>
<h2>of our capabilities.</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora animi, deserunt rerum deleniti nobis. Inventore porro, quas doloremque iusto. Dicta dolor totam autem quae eveniet aspernatur</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora animi, deserunt rerum deleniti nobis. Inventore porro, quas doloremque iusto. Dicta dolor totam autem quae eveniet aspernatur</p> <div class="bottom">
<ul>
<li>
<span class="round">1</span>
<span class="font">Simple</span>
</li>
<li>
<span class="round round-color">2</span>
<span class="font">Transparent</span>
</li>
<li>
<span class="round round-color">3</span>
<span class="font">Collaborative</span>
</li>
</ul>
<!-- Browse projects, like booking a hotel online ! -->
<div class="browse">
<div>
<img src="./images/english_0003s_0003s_0000s_0000_glasses.png">
</div>
<div>
<p>Browse projects, like booking a hotel online !</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta aspernatur aliquam vel veniam beatae adipisci, eligendi est voluptatem repudiandae sit, minima iste. Repellat tempore velit, deserunt ad. Magnam, quia. Perferendis?</p>
</div>
</div>
</div>
</div> <!-- find -->
<div class="find">
<!-- 左邊 -->
<div class="find-left">
<div>
<p><img src="./images/english_0003s_0002s_0001s_0002_Vector-Smart-Object.png"></p>
<div>
<h4>Find Properties</h4>
<p>Sign up to browse the portfolio. Your journey to becoming a real estate baron starts here.</p>
<div class="find-btn">Become A Member</div>
</div>
</div>
</div>
<!-- 右邊 -->
<div class="find-left find-left-bgd-color">
<div>
<p><img src="./images/english_0003s_0002s_0000s_0000_Vector-Smart-Object.png"></p>
<div>
<h4>Find Buyers</h4>
<p>Sign up to browse the portfolio. Your journey to becoming a real estate baron starts here.</p>
<div class="find-btn btn-color">Submit Your Project</div>
</div>
</div> </div> </div>
<!-- Featured Projects -->
<div class="featured-box">
<div class="featured">
<div class="featured-left">
<p>Featured Projects</p>
<p class="content">Brief details of new and popular projects. To view full listings,you will be required to sign up and become a member.</p>
</div> <div class="featured-btn">
Become a Member
</div>
</div> <div class="featured-middle">
<img src="./images/icrowdme-PSD---cssauthor_07.png">
<img src="./images/icrowdme-PSD---cssauthor_035.png">
<img src="./images/icrowdme-PSD---cssautho_051.png">
</div> <!-- Be Part of a Growing International Community -->
<div class="featured-bottom">
<div>
<p>Be Part of a Growing International Community</p>
<p>One of the challenges in networking is everybody thinks it‘s making cold calls to strangers.Actually,it‘s the people who already have strong trust relatiorships with you</p>
</div> <div class="dialogue">
<div class="dialogue-bgd-img">
<div>
<p>One of the Best</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, illum odit libero culpa fuga ipsum error numquam!</p>
</div>
<div>
<img src="./images/english_0003s_0000s_0001s_0003_Layer-23.png">
<span>David Beckham</span>
</div>
</div> <div class="dialogue-bgd-img">
<div>
<p>One of the Best</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, illum odit libero culpa fuga ipsum error numquam!</p>
</div>
<div>
<img src="./images/english_0003s_0000s_0000s_0003_Layer-24.png">
<span>David Beckham</span>
</div>
</div>
</div>
</div>
</div>
</article>
<footer>
<div class="footer-top">
<img src="./images/english_0004s_0002_Layer-25.png">
</div>
<p>Copyright © 2001 - 2014 Cssauthor.com</p>
</footer>
</body>
</html> css
width: 100%;
height: 85px;
display: flex;
justify-content:space-around;
}
.logo,
.menu{
line-height: 85px;
} .menu>ul{
display: flex;
}
.menu>ul>li{
margin:20px 30px 30px 0;
color: #c1c1c1;
}
.menu>ul>li:last-child{
width: 100px;
height: 38px;
background-color:rgb(188,218,92);
border-radius: 20px;
text-align: center;
line-height: 38px;
color: #fff;
margin:40px 0 0 75px;
} article{
margin-top: 20px;
}
/*Intellectual Property has the Shelf Life of a Banana.*/
.bgd-img{
background: url(‘./images/icrowdme-PSD---cssauthor_02.png‘) no-repeat;
height: 570px;
background-size: 100%;
position: relative;
}
.bgd-img>div:first-child{
padding-top: 170px;
width: 690px;
margin: 0 auto;
} .bgd-img>div:first-child>p{
color: #fff;
font-size: 38px;
margin-bottom: 24px;
}
.nr{
font-size: 30px;
font-weight: 100;
text-align: center;
}
.btn{
width: 255px;
height: 74px;
background-color: rgb(153,197,10);
text-align: center;
line-height: 74px;
margin: 0 auto;
border-radius: 10px;
color: #fff;
font-size: 20px;
} .bgd-img>div:last-child{
position: absolute;
bottom: 48px;
right: 138px;
}
.bgd-img>div:last-child>img{
margin-left: 30px;
}
/* Our work is the presentation of our capabilities. */
.second{
width: 100%;
background-color: #fff;
}
.second>div:first-child{
width: 58px;
margin: 0 auto;
margin-top: 100px;
} .second>div:nth-child(2){
margin-top: 52px;
width: 500px;
text-align: center;
margin: 0 auto;
}
h2{
font-size: 22px;
margin-bottom: 30px;
}
.second>div:nth-child(2)>h2:last-child{
margin-bottom: 70px;
}
.second>p{
width: 920px;
height: 50px;
text-align: center;
margin:0 auto;
color: #c1c1c1;
margin-bottom: 46px;
} .bottom{
width:100%;
margin-top: 155px;
}
.bottom>ul{
width: 963px;
height: 85px;
display: flex;
justify-content: space-between;
margin: 0 auto;
border-bottom: 1px solid rgb(230,230,230);
margin-bottom: 65px;
} .bottom>ul>li:hover{
padding-bottom: 40px;
border-bottom: 1px solid rgb(173,209,54);
} .round{
display: inline-block;
width: 45px;
height: 45px;
border-radius: 50%;
background-color: rgb(173,209,54);
text-align: center;
line-height: 45px;
color: #fff;
margin-right: 30px;
}
.round-color{
background-color: rgb(95,95,95);
} .font{
font-size: 24px;
font-weight: 100;
} /*Browse projects, like booking a hotel online ! */
.browse{
width: 863px;
height: 244px;
margin: 0 auto;
display: flex;
} .browse>div:first-child{
margin-top: 30px;
} .browse>div:last-child{
width: 644px;
margin-left: 106px;
} .browse>div:last-child>p{
font-size: 26px;
color: rgb(173,209,54);
}
.browse>div:last-child>p:last-child{
margin-top: 40px;
font-size: 16px;
color: #c1c1c1;
line-height: 2;
} /* find */
.find{
width: 100%;
display: flex;
justify-content: space-between;
} .find-left{
width: 50%;
background-color: rgb(226,248,255);
}
.find-left>div{
padding: 48px 0;
width: 435px;
margin: 0 auto;
display: flex;
}
.find-left>div>p{
margin-right: 45px;
margin-top: 38px;
} .find-left>div>div>h4{
font-size: 20px;
margin-bottom: 34px;
}
.find-left>div>div>p{
font-size:16px;
font-weight: 200;
line-height: 2;
}
.find-btn{
width: 188px;
height: 50px;
background-color: rgb(38,166,209);
border-radius: 10px;
text-align: center;
line-height: 50px;
color: #fff;
font-size: 14px;
margin-top: 30px;
}
.find-left-bgd-color{
width: 50%;
background-color: rgb(245,249,235);
}
.btn-color{
background-color: rgb(173,209,54);
}
/* Featured Projects */
.featured-box{
margin-top: 80px;
width: 100%;
background-color: #fff;
}
.featured{
width: 1000px;
margin: 0 auto;
display: flex;
padding-bottom: 67px;
}
.featured-left{
width: 677px;
}
.featured-left>p:first-child{
font-size: 28px;
font-weight: 500;
margin-bottom: 30px;
}
.content{
font-size: 16px;
color: #c1c1c1;
line-height: 2;
}
.featured-btn{
width: 182px;
height: 54px;
border:1px solid #c1c1c1;
border-radius: 10px;
text-align: center;
line-height: 54px;
color: #c1c1c1;
margin-left: 120px;
margin-top: 37px;
} .featured-middle{
width: 1000px;
margin: 0 auto;
display: flex;
justify-content: space-between; }
.featured-bottom{
background: url(‘./images/english_0003s_0000s_0002_bg.png‘) no-repeat center;
height: 670px;
background-size:100% ;
}
.featured-bottom>div{
width: 1000px;
margin: 0 auto;
margin-bottom: 100px;
}
.featured-bottom>div>p:first-child{
font-size: 30px;
color: rgb(158,192,45);
padding-top: 80px;
margin-bottom: 40px;
margin-left: 52px;
}
.featured-bottom>div>p:last-child{
font-size: 16px;
color: #c1c1c1;
line-height: 2;
text-align: center;
margin-left: 30px;
}
.dialogue{
display: flex;
justify-content: space-between;
} .dialogue-bgd-img{
background-image: url(‘./images/english_0003s_0000s_0000s_0002_Rounded-Rectangle-12.png‘);
width: 397px;
height: 166px;
}
.dialogue-bgd-img p:first-child{
font-size: 20px;
color: rgb(158,192,45);
font-weight: 500;
text-align: center;
padding-top: 25px;
margin-bottom: 10px;
}
.dialogue-bgd-img p:last-child{
font-size: 14px;
color: #c1c1c1;
line-height: 2;
text-align: center;
} .dialogue-bgd-img>div:last-child{
margin: 70px 50px;
}
.dialogue-bgd-img>div:last-child span{
margin-left: 20px;
font-weight: bold;
} /* footer*/
.footer-top{
width: 100%;
height: 133px;
text-align: center;
line-height: 133px;
border-bottom: 1px solid #c1c1c1;
}
footer>p{
height: 65px;
text-align: center;
font-size: 14px;
color: #c1c1c1;
line-height: 65px;
}
每周一個網頁