会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132413个问题
JAVA 全系列/第十八阶段:亿级高并发电商项目_架构/编码(旧)/电商:使用RabbitMQ实现大广告异步缓存 17251楼

老师,我的商品详情展示边框显示不出来

<!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 class="nav_ul1">
					<li><a href=""><i class="iconfont">&#xe6d3;</i>京东首页</a></li>
					<li><a href="">配送至:北京</a></li>
				</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>	  	 	
			</div>
		</div>
		<!--导航结束-->
		
		<!--搜素框开始-->
		<div class="search">
			<div class="warp">
				<img src="img/logo.jpg" />
				<div class="search_div">
					<input class="search_text" type="text" />
					<input class="search_but" type="button" value="搜索" />
				</div>		
			</div>
			
		</div>
		<!--搜索框结束-->
		
		<!--标题开始-->
		<div class="title warp">
			<h3>全部商品</h3>
			<div>
				<span>配送到</span>
				<select>
					<option >昌平区</option>
					<option >顺义区</option>
					<option >大兴区</option>
					<option >朝阳区</option>
				</select>
			</div>
		</div>
		<!--标题结束-->
		
		<!--显示菜单的开始-->
		<div class="tips warp">
			<ul>
				<li>
					<input type="checkbox" />
					全选
				</li>
				<li>商品</li>
				<li>单价</li>
				<li>数量</li>
				<li>小计</li>
				<li>操作</li>
			</ul>
		</div>
		<!--显示菜单的结束-->
		
		<!--商品详情展示的开始-->
		<div class="info warp">
			<ul>
				<li>
					<input type="checkbox" />
				</li>
				<li><img src="img/img1.jpg" width="80px"/></li>
				<li><a href="">【京东超市】desha春秋季儿童休闲服</a></li>
				<li>颜色:灰色+粉红</li>
				<li>¥158.99</li>
				<li>
					<button>-</button>
					<input type="text" value="1"/>
					<button>+</button>
				</li>
				<li>¥158.99</li>
				<li><a >删除</a><br />
					<a>移到我的关注</a>
				</li>
			</ul>
			
		</div>
		<!--商品详情展示的结束-->
		
	</body>
</html>
.nav{
	height: 30px;
	
	background-color: #f1f1f1;
}
.warp{
	width:1000px;
	margin: 0px auto;
}
.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,.nav_ul2 span{
	line-height: 30px;
	margin-left:10px ;
}
.nav a:hover{
	color: red;
}

/*搜索框开始*/
.search{
	margin-top: 25px;
}
.search img{
	/*清楚之前所有的样式*/
	clear: both;
	float: left;
}
.search_div{
	float: right;
	margin-top: 20px;
}
.search_text{
	width:265px;
	height: 21px;
	border: 3px solid #c91623;
	position: relative;
	left: 4px;
	top:-1px;
}
.search_but{
	width:51px;
	height: 29px;
	background-color: #c91623;
	border:0px ;
	color: #ffffff;
}
/*搜索框结束*/

/*标题开始*/
.title{
	margin-top: 130px;
	
}
.title h3{
	clear: both;
	float:left;
	font-size: 23px;
	color: #c91623;
}
.title div{
	float: right;
	font-size:14px;
	color: gray;
}
/*标题结束*/

/*显示菜单的开始*/
.tips{
	height:50px;
	background-color: #f1f1f1;
	margin-top: 165px;
	border: 1px solid #e9e9e9;
}
.tips li{
	float: left;
	line-height: 50px;
	font-size: 12px;
	color: gray;
	
}
.tips li:nth-child(1)
{
	width:90px;
	border-top:3px solid #c91623;
}
.tips li:nth-child(2)
{
	margin-left: 80px;
}
.tips li:nth-child(3)
{
	margin-left: 430px;
}
.tips li:nth-child(4)
{
	margin-left: 70px;
}
.tips li:nth-child(5)
{
	margin-left: 110px;
}
.tips li:nth-child(6)
{
	margin-left: 50px;
}
/*显示菜单的结束*/

<!--商品详情展示的开始-->
.info
{
	height:125px;
	width:1000px;
	background-color: #fff4e8;
	border:1px  solid  gray;
}
<!--商品详情展示的结束-->

image.png

Python 全系列/第七阶段:网页编程基础/CSS 样式 17252楼
WEB前端全系列/第十九阶段:Vue2知识体系(旧)/Vue基础知识 17254楼
JAVA 全系列/第十五阶段:Spring Session会话管理/Spring Session 17255楼
JAVA 全系列/第三阶段:数据库编程/Oracle 数据库的使用 17256楼
Python 全系列/第一阶段:Python入门/控制语句 17257楼
JAVA 全系列/第一阶段:JAVA 快速入门/JAVA入门和背景知识 17260楼
JAVA 全系列/第一阶段:JAVA 快速入门/面向对象详解和JVM底层内存分析 17261楼
JAVA 全系列/第一阶段:JAVA 快速入门/面向对象详解和JVM底层内存分析 17262楼
JAVA 全系列/第一阶段:JAVA 快速入门/面向对象详解和JVM底层内存分析 17263楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

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