练习 制作DIV格式

<title>无标题文档</title>
<style>
#a{
 background-color:#FFF;
 border:#CCC solid 1px;
 height:250px;
 width:200px;
 left:10px;
 top:10px;
 z-index:1;}
 #b{
  position:absolute
  background-color:#FFF;
  border:#CCC solid 1px;
  height:320px;
  width:550px;
  left:210px;
  top:10px;
  z-index:2;}


#apDiv1 {
 position: absolute;
 left: 568px;
 top: 11px;
 width: 1032px;
 height: 319px;
 z-index: 1;
}
#apDiv2 {
 position: absolute;
 left: 14px;
 top: 12px;
 width: 203px;
 height: 270px;
 z-index: 1;
}
#apDiv3 {
 position: absolute;
 left: 224px;
 top: 12px;
 width: 936px;
 height: 357px;
 z-index: 2;
}
#apDiv4 {
 position: absolute;
 left: 15px;
 top: 290px;
 width: 201px;
 height: 151px;
 z-index: 3;
}
#apDiv5 {
 position: absolute;
 left: 225px;
 top: 379px;
 width: 936px;
 height: 301px;
 z-index: 4;
}
#apDiv6 {
 position: absolute;
 left: 224px;
 top: 687px;
 width: 934px;
 height: 727px;
 z-index: 5;
}
#apDiv7 {
 position: absolute;
 left: 14px;
 top: 451px;
 width: 200px;
 height: 1067px;
 z-index: 6;
}
#apDiv8 {
 position: absolute;
 left: 225px;
 top: 1424px;
 width: 935px;
 height: 95px;
 z-index: 7;
}
#apDiv9 {
 position: absolute;
 left: 1214px;
 top: 1500px;
 width: 4px;
 height: 133px;
 z-index: 8;
}
#apDiv10 {
 position: absolute;
 left: 13px;
 top: 1523px;
 width: 1149px;
 height: 364px;
 z-index: 9;
}
</style>
</head>

<body>
<div id="apDiv2"></div>
<div id="apDiv3"></div>
<div id="apDiv4"></div>
<div id="apDiv5"></div>
<div id="apDiv6"></div>
<div id="apDiv7"></div>
<div id="apDiv8"></div>
<div id="apDiv10"></div>
</body>
</html>

转载于:https://www.cnblogs.com/qz1234/p/5481941.html

### 回答1: 首先,我们需要了解什么是CSS和DIV。CSS是层叠样式表,是一种样式语言,用于描述HTML或XML文档的呈现。DIV是HTML中的一个标签,用于定义文档中的一个区域或块。 下面是一个简单的网页示例,使用CSS和DIV进行布局和样式设置。 ``` <!DOCTYPE html> <html> <head> <title>My Webpage</title> <style type="text/css"> body { font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 0; padding: 0; } header { background-color: #008080; color: #fff; padding: 20px; text-align: center; } nav { background-color: #444; color: #fff; padding: 10px; text-align: center; } nav ul { list-style: none; margin: 0; padding: 0; } nav ul li { display: inline-block; margin: 0 10px; } nav ul li a { color: #fff; text-decoration: none; padding: 5px 10px; border-radius: 5px; background-color: #008080; } section { padding: 20px; margin: 10px; background-color: #fff; box-shadow: 0 0 5px #aaa; } footer { background-color: #444; color: #fff; padding: 10px; text-align: center; } </style> </head> <body> <header> <h1>My Webpage</h1> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <section> <h2>Welcome to my webpage!</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse euismod nisi eget neque fermentum, ac sagittis nunc aliquet. </p> </section> <footer> <p>Copyright © 2021 My Webpage</p> </footer> </body> </html> ``` 在这个示例中,我们使用了CSS来设置整个网页的样式,包括字体、背景色、边距、内边距等。利用DIV标签,我们将整个网页分为了头部(header)、导航栏(nav)、内容(section)和底部(footer)四个区域,并分别设置了它们的样式。 当然,这只是一个简单示例,实际网页的布局和样式设置可能更加复杂。但是,掌握了CSS和DIV的基本用法,我们就可以通过不断练习和实践,来制作出更加漂亮、实用的网页。 ### 回答2: 使用CSS和DIV来构建网页是一种常见和常用的方法。CSS(层叠样式表)用于控制网页的样式和布局,而DIV(‘division’的缩写,即‘区块’)则用于将网页分割成不同的块状区域。 首先,通过HTML创建网页的基本结构,然后使用DIV元素来划分不同的区域。例如,可以使用一个主DIV作为整个页面的容器,然后在主DIV内部再嵌套其他的DIV,分别来表示页眉、导航栏、内容区域和页脚等。通过设置DIV的样式属性,可以控制它们的大小、位置、边距、背景颜色和文本样式等。 接下来,使用CSS来定义这些DIV的样式。可以通过CSS选择器来选中具体的DIV元素,然后对它们应用样式。例如,可以使用类选择器(class selector)来为特定的DIV指定样式,也可以使用ID选择器来为唯一的DIV元素添加样式。 在CSS中,还可以使用盒模型来控制DIV的大小和边距。通过设置width(宽度)、height(高度)、margin(外边距)、padding(内边距)等属性,可以实现对DIV的精确控制。 此外,还可以使用CSS的浮动(float)属性来实现页面的多列布局。通过将DIV浮动到指定的方向(左或右),可以使其他DIV元素环绕在其周围。 最后,还可以使用CSS的伪类(pseudo-class)和伪元素(pseudo-element)来实现更多的效果,如悬停态、链接样式和内容插入等。 总之,使用CSS和DIV制作网页可以实现丰富多样的页面布局和样式效果。通过调整和组合不同的CSS属性和选择器,可以轻松地实现个性化的网页设计。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值