4.12号HTML、CSS

HTML表单元素:多行文本域 标签定义多行的文本输入控件。文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。可以通过 cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的 height 和 width 属性。<textarea rows=“2“ cols=“25“>文本的默认值</textarea>实现的效果:下拉列表
阅读本文

前端静态资源版本更新与缓存之——通过gulp 在原html文件上自动化添加js、css版本号

原理 修改js和css文件 通过对js,css文件内容进行hash运算,生成一个文件的唯一hash字符串(如果文件修改则hash号会发生变化) 替换html中的js,css文件名,生成一个带版本号的文件名 方案现在网上的方案都是生成一个新的dist目录,里面包含了要发布的html,js,css等文件。但是在实际的公司的项目中,会有情况不能生成新的HTML进行发布,需要在原来的HTML文件上进行
阅读本文

Fiddler抓包分析

在Fiddler的web session界面捕获到的HTTP请求如下图所示: 各字段的详细说明已经解释过,这里不再说明。需要注意的是#号列中的图标,每种图标代表不同的相应类型,具体的类型包括: 另外,注意请求的host字段。可以看到有来自多个www.csdn.net的子域名的响应,说明在大型网站的架构中,大多需要多个子域名,这些子域名可能是单独用于缓存静态资源的,也可能是专门负责媒体资源的,或者是
阅读本文

VCcode使用简介

官方下载地址https://code.visualstudio.com/注意:VSCode需要安装git和Framework一.VCcode插件https://segmentfault.com/a/11900000066972190.view in browser用浏览器预览HTML文件0.Auto Rename Tag修改HTML标签时,自动修改匹配的标签0.Auto Close Tag自动闭合
阅读本文

初学html的单词笔记

font-size: 文字大小color: 顏色solid: 边框线text-align: 間距center: 文字放在中間 网页头部 网页标题 引用 样式<br/><em> 强调斜体<br/><strong> 自己加粗<br/><span> 是一个区块标签,它类似div,class标签,
阅读本文

CSS深入理解之float(HTML/CSS)

