2017年10月_小苏学姐

10月 09月 04月

原创 CSS(十二) 宽度布局实践

CSS定位固定宽度布局-绝对定位法需要对父标签进行设定，包括高度，还要对自己的宽度高度进行设置，因为他们都已经脱离了标准流html>head>meta charset="UTF-8">title>绝对定位法title>style type="text/css"> body{ text-align: center; } #head,#co

2017-10-08 16:32:55 423 3

原创 CSS(十一) 设置列表样式

设置列表的符号有序列表：默认的就是数字1 2 3 无序列表：默认的是小圆点可以看到其实有序列表和无序列表是可以转换的html>head>meta charset="UTF-8">title>设置列表符号title>style type="text/css"> ul,ol{ list-style-type: square; }style>h

2017-10-08 10:03:40 1089

原创 CSS(十) 设置超链接样式

使用CSS 伪类别来设置超链接样式链接的四种状态： a:link：普通的、未被访问的链接 a:visited：用户已访问的链接 a:hover：鼠标指针位于链接的上方 a:active：链接被点击的时刻html>head>meta charset="UTF-8">title>使用CSS伪类别来设置超链接样式title>style type="text/css">

2017-10-08 09:51:52 2009

原创 CSS(九) 设置表格样式

设置表格的边框Border：设置表格边框； Border-collapse：设置边框分离或者合并，默认是separate(分离)的，值collapse 为合并； Border-spacing ：设置单元格的间距； Padding：设置单元格内容和边框之间的距离；设置表格的宽度Table-layout 默认auto 自动方式，根据单元格的内容自动调整宽度； Fixe

2017-10-07 20:03:14 521

原创 CSS(八) 盒子的浮动与定位

