网页开发——淘宝首页导航

这篇博文主要是重新学习（复习）前端知识，通过写淘宝购物首页导航为案例。

html主要书写内容：

1.首先我写了一个大盒子，用于存放所用的全部标签

<div class="nav">主要内容 </div>

2.插入一张淘宝网图片

<img src="./images/tabao.jpg" alt="淘宝网站商标" >

3.在淘宝网图片右边写一个大盒子用于存放搜索引擎与一些主要购物大板块的链接

<div class="search_box"> </div>

4 .在search_box大盒子里面放入搜索框和搜索按钮以及装购物超标签的盒子

<span class="search_warp"> <input type="text" class="search_text" value="女装"></span>

<input type="submit" value="搜索" class="search_button">

<div class="search_links"></div>

5.在search_links盒子写入常购物板块的超链接

<a href="#" class="red">一淘限时</a>

<a href="#">苹果</a>

<a href="#">手链</a>

<a href="#">窗帘</a>

<a href="#">女裤</a>

<a href="#">mac</a>

<a href="#">手表</a>

<a href="#">女袜</a>

<a href="#">电动牙刷</a>

<a href="#">杯子</a>

<a href="#">包包</a>

css主要书写内容：

<style>div{display: block;}.nav{width: 1438px;height: 125px;/* background-color: pink; */text-align: center;}.nav img{padding: 22px 0 23px;/* display: inline-block; */height: auto;max-width: 100%;vertical-align: top}.nav .search_box{position: relative;display:inline-block;width: 690px;height: px;/* background-color: g */border: 3px solid #f03726;border-right: 0;/* float: right; */height: 34px;line-height: 23px;margin-top: 30px;margin-left: 80px;  }.search_text{height: 23px;font-size: 12px;border: 0;width: 85%;outline: 0;/* padding-top: 5px; */margin-top: 5px; }.search_button{width: 95px;height: 40px;border: 0;position: absolute;top: -3px;right: 0;background: #f03726;color: #f5f5f2;font-size: 18px;float: right;}.search_warp{display: inline;overflow: hidden;padding: 8px 110px 8px 10px}.search_links{text-decoration: none;padding-top: 10px;height: 23px;line-height: 23px;overflow: hidden;width: 690px;text-align: left;margin-left: 18px;color: #000;/* display: block; */}.search_links .red{color: red;}a{text-decoration: none;}.search_links a{float: left;margin-right: 20px;}</style>

淘宝首页导航标签的实现：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>淘宝主页</title><style>div{display: block;}.nav{width: 1438px;height: 125px;/* background-color: pink; */text-align: center;}.nav img{padding: 22px 0 23px;/* display: inline-block; */height: auto;max-width: 100%;vertical-align: top}.nav .search_box{position: relative;display:inline-block;width: 690px;height: px;/* background-color: g */border: 3px solid #f03726;border-right: 0;/* float: right; */height: 34px;line-height: 23px;margin-top: 30px;margin-left: 80px;  }.search_text{height: 23px;font-size: 12px;border: 0;width: 85%;outline: 0;/* padding-top: 5px; */margin-top: 5px; }.search_button{width: 95px;height: 40px;border: 0;position: absolute;top: -3px;right: 0;background: #f03726;color: #f5f5f2;font-size: 18px;float: right;}.search_warp{display: inline;overflow: hidden;padding: 8px 110px 8px 10px}.search_links{text-decoration: none;padding-top: 10px;height: 23px;line-height: 23px;overflow: hidden;width: 690px;text-align: left;margin-left: 18px;color: #000;/* display: block; */}.search_links .red{color: red;}a{text-decoration: none;}.search_links a{float: left;margin-right: 20px;}</style>
</head>
<body><div class="nav"><img src="./images/tabao.jpg" alt="淘宝网站商标" ><div class="search_box"><span class="search_warp">  <input type="text" class="search_text" value="女装"></span><input type="submit" value="搜索" class="search_button"><div class="search_links"><a href="#" class="red">一淘限时</a><a href="#">苹果</a><a href="#">手链</a><a href="#">窗帘</a><a href="#">女裤</a><a href="#">mac</a><a href="#">手表</a><a href="#">女袜</a><a href="#">电动牙刷</a><a href="#">杯子</a><a href="#">包包</a></div></div></div>
</body>
</html>

运行结果：

代码中使用的图片，我将其放入到百度网盘中，大家可以自己去提取：

链接：https://pan.baidu.com/s/1nKw1vN6ovzm4K7VRk17hPg?pwd=1mvr
提取码：1mvr

网页开发——淘宝首页导航相关推荐

还原淘宝首页最顶部的导航栏（含下拉菜单，图标等）
还原了淘宝首页最顶部的导航栏,包括了各个导航的下拉列表等(位置对齐稍微有些偏差,毕竟没有原版设计图),用到了jquery,js,CSS3等知识.没有花时间去做录屏GIF,就几张效果图看下:如下原始导 ...
HTML5期末大作业：淘宝网站设计——仿2018淘宝首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码
HTML5期末大作业:淘宝网站设计--仿2018淘宝首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计作 ...
HTML5期末大作业：淘宝网站设计——仿2021淘宝首页(1页) 大学生网页制作教程表格布局网页模板学生HTML静态水网页设计作业成品简单网页制作代码学生商城网页作品免费设计
HTML5期末大作业:淘宝网站设计--仿2021淘宝首页(1页) 大学生网页制作教程表格布局网页模板学生HTML静态水网页设计作业成品简单网页制作代码学生商城网页作品免费设计常见网页设计作业 ...
python开发跟淘宝有联系没_python每日获取淘宝首页关键字推荐词
每日美图介绍因为自己想着手搞一波淘宝,准备用于获取淘宝首页关键字推荐词,想化妆品.服装这种我们是不适合做的竞争太大了. 我们暂时定为水杯这种小类目的,对于新开的店面除了刷单,最重要的还是自然流量. ...
HTML+CSS零基础学习笔记（五）— 模拟淘宝首页（静态）
内容概览模拟淘宝首页(静态) 一.项目重难点二.效果图及源码模拟淘宝首页(静态) 一.项目重难点样式重置:在实际开发过程中,我们往往会新建一个单独的CSS文件(reset.css),用于对应H ...
我秀秀淘宝购物导航淘宝客api程序源码版(.net源码)
程序介绍: 程序采用.net 2.0进行开发,全自动应用淘客api,自动采集信息,无需,手工更新,源码完全开放. 针对淘客3/300毫秒的查询限制,系统采用相应的解决方案,可以解决大部分因此限制带来的 ...
淘宝首页html css
自己做了一个淘宝首页的HTML+CSS 新手有不足,请指教在这里插入代码片 ```<!DOCTYPE html> <html> <head><meta ch ...
《淘宝首页性能优化实践》文章阅读
想必很多人都已经看到了新版的淘宝首页,它与以往不太一样,这一版页面中四处弥散着个性化的味道,由于独特的个性化需求,前端也面临各方面的技术挑战: 数据来源多串行请求渲染一个模块运营数据和个性化数据匹 ...
7.25 web前端-淘宝首页设计
hello everybody,许久不见,甚是想念,关于我为什么四天没更新博客的原因就是本次文章的标题,没错,我们老师布置了项目设计,而我这个大怨种选择了淘宝首页这个页面内容多的,以至于我这个小白敲了 ...

网页开发——淘宝首页导航

网页开发——淘宝首页导航相关推荐

最新文章

热门文章