HTML+CSS制作仿制当当网

news/2024/10/20 8:41:05/

新程序员：一起进步

目录

前言

一、项目代码

1.头部 

2.导航栏

3.banner图

4.主体

5.底部

 6.附录

前言

本项目是基于Html5+CSS3技术所制作的静态网页，适合新手练习学习完成html之后所独立完成的静态网页

一、项目代码

1.头部 

效果图：

div盒子模型 

HTML代码如下（示例）：

<!-- 头部 -->
<div class="header"><img src="image/logo.jpg"><div class="header_text"><img src="image/icon_count.png"><ul><li><a href="#">都看阅读</a></li><li><a href="#">数字馆</a></li><li><a href="#">当当优选</a></li><li><a href="#">尾品会</a></li></ul></div>
</div>

CSS代码如下（示例） ：

/* 头部 */
.header{margin-top: 10px;height: 48px;
}
.header_text{float: right;
}
.header_text ul li{background-color: #eafffa;padding-left: 5px;float: right;text-align: center;width: 60px;
}
.header_text a{color: #92999a;width: 100%;font-size: 10px;
}
/* 设置图片位置使用相对定位,使图片提升一个层级,相对于原始位置进行定位;直接定位img无效果原因:img与ul属于同一个层级向下便宜不会覆盖ul指的是与浏览器的位置 */
.header_text img{position: relative;top: 7px;left: 10px;
}

2.导航栏

 效果图：

HTML代码如下（示例）：

<!-- 导航栏 -->
<div class="nav"><ul><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><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><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><li><a href="#">电脑</a></li><li><a href="#">家电</a></li></ul>
</div>

 CSS代码如下（示例）：

/* 导航栏 */
.nav{background-image: url(menuBg.jpg);height: 36px;
}
.nav ul li{margin-top: 6px;text-align: center;width: 56.47px;float: left;
}
.nav a{color: #ffffff;font-size: 10px;
}

3.banner图

 效果图：

 HTML代码如下（示例）：

<!-- banner图 -->
<div class="banner"><img src="image/banner.jpg">
</div>

 CSS代码如下（示例）： 

/* banner图 */
.banner{margin-top: 10px;
}

4.主体

div盒子模型：

效果图：  

 左侧——HTML代码如下（示例）：

<!-- 左边 -->
<div class="left"><div class="letft_top"><h3>分类浏览</h3><ul><li>数码影音</li><li>家居装饰</li><li>母婴用品</li><li>美妆个护</li><li>食品保健</li><li>潮流服装</li><li>家具装饰</li><li>手表饰品</li><li>鞋包皮具</li><li>家用电器</li><li>电脑办公</li><li>玩具文具</li><li>汽车用品</li><li>手机通讯</li><li>流行饰品</li></ul></div><div class="letft_bottom"><h3>推荐榜单</h3><ul><li>图书畅销榜</li><li>音乐畅销榜</li><li>影视畅销榜</li><li>百货畅销榜</li><li>图书飙升榜</li><li>新书热卖榜</li></ul></div>
</div>

左侧——CSS代码如下（示例）： 

/* 左侧 */
.letft_top,.letft_bottom{background-color: #fcf9ea;width: 200px;border: 2px solid #d8ac52;
}
.left h3{height: 27px;background-image: url(navTitleBg.jpg);padding: 3px 0px 0px 30px;color: #FBFAF0;font-size: 12px;
}
.left ul{padding: 10px;margin: 10px 0px 0px 30px;
}
.left ul li{padding-left: 15px;background-image: url(dot.jpg);background-repeat: no-repeat;background-position: 0px center;/* padding-top: 10px; */line-height: 26px;
}
.letft_bottom{margin-top: 10px;
}

 右侧——HTML代码如下（示例）： 

