lrp9090-CSDN博客

原创点击导航栏，切换div内容（js+css+html）

**成果展示**代码展示：* <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></tit

2018-10-23 11:05:43 39546 13

原创 css3制作炫酷动画相册

1. 特别说明：本段代码未作兼容处理，仅在高版本谷歌浏览器中起作用哟；2.这里我使用的是网络图片，想制作属于自己相册的小伙伴们，可以新建img文件夹，在css样式中，将背景土拍你路径替换为自己的图片就好啦；3.下面就开始贴代码咯；先来看看效果图（有三个动画效果）；4.基础html代码<!DOCTYPE html><html lang="en"><h...

2020-05-08 16:09:17 1323 1

原创全选，全不选，自动全选，自动全不选

该效果是JQ代码，所以在实现前，请自己手动引入JQ插件；效果图1.css代码table { border-collapse: collapse;}th,td { border: 1px solid red; padding: 10px; text-align: center;}2.html代码<table> <tr&gt...

2020-03-26 18:17:13 608

原创使用border绘制各种三角形

1.元素的边框展示<h5>元素的边框展示</h5><div class="all-triangle"></div>.all-triangle { width: 0; border: 50px solid; border-color: red blue green goldenrod; ...

2020-03-04 12:47:12 438

原创纯js实现随机点名

1.成果展示：2.html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>随机点名册</title></head><body> <div class="btn-wrap"> &...

2019-08-01 16:09:29 820

原创 js创建对象的三种方式

创建一个电脑对象,有颜色,有重量,有品牌,有型号,可以看电影,可以听音乐,可以打游戏,可以敲代码1.使用系统自带的构造函数创建对象；//（1）创建对象 var computer = new Object();//（2）为对象添加属性 computer.color = '黑色'; computer.weight = '4kg'; computer.bra...

2019-07-26 15:24:40 1886

原创纯CSS实现无缝滚动

1.效果展示2.html代码<ul> <li id="list"> <img src="http://pic41.nipic.com/20140508/18609517_112216473140_2.jpg" height="300" width="300" /> <img src="https://timgsa.baidu.com/t...

2019-06-20 11:04:15 1841

原创纯css制作钟表（会走动）

1，效果展示2.html代码<div class="clock"> <div class="logo">Pigeute</div> <div class="line1 line"> <div class="left">12</div> <div class="right">6</di...

2019-06-19 11:21:07 601

原创类似书签的样式

1.效果展示2.html代码 <div class="wrap"> <div class="content">书签样式书签样式</div> </div>3.样式代码.wrap { width: 500px; height: 300px; margin: 100px auto; border:1px solid #33...

2019-06-18 10:58:48 1605

原创 css3制作立方体

1.效果展示；2.html代码模块 <div class="box"> <div class="front">前面</div> <div class="back">后面</div> <div class="top">顶面</div> <div class="bottom"&gt...

2019-06-18 10:55:24 144 2

原创 head标签中包含的部分meta标签的作用及其解释

X-UA-Compatible是针对IE8新加的一个设置，对于IE8之外的浏览器是不识别的。1. <meta http-equiv="X-UA-Compatible" content="IE=5" />像是使用了 Windows Internet Explorer 7 的 Quirks 模式，这与 Windows Internet Explorer 5 显示内容的方式很相似。2...

2019-05-06 15:03:56 1659

原创关于 a 标签链家连接后出现虚线边框的解决办法

1.解决问题展示：a标签，点击链接后，出现虚线边框2.解决办法：在a标签中加入 οnfοcus=“this.blur();” 即可去除俩侧的边框；3.部分代码： <li id="mb_robot" class="robot"> <a onfocus="this.blur();" href="https://www.baidu.com" target="_...

2019-05-05 18:04:38 278

原创标签之间的切换（适用于图片，类似于开关效果）

效果展示点击后： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></t

2018-09-28 17:58:07 447

原创关于俩个或多个span之间有间隙的解决办法

1.span之间有间隔（代码如下）； <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <style> span { display

2018-09-27 16:58:03 4983

原创前端页面布局（新手必看天天鲜页面布局）

详细代码及其所需素材从网盘中提取链接:https://pan.baidu.com/s/1W2BXzkvoWG2yAWj0-nbGIA 密码:jk3f成果展示HTML代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Comp...

2018-09-27 10:43:11 1028

原创简单的js图片轮播：

1.html代码：<div class="wrap"> <div class="mySlides fade"> <div class="numbertext">1 / 4</div> <img src="img2/img1.png" style="width

2018-09-26 14:23:24 248

lrp9090的博客