云道静态首页练习题

代码地址：https://github.com/sandraryan/practise/tree/master/%E9%9D%99%E6%80%81%E9%A1%B5%E9%9D%A2/%E4%BA%91%E9%81%93%E9%9D%99%E6%80%81%E9%A6%96%E9%A1%B5

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>云道</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <!-- header -->
    <div class="header">
        <div class="header-content">
            <img src="images/logo.gif">
            <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>
        <img src="images/banner.gif">
    </div>
    <!-- service -->
    <div class="service">
        <h3>我们的服务</h3>
        <p class="slogan">PROGRAM HIGHLIGHTS</p>
        <p class="intro">shopcmd云道，国内领先的独立电商解决方案及全渠道营销平台。完整的产品体系，简约的系统，个性化前端，全覆盖多渠道营销体系... 我们致力于打造一个服务于品牌商城/独立电商的完整生态，让企业的独立电商之路变得更简单，也更有价值！ </p>
        <div class="sales">
            <img src="images/service1.gif">
            <h5>我是卖家</h5>
            <p>shopcmd云电商解决方案，我们不仅仅是领先的独立商城建站系统。我们 从互联网时代品牌建设和品牌营销的全 新视角，赋予了品牌商城及独立电商更 大的生存空间和存在价值！</p>
            <input type="button" value="我要建站">
        </div>
        <div class="promotion">
            <img src="images/service2.gif">
            <h5>我要营销</h5>
            <p>shopcmd云电商解决方案，我们不仅仅是领先的独立商城建站系统。我们 从互联网时代品牌建设和品牌营销的全 新视角，赋予了品牌商城及独立电商更 大的生存空间和存在价值！</p>
            <input type="button" value="我要推广">
        </div>
        <div class="media">
            <img src="images/service3.gif">
            <h5>媒体合作</h5>
            <p>shopcmd云电商解决方案，我们不仅仅是领先的独立商城建站系统。我们 从互联网时代品牌建设和品牌营销的全 新视角，赋予了品牌商城及独立电商更 大的生存空间和存在价值！</p>
            <input type="button" value="我要合作">
        </div>
    </div>
    <!-- case -->
    <div class="case">
        <h3>经典案例</h3>
        <p> THE CLASSICAL CASES</p>
        <img class="side" src="images/left.gif" >
        <img class="cases" src="images/case1.gif" >
        <img class="cases" src="images/case2.gif" >
        <img class="cases"  src="images/case3.gif" >
        <img class="side" src="images/right.gif" >
    </div>

    <!--related -->
    <div class="related">
        <h3>合作媒体</h3>
        <p> RELATED MEDIA</p>
        <div class="links">
            <ul>
                <li><a href=""> <img src="images/tb.gif" alt=""></a></li>
                <li><a href=""> <img src="images/ali.gif" alt=""></a></li>
                <li><a href=""> <img src="images/zks.gif" alt=""></a></li>
                <li><a href=""> <img src="images/jd.gif" alt=""></a></li>
                <li><a href=""> <img src="images/shopex.gif" alt=""></a></li>
            </ul>
        </div>
        <div class="links">
            <ul>
                <li><a href=""> <img src="images/tb.gif" alt=""></a></li>
                <li><a href=""> <img src="images/ali.gif" alt=""></a></li>
                <li><a href=""> <img src="images/zks.gif" alt=""></a></li>
                <li><a href=""> <img src="images/jd.gif" alt=""></a></li>
                <li><a href=""> <img src="images/shopex.gif" alt=""></a></li>
            </ul>
            </div>
        <div class="links">
            <ul>
                <li><a href=""> <img src="images/tb.gif" alt=""></a></li>
                <li><a href=""> <img src="images/ali.gif" alt=""></a></li>
                <li><a href=""> <img src="images/zks.gif" alt=""></a></li>
                <li><a href=""> <img src="images/jd.gif" alt=""></a></li>
                <li><a href=""> <img src="images/shopex.gif" alt=""></a></li>
            </ul>
            </div>

    </div>
</body>
</html>

css

body {
    margin: 0;
    padding: 0;
}

/* header */
.header {
    height: 80px;
}
.header-content {
    width: 80%;
    height: 80px;
    margin: 0 auto;
}
.header-content img {
    float: left;
    height: 80px;
    margin-left: 20px;
    margin-right: 80px;
}
.header-content ul {
    margin: 0 auto;
    list-style: none;
}
.header-content ul li {
    text-decoration: none;
    float: left;
}
.header-content ul li a {
    width: 80px;
    height: 80px;
    display: inline-block;
    text-decoration: none;
    color: black;
    margin: 0 5px;
    text-align: center;
    line-height: 80px;
    font-size: 16px;
}
.header-content ul li a:hover {
    color: blue;
}

/* service */
.service {
    width: 80%;
    margin: 0 auto;
    height: 650px;
}
.service h3 {
    text-align: center;
    font-size: 26px;
    margin-bottom: 0;
}
.service .slogan {
    text-align: center;
    margin-top: 2px;

}
.service .intro {
    font-size: 12px;
    color: gray;
    text-align: center;
    line-height: 26px;
}
.sales, .promotion, .media {
    width: 300px;
    height: 500px;
    border: 1px solid lightgray;
    float: left;
    margin: 10px;
}
.sales img, .promotion img, .media img {
    width: 250px;
    height: 130px;
    margin: 30px 25px;
}
.sales h5, .promotion h5, .media h5 {
    text-align: center;
    font-size: 18px;
    font-weight: 400;
}
.sales p, .promotion p, .media p {
    text-align: center;
    font-size: 12px;
    color: gray;
    line-height: 26px;
    padding: 25px;
}
.sales input, .promotion input, .media input{
    display: block;
    width: 140px;
    height: 40px;
    margin: 0 80px;
    background-color: white;
    border: 1px solid orange;
    border-radius: 10px;
}
.sales input:hover, .promotion input:hover, .media input:hover{
    background-color: orange;
    transition: 1s;
}

