代码编织梦想

一、CSS初始化在这里插入图片描述

示例:京东CSS初始化

/* 把我们所有标签的内外边距清零 */
* {
    margin: 0;
    padding: 0
}

/* em 和 i 斜体的文字不倾斜 */
em,
i {
    font-style: normal
}

/* 去掉li的小圆点 */
li {
    list-style: none
}

img {
    /* border: 0 照顾低版本浏览器 如果 图片外边包含了链接会有边框的问题 */
    border: 0;
    /* 取消图片底侧有空白缝隙的问题 */
    vertical-align: middle
}

button {
    /* 当我们鼠标经过 button按钮的时候 鼠标会变成小手 */
    cursor: pointer
}

a {
    color: #666;
    text-decoration: none;
}

a:hover {
    color: #c81623
}

button,
input {
    /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}

body {
    /* CSS3 抗锯齿形 让文字显示的更加清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

.hide,
.none {
    display: none
}

/* 清除浮动 */
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0;
}

.clearfix {
    *zoom: 1
}

二、HTML5和CSS3提高

1.HTML5和CSS3提高导读在这里插入图片描述

2.HTML5在这里插入图片描述

(1)HTML5提高-新增语义化标签在这里插入图片描述在这里插入图片描述在这里插入图片描述

示例

<title>HTML5新增语义化标签</title>
    <style>
        header,
        nav {
            height: 120px;
            background-color: pink;
            border-radius: 15px;
            width: 800px;
            margin: 15px auto;
        }

        section {
            width: 500px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <header>头部标签</header>
    <nav>导航栏标签</nav>
    <section>某个区域</section>
</body>

(2)HTML5新增视频标签在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

示例

<!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>HTML5新增视频标签</title>
    <style>
        video {
            width: 100%;
        }
    </style>
</head>

<body>
    <!-- controls播放控件在不同浏览器里面的按钮样式不一样 后面通过js实现一样 -->
    <video src="media/mi.mp4" autoplay="autoplay" muted="muted" controls="controls" loop="loop"
        poster="media/mi9.jpg"></video>
</body>

</html>

(3)HTML5新增音频标签在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

示例


<!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>HTML5新增音频标签</title>
</head>

<body>
    <audio src="media/music.mp3" autoplay="autoplay" controls="controls"></audio>
</body>

</html>

(4)HTML5新增input表单在这里插入图片描述

示例

<!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>HTML5新增input表单</title>
</head>

<body>
    <!-- 我们验证的时候必须添加form表单域 -->
    <form action="">
        <ul>
            <li>邮箱:<input type="email"></li>
            <li>网址:<input type="url"></li>
            <li>日期:<input type="data"></li>
            <li>时间:<input type="time"></li>
            <li>数量:<input type="number"></li>
            <li>手机号码:<input type="tel"></li>
            <li>搜索:<input type="search"></li>
            <li>颜色:<input type="color"></li>
            <!-- 当我们点击提交按钮就可以验证表单了 -->
            <li><input type="submit" value="提交"></li>
        </ul>
    </form>
</body>

</html>

(5)HTML5新增表单属性在这里插入图片描述

示例

<!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>HTML5新增表单属性</title>
    <style>
        /* 伪元素选择器【标签::伪元素】 */
        input::placeholder {
            color: pink;
        }
    </style>
</head>

<body>
    <!-- 必须包含在form表单域中 -->
    <form action="">
        <!-- input:search -->
        <input type="search" name="sear" id="" required="required" placeholder="全棉时代" autofocus="autofocus"
            autocomplete="off">
        <input type="file" name="" id="" multiple="multiple">
        <input type="submit" value="提交">
    </form>
</body>

</html>

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>CSS3新增属性选择器</title>
    <style>
        /* 必须是input 但是同时具有 value这个属性 选择这个元素 [] */
        /* input[value] {
            color: pink;
        } */
        /* 只将 type=text文本框的input 选取出来 */
        input[type=text] {
            color: pink;
        }

        /* 选择首先是div 然后具有clas属性 并且属性值 必须是 icon开头的这些元素 */
        /* 权重1+10 */
        div[class^=icon] {
            color: red;
        }

        section[class$=data] {
            color: blue;
        }

        /* *是任意的意思 */
        /* 权重是10 */
        /* .icon1 {
            color: skyblue;
        } */
        /* 加!也可 */
        /* 权重10+1 就近原则 */
        div.icon1 {
            color: skyblue;
        }

        /* 类选择器、属性选择器和伪类选择器 权重都是10 */
    </style>
</head>

<body>
    <!-- 1. 利用属性选择器就可以不用借助于类或者id选择器 -->
    <!-- <input type="text" value="请输入用户名">
    <input type="text"> -->
    <!-- 2. 属性选择器还可以根据属性=值选择某些元素  重点掌握-->
    <input type="text" name="" id="">
    <input type="password" name="" id="">
    <!-- 3. 属性选择器可以选择属性值开头的某些元素 -->
    <div class="icon1">小图标1</div>
    <div class="icon2">小图标2</div>
    <div class="icon3">小图标3</div>
    <div class="icon4">小图标4</div>
    <div>我是打酱油的</div>
    <!-- 4. 属性选择器可以选择属性值结尾的某些元素 -->
    <section class="icon1-data">我是安琪拉</section>
    <section class="icon2-data">我是哥斯拉</section>
    <section class="icon3-ico">那我是谁</section>
</body>

</html>

(2)CSS3新增结构伪类选择器-选择第n个元素在这里插入图片描述在这里插入图片描述

示例

<!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>
        /* 1. 选择ul里面的第一个孩子 小li */
        ul li:first-child {
            background-color: pink;
        }

        /* 2. 选择ul里面的最后一个孩子 小li */
        ul li:last-child {
            background-color: pink;
        }

        /* 1. 选择ul里面的第2个孩子 小li */
        ul li:nth-child(2) {
            background-color: skyblue;
        }

        ul li:nth-child(6) {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <ul>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ul>
</body>

</html>

(3)CSS3新增nth-child选择器在这里插入图片描述

在这里插入图片描述

示例

<!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新增结构伪类选择器-nth-child</title>
    <style>
        /* 1. 把所有的偶数 even的孩子选出来 */
        /* ul li:nth-child(even) {
            background-color: #ccc;
        } */

        /* 2. 把所有的奇数 odd的孩子选出来 */
        /* ul li:nth-child(odd) {
            background-color: gray;
        } */

        /* 3. nth-child(n) 从0开始 每次加1 往后面计算 这里面必须是n 不能是其他的字母 选择了所有的孩子*/
        /* ol li:nth-child(n) {
            background-color: pink;
        } */

        /* 4. nth-child(2n) 选择了所有的偶数孩子 等价于 even */
        /* ol li:nth-child(2n) {
            background-color: pink;
        } */


        /* ol li:nth-child(2n+1) {
            background-color: skyblue;
        } */


        /* ol li:nth-child(n+3) {
            background-color: pink;
        } */

        ol li:nth-child(-n+3) {
            background-color: pink;
        }
    </style>
</head>

<body>
    <ul>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ul>
    <ol>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ol>
</body>

</html>

(4)CSS3新增nth-of-type选择器

示例

<!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新增选择器nth-of-type</title>
    <style>
        ul li:first-of-type {
            background-color: pink;
        }

        ul li:last-of-type {
            background-color: pink;
        }

        ul li:nth-of-type(even) {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <ul>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ul>
</body>

</html>

(5)nth-child和nth-of-type的区别在这里插入图片描述

示例

<!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>
        /* nth-child 会把所有的盒子都排列序号 */
        /* 执行的时候首先看 :nth-child(1) 之后回去看 前面div */
        section div:nth-child(1) {
            background-color: red;
        }

        /* nth-of-type 会把指定元素的盒子排列序号 */
        /* 执行的时候首先看 div指定的元素 之后回去看: nth-of-type(1) 第几个孩子 */
        /* 权重1+1+10 */
        section div:nth-of-type(1) {
            background-color: blue;
        }
    </style>
</head>

<body>
    <ul>
        <section>
            <p>光头强</p>
            <div>熊大</div>
            <div>熊二</div>
        </section>
    </ul>
</body>

</html>

在这里插入图片描述

(6)CSS3新增伪元素选择器使用场景和由来在这里插入图片描述

在这里插入图片描述

(7)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>伪元素选择器before和after</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        /* 权重1+1=2 */
        div::before {
            /* 这个content是必须要写的 */
            display: inline-block;
            content: '我';
            width: 30px;
            height: 40px;
            background-color: purple;
        }

        div::after {
            content: '小猪佩奇';
        }
    </style>
</head>

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

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

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

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

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+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语言不是编程语言 它是标记语言 一组标签 --》特