h5+css实现简易商城首页_简单商城布局资源-CSDN文库

共34个文件

jpg：23个

png：3个

html：3个

需积分: 48 68 浏览量 2018-12-06 11:41:06 上传评论 5 收藏 1.38MB ZIP 举报

在本项目中，"h5+css 实现简易商城首页"是一个使用HTML5（H5）和CSS技术构建的无JavaScript版本的电商网站主页。这个练习主要目标是掌握HTML5的标签应用和基本的网页布局技巧。下面我们将深入探讨这个项目所涉及的知识点。 HTML5（H5）是现代网页开发的基础，它引入了许多新的元素和功能，旨在提高可读性和可维护性。在商城首页的实现中，可能会用到以下H5标签： 1. `<header>`：定义页面或区域的头部，通常包含logo、导航链接等。 2. `<nav>`：用于定义导航链接的部分，帮助用户在网站中导航。 3. `<section>`：表示文档中的一个独立部分，比如商品分类、促销区等。 4. `<article>`：表示页面中的独立内容，如商品详情介绍。 5. `<aside>`：通常用于侧边栏，显示与主要内容相关但又相对独立的信息，如广告、推荐商品。 6. `<footer>`：定义页面底部，可能包含版权信息、联系方式等。 7. `<figure>` 和 `<figcaption>`：用于图片和图表的包装，并提供描述性文字。 8. `<main>`：表示页面主要内容。接下来，CSS（层叠样式表）用于控制页面的样式和布局。在实现商城首页时，以下CSS技术可能是关键点： 1. 布局技术：使用Flexbox（弹性盒模型）或Grid（网格布局）创建响应式布局，适应不同屏幕尺寸。 2. 栅格系统：通过设置列宽和间隔来组织内容，例如12列栅格系统。 3. 颜色和字体：定义背景色、文本颜色、链接颜色，以及选择合适的字体和字号。 4. 响应式设计：利用媒体查询（@media）调整不同设备上的样式，确保在手机、平板和桌面电脑上都有良好的用户体验。 5. 定位：使用相对、绝对和固定定位来精确放置元素。 6. 动画和过渡：虽然项目没有使用JavaScript，但CSS可以实现简单的动画效果，如淡入淡出、滑动等。 7. 响应式图像：利用`<img>`标签的`srcset`和`sizes`属性，根据设备的视口大小加载不同的图像资源。 8. CSS预处理器：如Sass或Less，可以提高CSS的可维护性和复用性，但在这个项目中可能并未使用。此外，虽然没有JavaScript，但在实际的电商项目中，JavaScript会用于交互功能，如商品筛选、添加购物车、滚动加载等。对于初学者来说，了解如何将静态页面转化为动态页面也是很重要的一步。总结，"h5+css 实现简易商城首页"是一个很好的实践项目，它涵盖了HTML5的基础标签应用和CSS的布局与样式设计，帮助开发者熟悉前端网页的基本构造和视觉呈现。通过完成这样的练习，开发者可以进一步提升其在网页设计和开发方面的技能。

资源推荐

资源详情

资源评论

收起资源包目录

商城首页.zip （34个子文件）

商城首页

.project 1KB

index.html 8KB

img

small09.jpg 6KB

small02.jpg 7KB

big01.jpg 15KB

2.jpg 111KB

8.jpg 186KB

6.jpg 126KB

small08.jpg 7KB

small06.jpg 4KB

footer.jpg 24KB

1.jpg 142KB

small07.jpg 17KB

4.jpg 110KB

small01.jpg 5KB

5.jpg 87KB

title2.jpg 2KB

注册页面.bmp 2.83MB

small04.jpg 9KB

ad.jpg 38KB

regist_bg.jpg 28KB

yanzhengma.png 5KB

small03.jpg 5KB

small05.jpg 5KB

middle01.jpg 34KB

7.jpg 156KB

header.png 12KB

3.jpg 200KB

logo2.png 3KB

shopjs.js 2KB

test1123.html 8KB

css

Shopcss.css 2KB

