发表于: 2021-08-02 20:50:33

2 981


今天完成的事情:

由于前两天写的代码丢了,今天重新写页面一。
明天计划的事情:

页面一超宽,继续写页面一,完成之后开始页面二。
遇到的问题:

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)
可嵌套是的
列排序是的




返回列表 返回列表
评论

    分享到