• 求一份网页设计结课大作业，要求用到html，css，javascript，的知识

    👨‍🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。

    🎀 精彩专栏推荐👇🏻👇🏻👇🏻

    🧡 【作者主页——🔥获取更多优质源码】
    🧡 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】

    文章目录📂

    一、网站题目👨‍🎓

    🥧 美食网页介绍、🍰甜品蛋糕、🦐地方美食小吃文化、🍺餐饮文化、等网站的设计与制作。

    二、网站描述✍️

    🍧美食主题网站 主要对各种美食进行展示，让浏览者清晰地了解到各种美食的详细信息，便于浏览者进行选择。该模块的左侧有个美食分类，用户可以选择自己喜欢的种类，当点击种类后，就会在右侧出现该分类下的各种美食，用户可以点击自己感兴趣的食品，从而看到它的具体信息。它的具体信息包括配料、产地及它的一些功能，使用户对该食品有着全面的认识。

    三、网站介绍📚

    📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

    📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

    📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

    📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

    📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
    其中：
    （1）📜html文件包含：其中index.html是首页、其他html为二级页面；
    （2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
    （3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

    四、网站效果🌐

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    五、代码实现 🪓

    HTML结构代码🧱

    
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>中韩美食网title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
head>

<body>
<div class="header">
    	<div class="header-zj">
            <div class="login"><a href="zhuce.html">注册会员a> | <a href="login.html">登陆入口a>div>
            <div class="sc">设为首页 | 加入收藏夹 | <a href="contact.html">联系我们a>div>
            <div class="lang">中文 | 韩语div>
        div>
    div>
