代码编织梦想

一、HTML5和CSS3提高(续)

1.CSS3的新特性

1.1

(1)伪元素选择器使用场景1-配合字体图标在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪元素选择器使用场景-字体图标</title>
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?30ruvw');
            src: url('fonts/icomoon.eot?30ruvw#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?30ruvw') format('truetype'),
                url('fonts/icomoon.woff?30ruvw') format('woff'),
                url('fonts/icomoon.svg?30ruvw#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        div {
            position: relative;
            width: 200px;
            height: 35px;
            border: 1px solid red;
        }

        div::after {
            /* 定位 */
            position: absolute;
            top: 10px;
            right: 10px;
            font-family: 'icomoon';
            /* content: ''; */
            /* 加\转义字符转义一下 */
            content: '\e900';
            color: red;
            font-size: 18px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

(2)伪元素选择器使用场景2-仿土豆效果在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪元素选择器使用场景2-仿土豆效果</title>
    <style>
        .tudou {
            position: relative;
            width: 490px;
            height: 275px;
            background-color: pink;
            margin: 30px auto;
        }

        .tudou img {
            width: 100%;
            height: 100%;
        }

        .tudou::before {
            content: '';
            /* 隐藏遮罩层 */
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .4) url(imgs/arr.png) no-repeat center;
        }

        /* 当我们鼠标经过了 土豆这个盒子,就让里面before遮罩层显示出来 */
        .tudou:hover::before {
            /* 这个block是显示元素 */
            display: block;
        }
    </style>
</head>

<body>
    <div class="tudou">
        <img src="imgs/tudou.jpg" alt="">

    </div>
</body>

</html>

(3)伪元素选择器使用场景3-伪元素清除浮动本质在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

1.2 CSS3盒子模型border-box在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3盒子模型</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 20px solid red;
            padding: 15px;
            box-sizing: content-box;
        }

        p {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 20px solid red;
            padding: 15px;
            /* CSS3 盒子模型 盒子最终的大小就是 width  200 的大小 */
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div>
        小猪佩奇
    </div>
    <p>
        小猪乔治
    </p>
</body>

</html>

1.3 CSS3其它特性(了解)在这里插入图片描述

(1)CSS3图片模糊处理在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片模糊处理filter</title>
    <style>
        img {
            /* blur示一个函数 小括号里面数值越大,图片越模糊 注意数值要加px单位 */
            filter: blur(5px);
        }

        img:hover {
            filter: blur(0);
        }
    </style>
</head>

<body>
    <img src="imgs/111.jpg" alt="">
</body>

</html>

(2)计算盒子宽度calc函数在这里插入图片描述

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3属性calc函数</title>
    <style>
        .father {
            width: 300px;
            height: 200px;
            background-color: pink;
        }

        .son {
            /* width: 150px; */
            /* width: calc(150px + 30px); */
            width: calc(100% - 30px);
            height: 30px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <!-- 要求我们的子盒子宽度永远比父盒子小30像素 -->
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

1.4 CSS3过渡(重点)在这里插入图片描述

(1)CSS3新增属性过渡在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3过渡效果</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* 最后两个可以省略不写 */
            /* transition: 变化的属性 花费的时间 运动曲线 何时开始; */
            /* 如果想要写多个属性,利用逗号进行分割 */
            /* transition: width .5s ease 1s, height .5s ease 1s; */
            /* transition: width .5s ease 0s, height .5s ease 1s; */
            /* transition: width .5s, height .5s; */
            /* transition: width .5s ease 1s; */
            /* 如果想要多个属性都变化,属性写all就可以了 */
            /* 谁做过渡,给谁加 */
            transition: all 0.5s;
        }

        div:hover {
            width: 400px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

(2)CSS3过渡练习

1.在这里插入图片描述在这里插入图片描述
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3过渡练习-进度条</title>
    <style>
        .bar {
            width: 150px;
            height: 15px;
            border: 1px solid red;
            border-radius: 7px;
            padding: 1px;
        }

        .bar_in {
            width: 50%;
            height: 100%;
            background-color: red;
            /* 谁做过渡给谁加 */
            transition: all .7s;
        }

        .bar:hover .bar_in {
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="bar">
        <div class="bar_in"></div>
    </div>
</body>

</html>
2.

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

1.5 狭义的HTML5 CSS3

在这里插入图片描述

1.6 广义的H5(了解)

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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/m0_52372037/article/details/128823833

html+css+js 简单日历_yolandaxym的博客-爱代码爱编程

效果图: 实现以下功能: 1)初始时显示系统当前日期 2)选中的日期只可以大于当前的日期 3)鼠标在日期上时,底色变成橘色,离开时恢复 4)通过翻页查看上(下)一个月 5)自主选择月份 6)自主选择年份

