设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › div设置宽高无效
返回列表 发新帖
查看: 4964|回复: 7

[技术交流] 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，相机，数码，配件，手表，储存卡，品优购"/>
    <!-- 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;
}
微信图片_20210609110807.png
微信图片_20210609110803.png
微信图片_20210609110810.png
微信图片_20210609114518.png
微信图片_20210609114526.png

pinyougou.zip

97.79 KB, 下载次数: 1
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

Twilight6
发表于 2021-6-9 11:25:52 | 显示全部楼层


设置成行内块元素试试？
display:inline-block;

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

601971945
 楼主| 发表于 2021-6-9 11:37:15 | 显示全部楼层
Twilight6 发表于 2021-6-9 11:25
设置成行内块元素试试？

还是不行呢
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

小伤口
发表于 2021-6-9 12:34:56 From FishC Mobile | 显示全部楼层
要不先把完整代码发出来一下
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

601971945
 楼主| 发表于 2021-6-9 13:47:54 | 显示全部楼层
小伤口 发表于 2021-6-9 12:34
要不先把完整代码发出来一下

发了 老哥
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

601971945
 楼主| 发表于 2021-6-9 14:53:36 | 显示全部楼层
Twilight6 发表于 2021-6-9 11:25
设置成行内块元素试试？

已经改好了 老哥 是我自己顺手在main花括号后面加了个 ‘；’号  谢谢你帮我看
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

601971945
 楼主| 发表于 2021-6-9 14:54:54 | 显示全部楼层
小伤口 发表于 2021-6-9 12:34
要不先把完整代码发出来一下

已经改好了 老哥 是我自己顺手在main花括号后面加了个 ‘；’号  谢谢你帮我看
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

高山
发表于 2021-6-25 17:24:40 | 显示全部楼层
我猜：
应该是因为你的语法错误
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-12-23 14:28

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表