<div id="wrap">
    <div id="nav">
        <div class="logo"><img src="img/logo.png" width="100%" height="100%"/>div>
        <div class="nav-1">
            <select class="nav_op">
            	<option>青岛option>
                <option>北京option>
                <option>上海option>
                <option>广州option>
                <option>天津option>
                <option>沈阳option>
                <option>大连option>
                <option>重庆option>
                <option>西安option>
                <option>成都option>
                <option>燕郊option>
                <option>延边option>
                <option>烟台option>
                <option>威海option>
            select>
            div>
            <div class="search">
            	<div id="search_box"> 
                <form id="search_form" method="post" action="#"> 
                    <input type="text" id="s" value="输入您想要的商品" class="swap_value" /> 
                    <input type="image" src="img/soso.png" width="25px" height="25px" id="go" alt="Search" title="Search" /> 
                form> 
        		div> 
        	div>
    div>
    
      <div id="nav-nav">
      <ul id="nav">
            <li><a href="#">网站首页a>li>
            
            <li><a href="#">快餐送餐a>
             <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>
            li>
            
            <li><a href="#">特色饭店a>
             <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>
            li>
            
            <li><a href="#">休闲娱乐a>
             <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>
            li>
            
            <li><a href="#">综合超市a>
             <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>
            li>
            <li><a href="#">旅游宾馆a>
             <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>
            li>
            
            
            <li><a href="#">订制礼品a>
             <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>
            li>
            
            <li><a href="#">服务培训a>
             <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>
            li>
            
            <li><a href="#">医院其他a>
             <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>
            li>
    	ul>             
      div>
  <div id="mainbody">
  <div class="banner">
      	<table width="100%" border="0" cellspacing="0" class="b-pic">
        	<tr>
            	<td width="20" class="pic"><a href="cpxq.html"><img src="img/1.png" width="100%" height="100%"/>a>td>
                <td width="20" class="pic"><a href="cpxq.html"><img src="img/2.png" width="100%" height="100%"/>a>td>
                <td width="20" class="pic"><a href="cpxq.html"><img src="img/3.png" width="100%" height="100%"/>a>td>
                <td width="20" class="pic"><a href="cpxq.html"><img src="img/4.png" width="100%" height="100%"/>a>td>
                <td width="20" class="pic"><a href="cpxq.html"><img src="img/5.png" width="100%" height="100%"/>a>td>
            tr>
            <tr>
            	<td width="20" class="pic"><a href="cpxq.html"><img src="img/6.png" width="100%" height="100%"/>a>td>
                <td width="20" class="pic"><a href="cpxq.html"><img src="img/7.png" width="100%" height="100%"/>a>td>
                <td width="20" class="pic"><a href="cpxq.html"><img src="img/8.png" width="100%" height="100%"/>a>td>
                <td width="20" class="pic"><a href="cpxq.html"><img src="img/9.png" width="100%" height="100%"/>a>td>
                <td width="20" class="pic"><a href="cpxq.html"><img src="img/10.png" width="100%" height="100%"/>a>td>
            tr>
            <tr>
            	<td width="20" class="pic"><a href="cpxq.html"><img src="img/11.png" width="100%" height="100%"/>a>td>
                <td width="20" class="pic"><a href="cpxq.html"><img src="img/12.png" width="100%" height="100%"/>a>td>
                <td width="20" class="pic"><a href="cpxq.html"><img src="img/13.png" width="100%" height="100%"/>a>td>
                <td width="20" class="pic"><a href="cpxq.html"><img src="img/14.png" width="100%" height="100%"/>a>td>
                <td width="20" class="pic"><a href="cpxq.html"><img src="img/15.png" width="100%" height="100%"/>a>td>
            tr>
            <tr>
            	<td width="20" class="pic"><a href="cpxq.html"><img src="img/1.png" width="100%" height="100%"/>a>td>
                <td width="20" class="pic"><a href="cpxq.html"><img src="img/2.png" width="100%" height="100%"/>a>td>
                <td width="20" class="pic"><a href="cpxq.html"><img src="img/3.png" width="100%" height="100%"/>a>td>
                <td width="20" class="pic"><a href="cpxq.html"><img src="img/4.png" width="100%" height="100%"/>a>td>
                <td width="20" class="pic"><a href="cpxq.html"><img src="img/5.png" width="100%" height="100%"/>a>td>
            tr>
        table>
      div>
    
    
  div>
  <h4 class="text"><a href="fl.html">快餐送餐a>h4>
  <div id="main1">
    <div class="con">
            <a href="dc.html"><div class="left1">
            	<div class="pic"><img src="img/7.gif" width="100%"/>div>
                <p>双鱼座文艺烤鱼<br />星级：★★★★<br /><span>99.00元<br />月售1000单span>p>
            div>a>
            <a href="dc.html"><div class="left1">
            	<div class="pic"><img src="img/8.gif" width="100%"/>div>
                <p>双鱼座文艺烤鱼<br />星级：★★★★<br /><span>99.00元<br />月售1000单span>p>
            div>a>
            <a href="dc.html"><div class="left1">
            	<div class="pic"><img src="img/9.gif" width="100%"/>div>
                <p>双鱼座文艺烤鱼<br />星级：★★★★<br /><span>99.00元<br />月售1000单span>p>
            div>a>
            <a href="dc.html"><div class="left1">
                <div class="pic"><img src="img/10.gif" width="100%"/>div>
                    <p>双鱼座文艺烤鱼<br />星级：★★★★<br /><span>99.00元<br />月售1000单span>p>
            div>a>
            <a href="dc.html"><div class="left1">
                <div class="pic"><img src="img/1.gif" width="100%"/>div>
                    <p>双鱼座文艺烤鱼<br />星级：★★★★<br /><span>99.00元<br />月售1000单span>p>
            div>a>
            <a href="dc.html"><div class="left2">
                <div class="pic"><img src="img/2.gif" width="100%"/>div>
                    <p>双鱼座文艺烤鱼<br />星级：★★★★<br /><span>99.00元<br />月售1000单span>p>
            div>a>
        div>
  div>
  <h4 class="text"><a href="fl.html">特色饭店a>h4>
  <div id="main1">
    <div class="con">
            <a href="dc.html"><div class="left1">
            	<div class="pic"><img src="img/7.gif" width="100%"/>div>
                <p>双鱼座文艺烤鱼<br />星级：★★★★<br /><span>100元起span>p>
            div>a>
            <a href="dc.html"><div class="left1">
            	<div class="pic"><img src="img/8.gif" width="100%"/>div>
                <p>双鱼座文艺烤鱼<br />星级：★★★★<br /><span>100元起span>p>
            div>a>
            <a href="dc.html"><div class="left1">
            	<div class="pic"><img src="img/9.gif" width="100%"/>div>
                <p>双鱼座文艺烤鱼<br />星级：★★★★<br /><span>100元起span>p>
            div>a>
            <a href="dc.html"><div class="left1">
                <div class="pic"><img src="img/10.gif" width="100%"/>div>
                    <p>双鱼座文艺烤鱼<br />星级：★★★★<br /><span>100元起span>p>
            div>a>
            <a href="dc.html"><div class="left1">
                <div class="pic"><img src="img/1.gif" width="100%"/>div>
                    <p>双鱼座文艺烤鱼<br />星级：★★★★<br /><span>100元起span>p>
            div>a>
            <a href="dc.html"><div class="left2">
                <div class="pic"><img src="img/2.gif" width="100%"/>div>
                    <p>双鱼座文艺烤鱼<br />星级：★★★★<br /><span>100元起span>p>
            div>a>
        div>
  div>
  
  <h4 class="text"><a href="fl.html">休闲娱乐a>h4>
  <div id="main1">
  	<div class="con">
            <div class="left1">
                <table width="100%" border="0" cellspacing="0" class="conleft">
                	<tr>
                    	<td><a href="fl-qt.html">ktva>td>
                        <td><a href="fl-qt.html">洗浴a>td>
                    tr>
                    <tr>
                    	<td><a href="fl-qt.html">温泉a>td>
                        <td><a href="fl-qt.html">足疗保健a>td>
                    tr>
                    <tr>
                    	<td><a href="fl-qt.html">美容美甲a>td>
                        <td><a href="fl-qt.html">美发a>td>
                    tr>
                    <tr>
                    	<td><a href="fl-qt.html">瑜伽a>td>
                        <td><a href="fl-qt.html">游泳a>td>
                    tr>
                    <tr>
                    	<td><a href="fl-qt.html">咖啡a>td>
                        <td><a href="fl-qt.html">酒吧a>td>
                    tr>
                    <tr>
                    	<td><a href="fl-qt.html">高尔夫a>td>
                        <td><a href="fl-qt.html">台球厅a>td>
                    tr>
                table>
            div>
            <a href="dc.html"><div class="left1">
            	<div class="pic"><img src="img/2.gif" width="100%"/>div>
                <p>双鱼座文艺烤鱼<br />星级：★★★★<br /><span>查看详情span>p>
            div>a>
            <a href="dc.html"><div class="left1">
            	<div class="pic"><img src="img/3.gif" width="100%"/>div>
                <p>双鱼座文艺烤鱼<br />星级：★★★★<br /><span>查看详情span>p>
            div>a>
            <a href="dc.html"><div class="left1">
                <div class="pic"><img src="img/4.gif" width="100%"/>div>
                    <p>双鱼座文艺烤鱼<br />星级：★★★★<br /><span>查看详情span>p>
            div>a>
            <a href="dc.html"><div class="left1">
                <div class="pic"><img src="img/5.gif" width="100%"/>div>
                    <p>双鱼座文艺烤鱼<br />星级：★★★★<br /><span>查看详情span>p>
            div>a>
            <a href="dc.html"><div class="left2">
                <div class="pic"><img src="img/6.gif" width="100%"/>div>
                    <p>双鱼座文艺烤鱼<br />星级：★★★★<br /><span>查看详情span>p>
            div>a>
        div>
  div>
  
  <h4 class="text"><a href="fl.html">综合超市a>h4>
  <div id="main1">
  	<div class="con">
            <div class="left1">
                <table width="100%" border="0" cellspacing="0" class="conleft">
                	<tr>
                    	<td><a href="fl-qt.html">ktva>td>
                        <td><a href="fl-qt.html">洗浴a>td>
                    tr>
                    <tr>
                    	<td><a href="fl-qt.html">温泉a>td>
                        <td><a href="fl-qt.html">足疗保健a>td>
                    tr>
                    <tr>
                    	<td><a href="fl-qt.html">美容美甲a>td>
                        <td><a href="fl-qt.html">美发a>td>
                    tr>
                    <tr>
                    	<td><a href="fl-qt.html">瑜伽a>td>
                        <td><a href="fl-qt.html">游泳a>td>
                    tr>
                    <tr>
                    	<td><a href="fl-qt.html">咖啡a>td>
                        <td><a href="fl-qt.html">酒吧a>td>
                    tr>
                    <tr>
                    	<td><a href="fl-qt.html">高尔夫a>td>
                        <td><a href="fl-qt.html">台球厅a>td>
                    tr>
                table>
            div>

  div>
