HTML+CSS

最新推荐文章于 2023-07-10 18:29:39 发布

资产今日进账

最新推荐文章于 2023-07-10 18:29:39 发布

阅读量57

点赞数

分类专栏： JavaWeb 文章标签： web

本文链接：https://blog.csdn.net/m0_55640070/article/details/130166046

版权

JavaWeb 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.什么是H5?

h5整合了：HTMl+CSS+JavaScript+HTML5+CSS3+API，可以在移动设备上支持多媒体技术。

2.常用的标签：？

h1 、p、 br 、文本格式化标签、div、span 、img、a、ul-li、ol-li、table-td-tr/td-th、form、input、select、重点区分*块状标签* 和行标签

3.什么是CSS样式？

使用css，实现我们想要的排版布局的效果。CSS即样式：对页面进行美化、布局、定位、排版;类似于化妆、美颜

4.如何引入css?

内联：head标签里加入Style标签
外联：引入外部Css文件，在head标签里使用，语法：

<link rel="stylesheet" href="./index.css">
@import url('./index.css')

行内：

<body>
<h1 style="color: green;">我是h1</h1>
<body/>

5.了解选择器的分类？

style标签里使用：

类选择器：.类名{}
id选择器：.id{]
标签选择器：例如img{}
通配符选择器：*{}
伪类选择器：标签：havor{} 跟":" 个英文:
后代选择器：ul li{} //标签之间有一个空格
子元素选择器：.class>h1(某一个子标签)
属性选择器：[href]{}
并集选择器：.one,p,#test{}

6.常见样式：

字体样式：font-style:字体样子 weight:粗度 size:大小
文本样式：color :颜色 text-align: 对齐方式 text-indent：缩进 line-height：行高
-背景样式：背景颜色：background-color 图像路径：background-image:url(‘图片路径’)
重复方式：background-repeat 背景定位：background-position

7.表单的语法：

<form action="./表单页面1.html" method="get">
    <table>
        <tr>
            <td>用户名:</td>
            <td><input type="text" name="username" id="" value="admin" /></td>
        </tr>
        <tr>
            <td>密&nbsp;&nbsp;&nbsp;码:</td>
            <td><input type="password" name="pwd" id="" value="123456" / ></td>
        </tr>
        <tr>
            <td>性&nbsp;&nbsp;&nbsp;别:</td>
            <td>
                <!-- 同一组单选框,name必须保持一致 -->
                <input type="radio" name="sex" id="boy" value="男" checked />男
                <label for="boy"></label>
                <input type="radio" name="sex" id="girl" value="女" />女
                <label for="girl"></label>
            </td>
        </tr>
        <tr>
            <td>爱&nbsp;&nbsp;&nbsp;好:</td>
            <td>
                <!-- 同一组复选框,name必须保持一致 -->
                <input type="checkbox" name="hobby" id="01" value="看书" checked />
                <label for="01">看书</label>
                <input type="checkbox" name="hobby" id="02" value="跳大神" />
                <label for="02">跳大神</label>
                <input type="checkbox" name="hobby" id="03" value="唱歌" />
                <label for="03">唱歌</label>
                <input type="checkbox" name="hobby" id="04" value="打篮球" />
                <label for="04">打篮球</label>
            </td>
        </tr>
        <tr>
            <td>地&nbsp;&nbsp;&nbsp;址:</td>
            <td>
                <select name="address" id="" />
                    <option value="NY">南阳</option>
                    <option value="HN">河南</option>
                    <option value="ZG" selected>中国</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>头&nbsp;&nbsp;&nbsp;像:</td>
            <td>
                <!-- 禁用 disabled -->
                <input type="file" name="face" id="" disabled />
            </td>
        </tr>
        <tr>
            <td>简&nbsp;&nbsp;&nbsp;历:</td>
            <td>
                <!-- 多行文本框 cols:列宽 rows:行高 -->
                <textarea name="info" id="" cols="30" rows="10">个人信息简介:</textarea>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="submit" value="登录" />
                <input type="button" value="普通按钮" />
            </td>
        </tr>
    </table>
    </form>

8.盒子模型的元素：

Margin(外边距)
Border(边框) 内边距和内容外的边框。
Padding(内边距)
Content(内容)

9.盒子里的相关样式：

border:边框之类的，复合写法：border-bottom: 9px #F00 dashed
padding-left:左内边距
margain-left:左外边距
盒子大小的约束：box-sizing:content-box标准盒模型，盒子的实际宽度和高度仅应用于元素内容。border-box：怪异盒模型，盒子的实际高度和宽度包括元素内容、边框和内边距
display:控制元素的隐藏，元素的转换。inline：内敛元素，block块状元素，inline-block行内块元素

10.定位(盒子)

position:static默认没有定位
position:relative相对定位—相对自身原本的位置,不对其他元素产生影响
position:absolute绝对定位—脱离文档流，离他最近的元素产生偏移
position:fixed固定位置相对于浏览器进行定位，脱离文档流
position:sticky粘性定位：相对定位+固定定位，必须设置一个阈值