123.html 838B

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>商城首页</title> <style> #father{ border: 1px solid red; width: 1300px; height:2200px; margin: auto; } #logo{ border: 1px solid blue; width: 1300px; height: 50px; } .top{ border: 1px solid black; width: 431px; height: 50px; float: left; } #top{ padding-top: 12px; padding-left: 30px; width: 401px; height: 38px; } #menu{ border: 1px solid red; width: 1300px; height: 50px; background-color: black; } li a{ color: white; } ul li{ display: inline; } #product{ border: 1px solid red; width: 1300px; height: 550px; } #product_top{ border: 1px solid black; width: 1285px; height: 40px; padding-left: 15px; padding-top: 10px; } #product_bottom{ border: 1px solid blue; width: 100%; height: 498px; } #product_bottom_left{ border: 1px solid red; width: 185px; height:498px; float: left; } #product_bottom_right{ border: 1px solid black; width: 1110px; height: 498px; float: left; } #big{ border: 1px solid blue; width: 550px; height: 249px; float: left; } .small{ border: 1px solid red; width: 183px; height: 249px; float: left; text-align: center; } #bottom{ text-align: center; } a{ text-decoration: none; } </style> </head> <body> <div id="father">  <div id="logo"> <div class="top"> <img src="img/logo2.png" height="47px"/> </div> <div class="top"> <img src="img/header.png" height="47px"/> </div> <div class="top" id="top"> <a href="#">登录</a>    <a href="#">注册</a>    <a href="#">购物车</a> </div> </div>  <div id="menu"> <ul> <li><a href="#" style="font-size: 25px;">首页</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> <img src="img/1.jpg" width="100%"/> </div>  <div id="product"> <div id="product_top"> <font style="font-size: 25px;">热门商品</font>    <img src="img/title2.jpg" /> </div> <div id="product_bottom"> <div id="product_bottom_left"> <img src="img/big01.jpg" width="100%" height="100%"/> </div> <div id="product_bottom_right"> <div id="big"> <a href="#"><img src="img/middle01.jpg" width="100%" height="100%"/></a> </div> <div class="small"> <img src="img/small03.jpg" /> <a href="#"><p style="color: gray;">电炖锅</p></a> <p style="color: red;">￥399</p> </div> <div class="small"> <img src="img/small03.jpg" /> <a href="#"><p style="color: gray;">电炖锅</p></a> <p style="color: red;">￥399</p> </div> <div class="small"> <img src="img/small03.jpg" /> <a href="#"><p style="color: gray;">电炖锅</p></a> <p style="color: red;">￥399</p> </div> <div class="small"> <img src="img/small03.jpg" /> <a href="#"><p style="color: gray;">电炖锅</p></a> <p style="color: red;">￥399</p> </div> <div class="small"> <img src="img/small03.jpg" /> <a href="#"><p style="color: gray;">电炖锅</p></a> <p style="color: red;">￥399</p> </div> <div class="small"> <img src="img/small03.jpg" /> <a href="#"><p style="color: gray;">电炖锅</p></a> <p style="color: red;">￥399</p> </div> <div class="small"> <img src="img/small03.jpg" /> <a href="#"><p style="color: gray;">电炖锅</p></a> <p style="color: red;">￥399</p> </div> <div class="small"> <img src="img/small03.jpg" /> <a href="#"><p style="color: gray;">电炖锅</p></a> <p style="color: red;">￥399</p> </div> <div class="small"> <img src="img/small03.jpg" /> <a href="#"><p style="color: gray;">电炖锅</p></a> <p style="color: red;">￥399</p> </div> </div> </div> </div>  <div style="margin-top: 12px;"> <img src="img/ad.jpg" width="100%"/> </div>  <div id="product"> <div id="product_top"> <font style="font-size: 25px;">最新商品</font>    <img src="img/title2.jpg" /> </div> <div id="product_bottom"> <div id="product_bottom_left"> <img src="img/big01.jpg" width="100%" height="100%"/> </div> <div id="product_bottom_right"> <div id="big"> <a href="#"><img src="img/middle01.jpg" width="100%" height="100%"/></a> </div> <div class="small"> <img src="img/small03.jpg" /> <a href="#"><p style="color: gray;">电炖锅</p></a> <p style="color: red;">￥399</p> </div> <div class="small"> <img src="img/small03.jpg" /> <a href="#"><p style="color: gray;">电炖锅</p></a> <p style="color: red;">￥399</p> </div> <div class="small"> <img src="img/small03.jpg" /> <a href="#"><p style="color: gray;">电炖锅</p></a> <p style="color: red;">￥399</p> </div> <div class="small"> <img src="img/small03.jpg" /> <a href="#"><p style="color: gray;">电炖锅</p></a> <p style="color: red;">￥399</p> </div> <div class="small"> <img src="img/small03.jpg" /> <a href="#"><p style="color: gray;">电炖锅</p></a> <p style="color: red;">￥399</p> </div> <div class="small"> <img src="img/small03.jpg" /> <a href="#"><p style="color: gray;">电炖锅</p></a> <p style="color: red;">￥399</p> </div> <div class="small"> <img src="img/small03.jpg" /> <a href="#"><p style="color: gray;">电炖锅</p></a> <p style="color: red;">￥399</p> </div> <div class="small"> <img src="img/small03.jpg" /> <a href="#"><p style="color: gray;">电炖锅</p></a> <p style="color: red;">￥399</p> </div> <div class="small"> <img src="img/small03.jpg"/> <a href="#"><p style="color: gray;">电炖锅</p></a> <p style="color: red;">￥399</p> </div> </div> </div> </div>  <div> <img src="img/footer.jpg" width="100%"/> </div>  <div id="bottom"> <a href="#">关于我们</a>   <a href="#">联系我们</a>   <a href="#">招贤纳士</a>   <a href="#">法律声明</a>   <a href="#">友情链接</a>   <a href="#">支付方式</a>   <a href="#">配送方式</a>   <a href="#">服务声明</a>   <a href="#">广告声明</a>   <p> Copyright © 2005-2018 千锋商城版权所有 </p> </div> </div> </body> </html>

评论收藏

内容反馈