div>
body>
html>




    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204
    • 205
    • 206
    • 207
    • 208
    • 209
    • 210
    • 211
    • 212
    • 213
    • 214
    • 215
    • 216
    • 217
    • 218
    • 219
    • 220
    • 221
    • 222
    • 223
    • 224
    • 225
    • 226
    • 227
    • 228
    • 229
    • 230
    • 231
    • 232
    • 233
    • 234
    • 235
    • 236
    • 237
    • 238
    • 239
    • 240
    • 241
    • 242
    • 243
    • 244
    • 245
    • 246
    • 247
    • 248
    • 249
    • 250
    • 251
    • 252
    • 253
    • 254
    • 255
    • 256
    • 257
    • 258
    • 259
    • 260
    • 261
    • 262
    • 263
    • 264
    • 265
    • 266
    • 267
    • 268
    • 269
    • 270
    • 271
    • 272
    • 273
    • 274
    • 275
    • 276
    • 277
    • 278
    • 279
    • 280
    • 281
    • 282
    • 283
    • 284
    • 285
    • 286
    • 287
    • 288
    • 289
    • 290
    • 291
    • 292
    • 293
    • 294
    • 295
    • 296
    • 297
    • 298
    • 299
    • 300
    • 301
    • 302
    • 303
    • 304
    • 305
    • 306
    • 307
    • 308
    • 309
    • 310
    • 311
    • 312
    • 313
    • 314
    • 315
    • 316
    • 317
    • 318
    • 319
    • 320
    • 321
    • 322
    • 323
    • 324
    • 325
    • 326
    • 327
    • 328
    • 329

    CSS样式代码💒

    /* CSS Document */

