自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(14)
  • 收藏
  • 关注

原创 练习:实现百度页面排版

Baidu

2022-07-01 10:47:54 35

原创 练习:点击按钮图片位置随机和随机颜色

Document #box1{

2022-07-01 10:45:09 40

原创 练习:用swiper实现图片滑动

Document

2022-07-01 10:41:46 73

原创 练习:实现图片动画

动画 #box {

2022-07-01 09:56:16 19

原创 练习:用定位实现网页板块

定位 body {

2022-07-01 09:53:56 30

原创 JavaScript基础

1、HTML/CSS/JS的关系 2、JS书写位置JS有三种书写位置,分别为:行内内嵌外部3、JavaScript中的变量 变量就是一个装东西的盒子,通俗的来说,变量就是存放数据的容器。我们通过变量名获取数据,甚至可以修改数据4、JavaScript数据类型简单数据类型说明默认值Number数字型,包含整数值和浮点值0Boolean布尔值类型,如true、false,等价与1和0falseString字符串类型“”UndefinedVar a;声明了变量a但是没有给值,此时a = undefi

2022-07-01 09:26:41 12

原创 Flex布局

1、怎么设置flex布局Flex翻译为“弹性”,通过给元素设置display属性,属性值为flex或者inline-flex。使其变成弹性容器,容器中的直系子元素就会变为弹性元素。 div{ display: flex;//变成弹性盒 } 弹性盒子可以直接控制子元素的位置 2、布局父项常见属性 flex-direction:设置主轴的方向 justify-content:设置主轴上的子元素排列方式 flex-wrap:设置子元素是否换行 align-content:设置侧轴

2022-07-01 09:15:46 15

原创 CSS过渡、变形与动画

1、CSS3过渡CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。语法规则:选择器{ transition:property duration timing-function delay}div{ transition: width 2s; }tansition属性实现简单的动画效果transition属性是一个复合属性,主要包含property、duration、timing-function、delay等子属性2、transiton子属性transition属性的常用子属性主要包括:

2022-07-01 09:08:48 30

原创 CSS浮动

1、普通流块级元素:独占一行行内元素:不独占一行2、为什么需要浮动?提问:用普通的标准能能否实现如下效果?(1)如何让多个块级盒子(div)水平排列成一行?3、什么是浮动? 语法规则:选择器{ float:属性值}div{ float: left; }属性值:none:元素不浮动left:元素左浮动right:元素右浮动4、浮动元素的特性(1)浮动元素会脱离标准流(脱标) 标准流:指的是在不使用其他的与排列和浮动、定位相关的特殊CSS规则时,各种元素的排列规则。 脱流

2022-06-30 17:31:15 43

原创 CSS盒模型

盒模型:就是把HTML页面中的元素看作是以一个矩形的盒子,也就是一个装东西的容器1、盒模型组成 (1).内容(content):指定内容的大小width:内容的宽度height:内容的高度注意:行内元素不支持设置宽度和高度(2).边框(border):指定一个元素边框的样式、粗细、颜色 语法: border:border-width | border-style | border-color注意:边框会影响盒子的实际大小(3).内边距(padding):边框与内容之间的距离属性:padding-left:左

2022-06-30 17:19:11 14

原创 CSS定位

1、为什么需要定位?浮动只能实现元素水平布局的效果,不能实现让元素实现复杂的布局效果。 2、定位的组成定位也是用于布局的,主要由两个部分组成: 定位=定位模式+偏移量定位模式用于指定一个元素在文档中的定位方式。偏移量则决定了该元素的最终位置3、偏移量当元素开启了定位之后,可以通过偏移量来设置元素位置top:定位元素和定位位置上边的距离bottom:定位元素和定位位置下面的边距left:定位元素和定位位置左侧距离right:定位元素和定位位置右侧距离4、开启定位语法规则:选择器{ position:定位模

2022-06-30 16:59:08 18

原创 CSS样式属性

1、常用字体属性font-family :指定字体类型font- size:指定文本的字体大小font-style:指定文本的字体样式font-weight:指定文本的字体粗细font:在一个声明中设置所有的字体属性2、图标字体字体图标展示的是图标,本质属于字体。主要用于显示网页中通用、常用的一些小图标。 字体图标的优势:一个图标字体要比一系列的图像要小。一旦字体加载了,图标就会马上渲染出来,减少了服务器请求。字体图标本质是文字,可以随意的改变颜色、产生阴影、透明效果、旋转等。3、常用文本属性color:设

2022-06-30 16:39:15 16

原创 CSS概述和选择器

1、CSS是什么?CSS指的是层叠样式表,是一种用来表现HTML或XML等文件样式的计算机语言,是描述标记语言页面格式的标准。CSS使开发人员能够分离内容和可视元素,以实现更好的页面控制和灵活性。层叠:层叠指的就是样式的优先级,当产生冲突时以优先级高的为准。作用:用来美化咱们的网页的。 语法规则:选择器{ 声明块} p{ color: black; }选择器:通过选择器可以选中页面

2022-06-30 16:20:44 16

原创 HTML概述及常用标签

1.什么是网页?网页是万维网中的一“页”。 2.什么是HTML?HTML指的是超文本标记语言(Hyper Text Markup Language),标记语言是一套标记标签,HTML是通过标签来描述网页。超文本:就是指具有超链接(链接跳转)功能HTML基本结构 3.认识HTML中的标签HTML 标签是由尖...

2022-06-30 16:06:33 14

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除