HTML/CSS阶段学习成果展示，以及一些布局方法和问题解决方法

最新推荐文章于 2024-05-19 11:27:40 发布

不爱吃kfc.

最新推荐文章于 2024-05-19 11:27:40 发布

阅读量195

点赞数

文章标签： html css 学习

本文链接：https://blog.csdn.net/weixin_50915530/article/details/126286446

版权

大家好，俺是一名大四学生，更新自己学习足迹，谢谢大家

HTML结构层

CSS:样式层

JS：交互层

HTML: 超文本标记语言

1.根标签 <html></html>

2.通过<mate>标签前端优化 1:<mate name = “keywords” content...> 表示网站的关键字 2.<mate name = “description” content...> 指定网站的描述

3.<h>标签：只有六级 <h1>---<h6> <br>换行单标签

4.<em></em><i></i>都可以实现文字倾斜的效果 <>b></b><strong></strong>都可以实现加粗效果

5:表单：用于收集用户信息表单域<form> 常见的控件 {text password submit reset}

6:选择器六大类：标签选择器类选择器 id选择器通配符选择器后代选择器群组选择器

如下图：出现父子盒子塌陷问题，用overflow:hidden

清除浮动的方法：

父元素加高
代码后加一个空标签<div></div> 加clear:both
overflow:hidden
万能清除法推荐使用 .clearfix:after{ content:"";display:block;clear:both;height:0;visiblity:hidden;

设置盒子中的文本溢出时显示省略号：

解决图像三要素问题：

子盒子在父盒子中垂直水平居中

二级菜单的做法

7:精灵图：css技术很多小图标整合在一张图上，减小了服务器的压力主要应用背景定位的方法一般是负值

8:渐变线性渐变：linear-gradient() 径向渐变：radial-gradient() 过渡：transition:all .2s linear; transform:rotate/translate/scale

9:动画：分两步完成 1 定义一个动画用keyframes 2 调用动画animation

10:弹性盒子：display:flex 给父元素添加设置为弹性盒具体使用方法可以看搜搜好多打出来好久顺便讲了多列 column 可以做类似tb买衣服挑选的那种两数列的布局 column-count:列数；

11：网格布局Grid: 和弹性盒子的用法差不多给大容器设置display:grid;,主要有grid-template-columns定义列宽 grid-template-columns定义行高

关注