HTML+CSS制作仿制当当网
2024-04-29 03:47:16
新程序员：一起进步
目录
前言
一、项目代码
1.头部
2.导航栏
3.banner图
4.主体
5.底部
6.附录
前言
本项目是基于Html5+CSS3技术所制作的静态网页，适合新手练习学习完成html之后所独立完成的静态网页
一、项目代码
1.头部
效果图：
div盒子模型
HTML代码如下（示例）：
<!-- 头部 -->
<div class="header"><img src="data:image/logo.jpg"><div class="header_text"><img src="data: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="data: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="data:image/item_1.gif" id="ceshi"><img src="data:image/item_2.gif" id="ceshi2"><img src="data:image/item_3.gif" id="ceshi3"><img src="data:image/item_4.gif" id="ceshi4"><img src="data:image/item_5.gif" id="ceshi5"><img src="data:image/electron-01.jpg"><img src="data:image/electron-02.jpg"><img src="data:image/electron-03.jpg"><img src="data:image/electron-04.jpg"><img src="data: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="data:image/item_1.gif" id="ceshi"><img src="data:image/item_2.gif" id="ceshi2"><img src="data:image/item_3.gif" id="ceshi3"><img src="data:image/item_4.gif" id="ceshi4"><img src="data:image/item_5.gif" id="ceshi5"><img src="data:image/home-1.jpg" ><img src="data:image/home-2.jpg" ><img src="data:image/home-3.jpg" ><img src="data:image/home-4.jpg" ><img src="data: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="data:image/item_1.gif" id="ceshi"><img src="data:image/item_2.gif" id="ceshi2"><img src="data:image/item_3.gif" id="ceshi3"><img src="data:image/item_4.gif" id="ceshi4"><img src="data:image/item_5.gif" id="ceshi5"><img src="data:image/beauty-1.jpg" ><img src="data:image/beauty-2.jpg" ><img src="data:image/beauty-3.jpg" ><img src="data:image/beauty-4.jpg" ><img src="data: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 Rights Reserved</a></li><li><a><img src="data:image/validate.gif" ></a></li><li><a>京ICP证0141189号出版物经营许可证 新发出京批字第直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.附录
整套资源可自己替换或滴滴我
HTML+CSS制作仿制当当网相关推荐
- HTML+CSS制作小米官网
经过一个星期学习了中国大学MOOC上北京林业大学精品课--<Web前端开发>(对小白来说太友好).看完之后为了巩固学过的知识点,对着小米官网的布局敲了一遍.本着记录学习的想法发了这篇文章. ...
- 静态小米官网主页html5设计,web案例-css制作小米官网产品展示
web前端群,189394454,有视频.源码.学习方法等大量干货分享 效果知识点: 企业布局思维的巧妙运用, DIV加CSS,css样式拆解与归类,css3过度与阴影,定位与动,常用如何搭配,开发标 ...
- HTML XHTML CS3 JS网页制作(IT培训网站设计+当当网首页设计)
HTML XHTML CS3 JS网页制作(IT培训网站设计+当当网首页设计) 百度云链接:http://pan.baidu.com/s/1hrH6qck 密码:bc4n 01.HTML基本标签_理论 ...
- 当当网首页——CSS代码
@charset "utf-8"; /* CSS Document *//*首页样式*/ /*右侧随鼠标滚动的广告图片*/ .right{top:50px;right:30px;p ...
- table虚线边框_web前端工程师7天0基础到精通（TABLE+CSS制作《互联世纪网》）
项目七 项目实践:TABLE+CSS制作<互联世纪网> 实践目标 1. 熟悉CSS属性 2. 熟练运用CSS属性控制网页样式 3. 熟悉网页制作流程 项目简介: 通过上一章节的学习,我们了 ...
- HTML CSS 模仿当当网
使用HTML + CSS 编写当当网 效果图如下展示: 代码块: <!DOCTYPE html> <html><head><meta charset=&quo ...
- 静态网页制作—制作“当当网首页”
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...
- HTML+CSS初学者练习项目4：利用DIV+CSS制作《互联世纪网》
适合初学者练习的HTML项目:利用DIV+CSS制作制作一个<互联世纪网>网页. 需要掌握内容: HTML+CSS第八课:使用CSS布局网页--网页中块级元素与行内元素.盒子模型的理解 H ...
- 使用HTML+CSS制作网易云轮播
使用HTML和CSS制作网易云轮播 今天现来说说使用CSS的动画技术来实现轮播.现看看效果图 这里是八张图片渐入渐出的效果轮播. html代码: <!DOCTYPE html&g ...
- 运用HTML+CSS+JS简单制作苹果官网首页
运用HTML+CSS+JS制作苹果官网首页 上次例会所留任务是用上HTML+CSS+JS做一个网页.内容自定. 我想的是做一个苹果官网首页的网页. 大概是这样的:苹果官网首页 我所做的和它相差不多 不 ...
最新文章
- 如何修改可运行Jar包，如何反编译Jar包
- go get 获取被墙依赖包解决方法
- 将已有项目提交到github/从github上pull到本地
- Android中文API（130） —— Html
- 【华为云网络技术分享】HTTP重定向HTTPS配置指南
- Windows Server 2003网络配置与管理 域控制器的管理
- onload、onunload 和 onbeforeunload的区别
- 串行总线 —— I2C、UART、SPI
- python 高阶函数之filter
- matlab高尔顿板钉试验,高尔顿钉板试验动态图形软件的设计与制作
- Element 表格序号问题
- 软件开发合同纠纷的律师随笔
- 微商如何利用微信公众号来盈利
- “软件工程”到底学什么（一）
- **京东撸货是什么，京东撸货具体怎么玩，能不能赚钱，我来告诉你**
- XML解析(DOM方式)
- 美国国家航空航天局NASA的软件项目开源啦~
- 基于Python校园二手书籍交易系统设计与实现 开题报告
- 二叉排序树的平均查找长度(成功不成功)
- IME模内电子导电方案