一、HTML

1、简单介绍

（1）HTML描述页面一种语言；

通过标记描述；

（2）标记：尖括号包围的关键字；

（3）语法：

成对出现；

HTML元素：<开始标签>内容</闭合标签>

1、div–搭结构

(1)div可以看作是一个容器

语法:

<div>内容</div>

(2)应用：

装东西—-定义类

开始标签

空格隔开 class=“类名（自己起-字母和数字的组合）”

 <div class="box">内容</div>

2、img图片

<img src="" >

二、css装修

1、找元素—通过class名

以点进行标识

.类名——》.box

2、定义样式（描述特征）

(1)语法：找到的元素{样式声明}

(2)一条声明：属性名：属性值；

多组声明：分号隔开

<style> .box{  width:290px; height:207px; border:1px solid #e5e5e5; } </style>

（3）位置：

head内部；

（4）格式：

<style>
        /* 找到元素 */
        .box{
            /* 宽度 */
            width:290px;
            /* 高度 */
            height:207px;

            /* 边框 */
            border:1px solid #e5e5e5;

        }
 </style>

3、注释

作用：解释说明代码

【不会】被浏览器计息期显示到预览效果

快捷方式：

ctrl+/

4、文字的设置

font-size 文字大小的设置；

font-weight 文字粗细的设置；

color 文字颜色的设置；

text-align 文字水平居中；

line-height 单行文字的垂直居中可以设置行高和高一致可以实现；

<style> .box{  font-size: 18px; text-align: center; font-weight: bold; line-height: 70px; background-color: cornflowerblue; } </style>

5、图片间隙问题的解决

vertical-align:bottom（取消图片与下方文字中间的间隙）

6、边框的设置—border

(1)边框的尺寸、边框的线条、边框的颜色——-border:width color solid;

(2)分别设置边框的四边：

border-top:width solid color;

border-right:width solid color;

border-bottom:width solid color;

border-left:width solid color;

7、案例操作步骤

准备：

1.搭结构，找body,写div

2.找head,写style;

3.起类名，规定具体的样式

HTML中

css中 .名字

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 2.准备开始写样式 -->
    <style> .xiaohong{  width:290px; height:209px; /*空格隔开， 边框宽度 边框样式 颜色*/ border:1px solid red; } </style>

</head>
<body>
	<!-- 1. 搭框架 -->
	 <div class="xiaohong">这是一个div</div>
</body>

三、拓展内容

1.鼠标滑过

要滑过的元素：hover{样式}

2、缩放

transform:scale(1.2)

小括号里表示要放大的倍数

3.溢出隐藏

内容发生超出的盒子{overflow:hidden;}

4.过渡

要产生过渡效果的元素{transtion:0.5s;}

0.5表示从一种状态到另一种状态过程持续的时间

四、ps(尝试)

（1）打开（文件-打开—-直接拖拽）

（2）信息面板f8—窗口-信息

（3）放大缩小画布

ctrl+

ctrl-

（4）量取宽度

（5）移动选区

空格+鼠标左键拖动

（6）移动画布

空格

（7）取色

前景色小方块—左键点击（拾色器）

快捷键

ctrl+s保存；

ctrl+shift+s另存；

本文地址：https://blog.csdn.net/yangyanqin2545/article/details/109273724

黄山市民网：https://www.huangshanshimin.com/