html的基本介绍、css的简单介绍、图片间隙问题的解决、边框的简单介绍
一、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
推荐阅读
-
快速解决jquery之get缓存问题的最简单方法介绍
-
简单的个人介绍网页-开场特效（HTML+CSS）【附代码】
-
html的基本介绍、css的简单介绍、图片间隙问题的解决、边框的简单介绍
-
快速解决jquery之get缓存问题的最简单方法介绍
-
简单介绍HTML+CSS实现单列布局和水平居中布局的方法
-
a:active的作用是什么简单介绍_html/css_WEB-ITnose
-
css引入外部css文件的方式简单介绍_html/css_WEB-ITnose
-
快速解决jquery之get缓存问题的最简单方法介绍_jquery
-
padding对于margin的影响简单介绍_html/css_WEB-ITnose
-
css引入外部css文件的方式简单介绍_html/css_WEB-ITnose