首页 > 其他分享 >产品布局.2(html)

产品布局.2(html)

时间:2023-05-31 16:37:14浏览次数:42  
标签:产品 color 布局 height html background 200px margin slategray

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
* {
    padding: 0;
    margin: 0;
}
.top {
         height:50px ;
         background-color: slategray;

     }
.banner {
    height: 100px;
    width:830px;
    margin: 10px auto;
    background-color: slategray ;
}
.box {
    height: 200px;
    width: 830px;
    background-color:pink;
    margin: 10px auto;


}

.box>div {
    background-color: slategray;
    height: 200px;
    width: 200px;
    margin-right: 10px;
    float: left;
}
.footer {
        height:150px ;
         background-color: slategray;

}
.box .last {
            height: 200px;
            width: 200px;
            float: left;
            background-color: slategray ;
            margin-right: 0px;
}
</style>
<body>
    <div class="top">top</div>
   <div class="banner">banner</div>
   <div class="box">
       <div>1</div>
       <div>2</div>
       <div>3</div>
       <div class="last">4</div>


   </div>



    <div class="footer">footer</div>
</body>
</html>

效果图:

产品布局.2(html)_html


标签:产品,color,布局,height,html,background,200px,margin,slategray
From: https://blog.51cto.com/u_16041695/6388064

相关文章

  • HTML5的Canvas画图模拟太阳系运转
    今天研究的是利用HTML5的Canvas画图来模拟太阳系运转,首先,在这个太阳系里分为画轨道和画星球两个部分,对于每一个星球我们要知道它的颜色和公转周期,如下图。  采用面向对象编程的思想,代码如下 stars.html<!DOCTYPEHTML><html> <head></head> <body> <canvasid="canvas"......
  • LYT-WPF-基础-布局-Canvas面板
    已亲测!ZIndex实例有修改之处!!!本文转自:WPF教程五:布局之Canvas面板-.NET开发菜鸟-博客园(cnblogs.com),感谢~~Canvas:画布面板画布,用于完全控制每个元素的精确位置。他是布局控件中最为简单的一种,直接将元素放到指定位置,主要来布置图面。使用Canvas,必须指定一个子元素的位置(相对......
  • HTML
    概念:即HyperTextmarkupLanguage超文本标记语言,作用是定义网页的内容和结构HTML元素HTML由一系列元素elements组成,例如:<p>Hello,world!</p>元素可以有属性,如<pid="p1">Hello,world!</p>元素之间可以嵌套,如<p>HTML是一门非常<b>强大</b>的语言&l......
  • 【C++】c++单继承、多继承、菱形继承内存布局(虚函数表结构)
    单继承:只有一个基类和一个派生类classBase{public:virtualvoidfun1(){cout<<"Base::func1()"<<endl;}virtualvoidfun2(){cout<<"Base::func2()"<<endl;}private:intb;......
  • LYT-WPF-基础-布局-WrapPanel面板
    已亲测!本文转自:WPF教程三:布局之WrapPanel面板-.NET开发菜鸟-博客园(cnblogs.com),感谢~~WrapPanel:环绕面板    WrapPanel布局面板将各个控件从左至右按照行或列的顺序罗列,当长度或高度不够时就会自动调整进行换行,后续排序按照从上至下或从右至左的顺序进行。    ......
  • LYT-WPF-基础-布局-StackPanel面板
    已亲测!本文转自:WPF教程二:布局之StackPanel面板-.NET开发菜鸟-博客园(cnblogs.com),感谢~~应用程序界面设计中,合理的元素布局至关重要,它可以方便用户使用,并将信息清晰合理地展现给用户。WPF提供了一套功能强大的工具-面板(Panel),来控制用户界面的布局。你可以使用这些面板控件......
  • 产品经理如何向最终用户提供创新的数据体验
    本文由葡萄城技术团队于博客园原创并首发。葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。随着互联网和大数据技术的发展,越来越多的企业开始重视数据的价值。伴随着企业数字化转型的大趋势,数据分析需求将进一步爆发。据国际权威调研机构的报告预测,在未来两......
  • 软件产品质量这样来数据度量
    很多人都不知道如何来评判我们的产品质量的好坏?经常听到有人说:我们的系统产品质量怎么样?很多你都是评主观来评判,主观的评判缺少数据支撑都是苍白无力的!!!产品质量好不好数据来说话!!!按照国标应该是这样子的: 但是实际公司内部是这样子的:  预警bug跟踪分布图  按线......
  • 智慧档案室八防十防建设平台之监控室硬件产品配置清单
    ​智慧档案馆八防十防环境建设平台所需配置清单之监控室所需硬件产品配置表      序号名称型号品牌单位数量1工业控制主机订制盛世宏博套1.00 2显示屏X23E1HAOC台1.00 3数字化智慧档案馆物联网综合一体化建设平台V1.0V1.0盛世宏博......
  • 以太坊Layer 2即将爆发!加密巨头入场布局,或将迎来“百链大战”!
       眼下,以太坊Layer2发展势头强劲。在数十条RollupLayer2异彩纷呈之际,Coinbase、ConsenSys等加密巨头也开始下场参与竞争,部署原生Layer2网络。    截至2022年底,Layer2解决方案的日均交易数在持续增加,甚至超过了以太坊。这意味着Layer2在短短几年内就取得了巨大的交易......