美文网首页
考试分析2.0:金山云静态页面

考试分析2.0:金山云静态页面

作者: Yisuo烟雨 | 来源:发表于2017-12-04 12:49 被阅读15次

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="top_nav">
        <div class="w clearfix">
            <ul class="fr clearfix">
                <li><a href="#">备案</a></li>
                <li><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
                <li><a href="#">控制台</a></li>
            </ul>
        </div>
    </div>
    <div class="nav">
        <div class="w clearfix">
            <div class="left fl">
                <img src="images/002.png" alt="">
            </div>
            <div class="right fr">
                <ul class="clearfix">
                    <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="banner">
        <div class="lb">
            <ul>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
            </ul>
        </div>
    </div>
    <div class="service">
        <div class="w">
            <div class="word">
                <h1>基础云服务</h1>
                <h6>竭力为您提供便捷、安全、稳定的云计算服务</h6>
            </div>
            <ul class="clearfix">
                <li><a href="#"><img src="../images/0015.png" alt=""></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 class="fangan">
        <div class="w">
            <div class="word">
                <h1>通用解决方案</h1>
                <h6>解决用户上云难题， 全方面满足用户的业务需求</h6>
            </div>
            <div class="jianzhan clearfix">
                <div class="left fl">
                </div>
                <div class="right fr">
                    <h1>通用建站</h1>
                    <p>针对各个行业用户的建站需求，我们专门打造了建站解决方案。旨为用户提供高性能、高稳定的云产品服务，并且根据您的业务需求进行弹性扩容。金山云提供高效贴心的备案服务以及全方位安全监控，让您省时省力省心，更专注于核心业务的发展。</p> 
                    <h6><a href="#">了解更多</a></h6>
                </div>
            </div>
        </div>
    </div> -->
    <div class="news">
        <div class="w  clearfix">
            <div class="pinpai fl">
                <h1>品牌事件</h1>
                <ul class="clearfix">
                    <li><a href="#">【05-09】 金山云完成C+轮融资 国内公有云市场...</a></li>
                    <li><a href="#">【05-09】 金山软件CEO张宏江：中国云市场规模...</a></li>
                    <li><a href="#">【04-13】 标杆先行 金山云开启区域卫生医疗云...</a></li>
                    <li><a href="#">【03-17】 金山云斩获TFC“金苹果”奖 成就年度云...</a></li>
                </ul>
            </div>
            <div class="chanpin fl">
                <h1>产品更新&公告</h1>
                <ul class="clearfix">
                    <li><a href="#">【05-27】 关于《中华人民共和国网络安全...</a></li>
                    <li><a href="#">【01-22】 金山云2017年春节假期安排公告...</a></li>
                    <li><a href="#">【01-19】 金山云上海40.jpg2区运营商网络割接...</a></li>
                    <li><a href="#">【01-03】 金山云北京6区机房网络底层服务...</a></li>
                </ul>
            </div>
            <div class="huodong fl">
                <h1>最新活动</h1>
                <img src="images/40.jpg" alt="">
                <ul class="clearfix">
                    <li><a href="#">【11-06】 有奖回访——金山云官网活动第...</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="bot">
        <div class="w clearfix">
            <div class="left fl clearfix">
                <dl>
                    <dt><a href="">产品与服务</a></dt>
                    <dd><a href="#">云服务器</a></dd>
                    <dd><a href="#">关系型数据库</a></dd>
                    <dd><a href="#">对象存储</a></dd>
                    <dd><a href="#">内容分发网络</a></dd>
                    <dd><a href="#">负载均衡</a></dd>
                    <dd><a href="#">缓存</a></dd>
                    <dd><a href="#">云物理主机</a></dd>
                </dl>
                <dl>
                    <dt>产品与服务</dt>
                    <dd><a href="#">云服务器</a></dd>
                    <dd><a href="#">关系型数据库</a></dd>
                    <dd><a href="#">对象存储</a></dd>
                    <dd><a href="#">内容分发网络</a></dd>
                    <dd><a href="#">负载均衡</a></dd>
                    <dd><a href="#">缓存</a></dd>
                    <dd><a href="#">云物理主机</a></dd>
                </dl>
                <dl>
                    <dt>产品与服务</dt>
                    <dd><a href="#">云服务器</a></dd>
                    <dd><a href="#">关系型数据库</a></dd>
                    <dd><a href="#">对象存储</a></dd>
                    <dd><a href="#">内容分发网络</a></dd>
                    <dd><a href="#">负载均衡</a></dd>
                    <dd><a href="#">缓存</a></dd>
                    <dd><a href="#">云物理主机</a></dd>
                </dl>
                <dl>
                    <dt>产品与服务</dt>
                    <dd><a href="#">云服务器</a></dd>
                    <dd><a href="#">关系型数据库</a></dd>
                    <dd><a href="#">对象存储</a></dd>
                    <dd><a href="#">内容分发网络</a></dd>
                    <dd><a href="#">负载均衡</a></dd>
                    <dd><a href="#">缓存</a></dd>
                    <dd><a href="#">云物理主机</a></dd>
                </dl>
            </div>
            <div class="right fr"></div>
        </div>
    </div>

</body>
</html>

common.css

.banner {
    height: 651px;
    width: 1347px;
    background: url(../images/003_02.jpg) no-repeat;
    background-size:100%;
    position: relative;
}

