设为首页 加入收藏

TOP

零基础也能看懂!写给设计师的前端小知识之排版三步走起来(二)
2019-09-03 01:00:09 】 浏览:37
Tags:基础 能看懂 写给 设计师 前端 知识 排版 三步走 起来
sp;事情变得好复杂耶)

先写第一行吧,它与黑盒子的样式又不一样,那……就意味着我们又要重添一个盒子啦。其实第一步定大小无非就是为了不遮挡其他、不被其他遮挡、不错位……然而字体就一行,且远远小于黑盒子的宽,所以可以不用管第一步哦。

这里要用到一个新标签了:<p> </p> ;这是一个主要用来装文本的盒子,想了解其属性的自己可以查阅W3C.

其样式为:

.black p {color:white; font-size:20px; font-weight:500; float:left; margin-left:24px; margin-top:16px; font-family:"微软雅黑"}

各个属性我就不用一一介绍了吧,不过值得一提的地方是,前面已经介绍,不加“.”的标签名代表指当前html文件中所有标签都引用该样式,其实是蛮危险的一种做法,但是这里的p前面还有一个“.black” ,则特指black包含的所有p标签,也就是对其之外的p标签无影响。(web前端学习交流群:328058344 禁止闲聊,非喜勿进!) 

最终效果如下图:

底下还有两种文本,算是留给你们的作业吧,下期公布答案。其实你要是只是看看,那真的是对不起你看文章花的这点时间,下个DW去实践一下吧。

算起来,这期主要讲了样式几个写法,及静态页的基本排版步骤,都是经验之谈,并非神马标准……

来说点题外话吧!

所有的标签里面,<div></div>的使用率是相当高的;最后当我学了javas cript后,几乎就只用div了。为嘛呢?无论是专门用作按钮的button标签还是下拉专用的 select 标签……有些它们自带的默认样式是灰常丑的,需要采用一些比较麻烦的步骤才能去除或替换成设计稿里那种比较漂亮的效果。div可以模拟大部分的页面控件,可以是矩形、圆角矩形、圆形、甚至三角形、梯形,这么神通广大,还不是样式支持……你说呢?

首页 上一页 1 2 下一页 尾页 2/2/2
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇web前端怎么样才能入门 下一篇hint.css使用说明

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目