2018-11-01自己写的静态网页

作者: 叶叶阿姨 | 来源:发表于2018-11-01 20:49 被阅读0次

2018-11-01自己写的静态网页
网页
关于网站的一些知识
Linux - 01-网站服务基本概念
day43课堂笔记(HTTP以及Nginx)
day42 HTTP以及Nginx
HTTP&NGINX
爬虫精进(八) ------ selenium
动态网页和静态网页
Day-43 http服务介绍

线上商店的静态首页

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>老叶线上花店</title>
        <link rel="icon" type="image/ico" href="img/logo.ico"/>
        <style type="text/css">
            #div1{
                background-color: white;
                height: 500px;
                
            }
            #div2{
                background-color: white;
                height: 50px;
                color: darkgray;
                font-size: 35px;
                border-bottom: solid darkgray 2px;
            }
            #div3{
                background-color:white;
                height: 150px;
                position: relative;
                
            }
            #div4{
                background-color: white;
                height: 150px;
                width: 150px;
                float: right;
                position: absolute;
                top: 610px;
                right: 1px;
            }
            #p1{
                color: darkgray;
                font-size: 150px;
                float: left;
                position: absolute;
                top: -180px;
                
            }
            a:link{
                color:rgba(180,180,180,0.6);
            }
            a:hover{
                color: #000000;
                font-size: 20px;
            }
            a:active{
                color:crimson;
                font-size: 20px;
            }
            
        </style>
    </head>
    <body>
        <div id="div1"></div>
        <div id="div2">
            <p>Android Marketplace</p>
        </div>
        <div id="div3">
            <p id="p1">老叶叶材</p>
        </div>
        <div id="div4">
            <div id="div4.5"style="background-color: white;height: 30px;">
                <a href="" style="text-decoration: none;">商店介绍</a>
            </div>
            <div id="div4.1"style="background-color: white;height: 30px;">
                <a href="" style="text-decoration: none;">全部商品</a>
            </div>
            <div id="div4.2"style="background-color: white;height: 30px;">
                <a href="" style="text-decoration: none;">成品花</a>
            </div>
            <div id="div4.3"style="background-color: white;height: 30px;">
                <a href="叶材类页面.html" style="text-decoration: none;">叶材</a>
            </div>
            <div id="div4.4"style="background-color: white;height: 30px;">
                <a href="" style="text-decoration: none;">花材</a>
            </div>
            
        </div>
    </body>
</html>

跳转到叶材的页面(静态的)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>叶材类</title>
        <!-- 导入样式表 -->
        <link rel="stylesheet" type="text/css" href="叶材类页面样式表.css"/>
        <!-- 导入图标 -->
        <link rel="icon" type="image/ico" href="img/logo.ico"/>
        
    </head>
    <body>
        <!-- ===顶部标题区=== -->
        <div id="top">
            <p>老叶叶材</p>
        </div>
        <!-- =====顶部提示区=== -->
        <div id="bottom">
            <p>----------------------&emsp;商店地址:成都市锦江区三圣乡万福花卉产业园A1-4-5&emsp;----------------------</p>
        </div>
        <!-- ====中间=== -->
        <div id="middle">
    
            <!-- ===中间商品区=== -->
            <div id="middle1">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <!-- ===中间导航区=== -->
            <div id="navigation">
                <div>
                    <a>全部分类</a>
                </div>
                <div>
                    <a>精品类</a>
                </div>
                <div>
                    <a>树枝类</a>
                </div>
                <div>
                    <a>松枝类</a>
                </div>
                <div>
                    <a>绿叶类</a>
                </div>
                <div>
                    <a>红叶类</a>
                </div>
                <div>
                    <a>草叶类</a>
                </div>
                <div>
                    <a>回到首页</a>
                </div>
            </div>
            
        </div>
        
    </body>
</html>

叶材样式表(css)

/* ========通用=========== */
*{
    margin: 0px;
    border: 0px;
    padding: 0px;
    position: relative;
}

/* ================顶部标题========== */
#top{
    height: 90px;
    background: white;
    
}
#top p{
    font-size: 60px;
    color: #000000;
    text-align: center;
    line-height: 90px;
    font-weight: 300;
}
/* =============顶部提示区========== */
#bottom{
    height: 30px;
    width: 100%;
    border-top: solid gray 1px;
    border-bottom: solid gray 1px;
}
#bottom p{
    font-size: 10px;
    color: #000000;
    text-align: center;
    line-height: 30px;
    font-weight: 100;
}
/* ============中间========== */
#middle{
    float: left;
    height: 700px;
    width: 100%;
}
/* ================中间商品区========== */
#middle1{
    float: right;
    height: 700px;
    width: 90%;
    
    
}
#middle1 div{
    float: left;
    height: 330px;
    width: 300px;
    background-color: #A9A9A9;
    border: solid white 10px;
}

/* ================中间导航区========== */
#navigation{
    /* 高度和宽度 */
    
    height: 700px;
    width: 9.8%;
    /* 导航区边框 */
    border-right: solid gray 1px;
    border-left: solid gray 1px;
    
}
#navigation div{
    
    height: 12.4%;
    width: 100%;
    border-bottom: solid gray 1px;
    /* 水平居中 */
    text-align: center;
    /* 垂直居中 */
    line-height: 12.4%;
    
}
#navigation div a{
    background-color: #FFFFFF;
    /* 水平居中 */
    text-align: center;
    /* 垂直居中 */
    line-height: 12.4%;
    font-size: 20px;
    font-weight: 100;
    
}

未完待续～