/* case */
.case{
    width: 90%;
    margin: 50px auto;
    clear: both;
}
.case h3 {
    text-align: center;
    font-size: 26px;
    margin-bottom: 0;
}
.case p{
    text-align: center;
    margin-top: 2px;
}
.case .cases{
    width: 300px;
    height: 200px;
    margin: 5px 10px;
}
.case .side {
    width: 60px;
    height: 50px;
    margin: 75px 0;
}
/* media */
.related {
    width: 80%;
    margin: 0 auto;
}
.related h3 {
    text-align: center;
    font-size: 26px;
    margin-bottom: 0;
}
.related p{
    text-align: center;
    margin-top: 2px;
}
.links {
    width: 100%;
    border: 1px dotted gray;
    height: 100px;
    margin: 10px;
}
.related ul li{
    text-decoration: none;
    list-style: none;
    margin: 0 auto;
}
.related ul li a{
    /* display: inline-block; */
    float: left;
    text-decoration: none;
    margin: 10px;
    padding:9px 40px;
}
.related ul li img{
    width: 80px;
    height: 50px;
}

原文地址：https://www.cnblogs.com/sandraryan/p/10868699.html

时间： 2024-10-12 16:07:54

云道静态首页练习题的相关文章

新能力| 云开发静态网站托管能力正式上线

随着云开发用户的数量不断增多,开发者们对于云开发的使用程度越来越深,不少开发者提出了疑问,云开发除了支持小程序以外,还能支持其他平台么? 答案是肯定的! 云开发刚刚正式发布了静态网站托管能力,帮助开发者们解决 Web 网站托管遇见的种种问题. 为什么要使用静态网站托管能力? 云开发静态网站托管能力为开发者提供便捷.稳定.高拓展性的静态网站托管能力,帮助企业和个人一键部署网站应用,轻松为自己的业务加上稳定.高并发.快速访问等 Buff. 相比于传统的网站托管服务,云开发静态网站托管服务无需开发者自

MVC4.0 如何设置默认静态首页index.shtml

1.不启用二级域名情况下(www.xxx.com)下设置默认静态首页index.shtml 通过配置IIS的默认文档,设置默认首页地址然后在MVC的路由中写入忽略默认路由代码 routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.IgnoreRoute(""); routes.MapRoute( name: "Default", url: "{controller}/{act

几道基础知识练习题

用户输入一个数字num ,打印一个边长为num的正方形 num = int(input("Enter a number >>>:")) a = num + 1 for i in range(1,a): if i == 1 or i == (a-1): print("#\t"*(a-1)) else: print("#"+(" \t" * (a-2))+"

如何在云开发静态托管中使用Jekyll

如何在云开发静态托管中使用Jekyll 介绍 Jekyll 是一个简单的博客形态的静态站点生产机器,通过它,我们可以搭建一个完整的可发布的静态博客网站. Jekyll 也可以运行在 GitHub Page 上,但是有时,我么需要忍受Github Page龟速的问题,所以,这篇文章将讲讲如何在腾讯云云开发的静态网站托管中,部署我们的Jekyll博客站点. 安装Jekyll Jekyll官方推荐在Mac OS的环境下使用,因此,以下的介绍,是基于Mac OS 首先,需要确保你的机器上有如下环境: R

接近50道经典SQL练习题，附建表SQL解题SQL

说明本文章整理了47道常见sql联系题,包括建表语句,表结构,习题列表,解题答案都涵盖在本文章内.文末提供了所用SQL脚本下载链接.所有解题答案都是本人自己写的,广大读者如果在阅读使用中,有任何问题欢迎留言,对我写的有问题的,欢迎指正,谢谢. 数据库:oracle11g 表结构可使用plsql-工具-导入表,导入如下sql脚本. 表结构与数据.sql 学生表 Student(SId,Sname,Sage,Ssex)SId 学生编号,Sname 学生姓名,Sage 出生年月,Ssex 学生性别

phpcmsv9生成静态首页的文件名和目录如何改

说下解决办法在\\phpcms\\modules\\content\\classes\\下html.class.php 查找字符"更新首页"然后修改这里就OK了 $file = PHPCMS_PATH.\'index.html\';

某站点静态首页的实现小结

来源:http://www.ido321.com/842.html header部分的实现 1: <div class="top"> 2: <ul class="topul"> 3: <li id="time"><a href="#">9月25日周四</a></li> 4: <li><a href="#">联系

某网站静态首页的实现小结

来源:http://www.ido321.com/842.html header部分的实现 1: <div class="top"> 2: <ul class="topul"> 3: <li id="time"><a href="#">9月25日周四</a></li> 4: <li><a href="#">联系

计科院静态首页

链接:https://pan.baidu.com/s/11QDHQkUygEJaGXPIrfj1HA 提取码:vytl 复制这段内容后打开百度网盘手机App,操作更方便哦通过参考网页源代码和审查元素获取该网页图片资源进行编写出的此静态网页效果展示: 原文地址:https://www.cnblogs.com/CC101/p/10564201.html