float的设计初衷仅仅是:为了文字环绕效果 float的包裹与破坏包裹:收缩、坚挺、隔绝(BFC)破坏:父元素高度塌陷 <!DOCTYPE html> <html> <head> <meta charset=“utf-8“ /> <title>Layout</title> <style> .box{ border: 1px solid
阅读本文

CSS深入理解之overflow(HTML/CSS)

简介overflow看上去其貌不扬,其中蕴含的知识点还是很多的,有很多鲜为人知的特性表现。 overflow基本属性值1、visible(默认)2、hidden3、scroll4、auto5、inherit body/html与滚动条无论什么浏览器,默认滚动条均来自html标签,而不是body标签。因为新建一个空白html页面,body默认有margin值,如果滚动条来自body,则应该有边距,而
阅读本文

浅谈,html\css脱离标准文档流相关

(个人知识有限,难免有误,请见谅)  标准文档流,顾名思义,是要按照一定规矩排列的,默认的就是元素会从左至右,从上至下排列,块级会独占一行,行内元素会和小伙伴们共享一行。  本来在标准文档流下,各个元素相安无事,可突然有一天某个元素心想啊,我那么优秀,不该出现在这里啊,于是它成精了,它发现了一道大门走向另一个空间BFC。  BFC:直译为“块级格式化上下文”,这是一个独立的区域,这个区域与外部
阅读本文

CSS中对图片的过度

1:鼠标hover时:出现文字并且图片的背景变暗:html: CSS: .tupian {背景图片大小 width: 380px; height: 266px; position: relative;相对背景图片的定位}upian:before{ content: attr(alt);出现的文字 width:380px;定义hover时的出现灰色的框,和背景图片一样的
阅读本文

7-80 HTML5新增的JS选择器

7-80 HTML5新增的JS选择器 学习要点HTML5新增的JS选择器 在传统的 JavaScript 开发中,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id 等方式来查找,这显然是远远不够的,如果想要进行更为精确的选择不得不使用看起来非常繁琐的正则表达式,或者使用某个库。 querySelector 和 querySelectorA
阅读本文

从零开始学习前端开发 — 2、CSS基础

一、css简介css—层叠样式表特点:实现了表现与结构相分离 二、css基础语法css是由选择符和声明两大部分组成,声明由属性和值组成。语法: 选择符{ 属性:值; 属性:值; }注: 属性和值用冒号连接 一条声明结束要添加分号属性和属性不分先后顺序 三、样式表的创建1.内联样式(行间样式,行内样式)语法:标记>eg: 千锋教育2.内部样式(嵌入式样式)语法
阅读本文

CSS实现网页背景图片自适应全屏

一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动。以下是用CSS实现的方法:HTML:<!DOCTYPE html> <html> <head> <meta http-equiv=“conte
阅读本文

》》HTML5 移动页面自适应手机屏幕四类方法

1、使用meta标签:viewportH5移动端页面自适应普遍使用的方法,理论上讲使用这个标签是可以适应所有尺寸的屏幕的,但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。viewport 是用户网页的可视区域。翻译为中文可以叫做“视区“。手机浏览器是把页面放在一个虚拟的“窗口“(viewport)中,通常这个虚拟的“窗口“(viewport)比屏幕宽,这样就不用把每个网页
阅读本文

原生js+canvas实现裁剪图片的功能

想要了解clip 这个属性,首先要知道这个属性的语法:clip:rect(top,right,bottom,left),clip属性的特点就是只显示这些值包裹的区域,其他的区域全都隐藏。选取图片这个功能大只分为三个部分:第一个部分:就是只用作展示的一张图片,这张图片上不做任何的功能处理。第二个部分:也是一张图片,这张图片覆盖在第一章图片的上面,利用clip属性只显示选取的部分,其他的隐藏。第三个部
阅读本文

HTMLCSS实现左侧固定宽度右侧内容可滚动

在做移动端页面的时候,经常会碰到一个div中分左右两个div,左侧div固定宽度或百分比,右侧div中内容左右溢出,需要左右滑动才可以浏览到全部内容,为此写了一个demo。处理这个问题的核心关键点是右侧div需要设置固定宽度或者百分比,然后设置它的overflow为auto或者scroll。一般移动端左右滑动不需要显示滚动条,此时可以设置.element::-webkit-scrollbar {d
阅读本文

html头部meta标签

<meta>标签定义了html的元数据,元数据是不会在内容中显示的,但会被浏览器解析。的基本写法: <meta name=“viewport“ content=“width=device-width, initial-scale=1.0, user-scalacle=no“> <meta>标签不闭合,属性有name:把content属性关联到一个名称content:定义与name和http-equ
阅读本文

改变checkbox的默认样式

改变checkbox的默认样式总共有两种方法,大体思路都是一样的,先将checkbox隐藏,然后用一个样式元素来伪装成checkbox,主要的不同之处在于如何设置选中后的样式。第一种方法是使用图片,将不同状态下的样式集合到一张图片上,根据改变background-positon来改变样式,类似于css sprite,之前随笔中的icheck就是这个原理,这种方法的兼容性比较好,但是不够灵活。第二种
阅读本文

css BFC

BFC是什么? BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域,它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。 怎么生成BFC 1、position为absolute或fixd; 2、float属性不为none; 3、diaplay为inline-block, table-cell, ta
阅读本文

学习CSS的思路

两周之前写过该系列的,其实当时只是一个想法,这段时间迟迟未更新,是在思考一个解决过程。现在初有成效,就开更吧。1. 一个段子  开题不必太严肃,写博客也不像写书,像聊天似的写东西是最好的表达方式。       记得之前看过一个段子,也可能是一件真事儿,这不重要。大体内容如下:一个香港的教授说:我们香港的大学和大陆的大学差的很远啊,大陆的大学连看门保安都懂得哲学,因为当你想要进入校园时,保安都会问你
阅读本文