HTML/CSS
关注
分享
扫一扫
文章平均质量分 54
雙安
人生难得秋雨前，乞我虚堂自在眠
展开
-
css控制段落格式
CSS控制文字水平对齐：用text-align：来控制文字的水平对齐 常用属性：left、right、center、justify，分别表示左对齐、右对齐、居中对齐、两端对齐CSS控制文字垂直对齐：用vertical-align：来控制文字的垂直对齐 常用属性:top、bottom、middle，分别表示顶部对齐、底部对齐、居中对齐 另外还可以附具体数值，例如： vertical-align原创 2017-07-10 16:13:24 · 901 阅读 · 0 评论 -
Sublime text 设置快捷键让html文件在浏览器中打开
1.安装View In Browser插件快捷键 Ctrl+Shift+P（菜单栏Tools->Command Paletter），输入 pcip选中Install Package并回车，输入View In Browser的插件回车就安装了注意左下角的小文字变化，会提示安装成功2.设置快捷键菜单栏Preferences->Key Bindings-User），或打开Defa原创 2017-07-08 10:16:14 · 6784 阅读 · 0 评论 -
一个简单首页的布局
实战首页布局 #container{ width: 1002px; background: gray; } #header{ height: 120px; background: orange; } #main{ /*height: 600px;*/ overflow: hidden; background: green; }原创 2017-07-09 18:47:28 · 491 阅读 · 0 评论 -
css控制border画三角形
css控制border边框画三角形 div{ width: 50px; background: red; } /*为了适应不同的背景 需要使边框透明 1.使用RGBA 颜色元素写为：rgba(200,200,200,0.5) 在RGB的基础上多了控制透明度的参数 根据需要填写最后一个数的值在 0~1之间即可 2.颜色为 transparent*/ #原创 2017-07-09 18:48:53 · 613 阅读 · 0 评论 -
css画圣诞树
css控制border画圣诞树 div{ /*此处的画布宽要结合盒子border的厚度 至少为200比较美观*/ width: 200px; background: white; } #header{ width: 0px;原创 2017-07-09 18:49:27 · 1291 阅读 · 1 评论 -
引入padding后导致div布局混乱解决办法
增加padding的同时要注意总宽度够不够! 如果不够，可以缩小div的宽度 只需要把div的宽和高减去padding*2的值<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>实战首页布局-margin设置</title> <style type="text/css"> #contain原创 2017-07-09 21:10:49 · 1875 阅读 · 0 评论 -
div盒子大小总结
一个盒子有：margin, border, padding.实占多少空间？ 竖直方向：margin-top + margin-bottom + border-top + border-bottom + padding-top + padding-bottom 水平方向：margin-left + margin-right + border-left + bo原创 2017-07-09 21:48:20 · 1322 阅读 · 0 评论 -
田字格布局
浮动布局 #Lsite{ width: 100px; height: 100px; background: green; float: left; } #Rsite{ width: 100px; height: 100px; background: red; float: left; } #Ldsite{ width:原创 2017-07-08 14:45:57 · 1207 阅读 · 0 评论 -
margin重叠现象
上下相邻的普通元素,上下边距并非简单地相加，而是取其中比较大的边距值，这种现象叫做margin重叠 注意：是普通元素<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>margin重叠现象的研究</title> <style type="text/css"> #test1{原创 2017-07-10 07:11:25 · 418 阅读 · 0 评论 -
html内联元素
常见的块状元素与内联元素块状元素内联元素address – 地址blockquote – 块引用center – 居中对齐dir – 目录列表div – 常用块级容易，也是CSS layout的主要标签dl – 定义列表fieldset – form控制组form – 交互表单h1 – 大标题h2 – 副标题h3 – 3级标题h4 – 4级标题h5 – 5级标题h6 – 6级标题hr – 水平原创 2017-07-10 08:16:30 · 342 阅读 · 0 评论 -
doctype种类介绍
一、什么是DOCTYPEDOCTYPE是Document Type（文档类型）的简写，在页面中，用来指定页面所使用的XHTML（或者HTML）的版本。要想制作符合标准的页面，一个必不可少的关键组成部分就是DOCTYPE声明。只有确定了一个正确的DOCTYPE，XHTML里的标识和CSS才能正常生效。二、选择什么样的DOCTYPXHTML 1.0中有3种DTD（文档类型定义）声明可以选择转载 2017-07-08 08:59:10 · 382 阅读 · 0 评论 -
HTML发展史
简介超文本标记语言（HyperText Markup Language，简称为HTML）是为「网页创建和其它可在网页浏览器中看到的信息」设计的一种标记语言。HTML被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。由蒂姆·伯纳斯-李Tim Berners-Lee给出原始定义，由IETF用简化的SGML（标准通用标记语言）语法进行进一步发展的HTML，后来成原创 2017-07-08 08:41:47 · 609 阅读 · 0 评论 -
超链接标签
链接用a标签表示 内联元素 超链接标签 index <!-- _blank：在新窗口打开链接 _parent：在父窗口中打开链接 _self：在当前窗口打开链接，默认值 _top：在当前窗口打开链接，并替换当前窗体 --> Study IT by yourself 效果原创 2017-07-12 20:48:33 · 362 阅读 · 0 评论 -
css控制文字大小字体和颜色
font 在一个声明中设置所有字体属性。 font-weight 规定字体的粗细。 font-style 规定文本的字体样式（正斜）。 font-size 规定文本的字体尺寸。 line-height 行距 font-family 规定文本的字体系列。 font-size-adjust原创 2017-07-11 13:34:21 · 3292 阅读 · 0 评论 -
css设置背景图片
一，在背景色和背景图片同时存在的情况下，会显示背景图片：二，两者都要设置是因为 1：考虑到大屏下（如1920*1080或者更大）网站背景图不足以撑满整个显示区域，所以背景图以外的部分要显示背景色，并且背景图边缘部分必须处理妥当保证平滑过渡到背景色，不会有突兀的感觉。2：倘若你是一个以黑色为主调的网站，默认背景色是白色，那背景图未加载完成时不就先白一下了，导致感觉闪了一下，视觉不友好，根据网站的主原创 2017-07-10 18:51:28 · 514 阅读 · 0 评论 -
css选择器
每一条css样式声明由选择器和样式两部分组成，“选择器”指明了{}中的“样式”的作用对象标签选择器：通过html代码标签选择元素。 类选择器：作用于具有特定的class属性的标签。 ID选择器：作用于具有特定id属性的标签。类选择器和ID选择器的区别 1.因为元素的id是唯一的，不能出现两个元素具有同一个id值。ID选择器只能使用一次。而class可以使用多次，同时作用于多个元素。 2.原创 2017-07-11 17:06:01 · 285 阅读 · 0 评论 -
css优先级
【控制的越精细，优先级越高，可以用firebug查看！】<!DOCTYPE html><html><head><meta charset="utf-8"> <title>css优先级</title> <style type="text/css"> p{ color: red; } .test2{原创 2017-07-11 17:12:28 · 194 阅读 · 0 评论 -
css有几种引入方式
1.使用HTML标签的STYLE属性将STYLE属性直接加在单个的HTML元素标签上，控制HTML标签的表现样式。这种引入CSS的方式是分散灵活方便，但缺乏整体性和规划性，不利于后期的修改和维护，当需要修改网站的样式时，一个相同的修改可能涉及多个地方，维护成本高。使用STYLE属性的样式效果最强，会覆盖掉其它几种引入方式的相同样式效果。 2.将样式代码写在页面...标签之中..原创 2017-07-08 11:40:48 · 3269 阅读 · 0 评论 -
html和css单闭合标签
HTML的单闭合标签有：1.2.3.4.5.6.7.8.9.10.11.12.13.转载 2017-07-12 16:53:53 · 806 阅读 · 0 评论 -
img标签及其它替换元素
图片是内联元素，同时是内联替换元素，内联替换元素可以设置宽高。为了网页美观，初始化标签中会做一项工作：转化img为block块状元素display: block;，并消除图片的margin border，置为0。什么是替换元素与非替换元素？⑴替换元素： 替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。比如：原创 2017-07-12 17:44:11 · 2324 阅读 · 0 评论 -
整齐的表格
当需要显示格式化的数据时使用表格测试代码： 整齐的表格 table{ /*将table的边框进行融合*/ border-collapse: collapse; /*默认值为separate边框独立*/ /*border-spacing: 20px;*/ /*边框距离的属性*/ } td{ border: 1px solid原创 2017-07-12 19:48:35 · 323 阅读 · 0 评论 -
html绘制课程表
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>课程表</title> <style type="text/css"> table{ border-collapse: collapse; } td{ border:原创 2017-07-12 20:15:52 · 1919 阅读 · 0 评论 -
伪类
css允许我们针对a标签的四种状态设置各自的css特性，称为css的伪类链接的四种状态为：1.鼠标未放上去2.鼠标放上去3.鼠标点击未松手4.点击后注意：1、active状态一般不设置2、设置顺序有规定：LVHA3、a:link可以简写成a a标签伪类 /*用标签选择器进行控制*/ a:link{ color: pink原创 2017-07-13 14:46:51 · 269 阅读 · 0 评论 -
内联与块状的转换
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>内联与块状的转换</title> <style type="text/css"> div{ width: 100px; height: 100px; background原创 2017-07-10 09:03:50 · 511 阅读 · 0 评论