说明

源代码

1.1 CSS属性书写顺序(重点)

建议遵循以下顺序:

1.布局定位属性: display / position / float / clear / visibility / overflow (建议display第一个写, 毕竟关系到模式)

2.自身属性: width / height / margin / padding / border / background

3.文本属性: color / font / text-decoration / text-align / verticle-align / white-space / break-word

4.其他属性(CSS3)： content / cursor / border-radius / box-shadow/ text-shadow / background:linear-gradient…

.dbs {display: block;position: relative;float: left;width: 100px;height: 100px;margin: 0 10px;padding: 20px 0;font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;color: #333;background: rgba(0 ,0 ,0, .5);webkit-border-radius: 10px;-moz-border-radius: 10px;-o-border-radius: 10px;
}

以上只是建议,能满足尽量满足.

1.2 常见初始化

* {padding: 0;margin: 0;
}body {background-color: #f3f5f7;
}button {border: none;
}li {list-style: none;
}a {text-decoration: none;
}

1.3 颜色的语义

项目用到了蓝白灰的组合

蓝色:颜色代码#00a4ff,主要负责突出颜色.或者状态变化显示的颜色

蓝色在项目中主要起强调作用
白色: 颜色代码#fff,主要是把网页划分成主要的模块
灰色: 颜色代码#f3f5f7,整个网页的背景色

1.4 可视区域

这个页面的可视区是1200像素,每个可视区都要居中对齐,定义如下:

.w {width: 1200px;margin: auto;
}

大概中间的位置就是可视区域

1.5 常见阴影样式

box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);

1.6 常见可以被继承的属性

font-xxx
line-xxx
text-xxx
color

1.7 清除浮动

当使用了浮动的盒子,没有规定高度时,需要清除浮动
因为浮动的盒子脱离了标准流,如果后面有一个标准流的盒子,会被当前的浮动盒子所遮盖

.box1 {width: 110px;
}
.b1-item {float: left;width: 50px;height: 50px;background-color: pink;
}
.box2 {width: 300px;height: 300px;background-color: purple;
}

<div class="box1"><div class="b1-item"></div><div class="b1-item"></div>
</div>
<div class="box2"></div>

说明:
box1脱离了文档流,box2在文档流内.因此它会在box1的位置

1.7.1 使用浮动时,让盒子高度为0的情况

在使用浮动的时候,有时候不确定盒子中到底会有多少个元素.因此无法设置高度(或者是设置高度不很麻烦), 这个时候就不会设置盒子的高度.

1.7.2 常见的清除浮动的代码

.clearfix:before,
.clearfix:after {content: "";display: table;
}.clearfix:after {clear: both;
}.clearfix {*zoom: 1;
}

只需要在使用浮动,但未设置高度的元素上添加类clearfix即可

<div class="box-bd clearfix">

1.8 关于padding

有一个宽高已经声明好的盒子

div {width: 500px;height: 500px;background: pink;
}

当设置padding时,就会撑开盒子已有的宽高

div {width: 500px;height: 500px;padding: 50px;background: pink;
}

此时,占据文档里的宽高是 600px / 600 px
需要写出如下:

div {width: 400px;height: 400px;padding: 50px;background: pink;
}

1.9 字体大小的语义

16px: 一般用作页面中的导航、链接(比较突出)
14px: 一般用作页面中的内容(字数最多的)
12px: 用于补充说明内容

css --- [练手小项目]样式小结(字体、颜色的语义清除浮动的使用)相关推荐

ssm练手小项目_20 个 JavaScript+Html+CSS 练手的小项目
前言: 最近在 GitHub 上发现了一个 vanillawebprojects[1] 开源仓库,里面收集了 20 个 JavaScript+Html+CSS的练手项目,没有使用任何框架,可以让你从基 ...
台式小风扇（HTML+CSS+JS练手小项目）
台式小风扇(HTML+CSS+JS练手小项目) 功能介绍外观展示 HTML代码 CSS代码 JS代码总结功能介绍前段时间看到这样的风扇特效,感觉还挺好玩,就自己也写一个练练手. 风扇有四个档位 ...
html+css+js之20个练手小项目（一）
html+css+js之20个练手小项目(一)--Hangman 前言一.HTML 二.CSS 三.JS 前言前端新手练习,记录不迷失. 主要练习html和CSS布局以及JS. 来源github, ...
springboot+vue练手小项目[前台搭建+后台编写]（非常详细）
[ springboot+vue练手小项目 ] 技术栈: springboot+vue3+element-plus +Mybaties-plus+hutool +mysql8 项目介绍 :最近刚学了s ...
爬虫练手小项目：豆瓣高分图书TOP100
爬虫练手小项目:豆瓣高分图书TOP100 import requests import re from requests.exceptions import RequestException impo ...
数据结构练手小项目（AVL树、哈希表、循环链表、MySQL数据库）
文章目录前言正文(无删减) 我的想法(删减修改版) 数据导入与数据存储功能实现数据结构用户结构 SIM卡结构 AVL树数据结构哈希表结构数据表用户表 SIM卡表时间安排前言本月主 ...
练手小项目，爬取3DM图片
博客原文:https://weweweha.com 1. 概述爬取3DM指定网页的游戏壁纸,并且通过多线程来加速爬取图片的速度. 2.使用库 request库用来1解析指定网页,re库用来搜 ...
c语言模拟器怎么打程序,C语言初学者练手小项目——万花模拟器
原标题:C语言初学者练手小项目--万花模拟器还记得小时候玩的万花尺么?好好玩,各种不同的点距能画出各种各样形状图形. C语言程序万花尺模拟函数功能:每隔5秒随机生成万花图形并自动保存作图参数以及 ...
Golang练手小项目系列
Golang练手小项目系列本系列整理了10个工作量和难度适中的Golang小项目,适合已经掌握Go语法的工程师进一步熟练语法和常用库的用法. golang练手小项目系列(1)-位向量 golang练 ...

css --- [练手小项目]样式小结(字体、颜色的语义清除浮动的使用)

说明

1.1 CSS属性书写顺序(重点)

1.2 常见初始化

1.3 颜色的语义

1.4 可视区域

1.5 常见阴影样式

1.6 常见可以被继承的属性

1.7 清除浮动

1.7.1 使用浮动时,让盒子高度为0的情况

1.7.2 常见的清除浮动的代码

1.8 关于padding

1.9 字体大小的语义

css --- [练手小项目]样式小结(字体、颜色的语义清除浮动的使用)相关推荐

最新文章

热门文章

css --- [练手小项目]样式小结(字体、颜色的语义 清除浮动的使用)

说明

1.1 CSS属性书写顺序(重点)

1.2 常见初始化

1.3 颜色的语义

1.4 可视区域

1.5 常见阴影样式

1.6 常见可以被继承的属性

1.7 清除浮动

1.7.1 使用浮动时,让盒子高度为0的情况

1.7.2 常见的清除浮动的代码

1.8 关于padding

1.9 字体大小的语义

css --- [练手小项目]样式小结(字体、颜色的语义 清除浮动的使用)相关推荐

最新文章

热门文章

css --- [练手小项目]样式小结(字体、颜色的语义清除浮动的使用)

css --- [练手小项目]样式小结(字体、颜色的语义清除浮动的使用)相关推荐