css3(6)

来源：互联网发布：人工智能技术有哪些编辑：程序博客网时间：2024/05/26 19:17

渐变：
#d1
{
height:200px;
width:400px;
border:solid 1px red;
/*线性渐变，开始位置，结束位置，开始的颜色，结束的颜色，色标
（色标位置，色标颜色，可以有多个色标，色标即是颜色过渡点）*/
//background:-webkit-gradient(linear,left top,left bottom,
from(blue),to(red),color-stop(0.4,#fff),color-stop(0.6,#fff));
/*径向渐变，内圆圆心位置，内圆半径，外圆圆心半径，
外圆半径，开始颜色，结束颜色，色标*/
background:-webkit-gradient(radial, center center, 0,
center center, 460, from(blue), to(red),color-stop(0.6,#fff));
}
响应式布局
媒体查询，注意顺序
/屏幕宽度大于900的时候/
*
{
padding:0px;
margin:0px;
font-family:”微软雅黑”;
}
#header
{
height:100px;
border:solid 1px red;
margin:0px auto;
}
#main
{
margin:10px auto;
height:400px;
}
#footer
{
margin:0px auto;
height:100px;
border:solid 1px red;
}
@media screen and (min-width:900px)
{
#header,#footer
{
width:800px;
}
#main
{
width:800px;
height:400px;;
}
#main-left
{
width:200px;
height:400px;
border:solid 1px red;
float:left;
}
#main-center
{
width:394px;
height:400px;
border:solid 1px red;
float:left;
}
#main-right
{
width:200px;
height:400px;
border:solid 1px red;
float:left;
}
}
@media screen and (min-width:600px) and (max-width:900px)
{
#header,#footer
{
width:600px;
}
#main
{
width:600px;
height:400px;;
}
#main-left
{
width:200px;
height:400px;
border:solid 1px red;
float:left;
}
#main-center
{
width:396px;
height:400px;
border:solid 1px red;
float:left;
}
#main-right
{
display:none;
}
}
@media screen and (max-width:600px)
{
#header,#footer
{
width:300px;
}
#main
{
width:300px;
height:400px;;
}
#main-left
{
display:none;
}
#main-center
{
width:300px;
height:400px;
border:solid 1px red;
}
#main-right
{
display:none;
}
}
pure响应式布局:
https://purecss.cn/base.html
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link href="css/pure-min.css" rel="stylesheet" /> <link href="css/grids-responsive-min.css" rel="stylesheet" /> <link href="css/demo2.css" rel="stylesheet" /> </head> <body> <div id="header">头部</div> <div id="mainbody" class="pure-g"> <div class="pure-u-1 pure-u-sm-2-5 pure-u-md-1-5" id="main-left"><p>左边</p></div> <div class="pure-u-1 pure-u-sm-3-5 pure-u-md-3-5 " id="main-center"><p>左边</p></div> <div class="pure-u-1 pure-u-sm-1 pure-u-md-1-5" id="main-right"><p>左边</p></div> </div> </body> </html>

阅读全文

0 0