web前端入门教程
文章平均质量分 88
豆约翰
致力于帮助每一个对编程感兴趣的朋友掌握编程,一起体会编程的乐趣。微信号:tiantiancode
展开
-
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第11章有路网移动端主页实战
本教程案例在线演示有路网PC端有路网移动端免费配套视频教程免费配套视频教程教程配套源码资源教程配套源码资源本章目标LESS1.什么是lessLess 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、嵌套等特性。Less的语法更简洁,可以被翻译为CSS。在vs code安装less的编译插件安装插件Easy LESS,如下图所示有了这个后,可以在编辑器新建less文件,后缀名是.less,保存后会自动编译成css2. 变量less可以声明变量,在其原创 2020-08-13 11:52:42 · 1718 阅读 · 0 评论 -
HTML5CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第10章有路网PC端主页实战整合
本教程案例在线演示有路网PC端有路网移动端免费配套视频教程免费配套视频教程教程配套源码资源教程配套源码资源制作有路网首页有路网首页布局框架制作划分区域,确定div测量各个区域的宽高使用Flexbox对网页进行布局youlu-whole.css.nav{ height: 30px; background-color: #f4f4f4;}.search-bar{ height: 134px; background-color: green;}.cate-原创 2020-08-13 11:41:48 · 422 阅读 · 0 评论 -
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第9章FlexBox实战有路网
本教程案例在线演示有路网PC端有路网移动端免费配套视频教程免费配套视频教程教程配套源码资源教程配套源码资源制作有路网水平导航菜单category-nav.css.red-nav{ height: 38px; background-color: #d80000; width: 100%;}.red-nav ul{ display: flex; width: 1200px; margin: 0 auto;}.red-nav li{ flex: 0 0 au原创 2020-08-13 11:07:08 · 263 阅读 · 0 评论 -
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第8章FlexBox布局
本教程案例在线演示有路网PC端有路网移动端免费配套视频教程免费配套视频教程教程配套源码资源教程配套源码资源Flex容器<ul> <!--parent element--> <li></li> <!--first child element--> <li></li> <!--second child element--> <li></li> <!--thir原创 2020-08-13 10:51:45 · 352 阅读 · 0 评论 -
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第7章定位
本教程案例在线演示有路网PC端有路网移动端免费配套视频教程免费配套视频教程教程配套源码资源教程配套源码资源定位position属性static:默认值,没有定位relative:相对定位absolute:绝对定位fixed:固定定位标准文档流标准文档流:是指页面上从上到下,从左到右,网页元素一个挨一个的简单的正常的布局方式。一般在HTML元素分为两种:块级元素和行内元素。像div,p这些的元素属于块级元素,块级元素是从上到下一行一行的排列;默认一个块级元素会占用一行,而跟在后面原创 2020-08-13 10:42:15 · 429 阅读 · 0 评论 -
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第6章表格与表单
本教程案例在线演示有路网PC端有路网移动端免费配套视频教程免费配套视频教程教程配套源码资源教程配套源码资源表格table标签(表格)、tr标签(行)、td标签(标准单元格)、caption标签(标题)、th标签(表头单元格)。为了更深一层对表格进行语义化,HTML引入了thead、tbody和tfoot这三个标签。这三个标签把表格分为三部分:表头、表身、表脚。table 表格caption 标题thead 表头(语义划分)tbody 表身(语义划分)tfoot 表尾(语原创 2020-08-13 10:11:09 · 200 阅读 · 0 评论 -
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第5章CSS盒子模型
本教程案例在线演示有路网PC端有路网移动端免费配套视频教程免费配套视频教程教程配套源码资源教程配套源码资源divdiv 可定义文档中的分区(division)。div 标签可以把网页分割为独立的、不同的部分。可以看成以下结构:div不像 h1,p标签,没有任何默认样式,其主要作用是标识网页上的某块区域。常见做法是通过给div元素加上id或class,然后通过css选中某个div,对其进行样式美化。<div class="demo">我是一个div</div>原创 2020-07-29 18:58:09 · 489 阅读 · 0 评论 -
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第4章CSS文本样式
本教程案例在线演示有路网PC端有路网移动端免费配套视频教程免费配套视频教程教程配套源码资源教程配套源码资源字体样式属性名 含义 举例font-family 设置字体类型 font-family:“隶书”;font-size 设置字体大小 font-size:12px;font-style 设置字体风格 font-style:italic;font-weight 设置字体的粗细 font-weight:bold;font 设置所有字体属性 font:italic bo原创 2020-07-28 09:03:31 · 261 阅读 · 0 评论 -
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第3章初识CSS
本教程案例在线演示有路网PC端有路网移动端免费配套视频教程免费配套视频教程教程配套源码资源教程配套源码资源考虑对人的描述方式人 { 身高:175cm; 体重:70kg; 肤色:黄色}CSS基本语法结构选择器 { 声明1; 声明2; }h1 { font-size:12px; color:#F00;}style标签<style type="text/css">h1 { font-size:12p原创 2020-07-24 15:12:57 · 402 阅读 · 0 评论 -
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第2章HTML基础知识
本教程案例在线演示有路网PC端有路网移动端免费配套视频教程免费配套视频教程教程配套源码资源教程配套源码资源网页开发工具VSCode或WebStormHTML简介HTML:Hyper Text Markup Languagehtml文本的内部基本结构<!-- 文档声明,标识当前网页的版本的 该声明标识网页是遵循html5语法规范的 编写网页时,一定要编写的文档声明, 在某些浏览器中,如果不写文档声明,会导致浏览器进入到怪异模式 --><!doctype原创 2020-07-23 11:27:44 · 287 阅读 · 0 评论 -
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第一章前言
关于本教程通过一个PC端和一个移动端网上书城案例,穿插讲解CSS3中重要的知识点。每个页面子模块均采用手把手一步一步的方式进行代码编写。本教程不覆盖所有的CSS知识点,对于知识点的讲解秉承宁缺毋滥的原则。大家都知道有一个二八原则,即平时工作中80%最常用的知识点占全部知识点总量的20%。豆约翰就讲这20%最常用的知识点,让大家用最短的时间,从0基础到基本掌握PC端和移动端网站制作方法。本系列教程的特点就是入门快速。免费配套视频教程免费配套视频教程教程配套源码资源教程配套源码资源贯穿本教程原创 2020-07-22 15:46:15 · 303 阅读 · 0 评论