今天给毛坯网页做了精装修

[复制链接]
查看1239 | 回复13 | 2024-3-7 17:34:27 | 显示全部楼层 |阅读模式
本帖最后由 花花 于 2024-3-7 17:34 编辑

戏接上集,上集我们采用复制-粘贴的方式通过组件库创建了界面,本集分享下如何调整样式美化页面,增强用户视觉体验。

图片1.png
访问地址

图片2.png

在样式这部分的技术,此项目采用的是LEES语言,LESS语言是什么呢?看看官网怎么说:

图片3.png
它是CSS,只是多了一点东西。。。
图片4.png

问题又来了,CSS是什么呢?

级联样式表css)是一种描述 HTML 文档样式的语言描述应该如何显示 HTML 元素。

没了解过的盆友们,查阅下CSS语言学习教程哈~

会不会有盆友问:什么是HTML 元素呢?

CSS语法:

图片5.png

直接上示例:

1、设置页面占整屏高度
图片6.png

图片7.png 图片8.png


2、给内容添加左右内边距
图片9.png

图片10.png


3、让按钮固定在页面底部
图片11.png
图片12.png


4、让图片左右居中对齐
图片13.png
图片14.png


5、调整单元格的内边距
图片15.png
图片16.png


6、给导航栏增加上下内边距
图片17.png
图片18.png


此时,一个还算规整的页面就成型了,CSS还有很多其他属性,可根据教程按己所需去使用。遇到难题的盆友,欢迎留言交流呐~

图片19.png

图片19.png
Less is more.
回复

使用道具 举报

1084504793 | 2024-3-8 08:14:41 | 显示全部楼层
回复

使用道具 举报

WT_0213 | 2024-3-8 08:46:50 | 显示全部楼层
回复

使用道具 举报

爱笑 | 2024-3-8 08:51:42 | 显示全部楼层
对云平台感兴趣的同学可以学起来!
用心做好保姆工作
回复 支持 反对

使用道具 举报

noonezero | 2024-3-8 08:57:37 | 显示全部楼层
回复

使用道具 举报

lazy | 2024-3-8 09:23:07 | 显示全部楼层
回复

使用道具 举报

干簧管 | 2024-3-8 09:31:51 | 显示全部楼层
厉害
回复

使用道具 举报

wukong50 | 2024-3-8 11:12:06 | 显示全部楼层
回复

使用道具 举报

timo | 2024-3-8 12:32:52 | 显示全部楼层
赞一下
回复

使用道具 举报

sansui | 2024-3-8 14:09:15 | 显示全部楼层
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则