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

简介: 一,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;



三,类名约定


四,文字相关


五,相关技巧


分竖线


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


七,文本格式化标签


八,meta标签


九,表格


十,input表单


十 一,dl标签


十二,css相关补充

背景,


background-attachment 背景图像是否固定或者随着页面的其余部分滚动。


透明图像,opacity


在搜索框内添加图标


css3 边框-阴影,圆角


文本溢出显示,换行


css3 2D转换


transition过渡


Bootstrap4 颜色引用


Bootstrap4 进度条


目录
相关文章
|
3天前
|
缓存 前端开发 JavaScript
前端开发的必修课:如何让你的网页在弱网环境下依然流畅运行?
【10月更文挑战第30天】随着移动互联网的普及,弱网环境下的网页性能优化变得尤为重要。本文详细介绍了如何通过了解网络状况、优化资源加载、减少HTTP请求、调整弱网参数和代码优化等方法,提升网页在弱网环境下的加载速度和流畅性,从而改善用户体验。
74 4
|
22天前
|
存储 前端开发 JavaScript
🚀前端轻松实现网页内容转换:一键复制、保存图片及生成 Markdown
在现代前端开发中,提升用户的交互体验至关重要。本文将详细介绍如何使用 HTML2Canvas 和 Turndown 两个强大的 JavaScript 库,实现将网页选中文本转化为图片并保存或复制到剪贴板,或将内容转换为 Markdown 格式。文章包含核心代码实现、技术细节和功能拓展方向,为开发者提供了一个轻量级的解决方案,提升用户体验。
112 68
|
2天前
|
机器学习/深度学习 前端开发 JavaScript
前端小白也能学会的高大上技巧:如何让你的网页支持语音控制?
【10月更文挑战第31天】你是否曾梦想过只需动动嘴皮子就能操控网页?现在,这个梦想触手可及。即使你是前端小白,也能轻松学会让网页支持语音控制的高大上技巧。本文将介绍语音控制的基本概念、实现方法和具体示例,带你走进语音控制的奇妙世界。通过Web Speech API,你只需掌握基本的HTML、CSS和JavaScript知识,就能实现语音识别和控制功能。快来尝试吧!
12 4
|
2天前
|
搜索推荐 前端开发 开发者
前端开发的必修课:如何让你的网页在搜索引擎中脱颖而出?
【10月更文挑战第31天】前端开发不仅是构建网页与用户间桥梁的关键,还需注重搜索引擎优化(SEO)。优化网页结构、合理使用关键词、提升加载速度及整合社交媒体等技巧,能帮助网页在搜索引擎中脱颖而出,吸引更多用户。
7 4
|
3天前
|
前端开发 JavaScript 搜索推荐
前端小白也能学会的高大上技巧:如何让你的网页支持暗黑模式?
【10月更文挑战第30天】随着现代网页设计的发展,暗黑模式已成为一种流行趋势,提升了用户的阅读体验并增强了网页的适应性。本文介绍了如何通过简单的HTML、CSS和JavaScript实现网页的暗黑模式。首先,定义两种主题的CSS样式;然后,使用JavaScript实现模式切换逻辑,并自动检测系统主题。通过这些步骤,前端小白也能轻松掌握暗黑模式的实现,提升网页的用户体验和个性化水平。
13 4
|
2天前
|
前端开发 JavaScript 数据处理
前端界的宝藏技术:掌握这些,让你的网页秒变交互神器!
【10月更文挑战第31天】前端开发藏有众多宝藏技术,如JavaScript异步编程和Web Components。异步编程通过Promise、async/await实现复杂的网络请求,提高代码可读性;Web Components则允许创建可重用、封装良好的自定义组件,提升代码复用性和独立性。此外,CSS动画、SVG绘图等技术也极大丰富了网页的视觉和交互体验。不断学习和实践,让网页秒变交互神器。
7 2
|
3天前
|
编解码 前端开发 开发者
前端开发的必修课:如何让你的网页在不同设备上完美呈现?
【10月更文挑战第30天】随着互联网的普及,用户访问网页的设备种类繁多。前端开发者需确保网页在不同设备上完美呈现。本文介绍了一些最佳实践,包括使用响应式设计、相对单位、灵活的图片和视频、测试与优化及考虑交互设计,帮助实现跨设备兼容。
10 2
|
3天前
|
缓存 前端开发 JavaScript
前端小白也能掌握的高级技巧:如何让你的网页支持PWA特性?
【10月更文挑战第30天】随着互联网技术发展,渐进式网页应用(PWA)成为提升用户体验的重要手段。本文通过一个案例,介绍如何为在线问答社区网页应用添加PWA特性。从创建基本结构、添加Service Worker、创建Manifest文件到测试PWA特性,详细展示了每一步的操作方法。适合前端小白学习参考。
6 2
|
8天前
|
缓存 前端开发 JavaScript
前端性能优化:提升网页加载速度的10个技巧
【10月更文挑战第25天】在互联网时代,网页加载速度直接影响用户体验和搜索引擎排名。本文介绍了10个提升网页加载速度的技巧,包括减少HTTP请求、启用压缩、使用CDN、延迟加载非关键资源、优化图片、减少重定向、使用浏览器缓存、优化CSS和JavaScript、异步加载JavaScript以及代码分割。通过这些方法,可以显著提高网页性能,改善用户体验。
44 5
|
20天前
|
前端开发 Python
帮我用python作为网页前端输出“hallow world
帮我用python作为网页前端输出“hallow world