#nav {line-height: 24px; list-style-type:none;  width:100%; margin:0px auto; text-align:center;}
ul#nav{ width:100%; height:40px; background:#ff7f00;margin:0 auto; text-align:center; }
ul#nav li{display:inline; height:40px;}
ul#nav li a{display:inline-block; padding:0 15px; height:40px; line-height:40px; color:#FFF;  font-size:14px}
ul#nav li a span{ background:#f76647; padding-top:10px; padding-bottom:10px; padding-left:20px; padding-right:20px;}

#nav a {display:block; width:76px; text-align:center;}
#nav a:link {color:#fff; text-decoration:none;}
#nav a:visited {color:#fff; text-decoration:none;}
#nav a:hover {color:#FFF; text-decoration:none; font-weight:bold;}
#nav li {float:left; }
#nav li a:hover{background:#f76647;}
#nav li ul {line-height:27px; list-style-type: none; text-align:left; left:-999em; width: 100px; position: absolute; }
#nav li ul li{float:left; width: 110px; background:#F6F6F6; }
#nav li ul a{display: block; width:150px; width: 150px; text-align:left; padding-left:24px;}
#nav li ul a:link {color:#666; text-decoration:none;}
#nav li ul a:visited {color:#666;text-decoration:none;}
#nav li ul a:hover {color:#F3F3F3; text-decoration:none; font-weight:normal; width:70px; background:#ccc;}
#nav li:hover ul {left: auto;}
#nav li.sfhover ul {left: auto;}


