首页新闻找找看学习计划

页面布局问题

0
悬赏园豆:5 [已解决问题] 解决于 2019-05-30 09:13

怎么用代码实现下图的效果?一脸茫然!望解答!(请勿水贴)

♪(o∀o)っ的主页 ♪(o∀o)っ | 初学一级 | 园豆:171
提问于:2019-05-16 21:48

补充一下:这个问题明天必须解决。

坐在坟头♛调戏鬼 5个月前
< >
分享
最佳答案
0

这个方法太多了,小米上和浏览下是两个li,li里面包含左右两部分,左边是一个dt\dd,右边是一个img\div\啥的模块,左右并行的话可以浮动,可以flex布局,或者内容区就是一个dl ,左右是dt和dd,实现的方式代码很多,主要是你看它是怎么组成的。上下是两个相同的部分,可以遍历渲染,也可以独立写两个,两个部分中的内容又是左右两个部分,分成两个并列平行。右边是有个图片,左边又分为上下两行文字(明显是用dl\dt\dd)。

收获园豆:5
疯癫释流年 | 菜鸟二级 |园豆:381 | 2019-05-21 11:33
其他回答(3)
0

使用悬浮和定位就可以了

科技改变未来☆ | 园豆:219 (菜鸟二级) | 2019-05-17 03:29

位置总是调不准

支持(0) 反对(0) ♪(o∀o)っ | 园豆:171 (初学一级) | 2019-05-17 11:23

@坐在坟头♛调戏鬼: 你是要自适应还是普通的?加下我扣1328542512我看看效果

支持(0) 反对(0) 科技改变未来☆ | 园豆:219 (菜鸟二级) | 2019-05-17 11:54
0

弹性布局

高小姐 | 园豆:202 (菜鸟二级) | 2019-05-17 09:07

什么叫弹性布局?

支持(0) 反对(0) ♪(o∀o)っ | 园豆:171 (初学一级) | 2019-05-17 11:22
0

Html部分:

 

 

<ul>
                            <li>
                                <div class="redmi"><a href=""><img src="image/charger.png" alt=""></a></div>
                                <h4 class="title"><a href="">小米 USB充电器</a></h4>
                                <p class="cmd"><span>59元</span></p>
                            </li>
                            <li>
                                <div class="hot"><a href=""><img src="image/hot.png" alt=""></a></div>
                                <h4 class="look"><a href="">浏览更多</a></h4>
                                <p class="mostHot"><a href="">热门</a></p>
                            </li>
                        </ul>

css部分:

.collocation-content-bottom-right  ul {
    width: 205px;
    height: 299px;
    float: left;
}
.collocation-content-bottom-right  ul li {
    height:100px;
    background-color: #fff;
    padding-left: 29px;
    padding-right: 40px;
    padding-top: 45px;
    position: relative;
    margin-bottom: 10px;
}
.redmi {
    position: absolute;
    right: 20px;
    top: 32px;
    width: 80px;
    height: 80px;
    margin: auto;
}
.redmi a {
    display: block;
}
.redmi a img {
    width: 80px;
    height: 80px;
    margin: auto;
}
.title {
    font-size: 14px;
    
}
.title a {
    color: black;
    text-decoration: none;
}
.cmd {
    font-size: 12px;
    color: #ff6700;
    margin-top: 5px;
}
.cmd span {
    font-size: 14px;
}
.hot {
    position: absolute;
    right: 35px;
    top: 48px;
    width: 48px;
    height: 48px;
}
.look {
    font-size: 18px;
}
.look a {
    color: black;
    text-decoration: none;
}
.mostHot {
    display: block;
    font-size: 12px;
    color: #757575;
    margin-top: 5px;
}
.mostHot a {
    text-decoration: none;
}
♪(o∀o)っ | 园豆:171 (初学一级) | 2019-05-23 23:31
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册