随笔分类 -  8（HTML+CSS）

1 2 下一页
css计数器自动生成序号
摘要：CSS 计数器 CSS 计数器通过一个变量来设置，根据规则递增变量。 使用计数器自动编号 CSS 计数器根据规则来递增变量。 CSS 计数器使用到以下几个属性： counter-reset - 创建或者重置计数器 counter-increment - 递增变量 content - 插入生成的内容 阅读全文
posted @ 2019-05-09 16:06 clyde_S 阅读(541) 评论(0) 推荐(0)
前端总结
摘要：HTML <!doctype> #规定文档类型 <!-- 注释 --> 转义字符以&；包裹 #在&；中间单词简写，详情查看8-1 <head> 头标签 <body> 体标签 <html> 根标签，全局的属性写在这里 ，标签种类等详情查看8-3 <div> 用来搭建页面结构的标签 width: 200 阅读全文
posted @ 2019-04-07 16:25 clyde_S 阅读(167) 评论(0) 推荐(0)
（22）bootstrap 初识 + Font Awesome(字体图标库)
摘要：bootstrap作用就是简化布局 bootstrap是基于JQ的，所以内部代码使用的是jq语法 所以要使用bs，必须先倒入 1、head标签内倒入bs的css文件 <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css 阅读全文
posted @ 2019-03-04 14:31 clyde_S 阅读(797) 评论(0) 推荐(0)
（21）jq动画
摘要：jq动画的优点 优点： 1、可以知道动画结束的表示（结束的回调函数） 2、可以利用jq动画插件完成复杂的动画 动画有三个参数：动画的样式是字典、动画持续的事件，动画结束回调函数 阅读全文
posted @ 2019-02-28 14:48 clyde_S 阅读(293) 评论(0) 推荐(0)
（20）jQuery的文档操作（创建，添加、设置样式和删除等）
摘要：jq文档操作 阅读全文
posted @ 2019-02-27 10:10 clyde_S 阅读(393) 评论(0) 推荐(0)
（19）jQuery操作文本和属性
摘要：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>jq操作文本和操作属性</title></head><body> <div class="box">box</div> <input class="inp" type="text"> 阅读全文
posted @ 2019-02-26 20:43 clyde_S 阅读(276) 评论(0) 推荐(0)
（18）jq事件操作
摘要：jq的私人网站：http://jquery.cuishifeng.cn/ 具体的查看上面的网站 阅读全文
posted @ 2019-02-26 16:43 clyde_S 阅读(204) 评论(0) 推荐(0)
（17）什么是jQuery（jq的流程和基本操作）
摘要：jQuery就是对原生js二次封装的工具类（在jq叫构造函数） jQuery就是一堆方法的集合，jq对象就可以直接调用这些方法来完成指定的需求 使用jq的流程： 1、在HTML页面倒入jq.js文件 2、获取唯一jq对象 3、通过该对象完成具体的事 jq的使用 jq的官网：https://jquer 阅读全文
posted @ 2019-02-25 16:55 clyde_S 阅读(1093) 评论(0) 推荐(0)
（16）JavaScript的流程控制(js的循环)
摘要：流程控制有3种结构 1、顺序结构：代码执行的本质就是顺序结构 2、分支结构：if家族 语法规则： 3、循环结构：for循环结构 / while循环结构 /do...while循环结构 语法规则： while 循环 （循环流程：初始化循环变量的值 --> 进行变量的判断 --> 完成业务逻辑 --> 阅读全文
posted @ 2019-02-25 15:34 clyde_S 阅读(314) 评论(0) 推荐(0)
（15）javaScript入门
摘要：什么是javaScript HTML用来做页面的架构，CSS用来做页面样式的布局 javaScript就是用来完成页面用户交互的，JS写的就是叫脚本 js就是弱语言类型，不同类型的时候可以相互转换 js写在script标签内，script标签可以出现在html的任意位置 script标签一般书写在b 阅读全文
posted @ 2019-02-21 16:23 clyde_S 阅读(217) 评论(0) 推荐(0)
（14）定位布局（子级在父级中自由定位 \ 父级在页面中自由定位）
摘要：1、盒模型不能让第一个子级和父级脱离，子级和父级相连的，html设计的时候，宽度设计的是采用父级的宽度，而子级是获取父级的宽度，水平方向可以随便移动，垂直的参数规定是父级的，而父级一般是不需要设置高度是由子级撑开的，所以子级的高度就是决定父级的高度 2、如果自己的宽没有设置，那么自己的宽就是自动获取 阅读全文
posted @ 2019-02-21 15:28 clyde_S 阅读(630) 评论(0) 推荐(0)
(0-1)CSS 标签语法的属性
摘要：CSS text-decoration 属性 display display 属性规定元素应该生成的框的类型 阅读全文
posted @ 2019-02-20 14:39 clyde_S 阅读(176) 评论(0) 推荐(0)
（13）浮动布局（控制盒模型在页面的什么位置 \ 什么是清浮动）
摘要：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>布局</title> <style> /*盒模型的解析*/ .div{ /*这个位置属于content区域，就是盒模型最内层的区域，用来设置标签的范围，其实就是整个色块区域的大小*/ 阅读全文
posted @ 2019-02-19 16:27 clyde_S 阅读(289) 评论(0) 推荐(0)
（0）前端总结（HTML + CSS + JQ）
摘要：HTML 1、<meta charset="UTF-8"> #设置页面编码，这个设置英文则现在国内浏览器会弹出是否要转换中文 2、<title>我的第一个页面</title> #设置网页的抬头名称 3、<body><!--页面中所有要展现的内容都要写在body标签内--></body> 4、<met 阅读全文
posted @ 2019-02-18 15:06 clyde_S 阅读(379) 评论(0) 推荐(0)
（12）页面的布局(浮动布局)
摘要：浮动布局的特点 1、子级一旦浮动,就不再撑开父级高度 2、浮动的元素会不完全脱离文档流:脱离文档流的意思就是高于原文档流内盒子的显示层次 浮动布局的实例 案例1、需求：用浮动布局实现标签并排排列 案例2、需求：增加一个标签，和box的父级是同级的标签 解决案例2出现bug的问题 思路1：先检查区域， 阅读全文
posted @ 2019-01-30 16:05 clyde_S 阅读(432) 评论(0) 推荐(0)
（11）盒模型
摘要：网页中能够跳转的标签都是a标签 a标签要做两个reset 1、统一字体颜色 2、清除下划线 1、盒模型的引入 有一个css文件下的reset文件 html文件下引入css文件下的参数文件 PS：margin和padding就是盒模型下的参数 CSS文件下reset文件的初始参数设置 2、盒模型解析 阅读全文
posted @ 2019-01-30 15:45 clyde_S 阅读(217) 评论(0) 推荐(0)
（10）背景图片操作
摘要：精灵图的概念：w3school网站的菜单鼠标悬浮切换就是采用背景大图实现的，页面中每一个部分都可以是一张小图，就是选中大图的一张小图进行切换，这个大图就叫精灵图 右键检查 -> sources -> ui2017 -> bg.png PS：为什么用大图不用小图，因为程序中最耗时的就是在网络传输之后进 阅读全文
posted @ 2019-01-30 14:31 clyde_S 阅读(207) 评论(0) 推荐(0)
（9）字体操作
摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>字体操作</title> <style> .box{ width: 100px; height: 100px; background-color: aqua; co 阅读全文
posted @ 2019-01-30 13:29 clyde_S 阅读(323) 评论(0) 推荐(0)
（8）伪类选择器和鼠标悬停动画效果
摘要：伪类的语法： ：+ 标签名（类名） 伪类选择器优先级：高于标签低于id等于class 1、伪类选择器是通过物理结构层级查找，一层一层查找 PS：每一个层次结构都可以生成很多层 2、一个父标签下有多个不同类型的子标签，伪类选择器如何查找 3、伪类选择器偶数（奇数）匹配 4、鼠标悬浮动画伪类选择器 阅读全文
posted @ 2019-01-30 11:55 clyde_S 阅读(906) 评论(0) 推荐(0)
（7）高级选择器 + 优先级
摘要：高级选择器 优先级： 1、最大的特点就是个数多的优先级高，个数决定优先级 2、高级选择器优先级与类别无关（后代、子代、兄弟、相邻等都是同等优先级的，谁在上面谁的优先级高） 3、id无限大于class标签无限大于标签 4、上方结果之后优先级还一致，和顺序有关 1、群组选择器 2、后代选择器（使用率最高 阅读全文
posted @ 2019-01-29 16:49 clyde_S 阅读(358) 评论(0) 推荐(0)

1 2 下一页