HTML+CSS简单应用实例——购物网站的制作（一）_html制作手机购买网页代码-CSDN博客

本文链接：https://blog.csdn.net/weixin_46343805/article/details/111308222

本文介绍了一个使用HTML、CSS和JS构建的简单购物网站的制作过程，主要内容包括主页设计，涉及注册链接、服饰美妆区域、今日推荐及导航栏等部分。文章展示了最终效果并提供了相关代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

先看一下效果图。
（所有图片都是从淘宝、京东、唯品会搜的）
在这里插入图片描述

分析：最上方是DIV+列表，注册可以点进去进入注册页面。下面服饰区、美妆区部分是列表，其中又嵌套了列表。今日推荐部分是一个大表格，导航栏部分是一个小表格，位置设为固定。最下方是一个脚本，用DIV做成。
下面是具体代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>淘淘网--让购物更简单</title>	
		<style>
        .topBar{
   height: 40px; font-size: 15px; color:#666;line-height: 35px;background-color:white;}                
        .topBar-left{
   float: left;list-style: none;}                
        .topBar-right{
   float: right; list-style: none;}                
        .topBar-left li,.topBar-right li{
   margin: 0 2px;float:left;text-align: center;}         
        .topBar-left li a:hover,.topBar-right li:hover {
   color:rgb(236, 77, 14);}       
        .logoBar{
   height:100px;width: 100%;left: 0px; background-color:white }         
        .search_box{
    width: 447px;padding-top: 33px;padding-left: 160px; }             
        .search_text{
   background-color: white; width:360px;height: 35px;padding:0 8px;position:absolute;top:70px;left:450px; }           
        .search_btn{
    width: 70px;height: 39px;position:absolute;top:70px;left:835px;font-size:14px;background-color