div设置宽高无效

601971945 · 发表于 2021-6-9 11:11:28

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由 601971945 于 2021-6-9 13:51 编辑

老哥们为啥给 focus 和 newsflash 两个为啥加了样式却没显示求求老哥们了

中途吧main 这部分代码和相关css部分删除重新写了几次有时候是focus能出来有的时候newsflash出来就是没有一起出来过

html代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>品优购-综合购物首选-正品低价、品质保障、配送及时、轻松购物！</title>
<meta name = "description" content="品优购JD.com-专业的中和上网上购物商城，销售家电、数码通讯、电脑、家居百货
、服装服饰、母婴、图书、食品、等数万个品牌优质商品。便捷、诚信的服务，为您提供预约的网上购物体验！" />
<meta name="Keywords" content="网上购物，网上商场，手机，笔记本，电脑，MP3，CD，VCD，DV，相机，数码，配件，手表，储存卡，品优购"/>
<link rel="shortcut icon" href="bitbug_favicon.ico" />
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/index.css">
<script src="./js/base.js"></script>
</head>
<body>
<div class="shortcut">
<div class="w">
<div class="fl">
<ul>
<li>品优购欢迎您！</li>
<li>
<a href="#">请登录</a>
<a class="style-red"href="#">免费注册</a>
</li>
</ul>
</div>
<div class="fr">
<ul>
<li>
<a href="#">我的订单</a>
</li>
<li class="spacer"></li>
<li>
<a href="#">我的品优购</a>
<i class="iconmoon"></i>
</li>
<li class="spacer"></li>
<li>
<a href="#">品优购会员</a>
</li>
<li class="spacer"></li>
<li>
<a href="#">企业采购</a>
</li>
<li class="spacer"></li>
<li>
<a href="#">关注品优购</a>
<i class="iconmoon"></i>
</li>
<li class="spacer"></li>
<li>
<a href="#">客服服务</a>
<i class="iconmoon"></i>
</li>
<li class="spacer"></li>
<li>
<a href="#">网站导航</a>
<i class="iconmoon"></i>
</li>
</ul>
</div>
</div>
</div>
<div class="header w">
<div class="logo">
<h1>
<a href="index.html" title="品优购">
品优购
</a>
</h1>
</div>
<div class="search">
<input type="text" class="text" value="请输入搜索内容...">
<button class="btn">搜索</button>
</div>
<div class="hotwords">
<a href="#" class="style-red">优惠购首发</a>
<a href="#">亿元购</a>
<a href="#">9.9元团购</a>
<a href="#">每满99减30</a>
<a href="#">办公用品</a>
<a href="#">电脑</a>
<a href="#">通信</a>
</div>
<div class="shopcar">
<i class="car"></i>
我的购物车
<i class="arrow"></i>
<i class="count">80</i>
</div>
</div>
<div class="nav">
<div class="w">
<div class="dropdown fl">
<div class="dt">全部商品分类</div>
<div class="dd">
<ul>
<li class="menu_item">
<a href="#">家用电器</a>
<i class="arrowr fr"></i>
</li>
<li class="menu_item">
<a href="#">手机、数码、通信</a>
<i class="arrowr fr"></i>
</li>
<li class="menu_item">
<a href="#">电脑、办公</a>
<i class="arrowr fr"></i>
</li>
<li class="menu_item">
<a href="#">男装、女装、童装、内衣</a>
<i class="arrowr fr"></i>
</li>
<li class="menu_item">
<a href="#">男装、女装、童装、内衣</a>
<i class="arrowr fr"></i>
</li>
<li class="menu_item">
<a href="#">个户化妆、清洁用品、宠物</a>
<i class="arrowr fr"></i>
</li>
<li class="menu_item">
<a href="#">鞋靴、箱包、珠宝、奢侈品</a>
<i class="arrowr fr"></i>
</li class="menu_item">
<li class="menu_item">
<a href="#">运动户外、钟表</a>
<i class="arrowr fr"></i>
</li>
<li class="menu_item">
<a href="#">汽车、汽车用品</a>
<i class="arrowr fr"></i>
</li>
<li class="menu_item">
<a href="#">母婴、玩具乐器</a>
<i class="arrowr fr"></i>
</li>
<li class="menu_item">
<a href="#">食品、酒类、生鲜、特产</a>
<i class="arrowr fr"></i>
</li>
<li class="menu_item">
<a href="#">医药保健</a>
<i class="arrowr fr"></i>
</li>
<li class="menu_item">
<a href="#">图书、音像、电子书</a>
</li>
<li class="menu_item">
<a href="#">彩票、旅行、充值、票务</a>
</li>
<li class="menu_item">
<a href="#">理财、众筹、白条、保险</a>
</li>
</ul>
</div>
</div>
<div class="navitems fl">
<ul>
<li><a href="#">服装城</a></li>
<li><a href="#">美妆馆</a></li>
<li><a href="#">传智超市</a></li>
<li><a href="#">全球购</a></li>
<li><a href="#">闪购</a></li>
<li><a href="#">团购</a></li>
<li><a href="#">拍卖</a></li>
<li><a href="#">有趣</a></li>
</ul>
</div>
</div>
</div>
<div class="w">
<div class="main">
<div class="focus fl">
</div>
<div class="newsflash fr">
</div>
</div>
</div>
<div class="footer">
<div class="w">
<div class="mod_service">
<ul>
<li>
<i class="mod_service_icon mod_service_zheng"></i>
<div class="mod_service_tit">
<h5>正品保障</h5>
<p>正品保障，提供发票</p>
</div>
</li>
<li>
<i class="mod_service_icon mod_service_kuai"></i>
<div class="mod_service_tit">
<h5>正品保障</h5>
<p>正品保障，提供发票</p>
</div>
</li>
<li>
<i class="mod_service_icon mod_service_duo"></i>
<div class="mod_service_tit">
<h5>正品保障</h5>
<p>正品保障，提供发票</p>
</div>
</li>
<li>
<i class="mod_service_icon mod_service_qin"></i>
<div class="mod_service_tit">
<h5>正品保障</h5>
<p>正品保障，提供发票</p>
</div>
</li>
<li>
<i class="mod_service_icon mod_service_hao"></i>
<div class="mod_service_tit">
<h5>正品保障</h5>
<p>正品保障，提供发票</p>
</div>
</li>
</ul>
</div>
<div class="mod_help">
<dl class="mod_help_list">
<dt>
购物指南
</dt>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">会员介绍</a></dd>
<dd><a href="#">生活旅行/团购</a></dd>
<dd><a href="#">常见问题</a></dd>
<dd><a href="#">大家电</a></dd>
<dd><a href="#">联系客服</a></dd>
</dl>
<dl class="mod_help_list">
<dt>
购物指南
</dt>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">会员介绍</a></dd>
<dd><a href="#">生活旅行/团购</a></dd>
<dd><a href="#">常见问题</a></dd>
<dd><a href="#">大家电</a></dd>
<dd><a href="#">联系客服</a></dd>
</dl>
<dl class="mod_help_list">
<dt>
购物指南
</dt>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">会员介绍</a></dd>
<dd><a href="#">生活旅行/团购</a></dd>
<dd><a href="#">常见问题</a></dd>
<dd><a href="#">大家电</a></dd>
<dd><a href="#">联系客服</a></dd>
</dl>
<dl class="mod_help_list">
<dt>
购物指南
</dt>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">会员介绍</a></dd>
<dd><a href="#">生活旅行/团购</a></dd>
<dd><a href="#">常见问题</a></dd>
<dd><a href="#">大家电</a></dd>
<dd><a href="#">联系客服</a></dd>
</dl>
<dl class="mod_help_list">
<dt>
购物指南
</dt>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">会员介绍</a></dd>
<dd><a href="#">生活旅行/团购</a></dd>
<dd><a href="#">常见问题</a></dd>
<dd><a href="#">大家电</a></dd>
<dd><a href="#">联系客服</a></dd>
</dl>
<dl class="mod_help_list mod_help_app">
<dt>帮助中心</dt>
<dd>
<img src="./upload/wx_cz.jpg" alt="二维码">
<p>品优购帮助中心</p>
</dd>
</dl>
</div>
<div class="mod_copyright">
<p class="mod_copyright_links">
关于我们丨联系我们丨关于我们丨商家入驻丨营销中心丨友情链接丨关于我们丨营销中心丨友情链接丨关于我们
</p>
<p class="mod_copyright_info">
地址：北京市昌平区建材城西路金燕龙办公楼一层邮编：100096 电话：400-618-4000 传真：010-82935100<br>京ICP备08001421号京公网安备110108007702
</p>
</div>
</div>
</div>
</body>
</html>

