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

最新推荐文章于 2024-09-18 17:34:54 发布

m0_67402096

最新推荐文章于 2024-09-18 17:34:54 发布

阅读量4.2k

点赞数 2

分类专栏：前端 html 文章标签： sass css 前端

本文链接：https://blog.csdn.net/m0_67402096/article/details/123346483

版权

本文介绍了一个使用HTML、CSS和JS构建的简单购物网站的制作过程，主要内容包括主页设计，后续章节将涵盖登录、商品和客服页面。网页结构包含头部导航、服饰美妆区域、今日推荐和固定导航栏。文章提供了实际效果图和源代码分析。

摘要由CSDN通过智能技术生成

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:violet;font-family: "微软雅黑";color: white;}
        .navBox{height: 35px;font-size: 20px;color:blueviolet;}       
        .main{list-style: none;}                
             .main li{margin: 0 80px;float:left;text-align: left;} 
             .main li a{padding:0 5px; display: block;height: 35px;}  
            .main li a:visited,.main li a:link {color:#DC143C;text-decoration: none;}
            .main li ul{padding:0 0;margin: 0 0;cursor: pointer;display:none;list-style: none;}
            .main li ul li{text-align: left;line-height: 25px;float:none;}    
            .main li:hover ul{display:block;positio