简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > css元素与元素框，元素的显示方式，媒体查询
Blogger Information
Blog 24
fans 0
comment 0
visits 18698
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
css元素与元素框，元素的显示方式，媒体查询
昔年
Original
524 people have browsed it

  1. css层叠样式表

  2. 元素与元素框

    http://182.92.4.86:90/0405/demo1.html

  3. 置换元素：元素框中的内容由外部引入，如img，input

    非置换元素：元素框中的内容由用户输入，如p，div


  4. 元素类型

    块级元素：默认占元素框中的一行，如p,div

    行内元素:一行内可以有多个元素，如input,a

    行内块元素：一行内可以有多个元素，且支持设置宽高，如img

<!-- 非置换元素:双标签 -->
    <p style="background-color: lightgreen;">hello world</p>

    <!-- 置换元素:单标签，双标签 -->
    <img src="1.jpg" alt="" width="100" height="80">
    <input type="text" name="" id="" style="width: 50px;">
    <!-- <video src="girl.mp4">浏览器不支持该元素</video>
    <script src="demo.js"></script>
    <link rel="stylesheet" href=""> -->

    <a href="" style="width: 50px;">php.cn</a>
    <strong style="width: 100px;">PHP中文网</strong>
    <!-- 行内元素，如果是非置换元素，不能设置大小
    如果是置换元素（外部导入的资源），可以设置宽高，对于这类元素，称之为行内块元素 -->

        4.css应用到html

link标签引入，@import引入，style元素以及style属性来设置

http://182.92.4.86:90/0405/demo2.html

http://182.92.4.86:90/0405/demo3.html

http://182.92.4.86:90/0405/demo4.html 

<!DOCTYPE html>
<html lang="en">
<head>    
    <meta charset="UTF-8">    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    <link rel="stylesheet" href="style/style2.css">    
    <title>Document</title>
</head>
<body>    
    <h2>php中文网第11期上课啦</h2>    
    <ul>        
        <li>前端基础：html5/css.flex/grid</li>       
         <li>PHP开发：php+pdo+mvc+composer</li>        
         <li>前端进阶：JavaScript + jQuery +layUI</li>        
         <li>laravel：实战</li>    </ul>
</body></html>

        5.媒体查询

设置浏览器使用指定的样式表

     http://182.92.4.86:90/0405/demo5.html

   http://182.92.4.86:90/0405/demo6.html 

<!DOCTYPE html>
<html lang="en">
<head>   
     <meta charset="UTF-8">   
      <meta name="viewport" content="width=device-width, initial-scale=1.0">    
      <title>媒体查询</title>   
       <style>        
           h1 {
             color: green;        
          }        
          body {   
                   background-color: cyan;       
          }        
          /* 大于等于500px以下样式有效 */   
         @media screen and (min-width:500px){  
            h1 {   
                    color: red;           
                }            
            body {   
                  background-color: wheat;      
              }           
         }    
     </style>
 </head>
 <body>   
      <h1>hello，欢迎来学习我的课程</h1>
</body>
</html>
<style>
        .nav {
            height: 50px;
            background-color: #eee;
            display: flex;
            align-items: center;
        }
        .nav ul {
            display: flex;
            list-style: none;
        }
        .nav ul a {
            color: #666;
            text-decoration: none;
            padding: 0 15px;
        }
        /* 局部媒体查询，当屏幕宽度小于400px，不要显示菜单了 */
        @media screen and (max-width: 400px) {
            .nav ul {
                display: none;
            }
        }

    </style>
    <body>
    <div class="nav">
        <div class="log">LOGO</div>
        <ul>
            <li>
                <a href="">首页</a>
                <a href="">视频</a>
                <a href="">问答</a>
                <a href="">下载</a>
            </li>
        </ul>
    </div>
</body>

总结：今天是学习css的第一天，第一次听说置换元素以及非置换元素的概念，以前只知道有行内元素、块内元素今天知道还有这种行内块元素（占一行也可以设置宽高）。对于如何将css引入到html中有四种方式，分别是外部文件、@import复制过来、style元素以及style属性来设置。最后一部分是媒体查询，这个名字第一次听说，但是这种应用比较多，如手机和web网站显示不一样就是这种，但是以前不清楚这个是通过css来控制的，通过学习知道了是通过css控制屏幕大小来控制。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：看来你的收获满满
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！