admin管理员组文章数量:1535040
开始模拟京东首页，现在模拟京东头部
经验教训，写代码前一定先思考如何布局，直接动手的话全部布局就会乱完，写完这个顶头菜单思路全乱乱的，不想重新写顶头菜单代码了，就这样吧，已经吸取教训了
点击跳转页面就不设计了，与之前点击事件都差不多，这个练习需要一点布局能力，js事件很少
练习组件：横向菜单
效果视频：
模拟京东-01
html内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="http://at.alicdn/t/c/font_4524646_npsguae97n.css">
<link rel="stylesheet" href="./index.css">
<link rel="stylesheet" href="./model-1.css">
<link rel="stylesheet" href="./model-2.css">
</head>
<body>
<div class="box">
<div class="model-1">
<div class="model1-item-1">
<span class="iconfont icon-ditu-dibiao"></span>
<span>广西</span>
<div>
<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>
<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>
<li>新疆</li>
<li>港澳</li>
<li>台湾</li>
<li>钓鱼岛</li>
<li>海外</li>
</ul>
<span>地区专享版本</span>
<ul class="model1-ul2">
<li>中國港澳</li>
<li>中國台湾</li>
<li>京东全球</li>
</ul>
</div>
</div>
<div class="model1-item-2">
<span>切换至企业版</span>
<span>你好，<span>请登录</span></span>
</div>
<div class="model1-item"><span>免费注册</span></div>
<div class="model1-item"><span>我的订单</span></div>
<div class="model1-item model1-item5">
<span>我的京东<span class="iconfont icon-xiangxia"></span></span>
<div>
<ul>
<li>待处理订单</li>
<li>我的问答</li>
<li>降价商品</li>
<li>返修退换货</li>
<li>我的关注</li>
</ul>
<ul>
<li>我的京豆</li>
<li>我的优惠券</li>
<li>我的白条</li>
<li>我的理财</li>
</ul>
<ul>
<li>帮助中心</li>
<li>售后服务</li>
<li>在线客服</li>
<li>意见建议</li>
<li>电话客服</li>
<li>客服油箱</li>
<li>金融咨询</li>
<li>全球售客服</li>
<li>企业客服</li>
</ul>
</div>
</div>
<div class="model1-item model1-item6">
<span>企业采购<span class="iconfont icon-xiangxia"></span></span>
<div>
<ul>
<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>
<div class="model1-item model1-item7">
<span>商家服务<span class="iconfont icon-xiangxia"></span></span>
<div>
<ul>
<li>合作招商</li>
<li>学习中心</li>
<li>商家后台</li>
<li>京麦工作台</li>
<li>商家帮助</li>
<li>规则平台</li>
</ul>
</div>
</div>
<div class="model1-item model1-item8">
<span>网站导航<span class="iconfont icon-xiangxia"></span></span>
<div>
<div class="model1-item8-div">
<div>
<h4>特色主体</h4>
<ul>
<li>京东金融</li>
<li>全球售</li>
<li>台湾售</li>
<li>装机大师</li>
<li>港澳售</li>
<li>秒杀</li>
<li>陪伴计划</li>
<li>出海招商</li>
<li>拍拍二手</li>
</ul>
</div>
<div>
<h4>行业频道</h4>
<ul>
<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>
<h4>生活服务</h4>
<ul>
<li>白条</li>
<li>京东金融APP</li>
<li>京东小金库</li>
<li>话费</li>
<li>水电煤</li>
<li>彩票</li>
<li>机票酒店</li>
<li>电影票</li>
<li>京东到家</li>
<li>游戏</li>
<li>拍拍回收</li>
<li>买车险</li>
</ul>
</div>
<div>
<h4>更多精彩</h4>
<ul class="model1-item8-ul3">
<li>合作招商</li>
<li>京东通信</li>
<li>京东E卡</li>
<li>企业采购</li>
<li>服务市场</li>
<li>校园加盟</li>
<li>知识产权维权</li>
<li>京东安联保险</li>
<li>京东保险代理</li>
<li>京东零售云</li>
<li>关于我们</li>
</ul>
</div>
</div>
</div>
</div>
<div class="model1-item"><span>手机京东</span></div>
<div class="model1-item"><span>网站无障碍</span></div>
</div>
<div class="model-2"></div>
<div class="model-3"></div>
<div class="model-4"></div>
<div class="model-5"></div>
</div>
<script type="text/javascript" src="./model1.js"></script>
</body>
</html>css内容：
index.css
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
body{
background-color: #e3e4e6;
}
.box{
width: 100vw;
}model1.css
.model-1{
width: 80%;
height: 40px;
margin: auto;
display: flex;
align-items: center;
color: #9b9b99;
font-size: 14px;
}
.model-1 div{
height: 100%;
line-height: 38px;
}
.model-1 .model1-item-1{
line-height: 35px;
padding-left: 5px;
padding-right: 10px;
font-size: 14px;
position: relative;
}
.model-1 .model1-item-1 span:nth-child(1){
margin-left: 3px;
}
.model-1 .icon-ditu-dibiao{
color: red;
}
.model-1 .model1-item-1:hover{
background-color: #ffffff;
}
.model-1 .model1-item-1:hover span{
color: red;
}
.model-1 .model1-item-1 div{
position: absolute;
top: 41px;
left: 0;
height: 300px;
background-color: #ffffff;
border-left: 1px solid #9b9b99;
border-right: 1px solid #9b9b99;
border-bottom: 1px solid #9b9b99;
display: none;
}
.model-1 .model1-item-1 div ul{
padding-top: 10px;
padding-bottom: 10px;
width: 350px;
text-align: center;
display: flex;
flex-wrap: wrap;
}
.model-1 .model1-item-1 div ul li{
margin-left: 10px;
margin-right: 10px;
padding: 8px;
line-height: 10px;
}
.model-1 .model1-item-1 div ul li:nth-child(11){
margin-right: -4px;
}
.model-1 .model1-item-1 div ul li:nth-child(34){
margin-right: -4px;
}
.model-1 .model1-item-1 div span{
margin-left: 17px;
}
.model-1 .model1-item-1 div ul li:hover{
background-color: #f4f4f4;
color: red;
}
.model-1 .model1-item-1:hover div{
display: block;
}
.model-1 .model1-item-2 span:nth-child(2){
margin-left: 204px;
}
.model-1 .model1-item-2 span:hover{
color: red;
}
.model-1 .model1-item-2 span span{
color: red;
}
.model-1 .model1-item-2{
margin-left: 10px;
margin-right: 10px;
}
.model-1 .model1-item{
width: 85px;
text-align: center;
position: relative;
}
.model-1 .model1-item:hover{
background-color: #ffffff;
}
.model-1 .model1-item span:hover{
color: red;
}
.model-1 .model1-item .icon-xiangxia{
font-size: 1px;
margin-left: 5px;
}
.model-1 .model1-item > div{
position: absolute;
top: 40px;
background-color: #ffffff;
border-left: 1px solid #9b9b99;
border-right: 1px solid #9b9b99;
border-bottom: 1px solid #9b9b99;
}
.model-1 .model1-item5 div{
height: 277px;
display: none;
}
.model-1 .model1-item5 div ul{
width: 280px;
display: flex;
flex-wrap: wrap;
padding-top: 15px;
padding-left: 10px;
padding-bottom: 15px;
}
.model-1 .model1-item5 div ul li{
margin-right: 20px;
line-height: 26px;
}
.model-1 .model1-item5 ul:nth-child(2) {
border-top: 1px solid #9b9b99;
border-bottom: 1px solid #9b9b99;
}
.model-1 .model1-item6 div{
height: 180px;
display: none;
}
.model-1 .model1-item6 div ul{
width: 170px;
display: flex;
flex-wrap: wrap;
padding-top: 15px;
padding-left: 10px;
}
.model-1 .model1-item6 div ul li{
margin-right: 15px;
line-height: 26px;
}
.model-1 .model1-item7 div{
height: 100px;
display: none;
}
.model-1 .model1-item7 div ul{
width: 160px;
display: flex;
flex-wrap: wrap;
padding-top: 15px;
padding-left: 10px;
}
.model-1 .model1-item7 div ul li{
margin-right: 15px;
line-height: 26px;
}
.model-1 .model1-item div ul li:hover{
color: red;
}
.model-1 .model1-item:hover div{
display: block;
}
.model-1 .model1-item8 div{
height: 150px;
left: -1000px;
line-height: 25px;
display: none;
}
.model-1 .model1-item8 div .model1-item8-div{
display: flex;
text-align: start;
}
.model-1 .model1-item8 div .model1-item8-div div{
padding: 15px;
}
.model-1 .model1-item8 div .model1-item8-div div ul{
width: 300px;
height: 100px;
display: flex;
flex-wrap: wrap;
border-right: 1px solid #9b9b99;
}
.model-1 .model1-item8 div .model1-item8-div div ul li{
width: 100px;
}
.model-1 .model1-item8 div .model1-item8-div div .model1-item8-ul3{
border-right: 0;
}js内容：model1.js
var area = document.querySelector('.box .model-1 .model1-item-1 span:nth-child(2)')
var areaAll = document.querySelectorAll('.box .model-1 .model1-item-1 div ul li')
areaAll.forEach((item) => {
item.addEventListener('click', () => {
var areaText = item.textContent
area.innerHTML = areaText
})
})版权声明：本文标题：HTML+CSS+JS练习设计06 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1726894456a1089031.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论