11.浮动

1.第一步脱离文档流，变为块状元素，可以设宽高采用布局排列 float 属性
2.避免影响，使用clear属性样式里：.clear{}
3.避免因浮动产生的塌陷问题：overflow:hidden/auto/…

12.css高级特效，举例子吧

渐变动画帧

<!-- 文档 类型 -->
<!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>Document</title>
    <style>
        /* .选谁{
            具体样式 ;
            样式名称：样式值
        } */
        /* .b {
            width: 400px;
            height: 400px;
            font-size: 40px;
            background-color: bisque;
            border: 1px solid red;
        }

        .a {
            width: 450px;
            height: 4 : 20px;
            background-color: white;
            border: 2px dotted black;
            padding: 50px;

        }

        .c {
            width: 500px;
            height: 300px;
            font-weight: bolder;
            border: 3px dashed greenyellow;
            background-color: pink;

            line-height: 40;
        } */

        /* div{
            width: 400px;
            height: 400px;
            border: 2px solid black;
            background-color: pink;
        } */

        /* .a{
            display: inline-block;
        }
        .b{
            display: inline-block;
        }
       .c{
        display: block;
        } */
        /* .d{
          width: 100px;
          height: 100px;
          border: 1px dashed red;
          background-color: white;
          padding: 20px;
          background-image: url(../../Day_05_盒模型/作业/imgs/琪琪.jpg);
          background-size: cover;
          background-position: center;
          
          
       } */

        /* .five {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            /* background-color: red; */
            /* border-radius: 50%; 圆 */
            /* 线性渐变 */
            /* background: linear-gradient( rgba(233,0,76,0.3)50%, green 0); */
            /* 径向渐变 */
            /* background: radial-gradient(black 20%, green 60%); */
            /* 颜色 
            单词  
            rgb/rgba  r g b:0-255 a:0-1 
            #fff000 十六进制
            */
            /* background-color: rgb(150, 170, 180);  写法1 */
            /* background-color: #000fff; 写法二 */
            /* 写法三 用饱和度 */
            /* background-color: rgba(225, 0, 0, 1); */
            /* background-color: transparent;

            background: linear-gradient(rgba(233, 0, 76, 0.2) 50%,rgba(190, 50, 66, 0.8) 0),
                linear-gradient(to right, rgba(99, 100, 99, 0.4) 50%,rgba(22, 177, 76, 0.3) 50%);

            background-size: 20px 20px;
        } */ 
           
        /* 动画
           动画内部: keyframes 动画帧
             1.制作动画
             2.使用动画  
             整体动:margin-left
        */

        @keyframes sx{

            /* 0%{
                background-color: yellow;
            }
            100%{
                background-color: red;
            } */
            0%{
               background-position: 0px 0px;
            }
            100%{
               background-position: -1600px 0px;
            }
        }

        @keyframes  two{
            0%{
               margin-left:20px ;
            }
            100%{
               margin-left: 300px ;
            }
        }

        .six{
            width: 200px;
            height: 100px;
            /* border: 1px solid gold; */
            background-color:yellow ;
            /* margin-left: 20px; */
            /* margin: 0 auto;/

            /* animation: 名称 时长 匀速 延迟 次数 */
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
        
            background-image: url(./imgs/bear.png);
            animation: sx 1.5s steps(8) 0s infinite,
                       two 2.5s linear 0s infinite;
                       background-repeat: no-repeat;
        }




    </style>
</head>
<!-- 身体 浏览器的主体 -->

<body  bgcolor="black">
    <!-- html high text mark language 超 文本 标记 语言 -->
    <!-- body的作用 -->
    <!-- 标签成为标记 -->

    <!-- 
        普通文档流布局
          从左到右 从上到下 块元素上下 行元素 左右排

        块 block元素 自己一个人占满一行，不允许与别人在一起 div
         行 inline元素 自己占不满一行 sapn
         块元素可以改变宽高 但行元素不可以
         元素的第三种显示方式：行内块 inline block元素 能改变宽高的行元素
    -->

    <!-- 去缝隙 display
             1.去掉代码回车或者空格
             2.样式问题
       -->

    <!-- <div class="a"></div><div class="b"></div></div>
    <div class="c"></div> -->


    <!-- <div class="d">222</div> -->

    <!-- 图片是行内块元素 -->
    <!-- 盒模型:
                边框:border
                内容 content  宽高设置
                填充: padding
                背景默认从填充开始进行渲染
        改变盒子大小的三种方式:
                   background 背景
                   image 图片
                   repaeat 重复
                   size 尺寸  cover
                   position  位置
     -->
    <!-- <div class="five"></div> -->
    <!--
            line 线条线性的
            inline 行元素
            radius 圆角
            radius 半径
            gradient 渐变
            rgb 颜色

           -->
           <div class="six"></div>
</body>

</html>

3D转动