<!-- 右边 -->
<div class="right"><div class="right_top"><h3 class="h3_1">数码影音</h3><hr><img src="image/item_1.gif" id="ceshi"><img src="image/item_2.gif" id="ceshi2"><img src="image/item_3.gif" id="ceshi3"><img src="image/item_4.gif" id="ceshi4"><img src="image/item_5.gif" id="ceshi5"><img src="image/electron-01.jpg"><img src="image/electron-02.jpg"><img src="image/electron-03.jpg"><img src="image/electron-04.jpg"><img src="image/electron-05.jpg"><ul><li><p class="text_1"><a href="#">【仅限一天】爱国者半导体铁盒U10000毫</a></p><p class="text_2">￥699.00</p><p class="text_3">￥299.00</p></li><li><p class="text_1"><a href="#">【限时抢购】羽博YB637 YB647移动电源苹</a></p><p class="text_2">￥499.00</p><p class="text_3">￥199.00~359.00</p></li><li><p class="text_1"><a href="#">【2013升级版/热销5000件】Philips/飞利</a></p><p class="text_2">￥499.00</p><p class="text_3">￥299.00</p></li><li><p class="text_1"><a href="#">【绝对超值】紫光电子 双声道立体声耳机</a></p><p class="text_2">￥99.00</p><p class="text_3">￥49.00</p></li><li><p class="text_1"><a href="#">【热销2000台】紫光电子 专业高清V-P30</a></p><p class="text_2">￥599.00</p><p class="text_3">￥299.00</p></li></ul></div><div id="aaa" class="right_top"><h3 class="h3_2">家居装饰</h3><hr><img src="image/item_1.gif" id="ceshi"><img src="image/item_2.gif" id="ceshi2"><img src="image/item_3.gif" id="ceshi3"><img src="image/item_4.gif" id="ceshi4"><img src="image/item_5.gif" id="ceshi5"><img src="image/home-1.jpg" ><img src="image/home-2.jpg" ><img src="image/home-3.jpg" ><img src="image/home-4.jpg" ><img src="image/home-5.jpg" ><ul><li><p class="text_1"><a href="#">诗蔓 【原创正品 独家首发】专柜正品 纯</a></p><p class="text_2">￥568.00</p><p class="text_3">￥299.00</p></li><li><p class="text_1"><a href="#">鼎顺 29.9秒杀 天然红檀木 佛珠手链手</a></p><p class="text_2">￥99.00</p><p class="text_3">￥29.00</p></li><li><p class="text_1"><a href="#">KASSIA卡希雅正品 9-10mm天然珍珠项链 </a></p><p class="text_2">￥1280.00</p><p class="text_3">￥258.00</p></li><li><p class="text_1"><a href="#">欧炫 最爱四叶草奥地利元素 水晶材质项</a></p><p class="text_2">￥299.00</p><p class="text_3">￥68.00</p></li><li><p class="text_1"><a href="#">凤凰涅磐项链 女 手链 天然水晶干青手串</a></p><p class="text_2">￥398.00</p><p class="text_3">￥198.00</p></li></ul></div><div id="bbb" class="right_top"><h3 class="h3_3">流行饰品</h3><hr><img src="image/item_1.gif" id="ceshi"><img src="image/item_2.gif" id="ceshi2"><img src="image/item_3.gif" id="ceshi3"><img src="image/item_4.gif" id="ceshi4"><img src="image/item_5.gif" id="ceshi5"><img src="image/beauty-1.jpg" ><img src="image/beauty-2.jpg" ><img src="image/beauty-3.jpg" ><img src="image/beauty-4.jpg" ><img src="image/beauty-5.jpg" ><ul><li><p class="text_1"><a href="#">当当优品 牛津布百纳箱 收纳箱 66L（多</a></p><p class="text_2">￥179.00</p><p class="text_3">￥79.00~89.00</p></li><li><p class="text_1"><a href="#">当当优品 全棉柔软吸水 纯色经典家庭中</a></p><p class="text_2">￥49.00</p><p class="text_3">￥29.00</p></li><li><p class="text_1"><a href="#">索尔诺五层儿童书柜/多功能收纳层架/简</a></p><p class="text_2">￥200.00</p><p class="text_3">￥105.00</p></li><li><p class="text_1"><a href="#">[当当自营]LOCK&LOCK乐扣 格拉斯耐</a></p><p class="text_2">￥299.00</p><p class="text_3">￥156.00</p></li><li><p class="text_1"><a href="#">[当当自营]LOCK&LOCK乐扣 运动水杯</a></p><p class="text_2">￥149.00</p><p class="text_3">￥89.00</p></li></ul></div>
</div>

 右侧——CSS代码如下（示例）：

/* 右侧 */
.right{width: 746px;padding-left: 10px;
}
.h3_1,.h3_2,.h3_3{color: #C68B00;padding-left: 30px;background-image: url(titleDot.jpg);background-repeat: no-repeat;background-position: 0px center;
}
.h3_2,.h3_3{background-image: url(titleDot.jpg);background-repeat: no-repeat;background-position: 0px 233px;
}
.right_middle{background-position: 100px center;
}
.left,.right{margin-top: 10px;float: left;
}
hr{margin-top: 3px;background-color: #d59c39;border: 1px solid #d59c39;
}
.right_top img{transform: translateY(-20px);position: relative;background-size: 20%;width: 122px;border: 1px solid #ABABAB;margin: 0px 0px 0px 24px;float: left;
}
#ceshi,#ceshi2,#ceshi3,#ceshi4,#ceshi5{z-index: 2;top: 30px;position: relative;margin-right: 94px;width: 30px;border: 0px solid #000000;
}
.right_top ul li{transform: translate(6px,-18px);margin-right: -2px;padding-right : 10px;font-size: 2px;width: 141px;float: left;
}
.right_top a{color: #3c83d0;
}
.text_2{text-decoration: line-through;color: #978D8D;padding-top: 6px;
}
.text_3{padding-top: 6px;color: red;font-weight: bold;font-size: 14px;
}

