会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132460个问题
WEB前端全系列/第二阶段:JavaScript编程模块/函数与对象 20403楼
JAVA 全系列/(隐藏)第二十三阶段:数字货币交易所项目/服务中台_后台管理系统的开发 20404楼
JAVA 全系列/第一阶段:JAVA 快速入门/飞机大战小项目训练 20405楼
JAVA 全系列/第五阶段:JavaWeb开发/Ajax技术详解(旧) 20407楼
WEB前端全系列/第十三阶段:微信小程序-安心食疗(旧)/安心食疗-页面跳转 20409楼
JAVA 全系列/第三阶段:数据库编程/MySQL数据库的使用 20410楼
JAVA 全系列/第四阶段:网页编程和设计/HTML5(旧) 20411楼
Python 全系列/第十五阶段:Python 爬虫开发/爬虫基础(旧) 20413楼

老师,我这个京东的图标和搜索框的图标,运行完和视频里的不一样,我这个完全置右侧和左侧了

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<link rel="stylesheet" type="text/css" href="css/reset.css" />

<link rel="stylesheet" type="text/css"  href="css/jd.css" />

<link rel="stylesheet" type="text/css" href="icon/iconfont.css" />

</head>

<body>

<!--导航开始-->

<div  class="nav">

<div class="warp">

<!--ul>li*2>a--> 

<ul class="nav_ul1">

<li><a href=""><i class="iconfont">&#xe6d3;</i>京东首页</a></li>

<li><a href="">配送到:北京</a></li>

</ul>

<!--ul>li*9>a-->

<ul>

<ul class="nav_ul2">

<li><a href="">洋洋宝贝</a><span>|</span></li>

<li><a href="">我的订单</a><span>|</span></li>

<li><a href="">我的京东</a><span>|</span></li>

<li><a href="">京东会员</a><span>|</span></li>

<li><a href="">企业采购</a><span>|</span></li>

<li><a href="">京东手机</a><span>|</span></li>

<li><a href="">关注京东</a><span>|</span></li>

<li><a href="">客户服务</a><span>|</span></li>

<li><a href="">网站导航</a></li>

</ul>

</ul>

</div>

</div>

<!--导航结束-->

<!--搜索框开始-->

<div class="search">

<div  class="wrap">

<img src="img/logo.jpg"/>

<div class="search_div">

<input  type="text"/>

<input type="button" value="搜索"/>

</div>

<!--搜索框结束-->

</body>

</html>


jd文件

.nav{

height: 30px;

background-color:#f1f1f1;

}



.warp{

width:1000px;

margin:0px  auto;

/*border:1px  solid red;*/

}

.nav_ul1,.nav_ul2 li{

float:left;

}

.nav_ul1 li{

float:left;

line-height: 30px;

margin-right: 20px;

}

.nav_ul1 a,.nav_ul2 a,.nav_ul2 span{

font-size:12px;

color: gray;

}

.nav_ul2{

float:right;

}

.nav_ul2 li{

line-height:30px;

margin-left: 10px;

}

.nav a:hover{

color:red;

}

/*搜索框开始*/

.search{

margin-top: 20px;

}


.search img{

/*清除之前的样式*/

clear: both;

float:left;

}

/*搜索框结束*/

.search_div{

float: right;

}

image.png

JAVA 全系列/第四阶段:网页编程和设计/CSS3(旧) 20414楼

老师,我这个京东的图标和搜索框的图标,运行完和视频里的不一样,我这个完全置右侧和左侧了

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<link rel="stylesheet" type="text/css" href="css/reset.css" />

<link rel="stylesheet" type="text/css"  href="css/jd.css" />

<link rel="stylesheet" type="text/css" href="icon/iconfont.css" />

</head>

<body>

<!--导航开始-->

<div  class="nav">

<div class="warp">

<!--ul>li*2>a--> 

<ul class="nav_ul1">

<li><a href=""><i class="iconfont">&#xe6d3;</i>京东首页</a></li>

<li><a href="">配送到:北京</a></li>

</ul>

<!--ul>li*9>a-->

<ul>

<ul class="nav_ul2">

<li><a href="">洋洋宝贝</a><span>|</span></li>

<li><a href="">我的订单</a><span>|</span></li>

<li><a href="">我的京东</a><span>|</span></li>

<li><a href="">京东会员</a><span>|</span></li>

<li><a href="">企业采购</a><span>|</span></li>

<li><a href="">京东手机</a><span>|</span></li>

<li><a href="">关注京东</a><span>|</span></li>

<li><a href="">客户服务</a><span>|</span></li>

<li><a href="">网站导航</a></li>

</ul>

</ul>

</div>

</div>

<!--导航结束-->

<!--搜索框开始-->

<div class="search">

<div  class="wrap">

<img src="img/logo.jpg"/>

<div class="search_div">

<input  type="text"/>

<input type="button" value="搜索"/>

</div>

<!--搜索框结束-->

</body>

</html>


jd文件

.nav{

height: 30px;

background-color:#f1f1f1;

}



.warp{

width:1000px;

margin:0px  auto;

/*border:1px  solid red;*/

}

.nav_ul1,.nav_ul2 li{

float:left;

}

.nav_ul1 li{

float:left;

line-height: 30px;

margin-right: 20px;

}

.nav_ul1 a,.nav_ul2 a,.nav_ul2 span{

font-size:12px;

color: gray;

}

.nav_ul2{

float:right;

}

.nav_ul2 li{

line-height:30px;

margin-left: 10px;

}

.nav a:hover{

color:red;

}

/*搜索框开始*/

.search{

margin-top: 20px;

}


.search img{

/*清除之前的样式*/

clear: both;

float:left;

}

/*搜索框结束*/

.search_div{

float: right;

}

image.png

JAVA 全系列/第四阶段:网页编程和设计/CSS3(旧) 20415楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637