html/css
shaonian1996
这个作者很懒,什么都没留下…
展开
-
css的继承属性
css的继承属性一、无继承性的属性1、display:规定元素应该生成的框的类型2、文本属性:vertical-align:垂直文本对齐text-decoration:规定添加到文本的装饰text-shadow:文本阴影效果white-space:空白符的处理unicode-bidi:设置文本的方向3、盒子模型的属性:width、height、margin 、margin-top、margin-r...原创 2018-03-07 17:26:36 · 130 阅读 · 0 评论 -
css布局居中
css布局居中水平居中:1)使用inline-block+text-align(1)原理、用法原理:先将子框由块级元素改变为行内块元素,再通过设置行内块元素居中以达到水平居中。用法:对子框设置display:inline-block(如果本身是内联元素或内联块元素可不写),对父框设置text-align:center。 ( 2 ) 代码:html: <div id="box"> ...原创 2018-03-24 22:33:45 · 161 阅读 · 0 评论 -
自定义边框长宽
html:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>自定义边框长宽</title> <link rel="stylesheet" type="text/css" href="d原创 2018-03-21 11:51:48 · 534 阅读 · 0 评论 -
鼠标移入放大图片,不影响文字
当鼠标移入时图片放大,文字不变。鼠标移入到图片的父元素让图片放大。html:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>自定义边框长宽</title> <link rel="stylesheet" type=原创 2018-03-21 16:05:55 · 1479 阅读 · 0 评论 -
CSS 样式书写规范
CSS 样式书写规范编码设置采用 UTF-8 编码,在 CSS 代码头部使用:@charset "utf-8";注意,必须要定义在 CSS 文件所有字符的前面(包括编码注释),@charset 才会生效。例如,下面的例子都会使得 @charset 失效:/* 字符编码 */@charset "utf-8";html,body { height: 100%;} @charset "utf-8";命...转载 2018-03-28 15:12:27 · 865 阅读 · 2 评论 -
前端制作入门知识
前端制作入门知识来自百度文库:web前端学习总结(精华版),里面讲了许多的知识,非常适合刚进入前端的童鞋,就算一些有点基础的也会从中受益,通过本文,你将了解到制作中的那些元素解释、命名、布局、CSS重置、选择框架和设定等一系列前端入门知识。学习什么我觉得做好笔记很关键,平时遇到问题多多记录下来。一.名词解释横切在固定页面的宽度(按栅格化进行)并且对高度没有限制的容器称为一个标准横切留白两个容器...转载 2018-04-11 17:21:17 · 284 阅读 · 0 评论 -
元素分类与属性继承
元素分类与属性继承一:元素分类常见内联元素(不可设宽高,不独占一行):a,span,strong,em,label,button,small,strike,textarea,br;常见内联块元素(可设宽高,不独占一行):img,input,button;常见块状元素(可设宽高,独占一行):div,h1~h6,p,ul,li,table,form,dl;二:样式继承1 不可继承:display,ma...原创 2018-04-11 18:09:10 · 208 阅读 · 0 评论 -
HTML URL 编码
HTML URL 编码转自点击打开链接下面是用 URL 编码形式表示的 ASCII 字符(十六进制格式)。十六进制格式用于在浏览器和插件中显示非标准的字母和字符。URL 编码 - 从 %00 到 %8fASCII Value URL-encode ASCII Value URL-encode ASCII Value URL-encode ...转载 2018-04-12 23:07:43 · 9478 阅读 · 0 评论 -
::before和::after的用法
::before和::after的用法1 ::after清除浮动:ul:after{ content: ''; display: block;//变成块状元素 width: 0; height: 0; clear: both;}2 ::before和::after 用来写小三角形html:<!DOCTYPE html><html>...原创 2018-04-13 11:26:36 · 2024 阅读 · 0 评论 -
outlook的设置
outlook可接受多个邮箱的信息;163邮箱:网页登陆-->设置:开启pop3/smtp服务获取客户端授权密码进入outlook:点击其他属性:qq 邮箱qq邮箱的授权密码是随机分配的16位字母;其他设置有所不同:新浪邮箱:密码就是邮箱的登陆密码其他其他设置:...原创 2018-06-13 12:47:46 · 1882 阅读 · 0 评论 -
IE浏览器无法显示jpg或png图片
IE浏览器无法显示jpg或png图片IE浏览器有个问题,就是如果修改了图片原始的扩展名,将导致图片无法正常显示,例如,你用截图工具截了一张图,图片格式为png如果把它修改为jpg,并试图将其显示<img src="1.jpg">IE浏览器不能正常显示,但火狐,谷歌可以正常显示。...原创 2018-06-22 13:07:46 · 5275 阅读 · 0 评论 -
css-揭秘之1-10
css揭秘之1-101 半透明边框<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>css揭秘</title> <style type="text/css"> body{ backgroun原创 2018-06-18 11:41:23 · 225 阅读 · 0 评论 -
html 导航框架
html导航框架:不能使用body标签,<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>html框架</title></head><!-- 不能使用body标签 -->&l原创 2018-07-26 22:40:42 · 2391 阅读 · 0 评论 -
a链接执行javascript的方法
a链接执行javascript的方法目的:禁止跳转,直接执行a链接绑定的函数href="javascript:;",其中javascript:是伪协议,它可以让我们通过一个链接来调用javascript函数.而采用这个方式 javascript:;可以实现A标签的点击事件运行时,如果页面内容很多,有滚动条时,页面不会乱跳,用户体验更好...原创 2018-08-22 18:42:50 · 7143 阅读 · 0 评论 -
响应式布局
图示1:图示2:图示3:html:<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, max原创 2018-03-24 20:48:08 · 244 阅读 · 0 评论 -
CSS鼠标移上去给元素加边框,怎么能保证后面的元素不动。
CSS鼠标移上去给元素加边框,怎么能保证后面的元素不动原因:移动上去添加边框,宽度和高度被影响,导致布局小乱。解决方法:1:在css鼠标移动上去添加边框时,将宽度和高度分别减去边框宽度*2(在4边都加边框的情况下)即在hover:设置;2...原创 2018-03-18 13:25:10 · 3430 阅读 · 0 评论 -
CSS菜单栏制作
1 纵向菜单:html:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>布局</title> <script type="text/javascript" src="demo.js"&原创 2018-02-14 00:45:52 · 6380 阅读 · 0 评论 -
CSS固定布局与流动布局
CSS布局方式一 固定布局:1 三栏固定宽度:思路 先写一栏,再左浮动写第二栏,再左浮动写第三栏。注意:将三栏的总宽度设为960px。所以创建一个总 容器。html代码:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>布局</title> &原创 2018-02-13 23:19:33 · 7388 阅读 · 0 评论 -
CSS字体与文本
CSS字体与文本字体属性:font-family:字体种类。font-size:字体大小。font-style:字体样式。font-weight:字体加粗。font-variant:字体变化。font(简写属性)。1 font-family:字体种类有以下5种通用字体:serif,也就是衬线字体,在每个字符笔画的末端会有一些装饰线;sans-serif,也就是无衬线字体,字符笔画的末端没有装饰线;...原创 2018-02-13 14:21:24 · 187 阅读 · 0 评论 -
css背景设置
css背景设置css规定一下与背景相关的属性:1 background-color; 背景颜色2 background-image; 背景图片3 background-repeat; 背景重复4 background-position; 背景位置5 background-size; 背景尺寸6 backgroun...原创 2018-02-12 23:01:50 · 340 阅读 · 0 评论 -
css围住浮动元素的三种方法
css围住浮动元素的三种方法引入:浮动元素脱离了文档流,其父元素也看不到它了,因而也不会包围它,例如以下代码:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>盒子模型</title> <script type="text/原创 2018-02-12 15:35:42 · 443 阅读 · 0 评论 -
css的盒子模型
css的盒子模型一 理解盒模型:每一个元素都会在页面上生成一个盒子。因此,HTML页面实际上就是由一堆盒子组成的。默认情况下,每个盒子的边框不可见,背景也是透明的,所以我们不能直接看到页面中盒子的结构。二 每个盒子的三个属性:边框(border):可以设置边框的宽窄、样式和颜色。内边距(padding):可以设置盒子内容区与边框的间距。外边距(margin):可以设置盒子与相邻元素的间距。三 ...原创 2018-02-12 00:27:52 · 244 阅读 · 0 评论 -
css的层叠机制
css的层叠机制浏览器层叠各个来源样式的顺序:1浏览器默认样式;2用户样式表;3链接样式表;4嵌入样式;5行内样式;前面出现的样式会被后面相同的样式覆盖层叠规则一:找到应用给每个元素和属性的所有声明。浏览器在加载每个页面时,都会据此查到每一条CSS规则,标识出所有受到影响的HTML元素。层叠规则二:按照顺序和权重排序。浏览器依次检查5个来源,并设定匹配的属性。如果匹配的属性在下一个来源也有定义,则...原创 2018-02-11 21:51:12 · 234 阅读 · 0 评论 -
CSS 浮动元素居中
浮动元素居中对于浮动元素无法使用margin{0 auto}可在最外层设置一个div,让宽度等于里面div宽度之和,这里并不完全是width之和,如果,里面含有边距,要加上边距。html:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>浮动元素居中</ti..原创 2018-02-16 13:35:08 · 682 阅读 · 0 评论 -
CSS链接与列表
CSS链接一 css链接有以下属性:1 状态:a:link - 普通的、未被访问的链接a:visited - 用户已访问的链接a:hover - 鼠标指针位于链接的上方a:active - 链接被点击的时刻正确顺序:link,visited,hover,active。PS:如果你用的href='#'做默认链接的话,会发现link属性会失效,应该为href='###'.2 文本修饰:text-dec...原创 2018-02-16 15:04:29 · 258 阅读 · 0 评论 -
css伪类
关于css伪类包括两种:UI伪类 结构化伪类一 UI伪类:基于特定HTML元素的状态应用样式。1 链接伪类(四种状态)link 点击前;Visited 点击之后;Hover 鼠标悬停在链接上;Active 点击时;以下是4个伪类选择符:a:link{color:black;}a:visited{color: #ccc;}a:hover{text-decoration: none;}a:ac...原创 2018-02-11 20:10:01 · 1309 阅读 · 0 评论 -
css定位
CSS的position属性布局的核心是position属性,对元素盒子应用这个属性,可以相对于它在常规文档流中的位置重新定位。position属性有4个值:static、relative、absolute、fixed,默认值为static。static :默认文档流,正常显示;relative:相对定位;absolute:绝对定位;fixed:固定定位。HTML代码:<!DOCTYPE h...原创 2018-02-12 19:52:29 · 115 阅读 · 0 评论 -
CSS固定布局实战
CSS固定布局实战详解目标:CSDN主页画面预览:1:2:网页解读:1:总体5个部分:头部,主体(左中右),尾部。2:主体的中部和右面又分为几小块。布局:1 头部:导航栏加搜索框。html:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>CSS3实战</ti..原创 2018-02-15 17:52:50 · 1247 阅读 · 0 评论 -
表单中input常见的属性
表单中input常见的属性 属性 值 描述 accept list_of_mime_types 规定可通过文件上传控件提交的文件类型。 (仅适用于 type="file") alt text 规定图像输入控件的替代文本。 (仅适用于 type="image") autocomplete ...原创 2018-10-03 11:40:29 · 2354 阅读 · 0 评论