web前端实训day04——css部分知识回顾

最新推荐文章于 2022-11-04 03:32:09 发布
最新推荐文章于 2022-11-04 03:32:09 发布
阅读量292 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Happy_change/article/details/107219998
版权

目录

web前端实训day04——css部分知识回顾

今日大纲

一、复合选择器
1.后代选择器:选择器选择器，会选中该标签内部所有符合条件的标签
2.子代选择器:选择器>选择器，会选中该标签内部所有的符合条件的儿子标签
3.兄弟选择器:选择器+选择器，会选中该标签下面紧挨着的第个标签
4.并集选择器:选择器,选择器，会选中,分隔的标签
5.伪类选择器:选择器:状态，
(1).link:未连接的
(2).visited:访问过的
(3).hover:鼠标悬停
(4).active:鼠标按住
(5).focus:聚焦的状态
二、emment语法
1. html的emment语法
1.1标签名加Tab键快速生成标签
1.2使用*生成多个相同的标签
1.3使用>生成父子关系
1.4使用+生成兄弟关系
1.5使用.和#生成类名或者id名的标签
1.6使用{}生成带有文字的标签
2. css的emment语法: 首字母简写

代码示例

复合选择器

后代选择器
<style>
         /* 
            后代选择器: 选择器 选择器
            后代：在该元素内部的元素，都是元素的后代，不管存在多少级 
         */
        .parent div {
            color: red;
        }
        
        .parent h1 {
            color: blue;
        }
</style>

<body>
    <div class="parent">
        <div>我是后代div1</div>
        <div>我是后代div2</div>
        <h1>我是后代h11</h1>
        <h1>我是后代h12</h1>
        <div>
            你好
            <h1>这个是孙子辈的h1</h1>
        </div>
    </div>
</body>
子代选择器
<style>
        /* 子代选择器: 选择器>选择器 */
        .parent>div {
            color: red;
        }
</style>

<body>
    <div class="parent">
        <h1>我是h1</h1>
        <h1>我是h1</h1>
        <h1>我是h1</h1>
        <h1>我是h1</h1>

        <div>
            <h1>我是h1</h1>
        </div>
    </div>   
</body>
兄弟选择器
    <style>
        /* 
            兄弟选择器：选择器+选择器
            注意事项：兄弟指的是：该标签下面的第一个紧挨着的标签 
        */
        /* .base+h1 {
            color: red;
        } */

        .base+p {
            color: red;
        }
    </style>

<body>
    <h1>第一个h1标签</h1>
    <h1 class="base">第二个h1标签</h1>
    <h1>第三个h1标签</h1>
    <h1>第四个h1标签</h1>
    <p>p标签</p>
</body>
并集选择器
	<style>
        /* 并集选择器：选择器,选择器 */
        div,h1,p,span {
            color: red;
        }     
    </style>

<body>
    <div>我是div</div>
    <h1>我是h1</h1>
    <p>我是p标签</p>
    <span>我是span</span>
</body>
伪类选择器
    <style>
        /* 
            伪类选择器: 选择器:状态 
            hover:鼠标悬停
            link:未访问的状态
            visited:访问过得状态
            active:鼠标按下没有抬起的状态
            focus:焦点聚集状态 
        */
        .a1:hover{
            color: red;
        }
        .a2:link {
            color: black;
        }

        .a3:visited {
            color: green;
        }

        .a4:active {
            color: orchid;
        }

        .input:focus {
            border: 5px solid red;
        }
    </style>

<body>

    <a href="#" class="a1">第一个链接</a>
    <br>
    <a href="##" class="a2">第二个链接</a>
    <br>
    <a href="###" class="a3">第三个链接</a>
    <br>
    <a href="####" class="a4">第四个链接</a>

    <input type="text" class="input">
    
</body>

emment语法演示

	<style>
        /* 首字母简写 */
        h1 {
            width: 200px;
            height: 200px;
        }
    </style>

<body>
    <!-- 标签名+Tab：快速生成标签 -->
    <h1></h1>

    <!-- 使用*生成多个标签 -->
    <h1></h1>
    <h1></h1>

    <!-- 使用>生成父子关系 -->
    <ul>
        <li></li>
    </ul>

    <!-- 使用+生成兄弟关系 -->
    <div></div>
    <h1></h1>

    <!-- 使用.生成带有class类的标签 -->
    <div class="header"></div>

    <!-- 使用#生成带有demo类的标签 -->
    <div id="demo"></div>

    <!-- 使用{}来生成带有文字的标签 -->
    <h1>我是h1</h1>
    
</body>

