第一个网页总结暨前端基础知识补充-阿里云开发者社区

第一个网页总结暨前端基础知识补充

2023-08-30 94

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 一，css基本引入二，字体引入样式三，类名约定四，文字相关五，相关技巧分竖线六，案例遇到问题及解决方法七，文本格式化标签八，meta标签九，表格十，input表单十一，dl标签十二，css相关补充背景，透明图像，opacity![](https://img-blog.csdnimg.cn/e6756a58e45c4b94aac154aeb76148c6.png)在搜索框内添加图标css3 边框-阴影，圆角文本溢出显示，换行css3 2D转换transition过渡Bootstrap4 颜色引用Bootstrap4 进度条

文章目录

一，css基本引入

二，字体引入样式

三，类名约定

四，文字相关

五，相关技巧

分竖线

六，案例遇到问题及解决方法

七，文本格式化标签

八，meta标签

九，表格

十，input表单

十一，dl标签

十二，css相关补充

背景，

透明图像，opacity![](https://img-

在搜索框内添加图标

css3 边框-阴影，圆角

文本溢出显示，换行

css3 2D转换

transition过渡

Bootstrap4 颜色引用

Bootstrap4 进度条

一，css基本引入

/* 把我们所有标签的内外边距清零 */
* {
    margin: 0;
    padding: 0;
    /* css3盒子模型 */
    box-sizing: border-box;
}
/* 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;
    /* 默认有灰色边框我们需要手动去掉 */
    border: 0; 
    outline: none;
}
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
}

二，字体引入样式

@font-face {
    font-family: 'icomoon';
    src:  url('../fonts/icomoon.eot?tomleg');
    src:  url('../fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'),
      url('../fonts/icomoon.ttf?tomleg') format('truetype'),
      url('../fonts/icomoon.woff?tomleg') format('woff'),
      url('../fonts/icomoon.svg?tomleg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;