📂文章目录
- 二、📚网站介绍
- 三、🔗网站效果
- ▶️1.视频演示
- 🧩 2.图片演示
- 四、💒 网站代码
- 🧱HTML结构代码
- 🏠CSS样式代码
- 五、🎁更多源码
二、📚网站介绍
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面：计划采用最新的网页编程语言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代码）。
三、🔗网站效果
▶️1.视频演示
T12JP 花店 4页 带js
🧩 2.图片演示
四、💒 网站代码
🧱HTML结构代码
<div class="mainContainer big container">
<!--主要内容区-->
<!--Header Block-->
<div class="header-wrapper">
<header class="container">
<div class="head-right">
<ul class="top-nav">
<li class=""><a href="#">我的账户</a></li>
<li class="my-wishlist"><a href="#">收藏</a></li>
<li class="checkout"><a href="#">结算</a></li>
<li class="log-in"><a href="account_login.html">登录</a></li>
</ul>
<section class="header-bottom">
<!--搜索和购物车-->
<!--section新标签，与div类似，语义化-->
<div class="cart-block">
<!--购物车-->
<ul>
<li>(2)</li>
<li>
<a href="#" title="购物车"><img title="购物车" alt="购物车" src="picture/item_icon.png"></a>
</li>
<li>购物车</li>
</ul>
<div id="minicart" class="remain_cart" style="display: none;">
<p class="empty">您的购物车共有2件商品</p>
<ol>
<li>
<div class="img-block"><img src="picture/small_img1.png" title="" alt=""></div>
<div class="detail-block">
<h4><a href="#" title="玫瑰">玫瑰</a></h4>
<p>
<strong>1</strong> x ￥99.00
<!--strong用于文本加粗，强调作用-->
</p>
<a href="#" title="Details">细节展示</a>
</div>
<div class="edit-delete-block">
<a href="#" title="Edit"><img src="picture/edit_icon.png" alt="Edit" title="Edit"></a>
<!--<img>中“alt”当浏览器无法加载图片时显示替代文本的属性-->
<a href="#" title="Remove"><img src="picture/delete_item_btn.png" alt="Remove" title="Remove"></a>
</div>
</li>
<li>
<div class="img-block"><img src="picture/small_img.png" title="" alt=""></div>
<div class="detail-block">
<h4><a href="#" title="玫瑰">玫瑰</a></h4>
<p>
<strong>1</strong> x ￥99.00
</p>
<a href="#" title="Details">细节展示</a>
</div>
<div class="edit-delete-block">
<a href="#" title="Edit"><img src="picture/edit_icon.png" alt="Edit" title="Edit"></a>
<a href="#" title="Remove"><img src="picture/delete_item_btn.png" alt="Remove" title="Remove"></a>
</div>
</li>
<li>
<div class="total-block">共计:<span>￥198.00</span></div>
<a href="" title="结算" class="orange-btn">结算</a>
<!--<div class="clear"></div>-->
</li>
</ol>
</div>
</div>
<!--搜索框-->
<div class="search-block">
<input type="text" value="搜索">
<!--定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。
并不是所有的主流浏览器都支持新的input类型。-->
<input type="submit" value="submit">
<!--submit定义提交按钮。提交按钮会把表单数据发送到服务器-->
</div>
</section>
</div>
<!--LOGO-->
<h1 class="logo">
<img title="Logo" alt="Logo" src="picture/logo.png"></h1>
<nav id="smoothmenu1" class="ddsmoothmenu mainMenu">
<!--nav标签定义导航链接的部分，是H5的新标签，优点是语义化-->
<ul id="nav">
<!--无序列表-->
<li class="active"><a href="">首页</a></li>
<li><a href="category.html">全部商品</a></li>
<li><a href="contact_us.html">留言板</a></li>
</ul>
</nav>
<!--响应式导航菜单-->
<div class="mobMenu">
<h1>
<span>菜单</span>
<a class="menuBox highlight" href="javascript:void(0);"></a>
<!--javascript：void（0）空链接，没有跳转-->
<span class="clearfix"></span>
<!--清除浮动对后面元素的影响-->
</h1>
<div id="menuInnner" style="display:none;">
<!--设置默认状态是不显示-->
<ul class="accordion">
<!--accordion：可折叠的-->
<!--无序列表-->
<li class="active"><a href="">首页</a></li>
<li class="parent"><a href="category.html">全部商品</a></li>
<li class=""><a href="contact_us.html">留言板</a></li>
<span class="clearfix"></span>
</ul>
</div>
</div>
</header></div>
<!--Banner Block-->
<section class="banner-wrapper">
<div class="banner-block container">
<div class="flexslider">
<!--调用框架接口-->
<ul class="slides">
<li><img title="Banner" alt="Banner" src="picture/banner1.png"></li>
<li><img title="Banner" alt="Banner" src="picture/banner2.png"></li>
<li><img title="Banner" alt="Banner" src="picture/banner3.png"></li>
<li><img title="Banner" alt="Banner" src="picture/banner4.png"></li>
</ul>
</div>
<ul class="banner-add">
<li class="add1">
<a href="#" title=""><img title="add1" alt="add1" src="picture/banner_add1.png"></a>
</li>
<li class="add2">
<a href="#" title=""><img title="add2" alt="add2" src="picture/banner_add2.png"></a>
</li>
</ul>
</div>
</section>
<!--Content Block-->
<!--内容区-->
<section class="content-wrapper">
<div class="content-container container">
<div class="heading-block">
<h1>热卖商品</h1>
<ul class="pagination">
<li class="grid">
<a href="#" title="网格"></a>
</li>
<!--网格状翻转按钮-->
</ul>
</div>
🏠CSS样式代码
ul.disc {
list-style: disc outside;
}
ul ul,
ol ol {
margin: 4px 0 5px 30px;
}
li {
margin-bottom: 12px;
}
ul.large li {
line-height: 21px;
}
/* 手机 */
@media handheld,
only screen and (max-width: 767px) {
body,
p {
font-size: 12px;
line-height: 1.6;
}
}
em {
font-style: italic;
line-height: inherit;
}
strong {
font-weight: bold;
line-height: inherit;
}
small {
font-size: 56.4%;
line-height: inherit;
}
h1 small,
h2 small,
h3 small,
h4 small,
h5 small {
color: #777;
}
/* Blockquotes */
blockquote,
blockquote p {
line-height: 20px;
color: #777;
}
blockquote {
margin: 0 0 18px;
padding: 9px 20px 0 19px;
border-left: 1px solid #ddd;
}
blockquote cite {
display: block;
font-size: 12px;
font-size: 1.2rem;
color: #555;
}
blockquote cite:before {
content: "\2016 \0020";
}
blockquote cite a,
blockquote cite a:visited {
color: #555;
}
hr {
border: 1px solid #ddd;
clear: both;
margin: 16px 0 18px;
height: 0;
}
abbr,
acronym {
text-transform: uppercase;
font-size: 90%;
color: #222;
border-bottom: 1px solid #ddd;
cursor: help;
}
abbr {
text-transform: none;
}
五、🎁更多源码
1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
训练营