案例一：悬停显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例一plus</title>
    <style>
        .content {
            border: 1px solid black;
            width: 100px;
        }
        .content div {
            width: 100px;
            height: 100px;
            background-color: red;
            display: none;
        }

        .content:hover div{
           
            display: block;
        }
        
        
    </style>
</head>
<body>
    <div class="content"> 
        <a href="">悬停显示</a>
        <div>
            你看到我了
        </div>
    </div>
</body>
</html>

案例—登录

效果图在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录界面</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        body {
            background-color: #f5f5f5;
            color: white;
            font-size: 12px;
        }

        a {
            text-decoration: none;
            color: white;
        }
        .header {
            height: 102px;
            width: 950px;
            margin: 0 auto;
        }

        .header p {
            line-height: 90px;
            color: #4f4e4d;
            font-size: 24px;
            background-image: url(images/logo.png);
            background-repeat: no-repeat;
            background-position: left center;
            text-align: right;
            width: 280px;
        }
         /* 登录区域开始 */
        .content {
            background-image: url(images/regist.png);
            background-repeat: repeat-x;
            height: 560px;
        }

        .login {
            width: 280px;
            height: 296px;
            
            float: right;
            margin-right: 122px;
            margin-top: 122px;
            padding: 10px;
            box-sizing: border-box;
            background-color: rgba(0,0,0,0.3);
        }

        .title {
            height: 40px;
            border-bottom: 1px solid #f0f0f0;
            line-height: 40px;
           
        }

        .title>span {
            font-size: 18px;
        }

        .title a {
            float: right;
            
        }
        
        .username, .password {
            height: 85px;
        }

        .username input {
            width: 100%;
            height: 38px;
            margin-top: 15px;
            border: none;
            padding-left: 10px;
            box-sizing: border-box;
            background-image: url(images/username.png);
            background-repeat: no-repeat;
            background-position: 95% center;
            
        }

        .password input  {
            width: 100%;
            height: 38px;
            margin-top: 15px;
            border: none;
            padding-left: 10px;
            box-sizing: border-box;
            background-image: url(images/username.png);
            background-repeat: no-repeat;
            background-position: 95% center;
        }


        .choose a{

            margin-left: 105px;
        }

        .login-btn {
            margin-top: 10px;
        }

        .login-btn button {
            width: 100%;
            height: 37px;
            color: white;
            /* background-color: #27b0f6; */
            background-color: #1aa9f2;
            border: none;
            font-weight: 700;
        }
        /* 登录区域结束 */
        
        
        .footer {
            height: 900px;
        }

    </style>
</head>
<body>
    <!-- 头部开始 -->
    <div class="header">
        <p>欢迎登录</p>
    </div>
    <!-- 头部结束 -->
    <div class="content">
        <div class="login">
             <div class="title">
                 <span>登录学子商城</span>
                 <a href="#">新用户注册</a>
             </div>
             <div class="username">
                 <input type="text" placeholder="请输入您的用户名">
             </div>
             <div class="password">
                <input type="password" placeholder="请输入您的密码">
             </div>
             <div class="choose">
                <input type="checkbox" id="box-login">
                <label for="box-login">自动登录</label>
                <a href="#">忘记密码？</a>
            </div>
            <div class="login-btn">
                <button>登录</button>                  
            </div>
        </div>
    </div>

    <div class="footer">

    </div>
