发表于： 2021-08-02 20:50:33
2 729
今天完成的事情：
由于前两天写的代码丢了，今天重新写页面一。
明天计划的事情：
页面一超宽，继续写页面一，完成之后开始页面二。
遇到的问题：
1.媒体查询不会使用，经过询问师兄，会了点媒体查询，样式如下：
2.栅格布局不会使用，明天继续研究；
收获：
一、媒体类型(Media Type)
媒体类型(Media Type)在css2中是一个常见的属性，也是一个非常有用的属性，可以通过媒体类型对不同的设备指定不同的样式，在css2中我们常碰到的就是 all（全部）,screen（屏幕）,print（页面打印或打邱预览模式）,其实在媒体类型不止这三种，w3c总共列出了10种媒体类型。
页面中引入媒体类型方法也有多种：
1、link方法引入
1 <link rel="stylesheet" type="text/css" href="../css/print.css" media="print" />
2、xml方式引入
1 <?xml-stylesheet rel="stylesheet" media="screen" href="css/style.css" ？>
3、@import方式引入
@import引入有两种方式，一种是在样式文件中通过@import调用别一个样式文件；另一种方法是 在<head>>/head>中的<style>...</style>中引入，单这种使用方法在 ie6-7都不被支持 如
样式文件中调用另一个样式文件：
1 @import url("css/reset.css") screen;2 @import url("css/print.css") print;
在<head>>/head>中的<style>...</style>中调用：
1 <head>2 <style type="text/css">3 @import url("css/style.css") all;4 </style>5 </head>
4、@media引入
这种引入方式和@imporr是一样的，也有两种方式：
样式文件中使用：
1 @media screen{2 选择器{3 属性：属性值；4 }5 }
在<head>>/head>中的<style>...</style>中调用：
1 <head>2 <style type="text/css">3 @media screen{4 选择器{5 属性：属性值；6 }7 }8 </style>9 </head>
以上几种方法都有其各自的利弊，在实际应用中我建议使用第一种和第四种，因为这两种方法是在项目制作中是常用的方法
二.栅格布局
| 超小 <576px | Small ≥576px | Medium ≥768px | Large ≥992px | 特大 ≥1200px | |
|---|---|---|---|---|---|
| 最大容器宽度 | 无（自动） | 540像素 | 720 像素 | 960 像素 | 1140 像素 |
| 类前缀 | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
| 列数 | 12 | ||||
| 天沟宽度 | 30px（每列15px） | ||||
| 可嵌套 | 是的 | ||||
| 列排序 | 是的 | ||||
返回列表
评论