首页 爱情文章 亲情文章 友情文章 生活随笔 校园文章 经典文章 人生哲理 励志文章 搞笑文章 心情日记
  • 爱情文章
  • 亲情文章
  • 友情文章
  • 生活随笔
  • 校园文章
  • 经典文章
  • 人生哲理
  • 励志文章
  • 搞笑文章
  • 心情日记
  • 英语文章
  • 范文大全
  • 作文大全
  • 新闻阅读
    •
    当前位置: 山茶花美文网 > 英语文章 > 正文

    【店铺装修代码格子模块HTML+CSS新手教程】 美的风冷模块故障代码

    时间：2020-05-25来源：山茶花美文网 本文已影响 人 山茶花美文网手机站

    纯格子代码完全解码：

    想要学习更详情的HTML+CSS语言可以百度或谷歌搜索这两门语言的视频教程更深入的学习了解下。通过视频教程可以更好的拓展你的代码知识。

    下面为了方便初学的卖家学习，所以就拿一个精简但又比较完整的750宽的纯代码格子来举例。

    店铺装修代码格子模块HTML+CSS新手教程1

    完整的代码如下：

    <table

    background="/imgextra/i4/169171891/T2llZCXnhXXXXXXXXX-169171891.jpg"
    width="750"border="0"align="center"cellpadding="0"cellspacing="0"
    bgcolor="#f1f1f1">
    <tr>
    <td
    style="padding:10px10px10px10px;"><img
    src="/imgextra/i2/169171891/TB2g_5FXVXXXXXsXXXXXXXXXXXX-169171891.jpg"
    width="360"alt="图片"/></td>

    <tdstyle="padding:10px10px10px0px;"><img
    src="/imgextra/i2/169171891/TB25fmCXVXXXXahXpXXXXXXXXXX-169171891.jpg"
    width="360"alt="图片"/></td>
    </tr>
    </table>

    可以复制下来拿去练习或测试

    把这个格子代码最简单化就是：

    <table>
    <tr>
    <td>单元格</td>
    <td>单元格</td>
    </tr>
    </table>

    分解说明：

    <table></table>:这个就是整体的表格。

    <tr></tr>:这个表示一行。

    <td></td>:这个表示一个单元格。

    (那么从这上面的例子是不是可以看出这个表格是一行两列，也就是一排两格的。)

    分解说明：

    1.【background="/imgextra/i4/169171891/T2llZCXnhXXXXXXXXX-69171891.jpg"】这个表示背景图，里面蓝色的地址就是黑色的背景纹理图片地址。当然你可以更换别的颜色的背景纹理。背景纹理需要上传淘宝相册空间，然后复制地址替换。

    店铺装修代码格子模块HTML+CSS新手教程2

    2.【width="750"】这个表示表格的宽度，总宽是750宽的。你改成950那就是首页950自定义使用，当然你这里改了，其它的图片也要相应改大，或者间距也要适当调节。（这个的详细教程由于篇幅请关注我们，下一期给大家讲解）

    3.【border="0"】这个是边框，这个不太重要，一般默认0即可。

    4.【align="center"】这个是对齐，有三个参数，分别是：左对齐：left居中对齐：center右对齐：right那么我们这个表格整体是居中对齐的。

    5.【bgcolor="#f1f1f1"】这个是背景色。#f1f1f1这个是颜色值，（背景颜色值可以百度查询或用PS或其它工具吸取查询）那么一般改变背景色就是改这个，但是注意，这个里面有背景色是中灰色，又有背景纹理，两个同时存在，因为背景纹理大于这个背景色，所以他会显示背景纹理，你要让背景色显示就要把前面的背景纹理代码background="/imgextra/i4/169171891/T2llZCXnhXXXXXXXXX-169171891.jpg"一起删掉才可以。如下图，我去掉背景纹理后的代码以及显示效果：

    店铺装修代码格子模块HTML+CSS新手教程3

    显示效果如下：

    店铺装修代码格子模块HTML+CSS新手教程4

    再来一个效果：我把背景色改成白色的然后还把图片强制加了一个200的高度，其实这个图片是正方形800*800的，强制成200的高如下：

    店铺装修代码格子模块HTML+CSS新手教程5

    显示效果如下图：这个由于是改成白色背景了可能在手机上看不出来。

    店铺装修代码格子模块HTML+CSS新手教程6

    6.补充：【background-color:#f60】这个也是背景颜色代码。看下面的代码我在表格后面加了一段样式：style="background-color:#f60;"那么他的颜色值#f60是橙色值，这个样式的层级也大于前面那个

    bgcolor="#f1f1f1"所以显示效果最终以橙色显示。当然为了精简代码，你要用内联了，那么前面的那个就可以去掉一个，没必要两个都用上。这个必须写在：style=""这个代码包括的里面。不然无效哦。如下图代码以及显示效果。

    店铺装修代码格子模块HTML+CSS新手教程7

    显示效果如下：

    店铺装修代码格子模块HTML+CSS新手教程8

    补充：很多的顾客朋友说要帮他做透明背景的模块。其实就是把背景颜色和背景图代码都去掉就是透明的了哦。背景色代码和背景图代码如下：【background="/imgextra/i4/169171891/T2llZCXnhXXXXXXXXX-169171891.jpg"】【bgcolor="#f1f1f1"】还有【background-color:#f60】

    7.【style="padding:10px10px10px10px;"】这个表示间距。分别是上间距是10px，右间距10px下间距10px左间距10px。可以试着把这三个数字改一下看效果。也可以看下我第二个格子<td>里面是不是style="padding:10px10px10px0px;"最后一个，也就是左边是等于0，如果第二个的最后一个左边也是10px，加上第一个的第二个也就是右边等于10px；那么中间就变成20px了，那么总宽就是760了，所以不可取。

    当然总宽是750宽，图片是360，那么10px+360px+10px+360px+10px=750px。大家看一下：

    店铺装修代码格子模块HTML+CSS新手教程9

    显示效果如下：

    店铺装修代码格子模块HTML+CSS新手教程10

    如果您就是要这种效果，想让中间的间距宽一些，那这时你就要把两张的图片各减掉5px，图片是360-5=355px；这样总宽也就是750px宽了。如下图：

    店铺装修代码格子模块HTML+CSS新手教程11

    显示的效果如下：在手机上看起来可能不明显:

    店铺装修代码格子模块HTML+CSS新手教程12

    8.【<imgsrc="/imgextra/i2/169171891/TB2g_5FXVXXXXXsXXXXXXXXXXXX-169171891.jpg"width="360"alt="图片"/>】这个就是图片代码。src=""中间的就是图片地址，[width="360"]这个同上是图片的宽度。alt="图片"这个无所谓，图片说明。

    9.【height="360"】这个是图片高度，我一般是不限制高度的，高度不限。大家最好是不要限制，如果你限制宽度和高度有的图片不成比例就会变形。不美观。宽度和高度写一个就可以了。看下面的效果，我如果强制加一个不适合的高度=200看下显示效果，是不是图片变形不美观了。

    店铺装修代码格子模块HTML+CSS新手教程13

    显示效果如下：

    店铺装修代码格子模块HTML+CSS新手教程14

    因为我的图片实际大小是800px*800px的正方形。如果我把宽度限制在360px，那么高度也会自动变成360px

    【注意：其实这个格子的大小是360的宽，高度不限，那么你的图片大小就可以是：宽度只要等于或大于360px，高度随你定，放长的就是长的，短的就是短的。会自动成比例缩放的。如我放的就是800*800的正方形，你可以放其它尺寸的图片，只要宽度不小于360，如果小于了就会强制放大到360，那么放大就会变模糊不清晰。所以只能大于，不能小于。】

    • 【店铺装修代码格子模块HTML+CSS新手教程】 美的风冷模块故障代码 相关文章:
    • 爱情文章
    • 亲情文章
    • 友情文章
    • 随笔
    • 哲理
    • 励志
    • 范文大全

    最新文章

    热点文章

    推荐访问

    军训远足心得体会 军训爬山心得体会 大学军训徒步拉练感想 军训徒步作文 军训徒步10公里感想 军训徒步心得体会 5分钟演讲中秋节节日 中秋一分钟演讲 中秋节演讲稿4分钟 中秋节演讲稿一分钟 中秋节演讲稿五分钟 3-5分钟 中秋节短篇演讲稿 中秋节演讲稿两分钟 中秋节的演讲稿3分钟 关于中秋节的演讲稿三分钟 孩子体验军训的心得 参加孩子军训活动的感受与收获 家长对孩子军训后的收获和感悟 小孩军训的收获与感悟 学生军训的收获与感悟 孩子军训成长过程家长感悟 孩子军训感悟 孩子军训心得体会 孩子军训的收获与感悟 兵役前训练心得体会 部队当兵的心得 新兵役前教育训练心得体会 预备役军训心得体会 新兵军训感悟

    本文【店铺装修代码格子模块HTML+CSS新手教程】 美的风冷模块故障代码由山茶花美文网整理提供，版权归原作者、原出处所有。

    Copyright © 山茶花美文网 All Rights Reserved.