</body>
</html>
Happy_change
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
web前端笔记
11-30
web前端笔记
web前端学习日记2
u013637066的专栏
07-25 525
今日任务：                 1.继续安装和配置好git，并上传项目到github上~ 总结：
web前端学习日记4
u013637066的专栏
07-27 428
1.看完网络安全部分视频。 2.做100道相关的面试题。 3。看看bootstap手册的exampl部分。
开始我的web前端学习日记
Phoebe_Perry的博客
01-31 1017
回顾总结 安排构想
实训日记·oneday
Huangxu_MIKU的博客
06-17 527
一、课堂笔记 html 5 sublime 1) html+tab 生成结构 2）命名带html后缀 3）html文档结构1、头部2、body3、样式（css）style 4、脚本（JavaScript） 4）h5遵循开闭原则，除了换行符<br/>等属于单标签（可加可不加） span标签 段内标签不换行 包裹文本或者分割文本（改变字体、颜色等特征） p标签 段外标签换行...
Web前端基础day04.zip
08-19
在Web前端开发中，布局和定位是至关重要的概念，它们决定了网页元素的排列方式和位置。...在学习过程中，可以参考压缩包中的"day04"文件，它可能包含了相关的代码示例和练习，进一步加深对这些概念的理解。
2020求知讲堂web前端（html5+css3）(Day1).pdf
03-14
2020求知讲堂web前端（html5+css3）(Day1).pdf
练习前端-CSS引入、基础选择器-day04
最新发布
08-31
在前端开发中，CSS（Cascading Style Sheets）...通过实践`Day04.css`和`Day04.html`，你可以深入理解这些概念，并进一步提升前端开发技能。在实际项目中，灵活运用这些知识能够帮助你创建更具吸引力和用户体验的网站。
Web前端.DAY1实体.avi
05-16
Web前端.DAY1实体.avi
HTML678day_htmlCSS_前端基础_
10-01
在本课程中，我们主要探讨的是HTML5、CSS3以及前端基础的相关知识，这是Web开发领域不可或缺的部分。从"HTML678day_htmlCSS_前端基础_"这个标题来看，我们可以推测这是一系列关于HTML和CSS的三天密集学习资料，特别...
实习周志20篇
01-20
第一周2011.12.202011.12.25这是离开校园面对社会的第一周从这周开始我将不是一个在学校的学生而是将会面对社会的年轻人在这一周的时间里找到了一份能锻炼自身吃苦耐劳的工作虽然工作的内容与我
Web前端开发学习日记（1）- 2022.11.03
LycheeXixi_的博客
11-04 816
我写这篇日记的初衷，是希望自己可以坚持学下去。本科的时候学的是交互媒体专业，我总觉得什么都学了，但是什么也不会。我们的课程涉猎很广，学点编程，也学点建模，学点设计，也学点媒体理论课，但是都学得不深。而且，在本科的时候自己既茫然又贪玩，总是结课之后就把课程内容丢到一边，写完项目之后再也不会去复习学过的东西。原来总觉得自己还小，还有很多时间。现在上了研究生，找工作的压力逐渐大了起来。看着身边优秀的同龄人，有时候也不知道自己的未来在哪里。看了看准备找工作同学的规划，发现自己需要一个作品集网站。
WEB前端学习日志day3
bbbbbbxxx的博客
03-18 257
第三天的学习，主要学习html中的表格，以及仔细研究几个表格合并案例，并主要对行合并于列合并进行学习。 并且学习了表单的基本操作，包括表单标签，表单控件，以及文本框的建立。 并在下午初步学习CSS基础，以及CSS样式表。 html中的表格 表格的作用；显示数据 没一个表格都是一个table 表格中的行：tr 表格中的列：td 表格的html属性： width 宽 height 高 bor...
CSS3样式，基础选择器，复合选择器
TangJing_的博客
06-17 227
CSS样式规则 选择器{ 属性：属性值；（键值对方式） ...... }
前端日记
acejunnan的博客
12-12 293
学前端也稀稀拉拉的有半个月了，感觉和学单片机的时候差不多，慢慢的摸索入门，唯一的不同是那个时候有人带着教，但是现在没有但是现在没有，在iMOOC上学真爽打一段代码就年薪百万的节奏了。。。。。这样记住的东西不多，就像股社区说的，收益越高，风险越大，这样“学”的速度越快，学的东西越少，还是要开着DW去学，每一段代码都要用手敲出来，要设计出来一个网站，前后端都要，从现在到二月末，加油，相信自己！现在每学
前端学习（二）实训复习一CSS3
忆_恒心的博客
02-11 337
今日学习目标：
Web实训学习-day04：css选择器、display、背景
小懒虫的博客
06-20 201
1、CSS复合选择器 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，目的是唯了可以选择更准确的元素标签。 1.1交集选择器 由两个选择器构成，必须满足：既有标签一的特点，也有标签二的特点。 /*交集选择器：由两个基础选择器：一个是标签选择器，一个是class选择器*/ div.content { color: red; } 1.2并集选择器 /*同时选择多个选择器，中间用逗号隔开*/ p, .box, span { font-size: 36px; color: gree
前端实习日记(6月前两周)
热门推荐
J_Boogie的博客
06-20 2万+
前端实习日记 2020/6/8 熟悉了公司环境，了解大概流程，进行了简单的自我介绍之后就开始了实习工作，如阅读项目源码，熟悉系统数据流，操作后台管理中的增删改查，为的是了解项目逻辑，了解客户需求在实际开发中的影响；巩固了一下vue和ajax ...
我的web前端工作日记2------web前端工作的一天
dreamer_sen的博客
08-28 2万+
转载请注明出处：https://blog.csdn.net/dreamer_sen/article/details/82144382 web前端工作的一天 ------------------------------------------------------------------------------------------------------------------------...
笔记-day08-前端基础CSS第六天.pdf
10-11
"笔记-day08-前端基础CSS第六天.pdf" 在前端开发中，CSS（层叠样式表）是用于控制网页元素样式的关键技术之一，其中定位（positioning）是实现复杂布局的重要手段。本节笔记主要介绍了CSS定位的相关概念、应用场景...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值