*{margin:0; padding:0; font-size:14px; color:#323232; list-style:none; font-family:"\5FAE\8F6F\96C5\9ED1";}
a{color:#666; text-decoration:none;}
a:hover{text-decoration:underline; color:#ed384b;}
h2{line-height:20px; margin-left:10px; margin-top:10px;}
h2 span{float:right;}
h2 span a{font-size:12px; font-weight:normal;}
h3{line-height:25px; margin-left:10px; margin-top:10px; margin-bottom:20px;}
h3 span{ color:#F00;}
h4{ margin-left:10px;}
#wrap{width:960px; margin:0 auto;}
#header,#mainbody{width:100%; overflow:hidden; margin-bottom:10px;}
.header{ width:100%; margin:0px auto; font-size:12px; height:25px; background:#fafafa; border-bottom:#CCC 1px solid;}
.header-zj{ width:80%; margin:0px auto; line-height:25px;}
.lang{ text-align:left; float:right; margin-right:20px;}
.login{ float:left; }
.sc{ float:right;}
.logo{ width:50%; height:auto; float:left; margin-top:10px;}
.header-2{ height:100px; width:100%;}
.nav_op{  height:30px; line-height:30px; width:80px; margin-top:80px;}
.nav-1{ height:50px; line-height:50px; float:left; width:15%;}
.logo{ width:50%; height:auto; float:left; margin-top:10px;}

.search{ float:right; margin-top:30px; color:#fff; width:30%;}
form { margin: 0; } 
#search_box { width: 250px; height: 30px; border:#ff7f00 1px solid; float:right;} 
#search_box #s { float: left; padding: 0; margin: 6px 0 0 6px; border: 0; width: 100px; background: none; font-size:12px; color:#999; }
#search_box #go { float: right; margin: 3px 4px 0 0; }



#con1{ width:100%; margin:0px auto; height:auto; height:230px; border-top:#e9e7ef 1px solid; margin-top:20px;}
#con1 .left1{ width:24.8%; border-right:#e9e7ef 1px solid;  float:left; height:253px;}
#con1 .left2{ width:24.8%; float:left; height:253px;}
#con1 .pic{ width:80%; margin:10px auto; height:auto;}
p{ width:80%; margin:0px auto; height:auto; font-size:14px; line-height:20px;}
p span{ color:#F00;}
#con1 .button{ width:90%; margin:0px auto; height:auto; font-size:12px; border:0px; background:#fff;}
#con1 .button-left{ width:50%; margin:10px auto; height:auto; font-size:12px; border:0px; border:#e9e7ef 1px solid; background:#fff; height:30px;}
#con1 .button-right{ width:50%; margin:10px auto; height:auto; font-size:12px; border:0px; border:#e9e7ef 1px solid; background:#fff; height:30px;}

#main1{ width:100%; border:#e9e7ef 1px solid; margin-top:10px; margin-bottom:10px;}
#main1 .con{ width:100%; margin:0px auto; height:230px; border-bottom:#e9e7ef 1px solid;}
#main1 .left1{width:16.5%; border-right:#e9e7ef 1px solid;  float:left; height:230px; margin:0px auto;}
#main1 .pic{ width:80%; margin:10px auto; height:auto; }
#main1 .left2{ width:16.5%; float:left; height:230px; margin:0px auto;}
#main1 p{ width:80%; margin:0px auto; height:auto; font-size:14px; }
#main1 .button{ width:90%; margin:0px auto; height:auto; font-size:12px; border:0px; background:#fff;}
#main1 .button-left{ width:50%; margin:10px auto; height:auto; font-size:12px; border:0px; border:#e9e7ef 1px solid; background:#fff; height:30px;}
#main1 .button-right{ width:50%; margin:10px auto; height:auto; font-size:12px; border:0px; border:#e9e7ef 1px solid; background:#fff; height:30px;}
.conleft{ margin:10px auto; text-align:left; line-height:30px; font-size:10px; margin-left:10px;}

.butto{width:100%; margin:10px auto; height:40px; font-size:12px; border:0px; text-align:center;}
.button-lef{width:48%; margin:0px auto; height:40px; font-size:12px; border:0px; background:#ed384b; height:40px; color:#fff; float:left; text-align:center;}
.button-righ{width:48%; margin:0px auto; height:40px; font-size:12px; border:0px; background:#ed384b; height:40px; color:#fff; float:right; text-align:center;}
.button-left{width:100%; margin:0px auto; height:40px; font-size:12px; border:0px; background:#ed384b; height:40px; color:#fff; float:left; text-align:center;}
.button-right{width:100%; margin:0px auto; height:40px; font-size:12px; border:0px; background:#ed384b; height:40px; color:#fff; float:right; text-align:center;}


.text{ width:100%; height:20px; line-height:20px; font-size:14px; color:#F00; margin-top:10px; margin-bottom:10px;}
.text a{ width:100%; height:20px; line-height:20px; font-size:14px; color:#F00; margin-top:10px;}
.text span{ width:100%; height:20px; line-height:20px; font-size:14px; color:#000; margin-top:10px;}

.downlist{width:100%; overflow:hidden;}
.downlist li{overflow:hidden; line-height:26px; padding-left:23px; margin-bottom:5px;}
.downlist li span{float:right; font-size:12px; color:#630063;}
.downlist li span a{font-size:12px; text-decoration:underline;}
.downlist li span a:hover{text-decoration:none;}

.newslist{width:95%; margin:10px auto;}
.newslist li{line-height:30px; border-bottom:#ccc 1px dashed; font-size:12px;}
.newslist p{line-height:30px; }

.fri_link{width:100%;}
.fri_link a{width:88px; float:left; font-size:12px; margin-right:5px; line-height:26px;}

.margin_btm_15{margin-bottom:15px;}


#footer{margin-top:10px; padding:15px 0; width:100%; text-align:center; border-top:1px solid #e6e6e6; background:#f8f8f8;}
#footer li{line-height:24px; color:#9e9e9e; font-size:12px;}
.footer{ width:100%; margin:0px auto; height:130px; margin-top:20px;  font-size:12px;}
.footer ul{ padding:5px; margin:10px; width:100%;  font-size:12px;}
.footer li{list-style-type:none; display:inline; width:10%; height:auto; float:left; margin-right:10px; position:relative; font-size:12px; color:#ccc; line-height:20px;}

.demo01{width:600px; overflow:hidden}
.demo01 .left{ width:100px; float:left}
.demo01 .left .userPic{margin-left:20px; margin-top:30px;}
.demo01 .right{ width:460px; float:right; padding:20px; border-bottom:#CCC 1px solid;}
.demo01 .right h6{ margin-bottom:5px}
.demo01 .right .pubTime{ float:right;color:#999; margin-top:-8px}

.demo02{width:800px; overflow:hidden}
.demo02 .left{ width:50px; float:left;  text-align:right;}
.demo02 .left .userPic{margin-left:20px; margin-top:30px;}
.demo02 .right{ width:660px; float:right; padding:20px; border-bottom:#CCC 1px solid;}
.demo02 .right h6{ margin-bottom:5px}
.demo02 .right .pubTime{ float:right; color:#999; margin-top:-10px; text-align:right; line-height:30px;}
.demo02 .pubTimep{ float:right; color:#090;  text-align:right; line-height:30px; }




.main{ width:100%; margin:0px auto; margin-top:10px; }
#login{ width:100%; margin:0px auto; }
#login .left{ width:30%; float:left; padding-top:30px; padding-left:50px;}
#login .right{ width:55%; float:right; padding-top:10px; text-align:right; padding-right:50px;}
#login .right .name{ padding-top:20px; text-align:right;}
#login .submit{ width:50%; height:40px;}
#login-submit{ width:100%; margin:0px auto; margin-top:20px; text-align:right;}
#login-submit .zh{ font-size:14px; margin-top:20px;}
#login-submit .zh span{ color:#F30;}
#login .mima{ font-size:14px; color:#F30; margin-top:10px;}
#login-submit .submit { background:#ff7f00; border:0px; color:#FFF;}

/*注册*/
#zhuce{ width:100%; height:100%; padding-bottom:20px;}
#zc{ width:100%; height:50px; border-bottom:#ff7f00 1px solid;}
#zc .left{ width:50%; float:left; font-size:16px; color:#000; }
#zc .right{ width:50%; float:right; font-size:16px; color:#000; line-height:60px; text-align:right;}
#zc .right span{ color:#ff7f00;}
#zhuce .text{ width:50%; margin:0px auto; margin-top:30px;}
#zhuce .text .name{  margin:0px auto; padding-top:30px; font-size:14px; color:#666;}
#ss{ height:30px; width:70%;}
#zhuce .text .submit{ width:100%; margin:0px auto; height:40px;}
#submit{ width:50%; margin:10px auto; margin-top:40px;}
#submit .submit{ width:80%; height:40px; background:#ff7f00; border:0px; color:#FFF;}
.scc{ border:#CCC 1px solid; width:80%; height:40px; text-align:center; margin-top:10px; float:right; margin-bottom:10px;  background:#f8f8f8;}


*:focus {outline: none;}
.contact_form h2, .contact_form label {font-family:Georgia, Times, "Times New Roman", serif;}
.form_hint, .required_notification {font-size: 11px;}
.contact_form ul {
    width:750px;
    list-style-type:none;
    list-style-position:outside;
    margin:0px;
    padding:0px;
}
.contact_form li{
    padding:12px;
    position:relative;
}
.contact_form li:first-child, .contact_form li:last-child {
    
}

.contact_form h2 {
    margin:0;
    display: inline;
}
.required_notification {
    color:#d45252;
    margin:5px 0 0 0;
    display:inline;
    float:right;
}

.contact_form label {
    width:150px;
    margin-top: 3px;
    display:inline-block;
    float:left;
    padding:3px;
}
.contact_form input {
    height:20px;
    width:220px;
    padding:5px 8px;
}
.contact_form textarea {padding:8px; width:300px;}
.contact_form button {margin-left:156px;}

.xd-text{ width:100%; border-bottom:#CCC 1px solid; margin:10px auto; margin-bottom:20px;}
.dk{ width:100%; text-align:right; height:40px; border-bottom:#CCC 1px solid; margin:10px auto; line-height:40px; }
.dkk{ width:100%; text-align:right; height:40px;  margin:10px auto; line-height:40px; }
.dkk span{ color:#F00;}
.shdz{ width:100%; margin:0px auto; border:#CCC 1px solid; height:300px; margin-top:80px; }
.shdz1{ width:87%;  text-align:left; margin:0px auto;}
.shdz1 table{ width:100%;  text-align:left; margin-bottom:20px; }
.sh{ width:100%; height:40px; line-height:40px; background:#f8f8f8;}
.xd-right{width:100%; height:auto; margin:0px auto; float:right;}
#xd-dd{ margin-top:20px; width:90%; margin:10px auto;}
.xd-big{width:100%; margin:0px auto; border-bottom:#CCC 1px solid; background:#f8f8f8;  }
.dz{ width:100%; margin:20px auto; }
.sh-left{ width:20%; text-align:right; line-height:40px; font-size:14px;}
.sh-right{width:90%; text-align:left; line-height:40px; font-size:14px;}
.shh{ width:200px; height:30px; }
.shhh{ width:400px; height:30px;}
.xd-submit{ width:100%; height:50px; text-align:right; margin-top:70px; margin-bottom:50px;}
.xdsubmit{ width:300px; height:50px; text-align:center; color:#FFF; font-size:14px; border:0px; background:#ff7f00; line-height:50px;}

/*修改密码*/
#zhuce .textt{ width:50%; margin:0px auto; margin-top:10px;}
#zhuce .textt .name{  margin:0px auto; padding-top:30px; font-size:14px; color:#666;}
.mm-submit{ width:50%; margin:0px auto; }
.mmsubmit{ width:100%; height:40px; margin:10px auto; background:#ff7f00; color:#FFF; font-size:12px; border:0px; text-align:center; margin-top:20px; margin-bottom:20px;}

/*我的订单*/
#ddd{ width:95%; margin:0px auto; border:#CCC 1px solid; margin-top:20px; margin-bottom:20px;}
#ddd .ddd-1{width:100%; margin:0px auto; border-bottom:#CCC 1px solid; height:30px; background:#f5f5f5; line-height:30px;}
#ddd .left1{ float:left; width:40%; text-align:left; font-size:14px; color:#333; margin-left:20px;}
#ddd .right1{ float:right; width:50%; text-align:right; font-size:14px; color:#ccc; margin-right:20px;}
#ddd .big{width:90%; margin:0px auto; height:120px; }
.right-text-1{ width:60%; float:left; font-size:14px; color:#666; line-height:80px; margin-left:20px;}
.right-text-2{ width:60%; float:left; font-size:14px; color:#666; line-height:10px; margin-left:20px;}
.anniu-1{ font-size:14px;  color:#333; line-height:20px; }
.anniu-1 span{  color:#390;  }
.anniu-2 span{ font-size:14px;  color:#F00; line-height:20px; }

.tab{margin-top:10px}
#TabCon1{width:100%; }
#TabCon2{width:100%; }

.xixi1{width:100%; height:29px; line-height:29px; cursor:pointer; background:#ff7f00;}
.xixi2{width:100%; height:29px; line-height:29px; cursor:pointer; background:#ff7f00;}

.tab1{width:96px; height:29px; line-height:29px; float:left; text-align:center; cursor:pointer; color:#000;}
.tab2{width:116px; height:29px; line-height:29px; float:left; text-align:center; cursor:pointer; color:#000;}




    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204
    • 205
    • 206
    • 207
    • 208
    • 209
    • 210
    • 211
    • 212
    • 213
    • 214
    • 215
    • 216
    • 217
    • 218
    • 219
    • 220
    • 221
    • 222
    • 223
    • 224
    • 225
    • 226
    • 227
    • 228
    • 229
    • 230
    • 231
    • 232
    • 233
    • 234
    • 235
    • 236
    • 237
    • 238
    • 239
    • 240
    • 241
    • 242
    • 243
    • 244
    • 245
    • 246

    八、更多干货🎁

    1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

    2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！

    3.以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥
    在这里插入图片描述

  • 相关阅读:
    为啥不适合，依然有很多人大张旗鼓搞企业内部开源？（下）
    剑指 Offer 22. 链表中倒数第k个节点
    Java面试题一
    android列表下拉刷新上拉加载更多实现的几种文件组织方式
    商业模式，淘宝，拼多多，京东，短视频商业模式
    二阶段day2
    Python基于OpenCV的人脸识别自助商店（源码＆部署视频）
    代码随想录day49:动态规划part10
    Visual Studio插件DevExpress CodeRush v22.1- 支持C# 10
    k8s的coreDNS添加自定义hosts
  • 原文地址：https://blog.csdn.net/bigwhiteshark/article/details/126068873