盒子浮动floatFloat 属性：默认是none ，按照标准流来定位； Left：左悬浮； Right：右悬浮；html>head>meta charset="UTF-8">title>盒子浮动float nonetitle>style type="text/css"> .parent{ padding:5px; backgr

2017-10-07 17:51:49 813 1

原创 CSS(七) 盒模型

盒模型基本概念拿相框来作比较的话盒模型相框边框- > border 画和相框边框的距离-> padding 相框之间的距离-> margin边框这个和前面的p标签的边框的设置方法是类似的，也是3种方式 border-width 边框宽度(粗细) border-color 边框颜色 border-style 边框样式#outerBox1{

2017-10-07 16:36:11 255

原创 CSS(六) 设置背景颜色和背景图像

设置背景颜色body style="background-color: blue;">我是蓝色背景h1 style="background-color: red;">我是红色背景h1>body>设置背景图像默认的是用这个图片铺满这个页面body style="background-image: url(../1.jpg)">设置背景图像平铺设置背景图像位置设

2017-10-07 16:09:21 2838

原创 CSS(五) 设置图像和图文混排

以下面的图像为例"../a.jpg" class="i1"/>1 设置图片边框.i1{ border-width: 1px; border-color: red; border-style: solid; }也可以简写成.i1{ border: 2px red dashed; }也可以给

2017-10-07 16:00:06 761

原创 CSS(四) 设置文本样式

如果对于类型为p1的文本的属性进行设置的话.p1{ xxx:yyy; aaa:bbb; }设置文字的字体，如果第一个值没有直接向后找 font-family: "Times New Roman",Arial; font-family: 微软雅黑,黑体,宋体; font-style: italic;设置文字的倾斜效果（斜体italic）

2017-10-07 15:38:23 354

原创 CSS(三) 高级特性

复合选择器1 “交集”选择器html>head>meta charset="UTF-8">title>“交集”选择器title>style type="text/css"> p{ font-size: 30px; } p.c{ text-decoration: underline; } .c{

2017-10-07 15:11:21 274

原创 CSS(二) 基本特性

CSS 基本选择器1 标记选择器<!DOCTYPE html><html><head><meta charset="UTF-8"><title>标记选择器</title><style type="text/css"> p{ color: red; font-size: 20px; }</style></head><body><

2017-10-07 14:42:13 455

原创 CSS(一) 基本概念

CSS 基本概念CSS 指层叠样式表(Cascading Style Sheets) 通俗点可以把HTML 理解成人，CSS 理解成衣服，用户装饰网页，使得页面更加美观，便于管理CSS 基本语法html>head>meta charset="UTF-8">title>CSS引入title>style type="text/css"> p{ f

2017-10-07 14:40:28 399

原创 HTML(九) div和span

div和spanHTML <div> 元素是块级元素，它是可用于组合其他HTML 元素的容器。 HTML <span> 元素是内联元素，可用作文本的容器。 ps:块级元素之间会自动换行，但是内联元素就不会<div id="d1" style="border: 1px red solid;"><h1>呵呵</h1><h2>嘿嘿</h2><p>嘻嘻</p></div><hr/><div

2017-10-07 14:17:09 427

原创 HTML(八) 表单

Form 表单表单是一个包含表单元素的区域。主要作用就是向服务器提交数据。具体格式如下：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Form表单</title></head><body><form action="a.jsp" method="get">里面是具体的表单内容</form></body></htm

2017-10-07 13:49:46 277

原创 HTML(七) 表格

表格的基本结构<!DOCTYPE html><html><head><meta charset="UTF-8"><title>表格的基本结构</title></head><body><table border="1"> <tr> <th>1</th> <th>2</th> <th>3</th> <th>4</th>

2017-10-07 13:39:48 329

原创 HTML(六) 超链接和框架

基本文字超链接a href="http://www.baidu.com">点我去百度a>图片超链接baidu.gif在当前目录下，并且以新窗口显示链接页面a href="http://www.baidu.com" target="_blank">img src="baidu.gif"/>a>电子邮件链接a href="mailto:XXX">联系我a

2017-10-07 13:04:19 2605

原创 HTML(五) 使用img标签

相对路径和绝对路径<img src="1.jpg"/>在当前目录下的图片 <img src="../2.jpg">在当前目录的父级目录下的图片 <img src="http://www.baidu.com/img/bdlogo.gif"/>在远程网络上的图片 <img src="D://3.jpg"/>在本地目录下的图片设置图片的尺寸根据设定的大小显示，也可以使用百分比，是按照父窗口的占比进行

2017-10-07 11:55:38 1030

原创 HTML(四) HTML 标记和其属性

文字的特殊样式<!DOCTYPE html><html><head><meta charset="UTF-8"><title>设置文字的特殊样式</title></head><body>默认文字样式<br/><b>文字以粗体方式显示</b><br/><i>文字以斜体方式显示</i><br/><u>文字以加下划线方式显示</u><br/><s>文字以加下删除方式显示</s><br

2017-10-07 11:40:55 348

原创 HTML(三) 设置文字列表

文字列表文字列表的主要作用是有序地编排一些信息资源，使其结构化和条理化，并以列表的样式显示出来无序列表ul默认的是小圆点的方式进行展现<!DOCTYPE html><html><head><meta charset="UTF-8"><title>无序列表ul</title></head><body>无序列表<ul> <li>第一项</li> <li>第二项</li>

2017-10-07 11:28:46 844

原创 HTML(二) 设置文本

HTML 基本结构<!DOCTYPE html><html><head><meta charset="UTF-8"><title>网页标题</title></head><body>网页主体</body></html>HTML 文本排版1 段落标签<!DOCTYPE html><html><head><meta charset="UTF-8"><title>段落标签可以自动换

2017-10-07 10:50:20 796

原创 HTML(一) 基本概念

什么是 WEB用户通过浏览器请求服务器，服务器根据用户的请求，响应用户，用户浏览器显示的网页就是服务器相应的内容。什么是 HTMLHTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) HT

2017-10-07 10:47:16 445