HTML+CSS基础入门
关注
分享
扫一扫
天空蓝依旧
追求技术,就像一场人生的探险,充满了神秘的色彩.....
展开
-
Html与CSS的爱恨情仇第一式---第一系列
本文整理与慕课网,仅用于个人学习提高简单来说就是1.HTML是整个网页的界面 2. CSS是网页的颜料 3. JavaScript是动态的效果的实现常见元素解析1.<h1></h1>就是标题标签2..<p></p>是段落标签3.<img src=是照片添加法eg:网页的完整代码如下图：<!DOCTYPE HTML> <html> <head> <meta http-e翻译 2017-08-14 21:57:33 · 780 阅读 · 0 评论 -
CSS代码缩写，占用更少的带宽--第九系列
盒模型代码简写还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的：上右下左。具体应用在margin和padding的例子如下： margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/ 通常有下面三种缩写方法: 1、如果top、right、转载 2017-08-21 20:34:01 · 288 阅读 · 0 评论 -
CSS布局模型----第八系列
css布局模型清楚了CSS 盒模型的基本概念、 盒模型类型， 我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上，又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本，那么 CSS 布局模板就是末了，是外在的表现形式。 CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Fl转载 2017-08-21 19:02:44 · 274 阅读 · 0 评论 -
CSS盒模型---第七系列
元素分类在讲解CSS布局之前，我们需要提前知道一些知识，在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。 常用的块状元素有： <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 常用的内联元素有： <a>、<span>、<br>、<i>、<e转载 2017-08-18 20:54:22 · 299 阅读 · 0 评论 -
CSS格式化排版---第六系列
文字排版–字体我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例子，下面代码实现：为网页中的文字设置字体为宋体。 body{font-family:"宋体";} 这里注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。（因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。） 现在一般网页喜欢翻译 2017-08-18 17:46:59 · 485 阅读 · 0 评论 -
CSS的继承,层叠与特殊性---第五系列
继承CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。比如下面代码：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。 p{color:red;}<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p> 可见右侧结果窗口中p中的文本与sp翻译 2017-08-18 17:13:13 · 225 阅读 · 0 评论 -
CSS选择器集锦---第四系列
什么是选择器？每一条css样式声明（定义）由两部分组成，形式如下： 选择器{ 样式; } 在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。比如右侧代码编辑器中第7行代码中的“body”就是选择器。eg:代码:<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type翻译 2017-08-17 13:32:13 · 285 阅读 · 0 评论 -
CSS-为网站添加样式---第三系列
认识CSS样式CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。 如下列代码： p{ font-size:12px; color:red; font-weight:bold; } 使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色翻译 2017-08-16 11:54:00 · 434 阅读 · 0 评论 -
HTML与CSS的爱恨情仇第四式---第二系列
认识标签，为网页插入图片在网页的制作中为使网页炫丽美观，肯定是缺少不了图片，可以使用<img>标签来插入图片。 语法： <img src="图片地址" alt="下载失败时的替换文本" title = "提示文本"> 举例： <img src = "myimage.gif" alt = "My Image" title = "My Image" /> 讲解： 1、src：标识图像的位置； 2、alt翻译 2017-08-15 21:14:06 · 507 阅读 · 0 评论 -
HTML与CSS的爱恨情仇第三式---第一系列
使用a标签，链接到另一个页面使用<a>标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。 语法： <a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a> 例如： <a href="http://www.imooc.com" title="点击进入慕课网">click here!</a> 上面例子作用是单击click here翻译 2017-08-15 19:39:03 · 571 阅读 · 2 评论 -
HTML与CSS的爱恨情仇第二式---第一系列
使用ul，添加新闻信息列表在浏览网页时，你会发现网页上有很多信息的列表，如新闻列表、图片列表，如下图所示。新闻列表图片列表语法： <ul> <li>信息</li> <li>信息</li> ...... </ul> 举例： <ul> <li>精彩少年</li> <li>美丽突然出现</li> <li>触动心灵的旋律</li> </ul> ul-li在网页中显示的默认样式一般为翻译 2017-08-15 11:00:07 · 636 阅读 · 0 评论 -
CSS样式设计小技巧---第十系列
水平居中设置-行内元素我们在实际工作中常会遇到需要设置水平居中的场景，比如为了美观，文章的标题一般都是水平居中显示的。 这里我们又得分两种情况：行内元素 还是 块状元素 ，块状元素里面又分为定宽块状元素，以及不定宽块状元素。今天我们先来了解一下行内元素怎么进行水平居中？ 如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。(父元素和子元素转载 2017-08-21 21:40:17 · 578 阅读 · 0 评论