响应式网站开发
媒体查询
@media all and (min-width:800px) and (orientation:
landscape){
}
all 所有屏幕类型，默认
screen 屏幕
print 打印
and , or , not 逻辑判断
逻辑表达式为真时，样式才会被应用
优先级 ()>and>not>or、, ，注意 , 会分割 not
兼容性
media="only screen and (min-width:401px) and (max-width:600px)"
加上only后，老浏览器解析得到media="only"，后面的样式不会被应用，没有only情况下，不管后面的条件，样式都会被应用
css3媒体属性介绍
width 视口宽度
height 视口高度
device-width 设备屏幕宽度
device-height 设备屏幕高度
orientation 设备处于横向还是纵向
aspect-ratio 基于视口宽度和高度的宽高比width/height
device-aspect-ratio 渲染表面的宽度，就是设备的宽度
color 每种颜色的位数
resolution 每种设备或打印机的分辨率
viewport视口
布局视口一般为960px
可视视口一般为屏幕尺寸，但可以通过放大缩小改变
理想视口是适合手机端查看的理想视口大小
理想视口
设置改属性后布局视口成为理想视口
断点选择
项目结构
src
css
main.css #主要css文件
normalize.css #预设css
login.css #特定页面css
js
main.js
img
less
sass
swf
tpl
404.html
favicon.ico
humans.txt
index.html
robots.txt
robots.txt
User-agent:*
Disallow: /admin/ 不允许爬取文件夹
代码风格统一
src目录下新建.editorconfig
# editorconfig.org
root = true #当前config位于的目录是根目录
[*] #所有文件适用
charset = utf-8
indent_size = 4
indent_style = space
insert_final_newline = true #以空白行结尾
trim_trailing_whitespace = true #删除空白字符
[*.md]
trim_trailing_whitespace = false #md文件不要删除空格
安装必要插件使得配置生效
.gitignore LICENSE.txt README.md
.gitignore版本控制时需要忽略的文件
LICENSE.txt共享协议
README.md程序说明
markdown
表格
| col1 | col2 | col3 | //表头用竖线|分割
| :--- | :---: | ---: | //冒号表示对齐方式
| aaa | bbb | ccc | //表格内容
| col1 | col2 | col3 |
|---|---|---|
| aaa | bbb | ccc |
引用 >
引用的内容
Document
使用语义化的标签
用于对页面分块
作为独立的一段内容
区别如下:
计算机各类语言介绍
本文列举了部分计算机语言的一些介绍
JavaScript
js是一门……
HTML
HTML是一门……
命名风格
样式一般用class，涉及dom操作用id，类名用下划线风格，id用驼峰命名法。
css预设样式
引入normalize.css
或者
Reset Css
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
编写基本样式
html {
/* font-size: 62.5%; 为10px */
font-size: 62.5%;
color: #222;
}
/* ========
自定义页面样式
======== */
body {
/* 12px */
font-size: 1.2rem;
line-height: 1.5;
background-color: #f7f7f7;
}
/* 去除a标签下划线 */
a {
color: #666;
text-decoration: none;
}
/* 鼠标悬浮时a标签样式 */
a:hover, a:active {
color: #0ae;
text-decoration: underline;
}
/* 设置选中文字的背景色 */
::selection {
background-color: #b3d4fc;
text-shadow: none;
}
/* 去除ul默认样式 */
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
/* ========
工具样式
======== */
/* 元素居中显示 */
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
.pull-right {
float: right !important;
}
.pull-left {
float: left !important;
}
.text-right {
text-align: right !important;
}
.text-left {
text-align: left !important;
}
/* display:none;隐藏元素，不占用空间 */
.hide {
display: none !important;
}
.show {
display: block !important;
}
/* visiblity:hidden;隐藏元素但占用空间 */
.invisible {
visibility: hidden;
}
/* 隐藏文本，对seo优化 */
.text-hide {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
/* 清除浮动 */
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
/* ========
浏览器更新提示
======== */
.browserupgrade {
margin: 0;
padding: 1rem;
background: #ccc;
}
pc端样式
- px 1px相当于1个像素
- em 相对长度单位
em相对父元素的font-size
em具有继承的特点
当没有设置font-size时，浏览器会有一个默认的em设置：1em=16px
em的缺点：容易混乱
- rem 相对长度单位
rem的参照为根元素html，相对固定不变，所以比较好计算，当没有设置font-size时，默认1rem=16px
清除浮动的方法
- 添加空标签
浮动元素
- 父元素添加
overflow: hidden;
- 让父元素浮动(不推荐使用)
- 父元素添加
class="clearfix"
html
浮动元素
css
.clearfix:after {
content: '.';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* 兼容老版本浏览器 */
.clearfix {
zoom: 1;
}
5.使用display: table;(推荐)
htm
浮动元素
css
/* .clearfix:before防止外边距高度叠加 */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
关于line-height的bug
如果设置line-hight:3rem;，假设已经设置1rem=10px，此时应该高度为30px，而在chrome浏览器下实际显示为36px，因为中文字符line-light最小为12px，所以才会出现设置成30px而实际却有36px。
因此在设置行高时推荐用px作为单位
去除li标签(div标签)的间距
产生原因：li(div)标签之间有换行符
-
li标签不闭合
a标签
- 删除多个li标签之间换行符
- 设置li标签的负边距
li {
margin-left: -3px;
}
- 设置父元素的font-size为0，这样可以防止出现间距，但同时导致文字看不见，需要单独设置子元素的font-size
同样情景适用于包含图片的a标签，如果只设置图片高度，会发现a元素高度比图片要大，设置a标签font-size为0就可以解决这个问题
盒子阴影
box-shadow: 1px 2px 1px #333 inset;
/* 水平阴影，垂直阴影，模糊距离(可选)，阴影颜色，内阴影还是外阴影(默认外阴影) */
背景透明
-
rgba()只会影响背景，不会影响文字 -
opacity同时影响背景和文字
导航条
html
css
header {
width: 100%;
}
header .top {
line-height: 3rem;
padding: 0 1.5rem;
color: #fff;
background: #555;
border-bottom: 1px solid #ecc000;
}
header .top .tel {
float: left;
}
/* 文字右边对齐 */
header .top ul {
text-align: right;
}
/* 一行显示 */
header .top ul li {
display: inline-block;
}
/* 除了第一个元素外前面加一个横线
li+li表示li后面还有li的元素
*/
/* 去除li标签的间隙 */
header .top ul li+li {
border-left: 1px solid #999;
margin-left: -3px;
}
/* 设置inline-block是为了设置a标签的边距 */
header .top ul li a {
display: inline-block;
padding: 0 1.5rem;
color: #fff;
}
效果
设置行高防止高度塌陷
html
css
.trans-data {
float: left;
padding: 1rem;
text-align: left;
}
.trans-data span {
display: inline-block;
line-height: 3rem;
color: #fff;
}
.trans-data span.trans-money {
font-size: 2.2rem;
color: #ff9900;
letter-spacing: 3px;
margin: 0 1rem;
padding: 0 1rem;
border-radius: 3px;
background-color: rgba(255, 255, 255, .9);
box-shadow: 1px 2px 1px #333 inset;
/* 水平阴影，垂直阴影，模糊距离(可选)，阴影颜色，内阴影还是外阴影(默认外阴影) */
}
.trans-report {
text-align: right;
}
.trans-report a {
display: inline-block;
padding: 1rem;
line-height: 3rem;
color: #fff;
}
.trans-report a设置行高，解决了由于左边浮动元素导致的高度塌陷问题。
设置高度
父元素设置宽度，设置子元素高度，让子元素高度撑起父容器高度
html
安全
国家AAA信用平台
权威
中央电视台推荐
省心
100元起投
css
/*父元素设置宽度*/
.feature {
width: 90%;
margin: 2rem auto;
font-size: 0;
}
/*子元素设置高度*/
.feature .item {
display: inline-block;
width: calc(33.33333333333% - 3rem);
padding: 1rem;
font-size: 1.4rem;
background-color: #fff;
box-shadow: 0 0 4px #ccc;
}
单独为后面元素添加左边距
html结构同上
.feature .item + .item {
margin-left: 1.5rem;
}
表示.item类的元素后面还跟着.item类元素的元素添加左边距
box-sizing属性的应用:解决padding增大盒子大小
html结构和css同上
.feature .item {
/*省略*/
width: calc(33.33333333333% - 3rem);
padding: 1rem;
/*省略*/
}
为什么每个item的宽度要减去3rem呢？原因是每个item的左右padding为1rem，所以要减去2rem，后两个item还有一个1.5rem的左外边距，共3rem，平分到每个item为1rem。所以每个item要减去3rem
box-sizing设置为border-box后，内边距被添加在盒子内部，不会增加盒子大小，所以item的宽度只需减去1rem
.feature .item {
/*省略*/
width: calc(33.33333333333% - 1rem);
padding: 1rem;
/*省略*/
}
.feature .item + .item {
margin-left: 1.5rem;
}
w3c这样解释box-sizing:为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
文字不换行
html
css
.notice a:first-child {
/* 显示省略号 */
text-overflow: ellipsis;
/* 隐藏滚动条 */
overflow: hidden;
/* 文字不换行 */
white-space: nowrap;
}
伪元素
html
css
.notice a:first-child:before {
content: '最新公告：\00a0\00a0';
color: #aaa;
}
在.notice类中的第一个a标签前面添加文字，\00a0代表空格
自动前缀
粘贴代码后会自动添加所需前缀autoprefixer
颜色过滤
.footer-content .brand{
float: left;
display: block;
filter: grayscale(100%);
width: 20%;
height: 35px;
background: url(https://csdnimg.cn/cdn/content-toolbar/csdn-logo_.png?v=20190924.1) no-repeat left;
background-size: 150px 35px;
}
filter: grayscale(100%);将颜色变为黑色
打印样式
/* 打印样式 */
@media print {
*, *::before, *::after {
background: transparent !important;
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important;
}
a, a:visited {
text-decoration: underline;
}
a[href]::after {
content: "(" attr(href) ")";
}
abbr[title]::after {
content: "(" attr(title) ")";
}
/* 使用#和javascript的超链接不打印href */
a[href^="#"]::after, a[href^="javascript:"]::after {
content: "" !important;
}
pre, blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
tr, img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3 {
page-break-after: avoid;
}
}
响应式图片
srcset设置不同屏幕大小加载的图片，不同尺寸图片之间用逗号隔开
sizes="100vw"表示图片尺寸为100%视口宽度，同理还有vh表示视口高度
sizes还可以使用媒体查询，
sizes="(min-width:800px) calc(100vw - 30em), 100vw"
屏幕大于800px后会按照100vw - 30em的尺寸加载图片
picture属性
分别表示屏幕小于36em显示的图片，横屏显示的图片，以及默认状态下的图片
svg图片
创建svg图片工具：illustrator或网站editor.method.ac、icomoon.io
解决浏览器对新特性的兼容性问题polyfill
例如picture标签在ie是不支持的，解决这个问题就要用到picturefill，引入js文件
html
图片压缩
减小图片体积，提高页面响应速度tinypng