第一个仿的网页

最新推荐文章于 2024-10-03 20:14:40 发布
weixin_30675247
最新推荐文章于 2024-10-03 20:14:40 发布
阅读量137
点赞数
文章标签：前端后端 java ViewUI
原文链接：http://www.cnblogs.com/yzh97/p/7150263.html
版权
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>freecodecamp</title>
    <style>
        ul,li,div,a,span,img {
            padding: 0;
            margin: 0;
            border: 0;
        }
        html, body, div, span, a, li, td, th {
            font-family: "微软雅黑","Lato",sans-serif;
        }
        a {
            text-decoration: none;
        }

        ul {
            list-style: none;
        }
        body {
            width:100%;
            margin:0;
            padding:0;
        }

        .clear:after {
            content: '';
            visibility: hidden;
            clear: both;
        }

        .nav .nav-header {
            float:left;

        }
        .nav .nav-header a {
            color: green;
        }
        .nav {
            width:100%;
            overflow: hidden;
            position: fixed;
            background-color:  #FFFAFA;
            height:2.7em;
            padding:0 20px;
            left: 0;
            top: 0;


        }
        .nav .nav-main {
            margin-top:10px;
        }
        .nav .nav-container {
            width:400px;
            float: right;

            font-weight: bold;
            margin-left:-100%;


        }
        .nav .nav-container ul {
            overflow: hidden;

        }
        .nav .nav-container ul li  {
            float:left;
            margin-right:20px;


        }
        .nav .nav-container ul li a {
            color: #777;
        }

        .nav .nav-header {
            font-weight:bold;
            font-size:1.2em;
            color:darkgreen;
            margin-left:20px;

        }
        .nav .nav-container ul li:last-child a {
            color:orange;
        }
        .cover-text {
            margin-top: 40px;
            background: url(images/cov-background.png) repeat-x;
            padding: 20px;
            text-align: center;
            height:500px;
            color:#FFF;
        }

        .cover-text h1 {
            font-size:4em;

        }
        .cover-text p {
            font-size:2em;

        }
        .cover-text a {
            display: block;
            margin:0 auto;
            color: #FFF;
            width:50%;
            height:2em;
            font-size:1.5em;
            line-height:2em;
            text-align: center;
            background-color:orange;
            border-radius:.3em;

        }
        .cover-text a:last-child {
            background-color: transparent;
            border:1px solid #FFF;
            margin-top:20px;
        }
        .cover-text a:hover,.students-show a:hover {
            background: darkorange;
        }
        .cover-text a:last-child:hover {
            background-color:rgba(255,255,255,0.3)

        }
        .howitworks {
            width: 90%;
            margin: 0 auto;
            text-align: center;

        }
        .howitworks p {
            font-size:2.5em;
            color:inherit;
        }
        .howitworks ul {
            overflow: hidden;
            display: inline-block;
        }

        .howitworks li {
            float: left;
            display: inline-block;
            margin-right:50px;
        }
        .howitworks li p {
            font-size:1.2em;

        }
        .course {
            background: #f5faf7;
            text-align: center;
            overflow: hidden;
        }
        .course h3 {
            font-weight:normal;
            font-size:2em;
        }

        .course .course-tips {
            margin-left:20px;
            float: left;
        }
        .course .course-tips p {
            text-align: right;
            font-size:2em;
        }
        .course .course-cover {
            width:50%;
            overflow: hidden;
            margin:0 auto;
        }
        .course .course-how {
            width:40%;
            font-size:1.2em;
            float: right;
            text-align:left;
        }
        .course .course-how span {
            font-weight: bold;
        }

        .outclass-cover {
            width:100%;
            background: -o-linear-gradient(top, #FFF 20%,  #F0FFF0 100%);
            background: -ms-linear-gradient(top, #FFF 20%,     #F0FFF0 100%);
            background: linear-gradient(to bottom, #FFF 20%, #F0FFF0 100%);
        }
        .outclass-dev {
            width:60%;
            margin:0 auto;
            overflow: hidden;
        }
        .outclass-dev h3 {
            font-weight:normal;
            font-size:1.5em;
            text-align: center;
        }
        .outclass-dev .list-more {
            float: left;
        }
        .outclass-dev .list-less {
            float: right;
        }

        .outclass-dev li {
            margin:1em 0;
        }
        .outclass-dev li a {
            color: #4caf50;
            font-size: 1.2em;;
            font-weight:bold;
            line-height:1.2em;
        }
        .skills {
            height:400px;
            background:url(images/skiis.png) no-repeat center 40px;
        }
        .skills h2 {
            font-weight:normal;
            text-align: center;
        }
        .infobox {
            background-color: darkgreen;
            padding:10px 0;

        }
        .infobox p {
            margin:0 auto;
            width:70%;
            font-size:1.5em;
            font-weight:bold;
            color: #FFF;
        }
        .students-show {
            width:100%;
            margin:0 auto;
            padding:20px 0;
        }
        .students-show h2 {
            text-align: center;
            font-size:1.2em;
        }
        .students-show ul li {
            display: inline-block;
            text-align: center;
            width:33%;
        }

        .students-show ul li span {
            display: block;
            color: #777;
            font-size:1em;
            text-align: center;

        }
        .students-show h4 {
            font-size:1.4em;
        }
        .students-show a {
            display: block;
            margin:0 auto;
            text-align: center;
            font-size: 1.4em;
            color:#FFF;
            line-height:2em;
            height:2em;
            width:40%;
            background: orange;
            border-radius:.2em;
        }
        .students-show a:last-child {
            background-color:transparent ;
            color: limegreen;
            border:1px solid limegreen;
            margin-top:20px;

        }
        .students-show a:last-child:hover{
            background-color:rgba(255,255,240,0.3) ;
        }

        .footer {
            background-color:#b6a57d;

        }
        .footer .cover-row {
            overflow: hidden;
            width:80%;
            margin:0 auto;

        }
        .footer .row {
            float: left;
            margin-right:150px;
        }
        .footer span {
            display: block;
            font-size:1.2em;
            font-weight:bold;
            line-height:1em;
            margin:20px 0;
            color: #7b6c45;
        }
    </style>
</head>

<body>
    <div class="nav clear">
        <div class="nav-main">
            <div class="nav-header">
                <a>freecodecamp</a>
            </div>
            <div class="nav-container">
                <ul class="nav-ul">
                    <li ><a href="#">首页</a></li>
                    <li ><a href="#">课程</a></li>
                    <li ><a href="#">周边</a></li>
                    <li ><a href="#">聊天室</a></li>
                    <li ><a href="#">关于</a></li>
                    <li ><a href="#">登录注册</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="cover-text">
        <h1>开启你的软件工程师生涯</h1>
        <p>Learn to code and help nonprofits</p>
        <a href="#">开始闯关</a>
        <a href="#">免费注册登录</a>
    </div>

    <div class="howitworks">
        <p>
            玩转FreeCodeCamp
        </p>
        <ul>
            <li><img src="images/how-together.png" width='200'><p>加入全球四十万开发者社区</p></li>
            <li><img src="images/how-book.png" width='195'><p>一起编程闯关、完成挑战</p></li>
            <li><img src="images/how-bag.png" width='200'><p>构建解决现实问题的作品集</p></li>
            <li><img src="images/how-hand.png" width='180'><p>帮助非盈利组织开发项目</p></li>
        </ul>
    </div>
    <div class="course">
        <h3>课程大纲</h3>
        <div class="course-cover">
            <div class="course-tips">
                <p>前端开发(400小时)</p>
                <p>数据可视化(400小时)</p>
                <p>后端开发(400小时)</p>
                <p>非盈利项目(800小时)</p>
                <p>面试攻略(80小时)</p>
            </div>
            <div class="course-how">
                <p>学完所有的课程可以获得4个证书。 你的雇主可以随时在FCC上查询到这些证书。<span>FCC上所有的东西都是免费的</span>，证书也不例外。我们推荐按照顺序来闯关，但是你也可以自由跳跃。 前面三个证书每个需要400小时， 最后一个证书需要800小时，来为非盈利组织构建真实的项目。</p>
            </div>
        </div>
    </div>
    <div class="outclass-cover">
        <div class="outclass-dev">
            <div class="dev-container">
                <h3>课外提升</h3>
                <div class="list-more">
                    <ul>
                        <li><a href="#">Python向来以慢著称，为啥Instagram却唯独钟爱它？</a></li>
                        <li><a href="#">Laravel缔造者：我是如何高效工作的</a></li>
                        <li><a href="#">如何使用ValveResourceFormat提取Dota2游戏内资源</a></li>
                        <li><a href="#">我们如何使用HAProxy实现单机200万SSL连接</a></li>
                        <li><a href="#">Mysql 高可用 InnoDB Cluster 多节点搭建过程</a></li>
                        <li><a href="#">Java 微服务框架新选择：Spring 5</a></li>
                        <li><a href="#">Laravel源码分析——看一次Http请求到响应</a></li>
                    </ul>
                </div>
                <div class="list-less">
                    <ul>
                        <li><a>Slack的TypeScript之路</a></li>
                    </ul>
                </div>
            </div>
    </div>

    </div>
    <div class="skills">
            <h2>技术栈</h2>
    </div>
    <div class="infobox">
        <p><i>Free Code Camp 已经被证明是获取编程工作的最有效路径，事实上，没人完成了所有课程，因为他们都在完成之前就找到了工作。</i></p>
    </div>
    <div class="students-show">
        <div class="row">
            <h2>学员案例</h2>
            <div>
                <ul>
                    <li><img src="images/woman.jpg" width="200px"><span>我是一个家庭妇女</span><span>通过FreeCodeCamp</span><span>我设计了很多简洁优雅的界面</span><span>这让我获得了一份网页设计师的工作</span><h4>-- Meta Hirschl</h4></li>
                    <li><img src="images/black.jpg" width="200px"><span>我是一个退伍伤残老兵</span><span>通过FreeCodeCamp</span><span>我制作了很多复杂交互的UI</span><span>这让我获得了一份Web前端工程师的工作</span><h4>--Brian Grant</h4></li>
                    <li><img src="images/white.jpg" width="200px"><span>我是一个大叔</span><span>通过FreeCodeCamp</span><span>我开发了很多功能复杂而且稳定的API</span><span>这让我获得了一份Web后端工程师工作</span><h4>-- Maxim Orlov</h4></li>

                </ul>
            </div>
            <a href="#">开始闯关</a>
            <a href="#">倾听更多学员的心声</a>
        </div>
    </div>
    <div class="footer">
        <div class="cover-row">
            <div class="row"><span>freeCodeCamp</span><span>苏州猿生态信息科技有限公司</span><span>苏ICP备16029531号</span></div>
            <div class="row"><span><a>关于我们</a></span><span><a>常见问题(FAQs)</a></span><span><a>学术诚信守则</a></span></div>
            <div class="row"><span><a>联系我们</a></span><span><a>隐私策略</a></span><span><a>行为准则</a></span><span><a>服务条款</a></span></div>
            <div class="row"><span>社交媒体</span><span></span><span></span><span></span><span></span></div>
        </div>


    </div>

</body>
</html>



-----------------------------------------------------------------------------------------------------------------------
花了我一个上午的时间，终于仿完了。有些items太难找了，有的直接没找，有的截图。