返回

从零开始学前端

#UI设计通识
90%
进度
0/11
知识点
0
笔记
概述
HTML CSS 概念初识
HTML的基本认识
CSS 的基本认识
学习前的准备工作
HTML 基础入门
HTML 的语法认识
HTML 的框架标签
HTML 的内容标签
HTML 的布局标签
CSS样式表初识
CSS 的标准应用语法
CSS的引用方式
选择器的多种使用方法
CSS的盒模型认识
标签的宽和高尺寸
CSS 常用属性的应用规则
文字属性
色彩/图片属性
排版定位
动画效果
其它常见样式类型
网站前端布局实例
HTML样式的语法
CSS 全局预设
顶部样式定义
内容样式定义
首页知识库UI设计通识从零开始学前端

CSS 全局预设

酸梅干超人 编辑于 2024-01-0815人正在学
00

相信通过上面几个模块的演示,大家应该能了解如何制定 HTML 标签的结构了吧,节省篇幅,页脚模块的样式我就不添加了。

我会将基础的文件框架放在素材文件夹中,大家在公众号回复 ”前端“ 即可获取。

在这个全局预设中,我们分别清除了 margin、padding、list-style 三个属性的默认数值,将所有元素设置成 block 块化,可以进行长宽的定义,以及实现整体元素左对齐,宽高自适应。

全局预设的并不代表所有参数的元素被定死了,只是我们给它们先预设了一个默认数值,只要在后续其它选择器中声明新的参数,那么浏览器最会按最后设置的声明作为标准。

比如title标签,理论上这个标签是不会出现在画布中的,但在新的特性中有些浏览器在它 block 了以后就会看见,所以我们还要添加一条隐藏声明:

然后,我们还可以对 body 标签进行定义,我们通常会将对页面文字定义的基本属性放在 body 上而不是全选择器上,比如:

这里面,我们定义了字体依次显示 helvetica (英文)、苹方、雅黑,字号使用14像素,行高默认为字号的 1.6 倍,字色为黑,整个内容区域背景色为白色,宽度和浏览器区域一致,以及最小宽度。

全局基本样式的制定,和我们的经验有关,预判这个项目中哪些需要提前设置,哪些是可以不用强调的,初期大家可以使用和我一样的设置,下面,就要展开模块样式的具体制定了。

点赞
收藏
学会
10080015
下一篇: 顶部样式定义
接着,我们来完成顶部样式的制定。我们可以发现,顶部的导航栏背景实际区域的尺寸宽是 960px,高是 60px,并在画布中居中显示,那么它们的样式: 然后,我们就要定义导航栏内的元素了,包含两个部分内容,LOGO 和导航按钮文字,所以我们可以使用 float 属性来表现它们,并使用 margin 属性...
笔记 (0)
只看自己
logo
© 2023 uxbaike.com All rights reserved
版权声明意见反馈联系我们
weixinlogo
mx-auto
TOP
mx-auto
笔记
mx-auto
点赞