.banner .lb {
    position: absolute;
    top: 560px;
    left: 633px;
    width: 180px;
    height: 20px;
}

.banner .lb li {
    float: left;
    display: block;
    padding-right: 8px;
}

.banner .lb li a {
    display: block;
    width: 20px;
    height: 20px;
    background-color: #ccc;
    border-radius: 50%;
}
.banner .lb li:first-child a {
    background-color: #fff;
}

index.css

.top_nav {
    height: 33px;
    line-height: 33px;
    background-color: #dc363b;
}



.top_nav ul li {
    display: block;
    float: left;
    height: 33px;
    line-height: 33px;
} 

.top_nav ul li a {
    font-size: 12px;
    color: #fff;
    padding: 0 20px;
}

.top_nav ul li:nth-child(1) a,
.top_nav ul li:nth-child(2) a {
    border-right: 1px solid #fff;
}

.top_nav ul li:nth-child(4) a {
    padding: 6px 6px;
    border: 1px solid #fff;
    border-radius: 5px; 
}

.nav {
    height: 67px;
    line-height: 67px;
    background-color: #d8def1;
} 

.nav .right ul li {
    float: left;
    height: 67px;
    line-height: 67px;
    padding-right: 40px;
}

.nav .right ul li:first-child a {
    padding: 0 8px 22px;
    border-bottom: 2px solid #d02a2b;
}

.nav .right ul li:first-child a {
    color: #d02a2b;
} 

.nav .right ul li:last-child {
    padding-right: 0;
}

.nav .right ul li a {
    font-size: 16px;
    color: #323330;
}

.nav .right ul li:last-child a {
    padding-right: 0px;
}

.banner {
    height: 651px;
    width: 1347px;
    background: url(../images/003_02.jpg) no-repeat;
    background-size:100%;
    position: relative;
}

.banner .lb {
    position: absolute;
    top: 560px;
    left: 633px;
    width: 180px;
    height: 20px;
}

.banner .lb li {
    float: left;
    display: block;
    padding-right: 8px;
}

.banner .lb li a {
    display: block;
    width: 20px;
    height: 20px;
    background-color: #ccc;
    border-radius: 50%;
}
.banner .lb li:first-child a {
    background-color: #fff;
}

.service .w {
    margin-bottom: 139px;
}

.service .word h1,
.fangan .word h1 {
    display: block;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 30px;
}

.service .word h6,
.fangan .word h6 {
    display: block;
    height: 16px;
    line-height: 16px;
    font-size: 16px;
    color: #747777;
    text-align: center;
    padding: 30px 0;
}

.service ul li {
    display: block;
    width: 165px;
    height: 175px;
    line-height: 175px;
    background-color: #747777;
    float: left;
    margin-right: 1px;
    position: relative;
}

.fangan .jianzhan {
    height: 280px;
    line-height: 280px;
}
.fangan .jianzhan .left {
    height: 280px;
    width: 328px;
    background: url(../images/31.png);
    -webkit-background-size: 100%;
    background-size: 100%;
}

/*.fangan .jianzhan .right {
    height: 280px;
    width: 490px;
}

.fangan .jianzhan .right h1 {
    display: block;
     height: 45px;
     line-height: 45;
     text-align: left;

}

.fangan .jianzhan .right p {
    h
}
*/
.news {
    height: 345px;
}
.news .w .pinpai,
.news .w .chanpin,
.news .w .huodong {
    width: 290px;
    height: 140px;
    margin-right: 65px;
}

.news .w .huodong {
    margin-right: 0;
}

.news .w .pinpai h1,
.news .w .chanpin h1,
.news .w .huodong h1 {
    display: block;
    width: 96px;
    padding-bottom: 20px;
    border-bottom: 1px solid #99989b;
    margin-bottom: 30px;
}

.news .w .pinpai ul,
.news .w .chanpin ul,
 {
    padding-top: 30px;
}

.news .w .pinpai ul li,
.news .w .chanpin ul li,
.news .w .huodong ul li
 {
    display: block;
    height: 35px;
    line-height: 35px;

}

.news .w .pinpai ul li a,
.news .w .chanpin ul li a,
.news .w .huodong ul li a

 {
    color: #99989b;
}

.news .w .chanpin h1 {
    width: 180px
}

.news .w .huodong h1 {
    width: 96px;
}


.huodong ul li {
    padding-top: 24px;
}

.bot {
    height: 225px;
    background-color: #333232;  
}

.bot .left dl {
    float: left;
    padding-top: 40px;
    padding-bottom: 80px;
}



.bot .left dl dd a,
.bot .left dl dt a {
    color: #fff
}

.bot .left dl dt a {
    font-size: 20px;

}

UI设计图 金山云-全球高品质云服务专家.jpg

优点与不足

top_nav(logo) banner news 熟练
page-body 图片列表 不熟
page-footer 不熟

涉及知识点

position属性
bgimg属性
无序列表:dl,dt,dd
html文本属性

未涉及知识点

滑动门 精灵图 伸缩盒子
2D/3D转换
CSS3新属性

相关文章

网友评论

      本文标题：考试分析2.0:金山云静态页面

      本文链接：https://www.haomeiwen.com/subject/tqztixtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|考试分析2.0:金山云静态页面|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！