代码人生的小狗窝

一行行枯燥的代码,却描绘出人生的点点滴滴

推荐文章

使用CSS实现文字3d浮动成效

    使用CSS实现文字3d浮动效果 使用CSS实现文字3d浮动效果   <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字</title> <style type="text/css"> @import url(https://fonts.googleapis.com/css?family=Open+Sans:600); body { background: #081625; font-family: "Open Sans", sans-serif; font-weight: 600

    阅读全文>>

作者:coody分类:【_HTML/CSS浏览(1772

2019-09-27

HTML的报表创建与修饰

    HTML的表格创建与修饰   在网页编写中,我们会用到表格,这就涉及了表格的创建和样式的编写,表格的创建分为行和列,还有表格的一些修饰也就是一些样式,比如 ,表格文字的居中,表格的边框样式与边框颜色等。   我么先创建简单的表格,先创建一个三行三列的表格,行用<tr>标签列用<td>标签,在用一个<table>标签代码如下 :   <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table width="200" border="none"

    阅读全文>>

作者:coody分类:【_HTML/CSS浏览(1967

2019-09-26

多种草案实现 CSS 斜线

    多种方案实现 CSS 斜线 使用单个标签,如何实现斜线效果。也就是如何使用 CSS 画斜线? 这种类似于表格的斜线效果,细细研究一下,还是有一些挺有趣的方法可以实现之。 我们假定我们的 HTML 结构如下: <div></div>  假定高宽各为 100px,在单个标签局限内,看看能有多少种方法实现。   (一)CSS3 旋转缩放 这个应该属于看到需求第一眼就可以想到的方法了。 这里我们使用 伪元素 画出一条直线,然后绕 div 中心旋转 45deg ,再缩放一下就可以得到。 简单的一张流程图: <style type="text/css"> div{ position:relative; margin:50px auto; width:100px; height:100px; box-sizing:border-box;

    阅读全文>>

作者:coody分类:【_HTML/CSS浏览(1483

2019-09-26

关于css的class定名中下划线的讨论

    关于css的class命名中下划线的讨论 【前言】    之前有同学查到class命名尽量不要用下划线,建议用横线-,或者用驼峰命名法。    网上给的解释是:避免css属性名和值混合;另外IE6中不支持_开头的类名,例如_top这种不支持。    为了检验真实性便去网上查了下,以下为笔录   【主体】    (1)关于下划线,XHTML区分大小写,xhtml要求 标签名 属性名 值都要小写,并且要有双引号和 标签闭合 css 元素名称以及id和类名的命名也是区分大小写的(但是属性和值不区分),尽量小写,可以用-连字符,尽量不要用_下划线做连字符(IE6下_和-均失效) javascript 的变量和其他语法元素名都是区分大小写的,变量命名不允许有空格或者其他标点符号,只允许字母、数字、&和_下划线 综上所述,书写xhtml css javascript 尽量都要小写,连

    阅读全文>>

作者:coody分类:【_HTML/CSS浏览(1667

2019-09-26

怎么理解HTML语义化

    如何理解HTML语义化? 1、什么是HTML语义化? <基本上都是围绕着几个主要的标签,像标题(H1~H6)、列表(li)、强调(strong em)等等>   根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。 2、为什么要语义化? 为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看; 用户体验:例如title、alt用于解释名词或解释图片信息、label标签的活用; 有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重; 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页; 便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标

    阅读全文>>

作者:coody分类:【_HTML/CSS浏览(824

2019-09-26

更动html项目中的中文图片中文文件等中文路径

    更改html项目中的中文图片中文文件等中文路径     package com.chipmunk.test; import java.io.BufferedReader; import java.io.File; import java.io.FileFilter; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.FilenameFilter; import java.io.InputStream; import java.io.InputStreamReader; import java.util.ArrayList; import java.util.Collection; import java.util.HashSet; import java.util.Li

    阅读全文>>

作者:coody分类:【_HTML/CSS浏览(424

2019-09-27

CSS实现动态背景奇效

    CSS实现动态背景特效 CSS实现雾霾围城背景特效 <!DOCTYPE html> <html> <html> <head> <meta charset="UTF-8"> <style> @keyframes clouds-loop-1 { to { background-position: -1000px 0; } } .clouds-1 { background-image: url("http://s.cdpn.io/15514/clouds_2.png"); animation: clouds-loop-1 2

    阅读全文>>

作者:coody分类:【_HTML/CSS浏览(1621

2019-09-27

【基础】这15种CSS居间的方式,你都用过哪几种

    【基础】这15种CSS居中的方式,你都用过哪几种? 简言 CSS居中是前端工程师经常要面对的问题,也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种。如有漏掉的,还会陆续的补充进来,算做是一个备忘录吧。 css居中 1 水平居中 1.1 内联元素水平居中 利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。此方法对内联元素(inline), 内联块(inline-block), 内联表(inline-table), inline-flex元素水平居中都有效。 核心代码: .center-text { text-align: center; } 演示程序: 演示代码 1.2 块级元素水平居中 通过把固定宽度块级元素的margin-left和margin-right设成auto

    阅读全文>>

作者:coody分类:【_HTML/CSS浏览(1257

2019-09-26

CSS实现多屏动态变更展示

    CSS实现多屏动态变化展示 CSS实现多屏动态变化展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style> /** * Document defaults */ body { text-align: center; background-color: #eee; } * {

    阅读全文>>

作者:coody分类:【_HTML/CSS浏览(1133

2019-09-27

动态创建标签的步骤:document.write、innerHTML、creatElement等

    动态创建标签的方法:document.write、innerHTML、creatElement等 前面我们讲述过利用getElementsByTagName和getElementById方法来获取某些特定的元素节点。以及利用getAttribute来获取节点元素的某些特性,利用setAttribute来修改某些节点的属性。下面我们将介绍一些DOM方法利用javascrip来改变网页的架构。本片博客内容:1、传统技术:document.write;innerHTML.2、深入剖析DOM方法:creatElement、createTextNode、appendChild、insertBefor。1、传统的定义方法document.write 方法:例1: <html> <head> <meta charset="utf-8" /> <t

    阅读全文>>

作者:coody分类:【_HTML/CSS浏览(840

2019-09-26

css-式样初始化

    css-样式初始化 在网站编写的时候,由于许多的标签会有默认存在的样式,比如P标签的外边距,a标签的下划线等等,通常我们会把这些默认样式去除,以免在后面的编写中造成诸多的不变。 1、拥有默认内外边距的标签       有些人会图省事,清除内外边距直接用*{margin:0;padding:0;},这样子写,在项目很小的时候,你会感觉没什么,一旦项目大了以后,再这么写将会及其消耗网站的加性能,降低网站加载速度。       所以我们要了解哪些标签默认会拥有内外边距,再根据使用情况进行样式初始化: -------------------------------------------常用的标签-------------------------------------------------------- body标签:默认margin:8px; dl标签,p标签:默认margin-

    阅读全文>>

作者:coody分类:【_HTML/CSS浏览(866

2019-09-26

css浮动的苦恼讲解

    css浮动的烦恼讲解 下面是以div元素布局为例的哦,啊狸在这里为大家讲解一下,有不对的地方,请大家留言改正!div呢?是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流。如图:图1可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为div元素是独占一行的。如果想让一行显示多个div元素,就可以用到浮动。浮动可以理解为让某个div元素脱离标准流,漂浮在标准流之上,和标准流不是一个层次。例如,假设上图中的div2浮动,那么它将脱离标准流,但div1、div3、div4仍然在标准流当中,所以div3会自动向上移动,占据div2的位置,重新组成一个流。如图:图2从图中可以看出,由于对div2设置浮动,因此它不再属于标准流,div3自动上移顶替div2的位置,div1、div3、div4依次排列,成为一个新的流。又因为浮动是

    阅读全文>>

作者:coody分类:【_HTML/CSS浏览(1843

2019-09-27

meta name="" content="的功用详细介绍_HTML/Xhtml_网页制作

    meta name="" content="的作用详细介绍_HTML/Xhtml_网页制作 一、语法: <meta name="name" content="string"/> 二、参数解析: a、name项:常用的选项有keywords(关键字) ,description(网站内容描述),author(作者),robots(机器人向导)等。 b、http-equiv项:可用于代替name项,常用的选项有Expires(期限),Pragma(cache模式),Refresh(刷新),Set-Cookie(cookie设定),Window-target(显示窗口的设定),content-Type(显示字符集的设定)等。 c、content项:根据name项或http-equiv项的定义来决定此项填写什么样的字符串。 三、应用 a、告诉浏览器网

    阅读全文>>

作者:coody分类:【_HTML/CSS浏览(1382

2019-09-27
上一页 1/655页 下一页