HTML（满屋花）

梧桐舒适

于 2024-09-10 21:04:21 发布

阅读量311

点赞数 14

分类专栏： HTML 文章标签： html 前端

本文链接：https://blog.csdn.net/2301_81256766/article/details/142108150

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>慢芜湖满屋花</title>
    <!-- 外部设置Css样式 -->
    <link rel="stylesheet" href="css/top.css">
    <link rel="stylesheet" href="css/right.css">
    <link rel="stylesheet" href="css/left.css">
</head>
<body>
<!-- 整体 -->
 <div id="main"> 

                      <div id="top">
                        <!-- 导航栏 -->
                        <div id="banner"></div>
                        <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>
                            <li><a href="#">支付方式</a></li>
                        </ul>
                      </div>
                        <!-- 左边 -->
                      <div id="left">
                        <!-- id选择器，只有唯一一个名字 -->
                        <div id="login"></div>
                             <div id="user">         
                               <!-- class选择器，可以有多个，用同样的样式 -->     
                            用户：<input type="text" class="mima"><br>
                            密码：<input type="password" class="mima"><br>
                            <input type="button" value="登录" class="zhu">
                            <input type="reset" value="注册" class="zhu">
                            <a href="#">忘记密码</a>
                        </div>
                            
                               <div id="category"></div>
                                <div id="xianhua">
                               <h4>用途</h4>
                               <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>
                                <li><a href="#">开业花篮</a></li>
                                <li><a href="#">会议用花</a></li>
                               </ul>

                               <h4>花材</h4>
                               <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>
                                <li><a href="#">扶朗</a></li>
                                <li><a href="#">剑兰</a></li>
                               </ul>

                               <h4>价格</h4>
                               <ul>
                                <li><a href="#">100-200元</a></li>
                                <li><a href="#">200-300元</a></li>
                                <li><a href="#">300-400元</a></li>
                                <li><a href="#">400-500元</a></li>
                                <li><a href="#">500-600元</a></li>
                                <li><a href="#">600-800元</a></li>
                                <li><a href="#">800元以上</a></li>
                               </ul>
                            </div>
                      </div>


                      <!-- 右边 -->
                      <div id="right">
                      <div id="right1">
                           <div id="latest"></div>
                           <img src="./imgs/new1.jpg" alt="">
                           <img src="./imgs/new2.jpg" alt="">
                           <img src="./imgs/new3.jpg" alt="">
                      </div>

                      <div id="right2">
                               <div id="recommend"></div>
                            <ul>
                               <li><img src="./imgs/flower1.jpg" alt=""><a href="#"><br>幸福的味道</a><br>￥288元</li>
                               <li><img src="./imgs/flower2.jpg" alt=""><a href="#"><br>阳光守护你</a><br>￥300元</li>
                               <li><img src="./imgs/flower3.jpg" alt=""><a href="#"><br>温情永远</a><br>￥268元</li>
                               <li><img src="./imgs/flower4.jpg" alt=""><a href="#"><br>爱无界</a><br>￥318元</li>
                               <li><img src="./imgs/flower5.jpg" alt=""><a href="#"><br>亲亲宝贝</a><br>￥368元</li>
                               <li><img src="./imgs/flower6.jpg" alt=""><a href="#"><br>相信是缘</a><br>￥188元</li>
                               <li><img src="./imgs/flower7.jpg" alt=""><a href="#"><br>水晶童话</a><br>￥198元</li>
                               <li><img src="./imgs/flower8.jpg" alt=""><a href="#"><br>天使之爱</a><br>￥268元</li>
                             </ul>
                      </div>

                             <div id="right3">
                                <div id="new"></div>
                                <ul>
                                <li><img src="./imgs/flower9.jpg" alt=""><a href="#"><br>亲亲宝贝</a></li>
