ARTORIUS_BTG
2021-06-07 18:15
采纳率: 100%
浏览 68

web前端,用基础HTML和CSS如何实现图下效果?

图1是原图,图二是我自己写的样图。

图二蓝色框框内内容无法实现,请问用基础HTML和CSS应该怎么实现这个效果。

望告知,卡了一个星期了,谢谢各位巨佬。

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

6条回答 默认 最新

  • 已采纳

    蓝色框框内内容可以用float: left;实现

    代码如下:{如果对你有帮助,可以给我个采纳吗,谢谢!! 点击我这个回答右上方的【采纳】按钮}。

    <!doctype html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    	<title> 页面名称 </title>
    <style type="text/css">
    ul.box {
    	border: 1px solid #66f;
    	width: 400px;
    	height: 100px;
    }
    ul.box > li{
    	width: 200px;
    	float: left;
    }
    </style>
    </head>
    <body>
    
    <ul class="box">
    	<li>AAAAAAAAAAA</li>
    	<li>BBBBBBBBBBB</li>
    	<li>CCCCCCCCCCC</li>
    	<li>DDDDDDDDDDD</li>
    </ul>
    
    </body>
    </html>

    点赞 打赏 评论
  • biu~biu~ 2021-06-07 18:17

    w3school上好好看看css,flex布局

    点赞 打赏 评论
  • MisterMister 2021-06-07 18:18

    随便一个标签,定义为行内块元素,限制宽度或者....

    点赞 打赏 评论
  • 颜人中是 2021-06-07 19:15

    border-top:1px dashed #000;

    点赞 打赏 评论
  • div+flex布局即可还有列表应用  看看这个flex http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

    点赞 打赏 评论
  • 有问必答小助手 2021-06-08 11:21

    您好,我是有问必答小助手,您的问题已经有小伙伴解答了,您看下是否解决,可以追评进行沟通哦~

    如果有您比较满意的答案 / 帮您提供解决思路的答案,可以点击【采纳】按钮,给回答的小伙伴一些鼓励哦~~

    ps:问答VIP仅需29元,即可享受5次/月 有问必答服务,了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632

    点赞 打赏 评论

相关推荐 更多相似问题