博客列表 >1030作业

1030作业

無雙ヾ
無雙ヾ原创
2019年10月31日 19:01:46669浏览

1:元素按显示方式分为哪几种, 并举例, 正确描述它们

块级元素:独立一行,可接受宽度。默认为父级100%。有div,p,h,ul

行内元素:于行内元素并排,不可设置宽高,默认宽度为内容宽度。有span,em,a

 2:CSS是什么? 它的主要作用是什么?

CSS是层叠式样式。是控制页面布局的。可以美化网页。

3:什么是CSS选择器,它的样式声明是哪二部分组成?

CSS选择器是可以操作的样式的一个集合。样式声明由样式属性和样式值。如 p{color:red}

4: 举例演示CSS简单选择器(全部)

 

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>简单选择器</title>
	<style>
		.red{
			color: red;
		}
		p{
			font-size: 20px;
			background-color: green;
		}
		#item{
			color: #fff;
		}
		body{
			background-color: yellow;
		}
	</style>
</head>
<body>
	<p class="red">昨天在朱老师带领下学习了css基本知识</p>
	<p id="item">朱老师讲的行云如流水</p>
	<p>我听的脑子嗡嗡的</p>
</body>
</html>

运行实例 »

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

5:举例演示CSS上下文选择器(全部)

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>举例演示CSS上下文选择器(全部)</title>
    <style>
    /* 后代选择器*/
        section h2{
            color: aqua;
        }
        /*父子选择器*/
        section > h2{
            color: red;
        }
        /*同级相邻选择器*/
        #item + *{
            background-color: black;
        }
        /*同级所有选择器*/
        #item ~ *{
            background-color: yellow;
        }
    </style>
</head>
<body>
<section>
<div>
    <h2 id="item">昨天在朱老师带领下学习了css基本知识</h2>
    <h2 >朱老师讲的行云如流水</h2>
    <h2>我听的脑子嗡嗡的</h2>
</div>
    <h2>php中文网</h2>
    <h2>html中文网</h2>
</section>
</body>
</html>

运行实例 »

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

6:举例演示常用CSS结构伪类选择器(不少于四种)

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>举例演示常用CSS结构伪类选择器(不少于四种)</title>
    <style>
        /*选中页面ul中的子第二个元素*/
        ul>:nth-child(2){
            background-color: lightblue;
        }
        /*选中第一个ul中的第二个子元素*/
        ul:first-child>:nth-child(2){
            background-color: lightgreen;
        }
        /*选中第一个ul中的最后一个子元素*/
        ul:first-child>:last-child{
            background-color: lightpink;
        }
        /*选中最后一个子元素中,类型为p的元素*/
        ul:first-child>:last-child>p:nth-child(n+1){
            background-color: yellow;
        }
        /*选中最后一个元素中,类型为li的后代元素*/
        ul:first-child>:last-child li:nth-child(n+1){
            background-color: lightgray;
        }
        /*选中最后一个元素中,类型为p的元素*/
        ul:first-of-type>:last-of-type>p:nth-of-type(n+1){
            background-color: cyan;
        }
        /*选中最后一个元素中,类型为li的后代元素*/
        ul:first-child>:last-child li:nth-child(n+1){
            background-color:lightsalmon;
        }
    </style>
</head>
<body>
<ul>
    <li><h3>购物车</h3>
    <ul>
        <li>lenovo笔记本电脑</li>
        <li>iphone11</li>
        <li>MAC pro</li>
    </ul>
    </li>
    <li><h3>学习计划</h3>
        <ul>
            <li>系统学习html基础知识</li>
            <li>练习课堂所讲知识</li>
            <li>多敲代码,多温习</li>
        </ul>
    </li>
    <li><h3>重要通知</h3>
        <p>好好学习~</p>
        <ul>
            <li>今天加班学习,直到弄懂知识位为止</li>
            <li>努力努力!</li>
            <li>学习html+css布局好看网页</li>
        </ul>
        <p>努力就会出现效果的~</p>
    </li>
</ul>
</body>
</html>

运行实例 »

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

7: 举例演示常用CSS表单伪类选择器(不少于三种)

 

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>举例演示常用CSS表单伪类选择器(不少于三种)</title>
    <style>
        input:enabled{
            background-color: blanchedalmond;
        }
        /*选择禁用元素*/
        input:disabled{
            background-color: lightgray;
        }
        /*选择所有必选项*/
        input:required{
            background-color: yellow;
        }
    </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="pwd">密码:</label>
        <input type="password" id="pwd" name="pwd" required placeholder="6位-12位">
    </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>
        <label for="warning">警告:</label>
        <input type="text" id="warning" value="一天内仅允许登录三次" style="border:none" disabled>
    </p>



</form>
</body>
</html>

运行实例 »

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

均按老师课件敲打,有对比性。

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议