css3媒体查询练习

来源：互联网发布：c语言指针难点应用编辑：程序博客网时间：2024/05/24 07:44

html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>自适应</title>    <link rel="stylesheet" type="text/css" href="./resource/css/zishiying.css"  media="only screen and (min-width:480px )">    <link rel="stylesheet" type="text/css" href="./resource/css/zishiyingmedia.css" media="only screen and (max-width:480px)"></head><body>    <div class="head">        <ul>            <li><a href="">导航1</a></li>            <li><a href="">导航2</a></li>            <li><a href="">导航3</a></li>            <li><a href="">导航4</a></li>            <li><a href="">导航5</a></li>        </ul>    </div>    <div class="maindiv">        <div class="left"></div>        <div class="right"></div>    </div>    <div class="jiaobiao"></div></body></html>

电脑视角的css

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */dl, dt, dd, ul, ol, li, /* list elements 列表元素 */pre, /* text formatting elements 文本格式元素 */form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */th, td /* table elements 表格元素 */ {    margin: 0;    padding: 0;}/*__设置默认字体--------------------------------------------------------------------------------------------*//*body,button, input, select, textarea /* for ie */ /*{    font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;    font: 12px/1.5 , "微软雅黑" ;}*/*{    font-family: "微软雅黑";}h1, h2, h3, h4, h5, h6 { font-size: 100%; }address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 *//*__重置文本格式元素--------------------------------------------------------------------------------------------*/a { text-decoration: none; }a:hover { text-decoration: underline; }sup { vertical-align: text-top; } /* 重置，减少对行高的影响 */sub { vertical-align: text-bottom; }/*__重置表单元素--------------------------------------------------------------------------------------------*/legend { color: #000; } /* for ie6 */fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 *//* 注：optgroup 无法扶正 *//*__重置表格元素--------------------------------------------------------------------------------------------*//*table { border-collapse: collapse; border-spacing: 0; }*//*__重置 HTML5元素 --------------------------------------------------------------------------------------------*/article, aside, details, figcaption, figure, footer,header, hgroup, menu, nav, section,summary, time, mark, audio, video {    display: block;    margin: 0;    padding: 0;}mark { background: #ff0; }/*__clearfix--------------------------------------------------------------------------------------------*/.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;} * html .clearfix             { zoom: 1; } /* IE6 */  *:first-child+html .clearfix { zoom: 1; } /* IE7 */.head{     background-color: black;     height: 80px;     width: 100%;     border: 1px solid black;     position: fixed;     top: 0px;}ul{    width: 540px;    height: 50px;    padding-top: 10px;    margin:0 auto;    margin-top: 10px;    padding-top: 0.5em;    border: 5px solid red;}li{    display: inline-block;    list-style-type: none;    border: 1px solid white;    margin-left: 20px;    font-size: 30px;}li a{    color: white;}.maindiv{    width: 70%;    height: 800px;    background-color: red;    min-width: 600px;    margin: 0 auto;}.jiaobiao{     background-color: black;     height: 50px;     width: 100%;     border: 1px solid black;     position: fixed;     bottom: 0px;}.left{    width: 35%;    height: 100%;    background-color: gold;    float: left;}.right{    width: 63%;    height: 100%;    background-color: blue;    float: right;}

手机视角的css

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */dl, dt, dd, ul, ol, li, /* list elements 列表元素 */pre, /* text formatting elements 文本格式元素 */form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */th, td /* table elements 表格元素 */ {    margin: 0;    padding: 0;}/*__设置默认字体--------------------------------------------------------------------------------------------*//*body,button, input, select, textarea /* for ie */ /*{    font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;    font: 12px/1.5 , "微软雅黑" ;}*/*{    font-family: "微软雅黑";}h1, h2, h3, h4, h5, h6 { font-size: 100%; }address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 *//*__重置文本格式元素--------------------------------------------------------------------------------------------*/a { text-decoration: none; }a:hover { text-decoration: underline; }sup { vertical-align: text-top; } /* 重置，减少对行高的影响 */sub { vertical-align: text-bottom; }/*__重置表单元素--------------------------------------------------------------------------------------------*/legend { color: #000; } /* for ie6 */fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 *//* 注：optgroup 无法扶正 *//*__重置表格元素--------------------------------------------------------------------------------------------*//*table { border-collapse: collapse; border-spacing: 0; }*//*__重置 HTML5元素 --------------------------------------------------------------------------------------------*/article, aside, details, figcaption, figure, footer,header, hgroup, menu, nav, section,summary, time, mark, audio, video {    display: block;    margin: 0;    padding: 0;}mark { background: #ff0; }/*__clearfix--------------------------------------------------------------------------------------------*/.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;} * html .clearfix             { zoom: 1; } /* IE6 */  *:first-child+html .clearfix { zoom: 1; } /* IE7 */.head{    width: 100%;    height: 50px;    background-color: black;}ul{        width:50px;        height: 20px;        position: absolute;        right: 0;        top: 0.5em;        border: 2px black solid;    }li{    /*  display:none;*/        width: 50px;        margin-top: 0.05em;        background-color: black;        list-style-type: none;        border: 2px solid white;    }li a{    color: white;}.maindiv{    width: 100%;    height:1600px;    background-color:lightgreen;}.left{    width: 100%;    height: 800px;    background-color: yellow;}.right{    width: 100%;    height: 800px;    background-color:blue;}.jiaobiao{     background-color: black;     height: 50px;     width: 100%;     border: 1px solid black;    /* position: fixed;     bottom: 0px;*/ }

阅读全文

0 0