复制代码

公共样式代码

/* 公共样式 */
.fl{
float: left;
}
.fr{
float: right;
}
@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?oo7fla');
src: url('../fonts/icomoon.eot?oo7fla#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?oo7fla') format('truetype'),
url('../fonts/icomoon.woff?oo7fla') format('woff'),
url('../fonts/icomoon.svg?oo7fla#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
.fr .iconmoon {
font-family: 'icomoon';
font-size: 16px;
line-height: 26px;
}
/* 版心 */
.w {
width: 1200px;
margin: 0 auto;
}
.style-red {
color: #c81623;
}
.spacer{
width: 1px;
height: 12px;
background-color: #666;
margin: 9px 12px 0;
}
/* 顶部快捷导航 */
.shortcut {
height: 31px;
background-color: #f1f1f1;
line-height: 31px;
}
.shortcut li{
float: left;
}
/* header部分 */
.header{
position: relative;
height: 105px;
}
.logo{
position: absolute;
top: 25px;
left: 0;
width: 175px;
height: 56px;
}
.logo a{
display: block;
overflow: hidden;
width: 175px;
height: 56px;
background: url(../img/logo.png);
/* 首行缩进使字超出屏幕再用overflowhidden 隐藏还可以把字体设置大小设置为0 */
text-indent: -999px;
}
/* 搜索部分 */
.search{
position: absolute;
left: 348px;
top: 25px;
}
.text{
float: left;
width: 445px;
height: 32px;
border: 2px solid #b1191a;
border-radius: 0;
padding-left: 10px;
color: #ccc;
}
.btn{
float: left;
width: 82px;
height: 36px;
background-color: #b1191a;
border: 0;
border-radius: 0;
font-size: 16px;
color: #fff;
line-height: 36px;
}
/* 热词部分 */
.hotwords{
position: absolute;
left: 348px;
top: 65px;
}
.hotwords a{
margin: 0 10px;
}
/* 购物车部分 */
.shopcar{
position: absolute;
right: 64px;
top: 25px;
width: 138px;
height: 34px;
line-height: 34px;
border: 1px solid #dfdfdf;
background-color: #f7f7f7;
text-align: center;
}
.car{
font-family: 'icomoon';
color: #da5555;
}
.arrow{
font-family: 'icomoon';
margin-left: 5px;
}
.count{
position: absolute;
top: -5px;
/* 应该是左侧对其，文字才能往右走显示 */
left: 105px;
background-color:#e60012;
line-height: 14px;
padding: 0 3px;
/* 左上右上右下左下 */
border-radius: 50% 50% 50% 0;
color: #fff;
}
/* nav部分 */
.nav{
height: 45px;
border-bottom: 2px solid #b1191a;
}
/* 左侧导航 */
.dropdown .dt {
width: 209px;
height: 45px;
background-color: #b1191a;
line-height: 45px;
text-align: center;
font-size: 17px;
color: #ecd3d3;
}
.dropdown .dd{
display: none;
margin-top: 2px;
height: 465px;
font-size: 14px;
background-color: #c81623;
}
.menu_item {
line-height: 31px;
text-align: left;
margin-left: 1px;
padding: 0 10px;
}
.menu_item a{
font-size: 14px;
color: #ecd3d3;
}
.arrowr{
font-family: 'icomoon';
font-size: 20px;
color: #ecd3d3;
}
/* 右侧导航 */
.navitems{
margin-left: 20px;
}
.navitems li {
float: left;
}
.navitems li a{
display: block;
padding: 0 25px;
line-height: 45px;
font-size: 16px;
color: #333;
}
/* footer部分 */
.footer {
height: 386px;
background-color: #f5f5f5;
padding-top: 30px;
}
.mod_service {
height: 79px;
border-bottom: 1px solid #ccc;
}
.mod_service li{
float: left;
width: 240px;
height: 79px;
}
.mod_service_icon {
/* 浮动的盒子可以直接给大小不需要转换 */
float: left;
width: 50px;
height: 50px;
margin-left: 35px;
background:url(../img/icons.png) no-repeat
}
.mod_service_zheng {
background-position: -252px -3px;
}
.mod_service_kuai {
background-position: -255px -54px;
}
.mod_service_duo {
background-position: -257px -106px;
}
.mod_service_qin {
background-position: -258px -157px;
}
.mod_service_hao {
background-position: -258px -209px;
}
.mod_service_tit{
float: left;
margin-left: 5px;
}
.mod_service_tit h5{
margin: 5px 0;
}
/* help模块 */
.mod_help{
height: 187px;
border-bottom: 1px solid #ccc;
}
.mod_help_list{
float: left;
width: 150px;
padding: 20px 0 0 50px;
}
.mod_help_list dt{
height: 25px;
font-size: 16px;
}
.mod_help_list dd{
height: 22px;
}
.mod_help_app dt,
.mod_help_app p{
padding-left: 15px;
}
.mod_help_app img{
margin: 7px 0;
}
/* 版权模块 */
.mod_copyright{
text-align: center;
}
.mod_copyright_links {
margin: 20px 0;
}
.mod_copyright_info{
line-height: 18px;
}

复制代码

main部分css代码

.main {
width: 980px;
height: 455px;
background-color: pink;
margin-left: 220px;
margin-top: 10px
};
.focus {
height: 455px ;
width: 720px ;
background-color: purple ;
}
.newsflash {
width: 250px;
height: 455px;
background-color:skyblue;
}

复制代码

Twilight6 · 发表于 2021-6-9 11:25:52

设置成行内块元素试试？

display:inline-block;
复制代码

601971945 · 发表于 2021-6-9 11:37:15

Twilight6 发表于 2021-6-9 11:25
设置成行内块元素试试？

还是不行呢

小伤口 · 发表于 2021-6-9 12:34:56

要不先把完整代码发出来一下

601971945 · 发表于 2021-6-9 13:47:54

小伤口发表于 2021-6-9 12:34
要不先把完整代码发出来一下

发了老哥

601971945 · 发表于 2021-6-9 14:53:36

Twilight6 发表于 2021-6-9 11:25
设置成行内块元素试试？

已经改好了老哥是我自己顺手在main花括号后面加了个 ‘；’号谢谢你帮我看

601971945 · 发表于 2021-6-9 14:54:54

小伤口发表于 2021-6-9 12:34
要不先把完整代码发出来一下

已经改好了老哥是我自己顺手在main花括号后面加了个 ‘；’号谢谢你帮我看

高山 · 发表于 2021-6-25 17:24:40

我猜：
应该是因为你的语法错误

账号		自动登录	找回密码
密码			立即注册

[技术交流] div设置宽高无效

马上注册，结交更多好友，享用更多功能^_^