HTML及CSS
文章平均质量分 62
zeddme
这个作者很懒,什么都没留下…
展开
-
实训-利用HTML和CSS制作一个网页界面
项目介绍学习HTML和CSS有一段时间了,笔者做完了一个相对练习而言较为复杂的网页,纽曼官网首页,上一下效果图:这个网页相对来说还是比较有练习意义的,包含导航栏,轮播图,大量的浮动和弹性布局以及一些细小却重要的知识点。需求分析自顶向下,先整体在局部,我们慢慢分析。1.Header:头部比较简单,左侧有一个图片logo,右侧一个横向导航栏,每个单元有悬停效果。最右侧有个语言切换标志。2.Body:一个轮播图,有图片计数器和前进后退控制器。接下来有四个大部分,四部分均有一个标题及说明,再接具体原创 2020-09-29 18:48:24 · 32649 阅读 · 22 评论 -
Sass学习
前言这两天刚好学到sass,分享一下自己在学习过程中总结的点正文基本用法sass中导入另一个sass@import "路径"注释单行注释 //,编译后省略,只会保留在sass源文件中多行注释 /* */ ,会保留在编译后的css文件中重要注释 /*! */,在*后加一个!,压缩代码后也会保留 - 变量如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中。 $font-primary-color: #0f0; $border-base: 1px solid原创 2021-02-18 17:32:11 · 104 阅读 · 0 评论 -
Vue 中使用 Sass 踩的坑
这两天在vue脚手架中使用Sass,踩了几个坑,分享出来。在 Vue cli3 中安装$ npm i sass sass-loader -D首先,要安装的是两个,sass sass-loader其次,一定要安装在开发依赖中,因为它是CSS的预处理器。-D即为--save -dev的缩写,这是第一个坑然后,你可以能会出现以下两个问题Sass中的独特语法,如嵌套写法,不生效甚至你连编译都过不去,项目起不来,报错那么解决方法呢?其实大概率是因为你的sass-loader的版本过高,降原创 2021-02-18 16:43:53 · 368 阅读 · 0 评论 -
浮动案例
一个网页的小小案例,主要用到浮动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>实训2</title> <link rel="stylesheet" href="../css/4-2.css"></head><body> <!--总体--> <d原创 2020-11-05 15:59:18 · 347 阅读 · 0 评论 -
JQuery实现一个简单的相册
介绍利用jq的DOM操作,点击上方的小图片,使其显示到下方大图片区域。大概思路为将被点击的小图片路径赋值给大图片路径。比较核心的是jq代码,利用js也能轻松实现。效果图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>相册</title> <style> .box {原创 2020-10-06 17:49:08 · 1146 阅读 · 0 评论 -
学习笔记~1.5 CSS3新特性
1.5 CSS3新特性笔者为正在学习web前端开发基础的菜鸟,计划先学习祖传三大件:HTML CSS及JS。写博客主要是为了加深记忆,以及把自己所学分享。本博客的内容主要为学习笔记,由于自学,其中我会借鉴网课老师课堂笔记再加入一些自己的见解,同时会分享一些学习过程中遇到的问题和解决方法。正文1.CSS3的主要新特性:1)选择器2)阴影3)形状转换(2D <-> 3D)4)变形5)动画(过渡动画、帧动画)6)边框7)多重背景8)反射9)文字10)颜色函数(rgba/hsl原创 2020-09-28 12:58:39 · 131 阅读 · 0 评论 -
学习笔记~1.4 HTML5新特性
1.4 HTML5新特性笔者为正在学习web前端开发基础的菜鸟,计划先学习祖传三大件:HTML CSS及JS。写博客主要是为了加深记忆,以及把自己所学分享。本博客的内容主要为学习笔记,由于自学,其中我会借鉴网课老师课堂笔记再加入一些自己的见解,同时会分享一些学习过程中遇到的问题和解决方法。正文1.HTML5新特性(面试)1)增加了audio和video音频播放,抛弃了Flash2)新增了canvas画布(绘画,制作动画(如小游戏开发等))3)地理定位4)增加了离线缓存5)硬件加速6)Web原创 2020-09-28 12:18:53 · 485 阅读 · 0 评论 -
学习笔记~1.3 CSS 定位布局
1.3 CSS 定位布局笔者为正在学习web前端开发基础的菜鸟,计划先学习祖传三大件:HTML CSS及JS。写博客主要是为了加深记忆,以及把自己所学分享。本博客的内容主要为学习笔记,由于自学,其中我会借鉴网课老师课堂笔记再加入一些自己的见解,同时会分享一些学习过程中遇到的问题和解决方法。正文1.定位(position)设定元素在文档中的位置。会将标签(元素)转换为块级。2.定位分类(属性值)1)static:静态定位 默认值,没有定位,不能设置偏移值(left/top/right/b原创 2020-09-26 12:32:43 · 274 阅读 · 0 评论 -
学习笔记~1.2 CSS浮动布局&盒模型
1.2 CSS浮动布局及盒模型笔者为正在学习web前端开发基础的菜鸟,计划先学习祖传三大件:HTML CSS及JS。写博客主要是为了加深记忆,以及把自己所学分享。本博客的内容主要为学习笔记,由于自学,其中我会借鉴网课老师课堂笔记再加入一些自己的见解,同时会分享一些学习过程中遇到的问题和解决方法正文1.什么是浮动?浮动就是让块级标签不独占一行。目的(使用场景):把块级标签元素可以排在一行上。2.浮动的原理就是让元素脱离文档流,不占用标准流。3.float的属性值:left:左浮动right:原创 2020-09-26 11:46:23 · 460 阅读 · 0 评论 -
学习笔记~ 1.1CSS基础
2.0 CSS基础笔者为正在学习web前端开发基础的菜鸟,计划先学习祖传三大件:HTML CSS及JS。写博客主要是为了加深记忆,以及把自己所学分享。本博客的内容主要为学习笔记,由于自学,其中我会借鉴网课老师课堂笔记再加入一些自己的见解,同时会分享一些学习过程中遇到的问题和解决方法。正文1.CSS:层叠样式表,用来美化网页的。做到结构(HTML)和表现(CSS)分离。2.基本语法:选择器 {属性: 属性值;}3.CSS引用方式:行间样式、内部样式、外部样式、导入外部样式。行间样式:直接在标原创 2020-09-26 11:05:49 · 241 阅读 · 0 评论 -
学习笔记~ 1.0 HTML标签属性
1.0 HTML标签属性笔者为正在学习web前端开发基础的菜鸟,计划先学习祖传三大件:HTML CSS及JS。写博客主要是为了加深记忆,以及把自己所学分享。本博客的内容主要为学习笔记,由于自学,其中我会借鉴网课老师课堂笔记再加入一些自己的见解,同时会分享一些学习过程中遇到的问题和解决方法。正文1.标签由标签名、标签属性和文本内容三部分组成(注意:单标签没有文本内容)。2.标签属性是对标签的一种描述方式。3.标签属性分通用属性、自有属性和自定义属性。4.通用属性:所有标签都具有的属性(除标签外)。原创 2020-09-25 18:24:59 · 268 阅读 · 0 评论