HTML+CSS简单应用实例——购物网站的制作(一)

HTML+CSS简单应用实例——购物网站的制作(一)

这是一个用CSS、HTML、JS制作的简单的购物网站,这篇文章是主页,在后面文章中依次有登录页、商品页、客服页面等。有很多不足之处,希望大家能给我指出来。

先看一下效果图。
(所有图片都是从淘宝、京东、唯品会搜的)
HTML+CSS简单应用实例——购物网站的制作(一)_第1张图片


HTML+CSS简单应用实例——购物网站的制作(一)_第2张图片
分析:最上方是DIV+列表,注册可以点进去进入注册页面。下面服饰区、美妆区部分是列表,其中又嵌套了列表。今日推荐部分是一个大表格,导航栏部分是一个小表格,位置设为固定。最下方是一个脚本,用DIV做成。
下面是具体代码:



	
		
		淘淘网--让购物更简单	
				
	
	"plum" >
		
		
"headerBar">
"topBar">
    "topBar-left"> "Top">
  • 欢迎来到淘淘网!
"logoBar">
"search_box"> "text" class="search_text" > "button" value="搜 索" class="search_btn">
"navBox">
"Main">
"2" align="center">
"wdress.html" target="_blank">"img/大牌特卖.jpg" width="400" height="300"> "img/一站购.png" width="400" height="300" >
"list" border="1" bgcolor="violet" bordercolor="white"cellpadding="5">
"wdress.html" target="_blank">热门女装>>
"time.html" target="_blank">限时抢购>>
"shopping.html" target="_blank">淘淘超市>>
"wdress.html" target="_blank">今日特卖>>
"service.html" target="_blank">联系客服>>
"#Top">回到顶部>>

"center" style="font-family: 宋体;font-size: 30px;color: black;">-今日推荐-

"1" bordercolor="crimson" cellspacing="10" align="center">
"2">"wdress.html" target="_blank">"img/卫衣.jpg" width="300px" height="600px"> "2" colspan="2">"wdress.html" target="_blank">"img/wph6.jpg" width="600px" height="600px"> "wdress.html" target="_blank">"img/妖精1.jpg" width="300px" height="300px">
"img/妖精2.jpg" width="300px" height="300px">
"img/妖精3.jpg" width="300px" height="300px"> "img/裤子.jpg" width="300px" height="300px"> "img/包.jpg" width="300px" height="300px"> "img/夏连衣裙.jpg" width="300px" height="300px">
"img/口红1.jpg" width="300px" height="300px"> "img/鞋3.jpg" width="300px" height="300px"> "img/手机.jpg" width="300px" height="300px"> "img/鞋1.jpg" width="300px" height="300px">
"img/手表.jpg" width="300px" height="300px"> "img/鞋2.jpg" width="300px" height="300px"> "img/口红2.jpg" width="300px" height="300px"> "img/帽子.jpg" width="300px" height="300px">
"footer">

"#">联系我们 ; ; |  ; ;"#">诚聘英才 ; ; |  ; ;"#">合作招商 ; ; |  ; ;"#">广告平台

"fp">本网站直接或间接向消费者推销商品或者服务的商业宣传均属于“广告”(包装及参数、售后保障等商品信息除外)

"footimg"> "img/冠名商标2.jpg" width="70px";height="60px";> "img/冠名商标.jpg" width="60px";height="40px"> "img/商标.jpg" width="70px";height="60px"> "img/商标2.jpg" width="60px";height="30px">

你可能感兴趣的:(HTML,javascript,css,html,html5)