5.底部

效果图：

  

HTML代码如下（示例）：

<div class="footer"><hr><ul><li><a>Copyright(C)当当网2004-2013,All&nbsp;Rights&nbsp;Reserved</a></li><li><a><img src="image/validate.gif" ></a></li><li><a>京ICP证0141189号出版物经营许可证&nbsp;新发出京批字第直0673号</a></li></ul>
</div>

 CSS代码如下（示例）：

.footer{transform: translateY(20px);
}
.footer hr{border: 1px solid #a8a8a8;
}
.footer ul li{margin-top: 30px;transform: translateX(44px);float: left;
}
.footer img{transform: translateY(-26px);
}
#right_top_two{transform: translateY(300px);
}

 6.附录

整套资源可自己替换或滴滴我 


http://www.ppmy.cn/news/381613.html

相关文章

拆解报告：羽博 10PD 10000mAh 移动电源,智融SW6206全协议快充芯片

拆解报告：羽博 10PD 10000mAh 移动电源,智融SW6206全协议快充芯片

羽博是一个大家非常熟悉的充电宝品牌&#xff0c;此前充电头网已经为大家拆解过多款羽博充电宝&#xff0c;感兴趣的小伙伴可以回看之前的拆解报告&#xff1a;《羽博 30000mAh 全接口快充移动电源拆解》、《温和实力派 羽博 Q10000 快充移动电源测试拆解》、《首创 USB-C to L…
阅读更多...
将Excel文件一键解析为list对象集合

将Excel文件一键解析为list对象集合

调用代码&#xff1a; Override public List<VirtualSettleAccountExcelData> importExcel(String accountNo, MultipartFile file) {List<VirtualSettleAccountExcelData> virtualSettleAccountExcelDataListnull;try {String name file.getOriginalFilename();i…
阅读更多...
JDBC Apache—DBUtils 详解（通俗易懂）

JDBC Apache—DBUtils 详解（通俗易懂）

目录 一、前言 二、Apache—DBUtils的引入 1.传统使用ResultSet的缺点 : 2.改进方法 : 3.改进方法的模拟实现 : 三、Apache—DBUtils的使用 1.基本介绍 : 2.准备工作 : 3.DBUtils查询(DQL) : 4.query方法源码分析 : 5.DBUtils处理(DML) : 四、总结 一、前言 第六节…
阅读更多...
[学习笔记] [机器学习] 11. EM算法（极大似然估计、EM算法实例、极大似然估计取对数的原因）

[学习笔记] [机器学习] 11. EM算法（极大似然估计、EM算法实例、极大似然估计取对数的原因）

视频链接数据集下载地址&#xff1a;无需下载 学习目标&#xff1a; 了解什么是 EM 算法知道极大似然估计知道 EM 算法实现流程 讲 EM 算法主要是为了后面的 HMM 做准备。 1. 初始 EM 算法 EM 算法&#xff08;Expectation-Maximization algorithm&#xff0c;期望最大化算法…
阅读更多...
使用yum 源安装nginx

使用yum 源安装nginx

执行以下命令&#xff0c;添加Nginx到yum源。 sudo rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm 添加完之后&#xff0c;执行以下命令&#xff0c;查看是否已经添加成功。 yum search nginx 添加成功之后&#xf…
阅读更多...
月入6000+的CSGO游戏搬砖项目操作细节和要求

月入6000+的CSGO游戏搬砖项目操作细节和要求

月入6000的CSGO游戏搬砖项目操作细节和要求 最近咨询CSGO搬砖项目的人较多&#xff0c;在此整理一份统一的项目操作细节和要求。 1、什么是国外Steam游戏装备汇率差项目&#xff1f; 这个项目的基本原理是&#xff1a;购买国外Steam游戏平台上的装备&#xff0c;再在国内网易…
阅读更多...
【统计模型】缺失数据处理方法

【统计模型】缺失数据处理方法

目录 一、缺失数据定义 二、缺失数据原因 三、缺失数据处理步骤 四、数据缺失机制 1.完全随机缺失&#xff08;MCAR&#xff09; 2.随机缺失&#xff08;MAR&#xff09; 3.非随机、不可忽略缺失&#xff08;NMAR&#xff09; 五、缺失数据处理方法 1.直接删除 2.缺失值…
阅读更多...
用python画多来a梦-用python画哆啦a梦

用python画多来a梦-用python画哆啦a梦

广告关闭 2017年12月，云+社区对外发布，从最开始的技术博客到现在拥有多个社区产品。未来，我们一起乘风破浪，创造无限可能。 也收到了读者想用 python 画各种图的各种需求。 和一些读者沟通后才知道是学校布置了相关的作业，或者是自己想用这个来做毕业设计。 关于这个问题…
阅读更多...
最新文章

Copyright @ 2022~2023