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

模仿Jennifer Dewalt | 180 Websites的网站 Day2

时间:2016-05-21 20:23:49      阅读:222      评论:0      收藏:0      [点我收藏+]

标签:

Day 2

html:

(index.html)

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Make a Deal</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body id="make_a_deal">
    <!-- Start text_container -->
    <div class="text_container">
        <div class="title">做出一个选择,测试你的性格</div>
        <div class="text">苏格拉底说:“认识你自己。”孙子兵法云:“知己知彼,百战百胜。”认识一个人,最重要的是认识其性格。性格决定命运,优秀的性格将会让你的人生走的更远。其实每个人自己独特的性格不一定都能自我发掘出来。有时候还是要靠他人的引导才能体现到。
        </div>
        <p>那么现在就做出一个测试,看看你的选择是如何。</p>
    </div>
    <!-- End text_container -->
    
    <!-- Start door_container -->
    <div class="door_container">
        <div class="door"><a href="make_a_deal_choose_1.html"><img src="images/door1.png"></a>
        <div class="door"><a href="make_a_deal_choose_2.html"><img src="images/door2.png"></a></div>
    </div>
    <!-- End door_container -->
</body>
</html>

(make_a_deal_choose1.html)

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Make a Deal</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body id="make_a_deal">
    <!-- Start text_container -->
    <div class="text_container">
        <div class="title">选择第1扇门的朋友:</div>
        <div class="text"> <p>你喜欢开玩笑,是能瞬间让气氛活跃的热场高手!</p>
        <p>你喜欢栽培别人。欣赏生活中那些简单的奢华,比如:素雅精致的餐具、镂花装饰的蜡烛,或是吃一口当地面包房手工烘焙的面包。</p>
        <p>你喜欢旅行,喜欢不同国度的异域文化。</p>
        <p>你真心的希望每个人都好,喜欢善意的营造友好氛围。需要谨记:如果你感觉需要帮助或支持时,一定要开口讲出来。</p>
        </div>
        <p>现在你可以选择打开第二扇门了</p>
    </div>
    <!-- End text_container -->
    
    <!-- Start door_container -->
    <div class="door_container">
        <div class="door"><a href="make_a_deal_choose_1.html"><img src="images/door1.png"></a>
        <div class="door"><a href="make_a_deal_choose_2.html"><img src="images/door2.png"></a></div>
    </div>
    <!-- End door_container -->
</body>
</html>

(make_a_deal_choose2.html)

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Make a Deal</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body id="make_a_deal">
    <!-- Start text_container -->
    <div class="text_container">
        <div class="title">选择第2扇门的朋友:</div>
        <div class="text">
        <p>你喜好干净、简单,讨厌任何花俏的装饰。对你而言那些都是画蛇添足,中看不中用的玩意。</p>
        <p>你属于很上进的那种人。私底下努力加码,工作中奋力拼杀,只为换得干净、完美的生活,但这么玩命,是否值得?</p>
        <p>难道你没有感觉到自己错过了什么吗?</p>
        <p>你把自己的关注点,统统放在了个人成就上,对自己的工作和职业颇感自豪。</p>
        <p>尽管你的职业生涯大多顺风顺水、发展的不错,或拥有数项学位证书,但你现在确实应该砸更多的时间给自己,你应该成为一个“人”、一个真正的自己。而不是一味去追寻世俗的成就,压抑原本的自我。</p>
        <p>生活就是要创造平衡,用色彩包裹自己,创造并经历那些最有意义的冒险。</p>
        <p>如果你认为自己已经走上了一条传统意义上的安逸之路,那么尝试转变,来场冒险之旅吧。你会惊讶于自己的表现。</p>
        </div>
        <p>现在你可以选择打开第一扇门了</p>
    </div>
    <!-- End text_container -->
    
    <!-- Start door_container -->
    <div class="door_container">
        <div class="door"><a href="make_a_deal_choose_1.html"><img src="images/door1.png"></a>
        <div class="door"><a href="make_a_deal_choose_2.html"><img src="images/door2.png"></a></div>
    </div>
    <!-- End door_container -->
</body>
</html>

Css:

(index.css)

body{
    background: #333;
    font-family: Futura, "Trebuchet MS", Arial, sans-serif;
}
.text_container{
    margin: 20px auto 50px;
    width: 700px;
    text-align: center;
    color: #fff8f1;
}
.text_container .title{
    font-size: 50px;
    margin-bottom: 30px;
}
.text_container .text{
    text-align: left;
    text-indent: 34px;
}
.door_container{
    text-align: center;
}
.door{
    display: inline-block;
    margin-left: 40px;
}

模仿Jennifer Dewalt | 180 Websites的网站 Day2

标签:

原文地址:http://www.cnblogs.com/JFDI/p/5515324.html

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