html和css仿照京东网页页面（文本和链接的跳转）

上图是京东页面的一个参照物
用到的语法：

代码块：

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>京东文本练习</title><style type="text/css">#box{border: 1px solid grey;width: 200px;}#box p{font-size: 14px;text-indent: 15px;line-height: 20px;}#box p a{color: grey;text-decoration: none;}#box p a:hover{color: red;}#box p:hover{background: grey;}</style>
</head>
<body><div id="box"><p><a href="https://jiadian.jd.com/">家用电器</a></p><p><a href="https://shouji.jd.com/">手机</a> /<a href="https://wt.jd.com/">运营商</a> /<a href="https://shuma.jd.com/">数码</a></p><p><a href="#">电脑</a> /<a href="#">办公</a></p><p><a href="#">家居</a>/<a href="#">家具</a> /<a href="#">家装</a> /<a href="#">厨具</a></p>
<p><a href="#">男装</a>/<a href="#">女装</a>/<a href="#">童装</a>/<a href="#">内衣</a></p><p><a href="#">美装</a>/<a href="#">个人清洁</a>/<a href="#">宠物</a></p><p><a href="#">女鞋</a>/<a href="#">箱包</a>/<a href="#">钟表</a>/<a href="#">珠宝</a></p><p><a href="#">男鞋</a>/<a href="#">运动</a>/<a href="#">户外</a></p><p><a href="#">房产</a>/<a href="#">汽车</a>/<a href="#">汽车用品</a></p><p><a href="#">母婴</a>/<a href="#">玩具乐器</a>/<a href="#">食品</a>/<a href="#">酒类</a></p><p><a href="#">艺术</a>/<a href="#">礼品鲜花</a>/<a href="#">农资绿植</a></p><p><a href="#">医药保健</a>/<a href="#">计生情趣</a>/</p><p><a href="#">图书</a>/<a href="#">文娱</a>/<a href="#">教育</a>/<a href="#">电子书</a></p><p><a href="#">机票</a>/<a href="#">酒店</a>/<a href="#">旅游</a>/<a href="#">生活</a></p><p><a href="#">理财</a>/<a href="#">众筹</a>/<a href="#">白条</a>/<a href="#">保险</a></p><p><a href="#">安装</a>/<a href="#">维修</a>/<a href="#">清洗</a>/<a href="#">二手</a></p></div></body>
</html>

效果图：
上图的（家用电器手机运营商数码 要全部添加链接实在太痛苦想要添加后面的链接可以自己添加方法都是一样的）点击是可以直接跳转到到京东相应的页面的，后续想要更多功能可以自己添加。。。。。。。。。。。
链接跳转的如图：
持续更新中。。。。。。。。

html和css仿照京东网页页面（文本和链接的跳转）相关推荐

HTML+CSS仿京东购物车页面静态页面
目录 1 用到的知识 1.1 无序标签的使用 1.2 浮动的使用 1.3 伪类的使用 1.4 清除原有浮动所占位置 1.5 边框背景盒子布局div文字属性等等 2 HTML代码 3 CSS代码 3.1 ...
CSS样式笔记_背景文本字体链接
CSS背景属性: background:简写属性在一个声明中设置所有的背景属性.可以用于设置最底层的背景图片. background-attachment:属性设置背景图像是否固定或者随着页面的其余部 ...
HTML+CSS+JS仿京东购物车页面动态效果
目录 1 用到的知识 1.1 js选择器 1.2 循环语句 1.3 文档修改语句 1.4 模块移除属性 2 HTML代码 3 CSS代码 3.1 预处理css 3.2 jd购物车页面的css 4 jd ...
弹性布局案例实操(京东网页制作的草稿)
CSS3的弹性布局_星辰镜的博客-CSDN博客上面的文章弹性布局的详细介绍: Css3的页面布局之定位_星辰镜的博客-CSDN博客上面的文章是定位的介绍 Day02 了解Html+CSS的学习内容 ...
小程序跳到h5页面_微信小程序跳转到H5页面实战篇
有些场景需要从微信小程序跳转到H5页面,通常网上的教程会告诉你使用web-view组件就可以了,但实际开发中还有很多需要注意的地方,尤其是很多概念往往会把初学者弄糊涂了,下面就让我们从概念开始吧!微信 ...
HTML网页设计期末课程大作业 ~中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码
HTML网页设计期末课程大作业 ~ 中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
html+css实现京东、英雄联盟静态页面
效果展示真高仿,像真的一样,页面的效果几乎都做出来了. 京东刚接触html css的时候写第一个页面,由于当时布局不太熟练,写了将近一个月- 英雄联盟实现功能京东点击切换轮播图京东自动轮播图 ...
HTMl+CSS 模仿京东网登录页面
课后实践项目,仅页面效果,写博客纯属记录! 码云开源仓库地址:https://gitee.com/ynavc/jd 演示地址:https://ynavc.gitee.io/jd 效果图: 实现代码: ...
HTML5期末大作业：运动系列——NBA篮球主题学生网页设计(7个页面) HTML+CSS+JavaScript 体育网页设计HTML代码学生网页课程设计期末作业下载大学生网页设计制作成
HTML5期末大作业:运动系列--NBA篮球主题学生网页设计(7个页面) HTML+CSS+JavaScript 体育网页设计HTML代码学生网页课程设计期末作业下载大学生网页设计制作成临近期末 ...

html和css仿照京东网页页面（文本和链接的跳转）

html和css仿照京东网页页面（文本和链接的跳转）相关推荐

最新文章

热门文章