</li>                           <li><img src="./imgs/flower10.jpg" alt=""><a href="#"><br>相信是缘</a></li>
                                <li><img src="./imgs/flower11.jpg" alt=""><a href="#"><br>水晶童话</a></li>
                                <li><img src="./imgs/flower12.jpg" alt=""><a href="#"><br>天使之爱</a></li>
                            </ul> 
                        </div>
                              
                           <div id="right4">
                                  <div id="tips"></div>
                                  <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>
                                    <li><a href="#">种花与送花</a></li>
                                    <li><a href="#">手捧一束鲜花的等待</a></li>
                                  </ul>
                           </div>
                    </div>
 </div>
</body>
</html>

/* 整体布局，导航栏 */
/* 设置所有标签统一的样式 */
*{
    /* 外边距置零 */
    margin:0px auto;
    /* 内边距置零 */
    padding: 0px;
    /* 字体大小设置 */
    font-size: 12px;
    color: black;
    /* 边框 */
    border: none;

}
/* 背景颜色 */
body{
    background-color: pink;
}
#main{
    width: 700px;
}

/* 去除下划线 */
a{
    text-decoration: none;
}
/* 去除列表符号 */
li{
    list-style: none;
}
    
#banner{
    width: 700px;
    height: 120px;
    background-image: url(../imgs/banner.jpg);
}
#top{
    width: 700px;
}
#top a{
    width: 100px;
    /* 居中 */
    text-align: center;
    line-height: 33px;
    background: url(../imgs/button1.jpg) no-repeat;
    float: left;
}
#top a:hover{
    background-image: url(../imgs/button1_bg.jpg);
}
/* :hover 是悬停在文字上的样式 */
#xianhua a:hover,#right2 a:hover,#right3 a:hover,#right4 a:hover{
    color: aquamarine;
}

//左边的css样式
#left{
    width: 180px;
    margin-top: 2px;
    background-color: white;
    float: left;
}
#user{
    width: 180px;
    margin-left: 20px;

}
#login{
    width: 180px;
    height: 50px;
    background-image: url(../imgs/login.jpg);
}
.mima{
    width: 110px;
    padding-top: 5px;
    border-bottom: 1px solid black;
}
.zhu{
    margin-top: 5px;
    border: 1px solid black;
    border-radius: 5px 5px;
}
.zhu:hover{
    background-color: aqua;

}
/* 宽高指图片的宽高 */
#category{
    width: 180px;
    height: 50px;
    background-image: url(../imgs/category.jpg);
}
#xianhua{
    margin-top: 10px;
}
#xianhua h4{
    width: 150px;
    margin-top: 5px;
    background-color: pink;
}
#xianhua a{
    padding-left: 40px;
    background: url(../imgs/icon1.gif) no-repeat 1px;
    background-position: 20px 5px;
}
#xianhua li{
    width: 150px;
    margin-top: 10px;
    border-bottom: 1px dashed black;

}

//右边的css样式
#right{
    width: 518px;
    float: left;
    margin-left: 2px;
}
#right1{
    width: 518px;
    height: 150px;
    float: left;
    margin-top: 2px;
    background-color: white;
}
#latest{
    width: 518px;
    height: 33px;
    background-image: url(../imgs/latest.jpg);
}
#right2{
    width: 518px;
    float: left;
    margin-top: 2px;
    background-color: white;
}
#right2 li{
    margin-top: 10px;
    margin-left: 20px;
    text-align: center;
    color: grey;
     float: left;
}
#recommend{
    width: 518px;
    height: 33px;
    background-image: url(../imgs/recommend.jpg);
}
#right3{
    width: 518px;
     height: 180px; 
     float: left;
     margin-top: 2px;
    background-color: white;
}
#right3 li{
    margin-top: 5px;
    margin-left: 20px;
    text-align: center;
     float: left;
}
#new{
    width: 518px;
    height: 33px;
    background-image: url(../imgs/new.jpg);
}
#right4{
    width: 518px;
     height: 180px; 
     float: left;
     margin-top: 2px;
    background-color: white;
}
#right4 a{
    width: 200px;
    margin-top: 10px;
    margin-left: 40px;
     float: left;
     background: url(../imgs/icon2.gif) no-repeat 1px;
     padding-left: 15px;
}
#tips{
    width: 518px;
    height: 33px;
    background-image: url(../imgs/tips.jpg);
}