码迷,mamicode.com
首页 > Web开发 > 详细

每周一个网页

时间:2018-06-16 17:52:40      阅读:172      评论:0      收藏:0      [点我收藏+]

标签:more   brief   str   doctype   space   layer   padding   bottom   challenge   

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 &copy; 2001 - 2014 Cssauthor.com</p>
 </footer>
 
</body>
</html>
 
css
nav{
 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;
}
 

每周一个网页

标签:more   brief   str   doctype   space   layer   padding   bottom   challenge   

原文地址:https://www.cnblogs.com/yehongrun/p/9190814.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!