首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

是时候扯一扯div+css了

DIV是层叠样式表中的定位技术,全称DIVision,即为划分。有时可以称其为图层。DIV在编程中又叫做整除即只得商的整数。 DIV元素是用来为HTML(标准通用标记语言下的一个应用)文档内大块(block-level)的内容提供结构和背景的元素。

CSS层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

上次咱们介绍了用表格的方法来设置我们的图片的位置。现在呢,咱们来介绍另一种高大上的方法!那就是用div+css来制作!

首先呢,咱们还是得先做好准备工作。新建一个站点,和一个css格式的文件。

接下来就是编辑我们的CSS文件和HTML文件啦!这样基础的设置之后,我们就可以在我们的盒子里(div)加入我们的素材,并且可以通过margin(外边距)和padding(内边距)的top(顶)、bottom(底)、left(左)、right(右)这些属性来设置我们的图片所在的位置啦~

为了咱们元素的总宽度与图片本来的宽度相等,咱们可以在CSS中输入以下代码。

*

我们为了设置div中的盒子,也就是元素的位置居中,并且上下与网页没有距离(这样在网页的缩放的情况下就不会出现偏移的情况)我们在CSS中可以输入以下的代码。

#box{width:1000px;

margin-top:0px;

margin:0 auto;}

那么我们在HTML中“盒子”的代码就是以下这样的啦~

(放我们所要用到的元素)

我们就以上一个素材作为例子。我们就可以把三个切片放入一个盒子,这样能成为一个整体来控制,那就容易多啦!

这一期呢,小编先分享到这里。如果你想get到其他的高端操作,欢迎关注浙江经贸电商公众号。我们在后期慢慢分享!

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180619B1VZ9S00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券