div设置宽高无效
本帖最后由 601971945 于 2021-6-9 13:51 编辑老哥们 为啥给 focus 和 newsflash 两个为啥加了样式 却没显示 求求老哥们了{:5_100:}
中途吧main 这部分代码和相关css部分删除重新写了几次 有时候 是focus能出来 有的时候newsflash出来 就是没有一起出来过 {:5_100:}
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，相机，数码，配件，手表，储存卡，品优购"/>
<!-- icon图标用法 先放入根目录 在引入 -->
<link rel="shortcut icon" href="bitbug_favicon.ico" />
<!-- 引入css 初始化的css文件 -->
<link rel="stylesheet" href="./css/base.css">
<!-- 引入公共样式的css 文件 -->
<link rel="stylesheet" href="./css/common.css">
<!-- 引入首页的css文件 -->
<link rel="stylesheet" href="./css/index.css">
<!-- 引入js文件 -->
<script src="./js/base.js"></script>
</head>
<body>
<!-- 顶部快捷导航start -->
<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>
<!-- 顶部快捷导航end -->
<!-- header制作 -->
<div class="header w">
<!-- logo -->
<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>
<!-- header 结束 -->
<!-- nav start -->
<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>
<!-- nav end -->
<!-- main 主体部分 -->
<div class="w">
<div class="main">
<div class="focus fl">
</div>
<div class="newsflash fr">
</div>
</div>
</div>
<!-- footer start -->
<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>
<!-- footer end -->
</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;
}
设置成行内块元素试试？
display:inline-block;
Twilight6 发表于 2021-6-9 11:25
设置成行内块元素试试？
还是不行呢 要不先把完整代码发出来一下 小伤口 发表于 2021-6-9 12:34
要不先把完整代码发出来一下
发了 老哥 Twilight6 发表于 2021-6-9 11:25
设置成行内块元素试试？
已经改好了 老哥 是我自己顺手在main花括号后面加了个 ‘；’号谢谢你帮我看 小伤口 发表于 2021-6-9 12:34
要不先把完整代码发出来一下
已经改好了 老哥 是我自己顺手在main花括号后面加了个 ‘；’号谢谢你帮我看 我猜：
应该是因为你的语法错误
页:
[1]