background | 易学教程

第五十五天jQery内容的进阶

阅读更多关于第五十五天jQery内容的进阶

1.上节课内容回顾： <div id="left"> <div class="title">菜单一 <div class="menu hidden"> <a href="">第一个</a><br> <a href="">第二个</a><br> <a href="">第三个</a> </div> </div> <div class="title">菜单二 <div class="menu hidden"> <a href="">第一个</a><br> <a href="">第二个</a><br> <a href="">第三个</a> </div> </div> <div class="title">菜单三 <div class="menu hidden "> <a href="">第一个</a><br> <a href="">第二个</a><br> <a href="">第三个</a> </div> </div> </div> <script src="jquery-3.4.1.min.js"></script> <script> $('.title').click(function(){ $(this).children().removeClass('hidden'); $(this).siblings().children().addClass('hidden');

兼容性总结

阅读更多关于兼容性总结

写在前面的话，也不知道还要不要管ie6、7，晕晕乎乎的 1、h5兼容性引用 html5shiv.js <script src="js/html5shiv.js"></script> 2、 1. 在IE6元素浮动，如果宽度需要内容撑开，就给里边的块元素都加浮动例： <div class="box"> <div class="left"> <h3>左侧</h3> </div> <div class="right"> <h3>右侧</h3> </div> </div> 给它设置css .box{ width:200px;} .left{background:red;float:left;} .right{float:right; background:blue;} h3{margin:0;height:30px;} </style> 显示如下：解决办法： h3{margin:0;height:30px; float:left;} -2 在IE6下元素要通过浮动并在同一行，就给这行元素都加浮动例： <div class="box"> <div class="left"></div> <div class="right"></div> </div> 样式 .left{width:100px;height:100px;background:red; float:left;}

前端学习(3)-CSS

阅读更多关于前端学习(3)-CSS

一 CSS CSS是Cascading Style Sheets的缩写，层叠样式表，用来控制网页数据的显示，可以使网页的显示与数据内容分离。二引入方式　　（1）行内式：在标记的style属性中设置CSS样式，不推荐使用。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello CSS</title> </head> <body> <div style="color: aqua;background-color: bisque">hello world</div> </body> </html> 　　（2）嵌入式：将CSS样式集中写在网页的<head></head>标签找那个的<style></style>标签中。结果和上图一致； <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello CSS</title> <style> div{ color: aqua; background-color: bisque; } </style> </head> <body> <div >hello world</div> </body> </html> 　　（3）链接式：写一个*

全球疫情发布图

阅读更多关于全球疫情发布图

一、要求：　　我们有的是热情、激情、无限的动力，清明三天放假休息，为了纪念牺牲的烈士，我们集体决定仿照约翰·霍普金斯大学制作全球疫情发布图（WEB版），可以实时访问。行动起来吧。随时抽查，今天工作八小时。二、我的全球疫情发布图：三、设计思路： 1、准备数据：使用python从网页上爬取数据，并存入mysql数据库。 1）全球数据爬取： import requests import json from pymysql import * import requests from retrying import retry headers = {"User-Agent": "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.132 Mobile Safari/537.36" ,"Referer": "https://wp.m.163.com/163/page/news/virus_report/index.html?_nw_=1&_anw_=1"} def _parse_url(url): response = requests.get(url,headers=headers,timeout=3) #3秒之后返回

前端三贱客 -- CSS

阅读更多关于前端三贱客 -- CSS

CSS（Cascading Style Sheets）给你的html页面穿上衣服让其看起来性感，美观。 css选择器类选择器  <style type="text/css"> .cl{ background-color: blue; width: 200px; position: absolute; left: 0;top: 50px;bottom: 0; } </style> <div class="cl">class test</div> View Code ID选择器 1  2 <style type="text/css"> 3 #id1{ 4 background-color: red; 5 height: 30px; 6 font-size: 18px; 7 text-align: center; 8 line-height: 30px; 9 } 10 </style> 11 <div id="id1">好好学习，天天向上</div> View Code 标签选择器  <style type="text/css"> a { color: red; } </style> <ul>

web前端入门到实战：仿美团详情页与购物车源码-首页实现

阅读更多关于 web前端入门到实战：仿美团详情页与购物车源码-首页实现

效果图首先是index.html <!DOCTYPE html> <html> <head> <title>首页</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=0"> <script type="text/javascript"> (function() { var docEl = document.documentElement; function setRemUnit() { // 获取到rem的基准值 var rem = docEl.clientWidth / 10; // 动态设置html根元素的font-size docEl.style.fontSize = rem + 'px'; } setRemUnit(); // 窗口大小变化时触发 window.addEventListener('resize', setRemUnit); // 窗口出现在当前屏幕时（有浏览器兼容性） window.addEventListener('pageshow', function(e) { if (e.persisted) { setRemUnit(); } });

web前端入门到实战：css基础-float浮动

阅读更多关于 web前端入门到实战：css基础-float浮动

float实现文字环绕图片效果： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>float</title> <style> body{ font-family: '微软雅黑'; } .per{ width: 400px; border: 1px solid #CCC; padding: 5px; } .red{ width: 100px; height: 100px; background: red; margin: 10px; float:left; } </style> </head> <body> <div class="per"> <div class="red"></div>层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1] CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 </div> </body> </html> 清除浮动的方法一：在浮动元素后面使用一个空元素专门建立的学习Q-q-u

JQUERY伸缩导航

阅读更多关于 JQUERY伸缩导航

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <link type="text/css" href="http://blog.163.com/tstone_wj/blog/base.css" rel="stylesheet" /> <script type="text/javascript" src="http://blog.163.com/tstone_wj/blog/jquery.js"></script> <title>我的空间</title> <style type="text/css"> .attention{ width:315px; float:left; margin-left:10px; display:inline;} .attention h3{width:303px; float:left; height:20px;

用JS写的百叶窗3

阅读更多关于用JS写的百叶窗3

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> *{margin:0;padding:0;list-style:none;} body{background:url(img/bg.gif) repeat top left;} #box{width:600px;height:400px;margin:50px auto; border:20px solid #fff; overflow:hidden; position:relative;} #box ul li{ opacity:0; width:600px; height:400px; position:absolute; top:0; left:0;} #box ul li span{ width:150px; height:400px; float:left;} #box ul .active{ opacity:1;} #box ol{width:100%; height:34px; position:absolute; bottom:20px;} #box ol li{ float:left; width:42px; height:42px; background:rgba(255,255,255,0.4);

js点击变色，在点击还原

阅读更多关于 js点击变色，在点击还原

方法1： html： <li class="active twonav"> <label class="jpg rgb" href="#Navsola" role="tab" data-toggle="pill" >单张</label > </li> <li class="twonav"> <label class="sole rgb" href="#Navshrine" role="tab" data-toggle="pill" >图库</label > </li> css .jpg { color: #ffffff; float: left; width: 36px; height: 21px; border: 1px solid #656565; font-size: 12px; padding: 2px 5px; background-color: #656565; border-radius: 4px; } .sole { color: #4d4d4d; width: 36px; height: 21px; border: 1px solid #656565; float: left; font-size: 12px; padding: 2px 5px; background-color: #ffffff; border-radius: 4px; } js $

订阅 background