辞旧2031-CSDN博客

原创 9.css4个要点补充

文章目录淘宝第一行，两边留白自适应，中间固定文本类元素position:absolute|float:left/right 设置之后该元素便会变为inline-block元素文本垂直对齐方式淘宝第一行的布局一个左浮动，一个右浮动淘宝第一行，两边留白自适应，中间固定 <div class="wrapper"> <div class="content"></div> </div>.w

2021-08-13 17:45:01 142

原创 8.文字溢出处理，背景图片，图片代替文字，元素嵌套

文章目录单行文字溢出打点展示多行文本溢出背景图片图片代替文字该怎么代替元素嵌套规则单行文字溢出打点展示  <p>法国议会选举第一轮投票结束马克龙坐在党领先</p> 文字溢出默认换行展示了/* 单行文字溢出打点展示 *//* 文字溢出了，它换行展示了 *//* 但现在要设置它溢出不换行并且溢出部分打点展示 */p{ width:300px

2021-08-13 16:14:32 215

原创 7.包裹浮动元素

文章目录上一节提的父级包裹浮动元素的解决办法伪元素伪元素解决清除浮动使用触发bfc的父级元素包裹float应用场景导航栏上一节提的父级包裹浮动元素的解决办法 <div class="wrapper"> <div class="content">1</div> <div class="content">2</div> <div class="content">3</

2021-08-13 10:27:20 222

原创 4.小羊奔跑

小样奔跑结果图:这是小羊拖拽所使用的;本质就是一直刷新现在的点和上一个点的距离// 鼠标按下的事件// 获取点击的鼠标,距离页面的距离sheepClass.x = ed.pageX;sheepClass.y = ed.pageY;// 在鼠标移动事件里面 // 每两个点相减,得到移动的距离var chax = e.pageX - sheepClass.x ;var chay = e.pageY - sheepClass.y ;sheepClass.x = e.pageX;//

2021-08-13 08:33:38 140

原创 3.滚动彩圈

彩圈结果图：  <div class="button" data-id="handle">手动</div> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <script src="../js/index.js"></sc

2021-08-12 14:21:25 89

原创 6.两栏布局，经典bug，bfc,float

两栏布局效果图（先写右又写的左）：先写右边又写的左边;先写左再写右也可以，必须是第一个出生的设置为绝对定位，下一个元素才可以上来成一排，若设置第二个出生的元素为绝对定位，就算他脱离原来位置进行定位，他也窜不到第一行来，因为第一个元素是块级元素，独占一行    <d

2021-08-09 17:50:58 139

原创 2.居中五环

居中五环效果图：  <div class="container">  <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div

2021-08-09 14:41:30 69

原创 1.分页组件

分页组件结果图：结构html代码  <div class="pagerContainer"></div> <script src="../js/pager.js"></script> <script> // 获取分页放置的外部容器 var pagerContainer = document.getElementsByClas

2021-08-09 10:58:12 303

原创 5.css企业开发经验，习惯盒模型，层模型

css企业开发经验，习惯盒模型，层模型文本对齐方式text-align单行文本所占高度行高 line-height文本首行缩进 text-indenttext-decoration伪类选择器标签分类四张图片排成一排先定义功能后选配标签选择器功能：初始化标签通配符选择器功能：初始化所有标签盒子模型一个盒子在另一个盒子居中盒模型计算远视图绝对定位absolute相对定位relative定位固定定位fixed(广告定位)用定位做水平垂直居中文本对齐方式text-align <!-- 文本对齐方式

2021-08-08 16:51:35 172

原创 4.css复杂选择器

css复杂选择器父子选择器复杂结构浏览器底层遍历父子选择器方法直接子元素选择器并列选择器分组选择器css权重计算css属性font-sizefont-weightfont-stylefont-familycolorborder父子选择器<!-- <div> <span>span123</spa

2021-08-07 16:12:05 226

原创 3.css基础选择器

css基础选择器多选框select组件，下拉菜单主流浏览器引入csscss基础选择器css权重多选框单选框type值为radio,多选框type值为checkbox.<form action="" method="get"> <h1>Choose your favourite friut</h1>   1.apple

2021-08-06 15:20:51 128

原创 2.高级标签

高级标签HTML编码空格回车有序列表ol无序列表ul图片img超链接a表单form请输入关键字,聚焦和失去焦点HTML编码&;空格空格并不代表空格文本,有特定的语法含义,代表的是文本分隔符<div style="width:100px;height:100px;background-color: red;">qwreiotiojhhsh

2021-07-10 21:50:14 341

原创 1.基础标签

基础标签大致结构根标签结构化标签字符集SEO搜索引擎优化技术标签大致结构根标签<html></html>结构化标签<head></head><body></body>字符集<meta charset="utf-8">gb2312 国家标准第2312条，包括亚裔字符集等，不包含繁体字符集gbk

2021-07-08 16:15:53 136

原创 htmlcss概述

术语web：互联网w3c：万维网联盟，非营利性的组织，w3.org，为互联网提供各种标准xml：可扩展的标记语言：Extension Markup Language，用于定义文档结构。例子：请在每周一下午两点，从人人网下载最新美剧《权力的游戏》 <任务> <执行日期> 每周一 </执行日期> <执行时间> 下午两点 </执行时间> <下载地址> 人人网 </下载地址

2021-06-28 16:24:46 190

原创罗马数字转整数

罗马数字转整数【描述】罗马数字包含以下七种字符:I，V，X，L，C，D和M。例如，罗马数字 2 写做II，即为两个并列的 1。12 写做XII，即为X+II。 27 写做XXVII, 即为XX+V+II。通常情况下，罗马数字中小的数字在大的数字的右边。但也存在特例，例如 4 不写做IIII，而是IV。数字 1 在数字 5 的左边，所表示的数等于大数 5 减小数 1 得到的数值 4 。同样地，数字 9 表示为IX。这个特殊的规则只适用于以...

2021-03-19 16:06:20 80

原创回文数

回文数【描述】给你一个整数 x ，如果 x 是一个回文整数，返回 true ；否则，返回 false 。回文数是指正序（从左向右）和倒序（从右向左）读都是一样的整数。例如，121 是回文，而 123 不是。（1）反转一半数字进行比较，防止溢出（python中无溢出问题）（2）时间复杂度O（lgn），空间复杂度O（1）class Solution(object): def isPalindrome(self, x): """ :ty

2021-03-19 15:34:45 523

原创整数反转

整数反转【描述】给你一个 32 位的有符号整数 x ，返回将 x 中的数字部分反转后的结果。如果反转后整数超过 32 位的有符号整数的范围[−2**31,2**31− 1] ，就返回 0。假设环境不允许存储 64 位整数（有符号或无符号）。【实例】...

2021-03-19 11:18:04 199

原创两数之和

两数之和【描述】给定一个整数数组 nums和一个整数目标值 target，请你在该数组中找出和为目标值的那两个整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案。但是，数组中同一个元素不能使用两遍。你可以按任意顺序返回答案。【样例】（1）记住enumerate(nums)这个函数可以同时遍历下标和迭代对象的值；（2）最坏时间复杂度为O（N），N是数组的数量，通过哈希表的形式，每一个num找target-num的时间都为O（1）；空间复杂度为O（N）...

2021-03-19 09:33:20 125

xuexiaozhuguo的博客