HTML/CSS
文章平均质量分 75
愤斗的小鸡
这个作者很懒,什么都没留下…
展开
-
【HTML笔记四】认识标签三
一、使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这个标签。 语法:<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>例如:<a href="http://www.baidu.com" title="进入百度">点击这里</a>注意:只要为文本加入a标签后,文字的颜色就会自动变为原创 2016-06-09 12:57:19 · 467 阅读 · 0 评论 -
【CSS学习】CSS背景background、background-position使用详解
这篇文章主要介绍了CSS背景background、background-position使用方法,需要的朋友可以参考下。背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一。这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachment 等的属性,也会介绍一些有关背景(background)的常用技巧,以及 c转载 2016-06-15 12:49:57 · 693 阅读 · 0 评论 -
【转载】CSS魔法堂:你真的理解z-index吗?
一、前言假如只是开发简单的弹窗效果,懂得通过z-index来调整元素间的层叠关系就够了。但要将多个弹窗间层叠关系给处理好,那么充分理解z-index背后的原理及兼容性问题就是必要的知识储备了。由于将英文名词翻译为中文名词容易产生歧义(如Normal flow被翻译为文档流),因此本文将直接采用原英文名词,而涉及到的英文名词解释如下:non-positioned element:无CSS定位的元素,也转载 2016-07-22 14:36:14 · 386 阅读 · 0 评论 -
【HTML笔记五】与浏览者交互,表单标签
一、使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。 语法:<form method="传送方式" action="服务器文件">讲解:<form> :<form>标签是成对出现的,以<form>开始,以</form>结束。action :浏览者输入的数据被传原创 2016-06-09 15:10:19 · 436 阅读 · 0 评论 -
【HTML笔记三】认识标签二
一、使用ul,添加新闻信息列表 这些列表可以使用ul-li标签来完成,是无序的列表。 语法:<ul> <li>信息</li> <li>信息</li> ......</ul>ul-li在网页中显示的默认样式一般为:每项li前都自带一个圆点,且换行加缩进。二、使用ol,添加图书销售排行榜 在网页中展示有前后顺序的信息列表。 语法:<ol> <li>信息</li> <l原创 2016-06-08 22:02:11 · 454 阅读 · 0 评论 -
【CSS笔记九】单位和值
一、颜色值 在网页中的颜色设置是非常重要,有字体颜色(color)、背景颜色(background-color)、边框颜色(border)等,设置颜色的方法也有很多种:1、英文命令颜色前面几个小节中经常用到的就是这种设置方法:p{color:red;}2、RGB颜色这个与 photoshop 中的 RGB 颜色是一致的,由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。p{原创 2016-06-11 23:49:39 · 252 阅读 · 0 评论 -
【CSS笔记七】CSS布局模型
一、css布局模型 清楚了CSS 盒模型的基本概念、 盒模型类型, 我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上,又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本,那么 CSS 布局模板就是末了,是外在的表现形式。 CSS包含3种基本的布局模型,用英文概括为:Flow、Layer原创 2016-06-11 21:47:43 · 265 阅读 · 0 评论 -
【CSS笔记十】CSS样式设置小技巧
一、水平居中设置:行内元素 我们在实际工作中常会遇到需要设置水平居中的场景,比如为了美观,文章的标题一般都是水平居中显示的。这里我们又得分两种情况:行内元素 还是 块状元素 ,块状元素里面又分为定宽块状元素,以及不定宽块状元素。今天我们先来了解一下行内元素怎么进行水平居中?如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的。(父元素和子原创 2016-06-12 16:35:30 · 406 阅读 · 0 评论 -
【CSS笔记八】CSS代码缩写,占用更少的带宽
一、盒模型代码简写 还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左。具体应用在margin和padding的例子如下:margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/通常有下面三种缩写方法:1、如果top、right原创 2016-06-11 22:50:32 · 377 阅读 · 0 评论 -
【CSS笔记六】CSS盒模型
一、元素分类 在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。常用的块状元素有:<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>常用的内联元素有:<a>、<span>、<br>、<i>、<e原创 2016-06-11 12:54:02 · 336 阅读 · 0 评论 -
【CSS笔记五】CSS格式化排版
一、文字排版:字体 我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例子,下面代码实现:为网页中的文字设置字体为宋体。body{font-family:"宋体";}这里注意不要设置不常用的字体,因为如果用户本地电脑上如果没有安装你设置的字体,就会显示浏览器默认的字体。(因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。) 现在一般网原创 2016-06-10 22:35:22 · 311 阅读 · 0 评论 -
【CSS笔记四】CSS的继承、层叠和特殊性
一、继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代。比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签,还应用于p标签中的所有子元素文本,这里子元素为span标签。p{color:red;}<p>三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>p中的文本与span中的文本都原创 2016-06-10 21:25:56 · 259 阅读 · 0 评论 -
【CSS笔记三】CSS选择器
一、什么是选择器 每一条css样式声明(定义)由两部分组成,形式如下:选择器{ 样式;}在{ }之前的部分就是“选择器”,“选择器”指明了{ }中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。 比如:body{ font-size:12px; color:red; }body就是选择器。表示body中的元素都按照所设置的样式就行设置。二、标签选择器原创 2016-06-10 14:26:03 · 330 阅读 · 0 评论 -
【CSS笔记二】CSS样式基本知识
一、内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式、嵌入式和外部式三种。内联式css样式表就是把css代码直接写在现有的HTML标签中,如下面代码:<p style="color:red">这里文字是红色。</p>注意要写在元素的开始标签里,下面这种写法是错误的:<p>这里文字是红色。</p style="原创 2016-06-10 11:43:48 · 318 阅读 · 0 评论 -
【CSS笔记一】开始学习CSS,为网页添加样式
一、认识CSS样式 CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。如下列代码:style type="text/css">p{ font-size:20px;/*设置文字字号*/ color:red;/*设置文字颜色*/ font-weight:bold原创 2016-06-10 10:47:02 · 305 阅读 · 0 评论 -
【HTML】小练习,复习巩固
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>task_1</title> </head> <body> <h1>网站一级标题</h1> <ul> <li><a href="#">导航链接一</a></li>原创 2016-06-10 10:44:25 · 310 阅读 · 0 评论 -
【HTML笔记一】HTML介绍
一、制作我的第一个网页Hello World<html> <head> <title>我的第一个网页</title> </head> <body> <h1>Hello World</h1> </body></html>作用在浏览器的标题栏显示“我的第一个网页”,在页面中显示“Hello World”。 二、HTML和CSS的关系H原创 2016-06-08 15:47:08 · 617 阅读 · 0 评论 -
【HTML笔记二】认识标签一
一、语义化 明白每个标签的用途,在不同情况下使用合理的标签。比如网页上文章的标题就可以用标题标签,网页上的各个栏目名称也可以使用标题标签,文章内容的段落就放在段落标签中,文章中想要强调的文本,就可以使用标签表示强调等等。语义化的好处:更容易被搜索引擎收录。更容易让屏幕阅读器读出网页内容。二、标签,网页上显示的内容放在这里 在网页上要展示出来的页面内容一定要放在body标签中。原创 2016-06-08 20:43:12 · 482 阅读 · 0 评论 -
【CSS学习】CSS中margin边界叠加问题及解决方案
你对CSS的margin边界叠加的概念是否了解,这里和大家分享一下,当一个元素出现在另一个元素上面时,第一个元素的底边界与第二个元素的顶边界发生叠加。CSS的margin边界叠加深度剖析边界叠加简介 边界叠加是一个相当简单的概念。但是,在实践中对网页进行布局时,它会造成许多混淆。简单地说,当两个垂直边界相遇时,它们将形成一个边界。这个边界的高度等于两个发生叠加的边界的高度中的较大者。当一个元素出现转载 2016-06-15 21:19:32 · 494 阅读 · 0 评论