简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 1030CSS基础知识
Blogger Information
Blog 13
fans 0
comment 0
visits 8823
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
1030CSS基础知识
文永
Original
648 people have browsed it

元素显示方式分为哪几种，举例并正确描述它们 分为 置换元素、非置换元素、块级元素、行内元素1. 一切元素都是框；2. 任何元素都会在页面上占据一定空间，页面是以框的形式来显示它们；3. 块级框对象是块级元素，行内框对于的是行内元素；4. 行内框的宽高，由它内部的内容决定5. 块级元素的宽高，由它内部的子元素决定6. 一般来说，块级框内，可以嵌套行内框，反过来不允许(可用display改变） CSS是什么？它的主要作用是什么？css是层叠样式表作用：用来设置HTML元素在文档中的布局与显示方式  什么是CSS选择器，它的样式声明是哪两部分组成的？CSS样式声明=属性+属性值

作业代码

简单选择器

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单选择器</title>
    <link rel="stylesheet" href="static/style1.css">
    <style>
        p {
            color: blue;
        }
        div {
            color:lightgreen;
        }
        p[class]{
            color: aqua;
        }
        p[class="new"]{
            color: antiquewhite;
        }
        p[id="1"]{
            background-color: lightgreen;

        }
        body * {
            font-size: 2rem;
        }

    </style>
</head>
<body>
<p id="1">商务部新闻发言人:双方牵头人将于本周五再次通话</p>
<p>白宫说仍期待11月与中方敲定第一阶段贸易协议</p>
<p>前三季度检察机关批准逮捕侵害未成年人权益犯罪37514人</p>
<p class="imp">专访工信部王志勤：中国5G套餐资费低于国际主流运营商</p>
<p class="new">这有一份11月新规清单，快来查收！</p>
<div>卫健委:流感疫苗总体供应量充足 批签发量已超过2000万剂次</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

上下文选择器

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上下文选择器</title>
    <style>
        div h2 {
            color: blue;
        }
        div>h2{
            background-color: lightgreen;
        }
        div+h2{
            color: aquamarine;
        }
        div~*{
            background-color: royalblue;
        }

    </style>
</head>
<body>
<section>
<div>
    <h2>习近平的“国家治理公开课</h2>
    <h2>这个经验，历久弥新</h2>
    <h2>医疗资源下沉为贫困群众筑牢“健康长城”</h2>
</div>


<h2>上海国展中心“内外兼修” 迎接进博会</h2>
<h2>《习近平谈治国理政》葡文巴西版首发式举行</h2>
<h2>人民日报钟声：相约进博会 书写新篇章</h2>

</section>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

伪类选择器

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>非限定类型的伪类选择器</title>
    <style>
        ul > :nth-child(2){
        color:red
        }       /*所有ul标签下的第二个子元素 */
        ul:first-child > :nth-child(2){
            background-color: lightgreen;
        }/* 第一个ul标签下的第二个子元素*/
        ul:first-child > :last-child{
            background-color: #007efc;
        } /*第一个UL标签下的最后一个子元素*/
        ul:first-of-type > :last-of-type{
            color: darkgoldenrod;
        }
        ul:first-child > :last-child > p:nth-child(n+1){
            background-color: lightseagreen;;
        }






    </style>
</head>
<body>
<ul>
    <li>
    <h3>娱乐新闻</h3>
    <ul>
        <li>李小璐和PGONE视频流出，GAI发文图片背景亮了，马苏回应称脸真疼</li>
        <li>杨幂承认耽误了刘恺威，要不是怀上小糯米她嫁的就是他，你不配</li>
        <li>《鹰眼》电视剧，将揭示复仇者初始成员，克林特·巴顿的背景故事</li>
        <li>杨颖又闯大祸？犯错后连忙发文致歉，网友却不买账：滚出娱乐圈</li>
    </ul>
    </li>
    <li>
        <h3>社会新闻</h3>
        <ul>
        <li id="1">商务部新闻发言人:双方牵头人将于本周五再次通话</li>
        <li>白宫说仍期待11月与中方敲定第一阶段贸易协议</li>
        <li>前三季度检察机关批准逮捕侵害未成年人权益犯罪37514人</li>
        <li class="imp">专访工信部王志勤：中国5G套餐资费低于国际主流运营商</li>
        <li class="new">这有一份11月新规清单，快来查收！</li>
        <li>卫健委:流感疫苗总体供应量充足 批签发量已超过2000万剂次</li>
        </ul>
    </li>
    <li>
        <h2>体育新闻</h2>
        <ul>
            <li>白泰森与“嘴炮”康纳强强联合，共同亮相2020综合..</li>
            <li>贝尔太抢手！不止申花 英超三豪门等他搭救 回老东家..</li>
            <li>国足新名单惊喜！曝恒大前锋有望重返国家队，给艾克森..</li>
        </ul>

        <p>今天是10月31日</p>


    </li>
</ul>






</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

表单选择器

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单伪类选择器</title>
    <style>
    input:enabled {
        background-color: lightgreen;
    }
    input:disabled {
        background-color:blue;
    }
    input:required {
        background-color: lawngreen;
    }



    </style>


</head>
<body>
<h2>用户登录</h2>
<form action="" method="post">
    <p>
        <label for="email">邮箱:</label>
        <input type="email" id="email" name="email" required placeholder="example@email.com">
    </p>

    <p>
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" required placeholder="不得少于6位">
    </p>

    <p>
        <label for="save" >保存密码:</label>
        <input type="checkbox" id="save" name="save" checked readonly>
    </p>

    <p>
        <label for="save_time">保存期限:</label>
        <select name="save_time" id="save_time">
            <option value="7" selected>7天</option>
            <option value="30">30天</option>
        </select>
    </p>

    <p>
        <input type="hidden" name="login_time" value="登陆时间戳">
    </p>

    <p>
        <label for="warning">警告:</label>
        <input type="text" id="warning" value="一天内仅允许登录三次" style="border:none" disabled>
    </p>


    <script>
        document.querySelector('[type="hidden"]').value = new Date().getTime()
    </script>
</form>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


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！