css简易设置html<div></div>布局

最新推荐文章于 2025-05-22 07:00:00 发布

原创最新推荐文章于 2025-05-22 07:00:00 发布 · 510 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #html

本文详细介绍了使用HTML和CSS进行网页布局的方法，包括如何通过div元素及其样式属性实现元素的垂直对齐、动态class切换、去除列表项符号、创建自定义图标等技巧。同时，深入探讨了div元素的常见CSS设置，如背景颜色、文字颜色、宽度、高度、内边距、显示方式、文字对齐、边框、滚动条等。

html:

<div class="div1" style="vertical-align: top;">div块1</div>//style="vertical-align: top;"设置三个同行显示的div块顶部对齐
<div v-bind:class="{'div2':true,'div3':false}" style="vertical-align: top;">div块2</div>//v-bind:class="{'div2':true,'div3':false}"可实现动态切换class
<div class="div3" style="vertical-align: top;">div块3</div>
<div>//css设置li前没有标志
<ul class="ulStyle">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</div>
<div>//css画一个简易方框
 <div ><Icon class="redBox"></Icon>红色方框图标</div>
 <div ><Icon class="whiteBox"></Icon>白色方框图标</div>
</div>

div常用css设置:

.div1{
 background-color: #808080;/*设置div块的背景颜色*/
 color: aliceblue;/*设置div块内的文字颜色*/
 width: 63%;/*百分比设置div块的宽度*/
 height: 35px;/*设置div块的高度*/
 margin-left: 3px;/*设置div块距左边的宽度*/
 margin-top: 3px;/*设置div块距上边的宽度*/
 display: inline-block;/*设置三个div块同行显示*/
 align-items: center;/*设置div块内的文字居中*/
 border: #000000 solid thin;/*给div块画一条黑色细线的边界*/
 overflow-x:scroll;/*div块水平滚动条，需先设置width*/
 overflow-y: scroll;/*div块竖直滚动条，需先设置height*/
}
.div2{
 display: inline-block;/*设置三个div块同行显示*/
}
.div3{
 display: inline-block;/*设置三个div块同行显示*/
}
.ulStyle{
 list-style-type: none;/*设置li元素显示前无标志（没有默认的圆点)*/
}
.redBox{/*红色方框*/
  width: 16px;/*方框宽*/
  height: 16px;/*方框长*/
  background: #ff0000;/*方框颜色*/
}
.whiteBox{/*白色方框*/
  width: 16px;
  height: 16px;
  background: aliceblue;
}
}