<!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>Document</title>
    <style>
        .one{
            width: 700px;
            height: 700px;
            border: 1px solid black;
            background-color: black;
            position: relative;
            perspective: 500px;
        }
        .one>div{
            width: 200px;
            height: 200px;
            /* border: 1px solid blue; */
            position: absolute;
            left: 0px;
            right: 0px;
            top: 0px;
            bottom: 0px;
            margin: auto;
            transform-style: preserve-3d;
            animation:  trs 5s linear 0s infinite ;
        }

        .one>div>div{
            width: 200px;
            height: 200px;
            /* border: 1px solid white; */
            position: absolute;
            background-size: cover;
            background-position: center;
        } 
        /* .one>div>div>div{
            width: 50px;
            height: 50px;
            border: 1px solid white; 
            box-sizing: border-box;
            background-image: url(../../Day_09_优先级占位空间/作业/imgs/5.jpg);
            background-size: cover;
            background-position: center;
            float: left;
        }  */
        .one>div>div:nth-child(1){
            background-image: url(../作业/琪琪.jpg);
            transform: translateZ(100px);
        }
        .one>div>div:nth-child(2){
            transform: translateZ(-100px);
            background-image: url(../作业/imgs/我们.jpg);
        }
        .one>div>div:nth-child(3){
            transform: rotateX(90deg) translateZ(100px);
            background-image: url(../作业/琪琪.jpg);
        }
        .one>div>div:nth-child(4){
            background-image: url(../作业/琪琪.jpg);
            transform: rotateX(-90deg) translateZ(100px);
        }
        .one>div>div:nth-child(5){
            background-image: url(../作业/琪琪.jpg);
            transform: rotateY(90deg) translateZ(100px);
        }
        .one>div>div:nth-child(6){
            background-image: url(../作业/琪琪.jpg);
            transform: rotateY(-90deg) translateZ(100px);
        }

        @keyframes trs{
            0%{
                transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            }
            50%{
                transform:  rotateX(240deg) rotateY(120deg) rotateZ(180deg);
            }
            100%{
                transform:  rotateX(360deg) rotateY(360deg) rotateZ(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="one">
        <div>
            <div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        
    </div>   
</body>
</html>

转圈圈

<!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>Document</title>
    <style>
        .one {
            width: 700px;
            height: 700px;
            border: 1px solid black;
            background-color: black;
            position: relative;
            perspective: 500px;
        }

        .one>div {
            width: 100px;
            height: 300px;
            /* border: 1px solid blue; */
            position: absolute;
            transform-style: preserve-3d;

            left: 0px;
            right: 0px;
            top: 0px;
            bottom: 0px;
            margin: auto;
            animation: trs 5s linear 0s infinite;
        }

        .one>div>div {
            width: 80px;
            height: 80px;
            border: 1px solid white;
            position: absolute;
            border-radius: 50%;
            left: 0px;
            right: 0px;
            top: 0px;
            bottom: 0px;
            margin: auto;
            box-sizing: border-box;
            background-size: cover;
            background-position: center;
        }

        .one>div>div:nth-child(1) {
            background-image: url(../作业/imgs/208868df7e4e3ff11beda2b01a1ad16.jpg);
            transform: rotateY(0deg) translateZ(100px);
        }

        .one>div>div:nth-child(2) {
            transform: rotateY(60deg) translateZ(100px);
            background-image: url(../作业/imgs/433fbdf84379017a363ef095be926a1.jpg);
        }

        .one>div>div:nth-child(3) {
            transform: rotateY(120deg) translateZ(100px);
            background-image: url(../作业/imgs/4be3775e0ab4e4417c4c101801eaed4.jpg);
        }

        .one>div>div:nth-child(4) {
            background-image: url(../作业/imgs/6e0daaac5a7aee9fbdd169934594d91.jpg);
            transform: rotateY(180deg) translateZ(100px);
        }

        .one>div>div:nth-child(5) {
            background-image: url(../作业/imgs/d0f9498910b213f876243b937d5a818.jpg);
            transform: rotateY(240deg) translateZ(100px);
        }

        .one>div>div:nth-child(6) {
            background-image: url(../作业/imgs/d4d35ca0771672be69b80626e68e45a.jpg);
            transform: rotateY(300deg) translateZ(100px);
        }

        @keyframes trs {
            0% {
                transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            }

            50% {
                transform: rotateX(0deg) rotateY(120deg) rotateZ(0deg);
            }

            100% {
                transform: rotateX(0deg) rotateY(360deg) rotateZ(0deg);
            }
        }
    </style>
</head>

<body>
    <div class="one">
        <div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</body>

</html>

到此结束，下期再见。

资产今日进账

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS

1.什么是H5?h5整合了：HTMl+CSS+JavaScript+HTML5+CSS3+API，可以在移动设备上支持多媒体技术。2.常用的标签：？h1 、p、 br 、文本格式化标签、div、span 、img、a、ul-li、ol-li、table-td-tr/td-th、form、input、select、重点区分*块状标签* 和行标签3.什么是CSS样式？使用css，实现我们想要的排版布局的效果。CSS即样式：对页面进行美化、布局、定位、排版;类似于化妆、美颜4.如何引入css?内
复制链接

扫一扫