html+css做登录注册界面_风从北方来的博客-爱代码爱编程_注册页面html代码

在登录界面点注册会进入注册界面 登录界面代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body>

html+css实例_胖哥哥飘过的博客-爱代码爱编程

1.简单的物品浏览页 (1)reset.css文件(初始化一些样式,例如消除a标签的下划线) /*将标签默认的间距设为0*/ body,ul,p,h1,h2,h3,h4,h5,h6,dl,dd,input,selector,form{ margin: 0;padding: 0; } /*让h标签继承body内设置的字体大小*/ h1,h2,

2018版html5+css3由浅入深教程_泌郧的博客-爱代码爱编程

2018版Html5+Css3由浅入深教程 day1_01-HTML5CSS3-阶段任务说明 day1_02-HTML5-什么是HTML5 day1_03-HTML5-语义化标签的使用 day1_04-HTML5-语义化标签

html5、css3 制作模拟时钟_羊角枇杷的博客-爱代码爱编程

使用 HTML5 、CSS3 、jQuery制作模拟钟表 先上效果图   鼠标划过表盘时会显示年月日,星期几 实现原理   定位:transform-origin:x y;。先找准刻度或者指针的定位中心点。我这里一

HTML+css3+js 实现生日快乐代码,动态生成效果-爱代码爱编程

看HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>生日快乐</title> <meta name="viewport" content="wid

html+css3基础知识部分详记-爱代码爱编程

1.VsCode操作 1)语言切换 2)“文件”——首选项——“设置” 3)插件:view in browser open in browser 4)快捷键 alt+b 使用默认浏览器打开 shift+alt+向下箭头 向下复制一行 shift+alt+向上箭头 向上复制一行 alt+向下箭头 向下移动行 alt+向上箭头 向上移动行 shift+tab

html+css总结+实训day01-爱代码爱编程

HTML 超文本标记语言 是有一个个标签组成,如果我们要创建一个HTML文档,第一行必须先声明我们要创建的是一个h5页面 <!doctype html> html页面值雨荨有一个外层标签,html;所有的标签都要包裹在HTML标签以内 ;… html标签不分(标签名)大小写; xml要严格区分大小写; 下边有两个字标签,一个页面

HTML5+CSS3+JavaScript 实现淘宝购物车-爱代码爱编程

HTML5+CSS3+JavaScript 实现淘宝购物车 1.在一个里面写的,好复制。。。。。下边有分开写的 备注详细 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>购物车</

01-HTML+CSS+JS【常用总结+案例练习】-爱代码爱编程

文章目录 HTML第一部分第二部分第三部分总结CSS选择器常用样式总结JavaScriptECMA Script基本语法JS对象BOM浏览器对象模型DOM文档对象模型事件案例:案例1-注册表单校验案例2-5秒后跳转到百度官网案例3-全选和全不选和反选案例4-省市二级联动案例5-表格隔行换色案例6-轮播图案例7-定时弹广告案例8-会跳动的时钟 不要

常见问题 html5页面模板,html5+css3实现403程序报错页面模板特效-爱代码爱编程

403禁止页面模板 @import url("https://fonts.googleapis.com/css?family=Share+Tech+Mono|Montserrat:700"); * { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; ve

html5+Css总结(附带案例)-爱代码爱编程

HtmL5 和CSS一些常见总结 前端(通常指的是用户能够看到)网页通常是由三部分组成: 1.html:也是前端网页基本框架结构,类似于骨架一样的作用 2.CSS: 也叫层叠样式表,就是为美化界面而存在 3.Javascript: 使页面具有动态的效果(包括与用户的一个交互) 一&二.Html HTML(超文本标记语言—

Html+Css+js实现春节倒计时效果(移动端和PC端)-爱代码爱编程

目录 前言 导语 效果预览 html部分 移动端样式(mobile.css) pc端样式(style.css) js部分 效果演示 移动端 pc端  总结  下载地址   前言 我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天

前端html5css3基础知识点-爱代码爱编程

HTML语言 ctrl+B 将文字加粗 ctrl+1 /2 /3 标题 ctrl+shift + i 插入图片 不是编程语言 编程语言都会有自己的语法结构 html语言不是编程语言 它是标记语言 一组标签 --》特

html5+css3第一讲:html5+css3基础(2)_html5 css3z试讲-爱代码爱编程

第一讲:html5+Css3基础(2) 一.预习笔记 1.选择器 id选择器:# 类选择器:. 标签选择器:div 通配符选择器:* 子代选择器: > 后代选择器:空格 并集选择器