网站首页 > 基础教程 正文
今天招我进来的小组长让我做一个页面,我以前用过jsp,html4,css,javascript,倒也熟,只是有点忘记了。
第一步:我想以前html页面,不就是用table、div来设计html整个布局吗?这里的uni-app .Vue页面估计就是view对应div,测试一下,没问题,页面标签解决了,要设计页面了
第二步:经常有人说flex,我去上网查一下。很简单吗?就是css display:flex,flexdirection选择row或column,布局确定下来,我该设计整个页面布局了。
第三步:
我去熟悉网页html常用标签p等等。每一个标签就是一个小盒子,我去熟悉一下盒子的几个熟悉值:
第四步:反正页面就是大盒子套小盒子
设计我要做网页的框架,由几个view组成。
设计整个页面分成三个大view,大容器display:flex,direction:column,然后又在大view设置小view
最后一个留言view,就是v-for(随便写的无类型变量,i)in 数组对象,循环完数组里的数。
第五步:开始写页面,页面上肯定要用样式,简单的样式属性又熟悉一下。
2、容易混合的css定义写法和使用熟悉一下
class=b1
.c1.b1{backgroudcolor:red} 3
c1 b1{background:green} (1)
.c1{font:20px}
.b1{border:solid red}
难点1:如果一个html元素想同时要两种或以上的样式
class=c1 b1,同时背景色都是red,在css写成 .c1.b1
难点2:如果有父元素盒子套儿子盒子,儿子盒子的样式背景色和父不一样,是绿色。
第六步:写了一个简单的页面
v-for 这种简单的循环标签看一眼就会。
第七步:出了成果图,还得改改样式就可以了,下一步,估计要熟悉js了,又忘了。下班了![耶]
猜你喜欢
- 2024-11-09 前端CSS面试题-5 前端css3面试题
- 2024-11-09 JavaScript代码编写三原则(一):各司其责
- 2024-11-09 Web开发学习笔记(39)——CSS3(12)弹性盒子
- 2024-11-09 鸿蒙学习笔记(呼吸训练index篇) 呼吸模式训练
- 2024-11-09 CSS布局模式之Flex布局&Grid布局
- 2024-11-09 关于 display:flex 的一个奇技淫巧
- 2024-11-09 前端CSS面试题-4 前端样式面试题
- 2024-11-09 Next.js 零基础教程3|2024最新更新中|曲速引擎 Warp Drive
- 2024-11-09 CSS Viewport 单位,很多人还不知道使用它来快速布局
- 2024-11-09 使用CSS的animation-direction属性让动画缓慢回弹
- 最近发表
- 标签列表
-
- gitpush (61)
- pythonif (68)
- location.href (57)
- tail-f (57)
- pythonifelse (59)
- deletesql (62)
- c++模板 (62)
- css3动画 (57)
- c#event (59)
- linuxgzip (68)
- 字符串连接 (73)
- nginx配置文件详解 (61)
- html标签 (69)
- c++初始化列表 (64)
- exec命令 (59)
- canvasfilltext (58)
- mysqlinnodbmyisam区别 (63)
- arraylistadd (66)
- node教程 (59)
- console.table (62)
- c++time_t (58)
- phpcookie (58)
- mysqldatesub函数 (63)
- window10java环境变量设置 (66)
- c++虚函数和纯虚函数的区别 (66)