)
inherit 规定应该从父元素继承 display 属性的值。
第三章 CSS
第23课 CSS控制段落文本
DOCTYPE html>
< html >
< head >
< title > study23.html title >
< meta http-equiv ="keywords" content ="keyword1,keyword2,keyword3" >
< meta http-equiv ="description" content ="this is my page" >
< meta http-equiv ="content-type" content ="text/html; charset=UTF-8" >
< style type ="text/css" >
#p1 {
background-color : silver ;
text-align : center ;
letter-spacing : 15px ;
}
#p2 {
background-color : orange ;
text-indent : 20px ;
text-decoration : line-through ;
}
style >
head >
< body >
< p id ="p1" > 据有关数据显示。p >
< p id ="p2" > 不过,正当国内电商巨头们有条不紊的布局海淘之时,亚马逊,这家在中国早已被边缘化的国际电商巨鳄也在窥视着这块市场。近日,亚马逊中国方面放出风声,最快在今年第四季度开通海外产品直邮服务,届时,国内用户就能通过亚马逊中国买到从国外来的商品。p >
body >
html >
text-decoration none 默认。定义标准的文本。的一条线。
text-decoration overline 定义文本上的一条线。
text-decoration line-through 定义穿过文本下的一条线。
text-decoration blink 定义闪烁的文本。 //IE不支持火狐下可以使用
text-decoration inherit 规定应该从父元素继承text-decoration 属性的值。
text-decoration underline 定义文本下的一条线。
background-color 文本背景颜色
color 文本字体的颜色
text-indent 首行文本的缩进
text-align 文本对齐方式 left centerright
letter-spacing 字体间的距离
text-transform none默认值 不变
text-transform uppercase 文本全大写
text-transform lowercase 文本全小写
text-transform 每个单词首字母大写
word-spacing 属性可以改变字(单词)之间的标准间隔。其默认值normal 与设置值为 0 是一样的。
word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值,那么字之间的间隔就会增加。为 word-spacing 设置一个负值,会把它拉近:
white-space 值为normal时 去除空白字符
white-space 属性设置为 pre 时,浏览器不会合并空白符,也不会忽略换行符,与之相对的值是 nowrap,它会防止元素中的文本换行,除非使用了一个br 元素。在 CSS 中使用 nowrap 非常类似于 HTML 4 中用
将一个表单元格设置为不能换行,不过 white-space 值可以应用到任何元素。
当 white-space 属性设置为pre-wrap 时,浏览器不仅会保留空白符并保留换行符,还允许自动换行。
----------------------------------
Properties
属性 CSS Version
版本 Inherit From Parent
继承性 Description
简介
text-indent CSS1 有 检索或设置对象中的文本的缩进
text-overflow CSS3 无 设置或检索是否使用一个省略标记(...)标示对象内文本的溢出
text-align CSS1/CSS3有 设置或检索对象中文本的对齐方式
text-transform CSS1/CSS3 有 检索或设置对象中的文本的大小写
text-decoration CSS1/CSS3 无 复合属性。检索或设置对象中的文本的装饰,如下划线、闪烁等
text-decoration-line CSS3 无 检索或设置对象中的文本装饰线条的位置。
text-decoration-color CSS3 无 检索或设置对象中的文本装饰线条的颜色。
text-decoration-style CSS3 无 检索或设置对象中的文本装饰线条的形状。
text-shadow CSS3 有 设置或检索对象中文本的文字是否有阴影及模糊效果
text-fill-color CSS3 有 设置或检索对象中的文字填充颜色
text-stroke CSS3 有 复合属性。设置或检索对象中的文字的描边
text-stroke-width CSS3 有 设置或检索对象中的文字的描边厚度
text-stroke-color CSS3 有 设置或检索对象中的文字的描边颜色
letter-spacing CSS1 有 检索或设置对象中的文字之间的间隔
word-spacing CSS1 有 检索或设置对象中的单词之间插入的空格数。
vertical-align CSS1/CSS2 无 设置或检索对象内容的垂直对其方式
word-wrap CSS3有 设置或检索当当前行超过指定容器的边界时是否断开转行
white-space CSS1 有 设置或检索对象内空格的处理方式
direction CSS2有 检索或设置文本流的方向
unicode-bidi CSS2 无 用于同一个页面里存在从不同方向读进的文本显示。与direction属性一起使用
line-height CSS1 有 检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离
tab-size CSS3有 检索或设置对象中的制表符的长度
第24课 文字控制
DOCTYPE html>
< html >
< head >
< title > study24.html title >
< meta http-equiv ="keywords" content ="keyword1,keyword2,keyword3" >
< meta http-equiv ="description" content ="this is my page" >
< meta http-equiv ="content-type" content ="text/html; charset=UTF-8" >
< style type ="text/css" >
#text1 {
color : blue ;
font-style : italic ;
font-weight : bold ;
font-size : x-large ;
line-height : 50px ;
}
#text2 {
font : 23px/46px Microsoft YaHei ;
}
style >
head >
< body >
< div id ="text1" >
离离原上草,一岁一枯荣。< br >
野火烧不尽,春风吹又生。< br >
div >
< div id ="text2" >
远芳侵古道,晴翠接荒城。< br >
又送王孙去,萋萋满别情。< br >
div >
body >
html >
字体的英文名
宋体 SimSun
黑体 SimHei
微软雅黑 Microsoft YaHei
微软正黑体 Microsoft JhengHei
新宋体 NSimSun
新细明体 PMingLiU
细明体 MingLiU
标楷体 DFKai-SB
仿宋 FangSong
楷体 KaiTi
仿宋_GB2312 FangSong_GB2312
楷体_GB2312 KaiTi_GB2312
宋体:SimSuncss中中文字体(font-family)的英文名称
Mac OS的一些:
华文细黑:STHeiti Light [STXihei]
华文黑体:STHeiti
华文楷体:STKaiti
华文宋体:STSong
华文仿宋:STFangsong
儷黑 Pro:LiHei Pro Medium
儷宋 Pro:LiSong Pro Light
標楷體:BiauKai
蘋果儷中黑:Apple LiGothic Medium
蘋果儷細宋:Apple LiSung Light
Windows的一些:
新細明體:PMingLiU
細明體:MingLiU
標楷體:DFKai-SB
黑体:SimHei
新宋体:NSimSun
仿宋:FangSong
楷体:KaiTi
仿宋_GB2312:FangSong_GB2312
楷体_GB2312:KaiTi_GB2312
微軟正黑體:Microsoft JhengHei
微软雅黑体:Microsoft YaHei
装Office会生出来的一些:
隶书:LiSu
幼圆:YouYuan
华文细黑:STXihei
华文楷体:STKaiti
华文宋体:STSong
华文中宋:STZhongsong
华文仿宋:STFangsong
方正舒体:FZShuTi
方正姚体:FZYaoti
华文彩云:STCaiyun
华文琥珀:STHupo
华文隶书:STLiti
华文行楷:STXingkai
华文新魏:STXinwei
Windows 中的中文字体。
在默认情况下,也就是未自行安装新字体或者 Office 等文字处理软件的情况下,Windows 默认提供下列字体:
Windows 95/98/98SE 宋体、黑体、楷体_GB2312、仿宋_GB2312
Windows XP/2000/2003/ME/NT 宋体/新宋体、黑体、楷体_GB2312、仿宋_GB2312 (Windows XP SP3 宋体-PUA)
Windows Vista/7/2008 宋体/新宋体、黑体、楷体、仿宋、微软雅黑、SimSun-ExtB
那么每种字体能显示那些汉字呢?
Vista 之前的 Windows 中宋体/新宋体、黑体支持 GBK 1.0 字符集,
楷体_GB2312、仿宋_GB2312 支持 GB2312-80 字符集。
(注:Windows 3.X 只能支持 GB2312-80 字符集)
Vista 及之后的 Windows 中宋体/新宋体、黑体、楷体、仿宋、微软雅黑支持 GB18030-2000 字符集,
SimSun-ExtB 只支持 GB18030-2005 字符集扩展 B 部分。
下面对字符集进行简单的介绍:
GB2312-80 < GBK 1.0 < GB18030-2000 < GB18030-2005
GB2312-80 中的字符数量最少,GB18030-2005 字符数量最多。
GB2312-80 是最早的版本,字符数比较少;
GBK 1.0 中的汉字大致与 Unicode 1.1 中的汉字数量相同;
GB18030-2000 中的汉字大致与 Unicode 3.0 中的汉字数量相同,主要增加了扩展 A 部分;
GB18030-2005 中的汉字大致与 Unicode 4.1 中的汉字数量相同,主要增加了扩展 B 部分;
由于 Unicode 5.2 的发布,估计 GB18030 会在近期发布新版本,增加扩展 C 部分。
需要说明的是在 GB18030 中扩展 B 部分并不是强制标准。
如果想查看 GB18030 的标准文本,请访问 http://www.gb168.cn 中的强标阅读。
如果想了解 Unicode 的内容,请访问 http://www.unicode.org。
现在纠正网上普遍的一个错误:
GB18030-2000 和 GB18030-2005 都不支持单字节的欧元符号
与简体中文有关的代吗页如下:
936 gb2312 简体中文(GB2312)————其实是GBK
10008 x-mac-chinesesimp 简体中文(Mac)
20936 x-cp20936 简体中文(GB2312-80)
50227 x-cp50227 简体中文(ISO-2022)
51936 EUC-CN 简体中文(EUC)
52936 hz-gb-2312 简体中文(HZ)
54936 GB18030 简体中文(GB18030)
补充:
使用楷体_GB2312、仿宋_GB2312后,在 Windows 7/Vista/2008 中可能不再显示为对应的字体。
这是因为 Windows 7/Vista/2008 中有楷体、仿宋,默认情况下没有楷体_GB2312、仿宋_GB2312,字体名称相差“_GB2312”。
第25课 字体控制精讲
新闻标题:用黑体或无衬线(sans-serif)
新闻正文:宋体或有衬线(serif)
注意,你设置的字体,你客户机器上未必有。要没有,这是显示的就是默认字体。
所以,要注意,你选的一些好看的字体,别人没有。
所以,用设置字体,可以将选用字体,和备选字体依次在后面排列。eg:
font-family:‘xx1’,'xx2','xd3',sans-serif;
上面这句的意思就是,客户的浏览器先去调用’xx1'字体,如果客户没有,便调用'xx2',还没有,再调用'xx3',如果还是没有,就让浏览器随便调用一个sans-serif的字体就行。
第26课 背景图片
background-attachment : scroll默认值滚动 fiixed背景固定
background-color : transparent 默认值背景透明
background-color: 颜色 背景颜色
background-image: none默认值 无背景url(背景路径)背景图片
background-position: left top center right 可以选择背景所在的位置
background-repeat: repeat-x X轴平铺 repeat-y Y轴平铺 no-repeat 背景图片不重复
1.背景图与背景色,都设置,显示背景图。
2.为什么有的网站既设背景图又设背景色?
1)由于网速或代码冗余而导致网站打开速度慢的时候,图片加载不出来 即可先显示背景色。
2)还有一种情况,考虑到大屏下(如1920*1080或者更大)网站背景图不足以撑满整个显示区域,所以背景图以外的部分要显示背景色,并且背景图边缘部分必须处理妥当保证平滑过渡到背景色,不会有突兀的感觉。
DOCTYPE html>
< html >
< head >
< title > study26.html title >
< meta http-equiv ="keywords" content ="keyword1,keyword2,keyword3" >
< meta http-equiv ="description" content ="this is my page" >
< meta http-equiv ="content-type" content ="text/html; charset=UTF-8" >
< style type ="text/css" >
body {
background-color :black ;
background-image : url(book.jpg) ;
background-repeat : repeat-x ;
background-attachment : fixed ;
}
style >
head >
< body >
body >
html >
第27课 大图片背景
DOCTYPE html>
< html >
< head >
< title > study27.html title >
< meta http-equiv ="keywords" content ="keyword1,keyword2,keyword3" >
< meta http-equiv ="description" content ="this is my page" >
< meta http-equiv ="content-type" content ="text/html; charset=UTF-8" >
< style type ="text/css" >
#text1 {
border : 1px solid orange ;
width : 500px ;
height : 500px ;
background-image : url("book.jpg") ;
background-repeat : no-repeat ;
background-position : center center ;
}
#text2 {
width : 80px ;
height : 20px ;
border : 1px solid blue ;
background-image : url("bg_v3.png") ;
background-position : -5px -120px ;
}
#text3 {
width : 30px ;
height : 30px ;
border : 1px solid black ;
background-image : url("bg_v3.png") ;
background-position : -160px -523px ;
}
style >
head >
< body >
< div id ="text1" > div >
< div id ="text2" > div >
< div id ="text3" > div >
body >
html >
1.CSS控制页面时,页面以左上角为原点,向下为正Y轴,向右为正X轴
第28课 CSS选择器
DOCTYPE html>
< html >
< head >
< title > study28.html title >
< meta http-equiv ="keywords" content ="keyword1,keyword2,keyword3" >
< meta http-equiv ="description" content ="this is my page" >
< meta http-equiv ="content-type" content ="text/html; charset=UTF-8" >
< style type ="text/css" >
#test1 {
width : 100px ;
height : 50px ;
border : 1px solid blue ;
}
.test2 {
width : 100px ;
height : 50px ;
border : 1px solid red ;
}
div {
width : 200px ;
height : 200px ;
background-color : orange ;
margin-bottom : 10px ;
}
div p {
color : red ;
}
style >
head >
< body >
< div id ="test1" > test1div >
< div class ="test2" > test2div >
< div >
普通div
< p >
div 中的p
p >
div >
< p >
独立的p
p >
< div >
css 选择器:id选择器(#),class选择器(.),标签选择器(div {}),派生选择器(div p{})
div >
body >
html >
1.css选择器:id选择器(#),class选择器(.),标签选择器(div{}),派生选择器(div p{})
2.还有没有其他选择器及其用法?
第一 id #xxx
第二 class .xxx
第三 标签 div p body 等
第四 后代 div p{} .a .b{} 等 表示所有空格后面的选择器生效
第五 子代 div > p 只有大于号后面的选择器生效 不继承下去了
第六 群组选择 div,p,a{} 记住 是逗号 不是小数点,表示div p a标签都生效
第七 伪选择器 比如 a:link 让鼠标放上去的时候生效
第八 通用选择器 比如 p *{} 表示p标签后面的所有标签都生效
第九 相邻选择器 比如 p+div{} 表示 p后面的第一个div生效 后面的 都无效
第十 属性选择器 比如 p[title='aa'] {} 表示 p标签里面是否有title等于aa的属性 有的话就生效
第29课 CSS优先级
控制的越精细,优先级越高
DOCTYPE html>
< html >
< head >
< title > study29.html title >
< meta http-equiv ="keywords" content ="keyword1,keyword2,keyword3" >
< meta http-equiv ="description" content ="this is my page" >
< meta http-equiv ="content-type" content ="text/html; charset=UTF-8" >
< style type ="text/css" >
p {
color : red ;
}
.test2 {
color : green ;
}
#test1 {
color : blue ;
}
div #test1 {
color : pink ;
}
style >
head >
< body >
< div >
< p id ="test1" class ="test2" > 天天向上p >
div >
body >
html >
第30课 CSS引入方式
DOCTYPE html>
< html >
< head >
< title > study30.html title >
< meta http-equiv ="keywords" content ="keyword1,keyword2,keyword3" >
< meta http-equiv ="description" content ="this is my page" >
< meta http-equiv ="content-type" content ="text/html; charset=UTF-8" >
< link rel ="stylesheet" type ="text/css" href ="./study30.css" >
< style type ="text/css" >
body {
background-color : silver ;
}
style >
head >
< body >
< div id ="test1" style ="color : white ;"> 好好学习div >
body >
html >
@CHARSET "UTF-8" ;
@import url(study301.css) ;
#test1 {
width : 100px ;
height : 100px ;
background-color : orange ;
}
@CHARSET "UTF-8" ;
@import url(study301.css) ;
#test1 {
width : 100px ;
height : 100px ;
background-color : orange ;
}
CSS的四种引入方式
要说出CSS的引入方式,没有什么难度,但要说到为什么使用不同的引入方式,就有些学问在里面了。
CSS的引入方式最常用的有三种,
第一:在head部分加入 ,引入外部的CSS文件。
这种方法可以说是现在占统治地位的引入方法。如同IE与浏览器。这也是最能体现CSS特点的方法;最能体现DIV+CSS中的内容与显示分离的思想,也最易改版维护,代码看起来也是最美观的一种。
第二:在head部分加入
div{margin: 0;padding: 0;border:1px redsolid;}
这种方法的使用情况要少的多,最长见得就是访问量大的门户网站。或者访问量较大的企业网站的首页。与第一种方法比起来,优点突出,弊端也明显。优点:速度快,所有的CSS控制都是针对本页面标签的,没有多余的CSS命令;再者不用外链CSS文件。直接在HTML文档中读取样式。缺点就是改版麻烦些,单个页面显得臃肿,CSS不能被其他HTML引用造成代码量相对较多,维护也麻烦些。 但是采用这种方法的公司大多有钱,对他们来说用户量是关键,他们不缺人进行复杂的维护工作。
第三:直接在页面的标签里加 测试信息
这种方法现在用的很少,很多公司不了解前端技术的领导还对这种写法很痛恨。认为HTML里不能出现CSS命令。其实有时候使用下也没有什么大不了。比如通用性差,效果特殊,使用CSS命令较少,并且不常改动的地方,使用这种方法反而是很好的选择。
除了这三种常用的CSS引入方式,还有种很多人都没有见过的引入方式
@import url(my.css);
这就是第四种引入方式。在IBM工作的时候,只能使用一种Ajax框架,就是DOJO。而DOJO的CSS引用,就是采用了@import的方式。这种情况非常少,主要用在CSS文件数量庞大的负责的系统中。另外@important本身是一个CSS命令,是放在CSS文件里的,这个跟LINK标签有很大的区别。
第31课 CSS初始化
DOCTYPE html>
< html >
< head >
< title > study31.html title >
< meta http-equiv ="keywords" content ="keyword1,keyword2,keyword3" >
< meta http-equiv ="description" content ="this is my page" >
< meta http-equiv ="content-type" content ="text/html; charset=UTF-8" >
< style type ="text/css" >
ul {
border : 1px solid blue ;
}
li {
border : qpx solid red ;
}
style >
head >
< body >
< div >
相同的元素,如li ,在不同的浏览器下,显示的效果稍有不同,< br >
是因为,浏览器对各种元素的margin,border,font-size等略有不同< br >
为了杜绝这种情况,我们通过CSS强制让所有的元素的属性值都一样< br >
这样浏览器显示效果就一致了,减少了不兼容情况的发生< br >
< ul >
< li > ali >
< li > bli >
< li > cli >
< li > dli >
ul >
div >
body >
html >
腾讯的初始化代码
/*update 20140616*/
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
body{font:12px "宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%}
a{color:#172c45;text-decoration:none}
a:hover{color:#cd0200;text-decoration:underline}
em{font-style:normal}
li{list-style:none}
img{border:0;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0}
p{word-wrap:break-word}
第四章 HTML语义标签
第32课HTML学习思维导图
一、html结构:
主要包括3部分:doctype、head、body
1)doctype:文档类型,XHTML1.0提供了3中DTD供可供选择
* 过渡的(Transitional):要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法),完整代码如下:
* 严格的(Strict):要求严格的DTD,你不能使用任何表现层的标识和属性,例如 ,完整代码如下:
* 框架的(Frameset):专门针对框架页面设计使用的DTD,如果你的页面中包含有框架,需要采用这种DTD,完整代码如下:
2)head:包括meta charser和title,也能包括css。
3)body:各种div及html标签。
二、div布局
1、布局原则:从上到下、从左到右、从大到小
2、盒模型:块状元素div看成盒子。
1)盒子有自己的宽width和高height;
2)盒子与盒子之间的距离称为外边距margin:
margin后面可以跟1~4个值,按照上、右、下、左的顺序为四个方向分配值,没有分配到的取对边的值。
普通元素及父子元素在竖直方向上存在margin重叠现象,即相邻的两个普通元素,上下边距,不是简单的相加,而是取边距较大者的元素的边距值;关系为父子的两个div元素,竖直方向上如果两个元素都设有margin值,则会取margin值较大的元素的边距值。
3)盒子的厚度称为边框border。border的3要素:宽 形状 颜色。
border的3要素可单独定义,也可以和4个方向按需要结合。
4)盒子与内部内容的距离称为padding:定义方式同margin。
3、普通div无论宽度是多少都独占一行,要实现2个div并排显示,就要用浮动float,如float:left/right;
浮动元素后面再来一个普通元素,那这个元素会跑到浮动元素的下面,所以要使它正常显示,要清除浮动clear,如clear:left/right/both;
三、css效果
1、选择器
常用的有id选择器、类选择器、标签选择器、派生选择器
第一 id选择器 #xxx
第二 class选择器 .xxx
第三 标签选择器 div p body 等
第四 派生选择器 div p{} .a .b{} 等 表示所有空格后面的选择器生效
第五 子代选择器 div > p 只有大于号后面的选择器生效 不继承下去了
第六 群组选择 div,p,a{} 记住 是逗号 不是小数点,表示div p a标签都生效
第七 伪类选择器 比如 a:link 让鼠标放上去的时候生效
第八 通用选择器 比如 p *{} 表示p标签后面的所有标签都生效
第九 相邻选择器 比如 p+div{} 表示 p后面的第一个div生效 后面的 都无效
第十 属性选择器 比如 p[title='aa'] {} 表示 p标签里面是否有title等于aa的属性 有的话就生效
2、控制效果
1)段落控制:text-indent:首行缩进
text-align:水平文字方向
text-decoration:文本装饰线
letter-spacing:字符间距
text-transform:字母大小写转换
2)文本控制:color:颜色
font-style:字体样式
font-weight:字体粗细
font-size:字体大小
line-height:行高
font-family:字体
3)背景控制:background-color:背景色
background-image:背景图片
background-repeat:背景图重复
background-attachment:背景图粘贴方式
background-position:背景图位置
背景色和背景图同时设置时,优先显示背景图,同时设置为了当背景图被删除或缓冲慢时,设置一个与背景图色调相近的背景色,使网站的视觉效果不会反差太大。
当背景图比元素还大时,就需要调background-positin来实现。
4)css引入方式
①页内style标签即在head部分加入style标签:
div{margin: 0;padding: 0;border:1px red solid;}
②外部css文件,在head部分加入link:
③行内style标签,直接在页面的标签里加style属性:
测试信息
④import导入即在head部分加入@import:
@import url(xxx.css);
5)初始化
因为各浏览器对于元素有默认css参数,而且可能不一致,那么同样一段代码在不同浏览器之间显示效果就不一样。那么就需要统一对常用元素常用css参数手动设定统一效果。
四、html标签
分为2大类:无语义标签和有语义标签。
之前学过的div和span都是无语义标签,div是布局分块的块状元素,span是选择文字用的内联元素。
有语义标签,每个标签的名字就能看出它的作用,有标题h1~h6,段落p,图片img,视频embed,超链接和锚点a,无序列表ul,有序列表ol,表格table。
http://www.zixue.it/data/attachment/forum/201401/21/235003luj5trkebkd2udk5.jpeg
第33课 h标签与p标签
第34课 img标签
src 这里是路径问题。
./ 是相同目录下
../ 是返回上一级目录
DOCTYPE html>
< html >
< head >
< title > study34.html title >
< meta http-equiv ="keywords" content ="keyword1,keyword2,keyword3" >
< meta http-equiv ="description" content ="this is my page" >
< meta http-equiv ="content-type" content ="text/html; charset=UTF-8" >
head >
< body >
< img alt =" 书 " src ="book.jpg" title =" 鼠标放上去 它就显示 " >
< img alt =" 惊讶 " src ="http://www.zixue.it/uc_server/avatar.php?uid=5410&size=middle" title =" 别的网站的图片 " >
body >
html >
单闭合标签
注释标签:
严格来讲不算HTML标签的:文档声明标签
设置页面元信息的: 标签
设置网页所有链接的相对目录(如根目录)的: 标签
换行:
水平线:
图像:
表单元素
在表格table中定义一个或多个列的属性的:
标签
定义框架的一个窗口的: 标签
定义文档与外部资源的关系的: 链接标签
第35课 图片是内联还是块状
图片不能设置margin值
可以转化为块状再取消margin值
DOCTYPE html>
< html >
< head >
< title > study35.html title >
< meta http-equiv ="keywords" content ="keyword1,keyword2,keyword3" >
< meta http-equiv ="description" content ="this is my page" >
< meta http-equiv ="content-type" content ="text/html; charset=UTF-8" >
< style type ="text/css" >
img {
width : 300px ;
height : 180px ;
border : 1px solid blue ;
display : block ;
}
#test1 {
width : 500px ;
height : 300px ;
border : 1px solid blue ;
}
style >
head >
< body >
< img alt ="" src ="book.jpg" >
< img alt ="" src ="book.jpg" >
< div id ="test1" > 图片是内联元素,同时是内联替换元素,替换元素是能设置宽高的div >
body >
html >
搜索除了img还有那些替换元素 w3creplaced element
替换元素:
替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。
比如: type="text" 的是,这是一个文本输入框,换一个其他的时候,浏览器显示就不一样
(X)HTML中的 、 、
第36课 有序列表和无序列表
为了最大程度的兼容不同浏览器,通常把 li 标签设置为list-syle-type:none ,然后通过加载自定义图片来实现。
DOCTYPE html>
< html >
< head >
< title > study36.html title >
< meta http-equiv ="keywords" content ="keyword1,keyword2,keyword3" >
< meta http-equiv ="description" content ="this is my page" >
< meta http-equiv ="content-type" content ="text/html; charset=UTF-8" >
< style type ="text/css" >
ul li {
list-style-type : square ;
}
ol li {
list-style-type : upper-roman ;
}
style >
head >
< body >
< ul >
< li > aaa li >
< li > aaa li >
< li > aaa li >
< li > aaa li >
ul >
< ol >
< li > aaasda li >
< li > aadfa li >
< li > aaadsfa li >
< li > aafda li >
ol >
body >
html >
-----
小熊列表
DOCTYPE html>
< html >
< head >
< title > study36.html title >
< meta http-equiv ="keywords" content ="keyword1,keyword2,keyword3" >
< meta http-equiv ="description" content ="this is my page" >
< meta http-equiv ="content-type" content ="text/html; charset=UTF-8" >
< style type ="text/css" >
ul li {
/* list-style-type: square; */
list-style-type : none ;
background-image : url("./pic/20140917040521823_easyicon_net_32.png") ;
background-repeat : no-repeat ;
background-size :20px ;
background-position : left center ;
padding-left : 20px ;
}
ol li {
list-style-type : upper-roman ;
}
style >
head >
< body >
< ul >
< li > aaa li >
< li > aaa li >
< li > aaa li >
< li > aaa li >
ul >
< ol >
< li > aaasda li >
< li > aadfa li >
< li > aaadsfa li >
< li > aafda li >
ol >
body >
html >
第37课 整齐的表格
DOCTYPE html>
< html >
< head >
< title > study37.html title >
< meta http-equiv ="keywords" content ="keyword1,keyword2,keyword3" >
< meta http-equiv ="description" content ="this is my page" >
< meta http-equiv ="content-type" content ="text/html; charset=UTF-8" >
< style type ="text/css" >
table {
border-collapse : collapse ;/* 表格边框融合 */
}
td {
border : 1px solid blue ;
}
style >
head >
< body >
< table >
< tr >
< td colspan ="3" > sdfsdf td >
tr >
< tr >
< td > sdfsdf td >
< td > sdfsdf td >
< td > sdfsdf td >
tr >
< tr >
< td > sdfsdf td >
< td > sdfsdf td >
< td > sdfsdf td >
tr >
table >
body >
html >
第38课 超链接
a标签,内联元素
DOCTYPE html>
< html >
< head >
< title > study38.html title >
< meta http-equiv ="keywords" content ="keyword1,keyword2,keyword3" >
< meta http-equiv ="description" content ="this is my page" >
< meta http-equiv ="content-type" content ="text/html; charset=UTF-8" >
head >
< body >
< a href ="webTest.html" target ="_blank" title =" 鼠标放上来 " > 点击(在空白新窗口显示)a >
body >
html >
使用# 来实现标签,转到特定内容下
第39课 锚点
DOCTYPE html>
< html >
< head >
< title > study39.html title >
< meta http-equiv ="keywords" content ="keyword1,keyword2,keyword3" >
< meta http-equiv ="description" content ="this is my page" >
< meta http-equiv ="content-type" content ="text/html; charset=UTF-8" >
head >
< body >
< a href ="./study39.html#p1" > p1锚点a >
< a href ="./study39.html#p2" > p2锚点a >
< a href ="./study39.html#p3" > p3锚点a >
< a name ="p1" > a >
< p > 1asdfasdfp >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< a name ="p2" > a >
< p > 2asdfasdfp >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< br >
< a name ="p3" > a >
< p > 3asdfasdfp >
body >
html >
第40课 css伪类
DOCTYPE html>
< html >
< head >
< title > study40.html title >
< meta http-equiv ="keywords" content ="keyword1,keyword2,keyword3" >
< meta http-equiv ="description" content ="this is my page" >
< meta http-equiv ="content-type" content ="text/html; charset=UTF-8" >
< style type ="text/css" >
a :LINK {/* 默认颜色 */
color : gray ;
}
a :VISITED { /* 访问过的颜色 */
color : purple ;
}
a :HOVER { /* 鼠标放上去的颜色 */
color : orange ;
}
a :ACTIVE { /* 鼠标按住不放的颜色 */
color : black ;
}
style >
head >
< body >
< div >
css 允许我们针对a标签的4中状态设置各自的css 特性,叫做css 的伪类< br >
1:active一般不写
2: 一定要注意,顺序是LVHA
3: a:link可以简写为a
< / div >
< div >
< a href ="#" > 空链接a >
< a href ="#" > 空链接a >
< a href ="#" > 空链接a >
< a href ="#" > 空链接a >
< a href ="#" > 空链接a >
div >
body >
html >
第41课 字符实体
DOCTYPE html>
< html >
< head >
< title > study41.html title >
< meta http-equiv ="keywords" content ="keyword1,keyword2,keyword3" >
< meta http-equiv ="description" content ="this is my page" >
< meta http-equiv ="content-type" content ="text/html; charset=UTF-8" >
head >
< body >
< div >
在html 开发中,有一些字符,不适于直接写出,如>< < br >
一般的格式:& + 实体名 + ;< br >
实体有很多,记住常用的< br >
><"¥© < br >
div >
body >
html >
第五章 公司网页开发实战
第42课 公司网站开发之首页布局
DOCTYPE html>
< html >
< head >
< title > 首页实战title >
< meta http-equiv ="keywords" content ="keyword1,keyword2,keyword3" >
< meta http-equiv ="description" content ="this is my page" >
< meta http-equiv ="content-type" content ="text/html; charset=UTF-8" >
head >
< body >
< div id ="container" >
< div id ="header" >
< ul id ="navi" >
< li > 导航1li >
< li > 导航2li >
< li > 导航3li >
< li > 导航4li >
< li > 导航5li >
< li > 导航6li >
< li > 导航7li >
ul >
div >
< div id ="main" >
< div id ="lside" >
< div class ="subtitle" > div >
< div class ="four" > div >
< div class ="four" > div >
< div class ="four" > div >
< div class ="four" > div >
div >
< div id ="rside" >
< div class ="subtitle" > div >
< ul id ="article" >
< li > 文章1li >
< li > 文章2li >
< li > 文章3li >
< li > 文章4li >
< li > 文章5li >
< li > 文章6li >
< li > 文章7li >
ul >
div >
div >
< div id ="footer" > div >
div >
body >
html >
第43课 首页实战导航制作
css初始化:
@CHARSET "UTF-8" ;
/*css reset code */
/**** 文字大小初始化 , 使 1em=10px *****/
body {
font-size :62.5% ;
} /* for IE/Win */
html >body {
font-size :10px ;
} /* for everything else */
/* 字体边框等初始化 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
padding : 0 ;
margin : 0 ;
}
table {
border-collapse : collapse ;
border-spacing : 0 ;
}
fieldset,img {
border : 0 ;
}
img {
display :block ;
}
address,caption,cite,code,dfn,th,var {
font-weight : normal ;
font-style : normal ;
}
ol,ul {
list-style : none ;
}
caption,th {
text-align : left ;
}
h1,h2,h3,h4,h5,h6 {
font-weight : normal ;
font-size : 100% ;
}
q :before ,q :after {
content :'' ;
}
abbr,acronym { border : 0 ;
}
a {
text-decoration :none ;
}
DOCTYPE html>
< html >
< head >
< title > 首页实战title >
< meta http-equiv ="keywords" content ="keyword1,keyword2,keyword3" >
< meta http-equiv ="description" content ="this is my page" >
< meta http-equiv ="content-type" content ="text/html; charset=UTF-8" >
< link rel ="stylesheet" type ="text/css" href ="./css/reset.css" >
< style type ="text/css" >
#container {
width : 1002px ;
}
#header {
height :128px ;
background : gray url("./indexPics/top_bg.jpg") ;
}
#navi li {
width :90px ;
margin-right :1px ;
float : left ;
}
#navi a {
font-size :16px ;
font-family :Microsoft YaHei ;
color : #363636 ;
display : block ;
width : 90px ;
height : 37px ;
text-align : center ;
}
#navi a :HOVER {
color : white ;
background-image : url("./indexPics/nav_on.gif") ;
}
style >
head >
< body >
< div id ="container" >
< div id ="header" >
< img id ="logo" src ="./indexPics/logo.jpg" alt ="" >
< ul id ="navi" >
< li >< a href ="#" > 导航1a > li >
< li >< a href ="#" > 导航2a > li >
< li >< a href ="#" > 导航2a > li >
< li >< a href ="#" > 导航2a > li >
< li >< a href ="#" > 导航2a > li >
< li >< a href ="#" > 导航2a > li >
< li >< a href ="#" > 导航2a > li >
ul >
div >
< div id ="main" >
< div id ="lside" >
< div class ="subtitle" > div >
< div class ="four" > div >
< div class ="four" > div >
< div class ="four" > div >
< div class ="four" > div >
div >
< div id ="rside" >
< div class ="subtitle" > div >
< ul id ="article" >
< li > 文章1li >
< li > 文章2li >
< li > 文章3li >
< li > 文章4li >
< li > 文章5li >
< li > 文章6li >
< li > 文章7li >
ul >
div >
div >
< div id ="footer" > div >
div >
body >
html >
第44课 首页实战之main区开发
css
@CHARSET "UTF-8" ;
.clr {
clear : both ;
width : 0px ;
height : 0px ;
}
#container {
width : 1002px ;
}
#header {
height : 128px ;
background : gray url("../indexPics/top_bg.jpg") ;
}
#navi li {
width : 90px ;
margin-right : 1px ;
float : left ;
}
#navi a {
font-size : 16px ;
font-family : Microsoft YaHei ;
color : #363636 ;
display : block ;
width : 90px ;
height : 37px ;
text-align : center ;
}
#navi a :HOVER {
color : white ;
background-image : url("../indexPics/nav_on.gif") ;
}
#main {
}
#lside {
height : 480px ;
width : 694px ;
border : 1px solid gray ;
background-color : white ;
float : left ;
}
.subtitle {
height : 37px ;
background-image : url("../indexPics/index_main_top_bg.gif") ;
}
.subtitle img {
margin :5px 0 0 10px ;
float : left ;
}
.subtitle h1 {
float : left ;
margin-left :10px ;
font-size : 16px ;
font-family : Microsoft Yahei, SimHei, sans-serif ;
}
.subtitle a {
font-size :12px ;
color : gray ;
float : right ;
}
.four {
width : 326px ;
height : 200px ;
background-color : #eee ;
float : left ;
margin : 10px ;
}
.four h2 {
margin :6px 0 6px 10px ;
font-size : 16px ;
font-family : Microsoft Yahei, SimHei, sans-serif ;
}
.four img {
background-color :white ;
float : left ;
margin-left : 10px ;
padding : 6px ;
}
.four ul {
float : left ;
margin-left : 10px ;
}
.four li {
background-image : url("../indexPics/service_intro_bg.gif") ;
background-repeat : no-repeat ;
padding-left :10px ;
height : 20px ;
}
.four a {
color : gray ;
}
.four a :VISITED {
color : gray ;
}
.four a :HOVER {
text-decoration : underline ;
}
#rside {
height : 600px ;
width : 294px ;
background-color : green ;
float : right ;
}
#footer {
height : 120px ;
background-color : black ;
}
index.html
DOCTYPE html>
< html >
< head >
< title > 首页实战title >
< meta http-equiv ="keywords" content ="keyword1,keyword2,keyword3" >
< meta http-equiv ="description" content ="this is my page" >
< meta http-equiv ="content-type" content ="text/html; charset=UTF-8" >
< link rel ="stylesheet" type ="text/css" href ="./css/reset.css" >
< link rel ="stylesheet" type ="text/css" href ="./css/index.css" >
< style type ="text/css" >
style >
head >
< body >
< div id ="container" >
< div id ="header" >
< img id ="logo" src ="./indexPics/logo.jpg" alt ="" >
< ul id ="navi" >
< li >< a href ="#" > 导航1a > li >
< li >< a href ="#" > 导航2a > li >
< li >< a href ="#" > 导航2a > li >
< li >< a href ="#" > 导航2a > li >
< li >< a href ="#" > 导航2a > li >
< li >< a href ="#" > 导航2a > li >
< li >< a href ="#" > 导航2a > li >
ul >
div >
< div id ="main" >
< div id ="lside" >
< div class ="subtitle" >
< img alt ="" src ="./indexPics/circle.gif" >
< h1 > 核心业务h1 >
< a href ="#" > MORE>> a >
div >
< div class ="four" >
< h2 > 电子商务类网站建设h2 >
< img alt ="" src ="./indexPics/eshop_service.jpg" >
< ul >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
ul >
div >
< div class ="four" >
< h2 > 电子商务类网站建设h2 >
< img alt ="" src ="./indexPics/eshop_service.jpg" >
< ul >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
ul >
div >
< div class ="four" >
< h2 > 电子商务类网站建设h2 >
< img alt ="" src ="./indexPics/eshop_service.jpg" >
< ul >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
ul >
div >
< div class ="four" >
< h2 > 电子商务类网站建设h2 >
< img alt ="" src ="./indexPics/eshop_service.jpg" >
< ul >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
ul >
div >
div >
< div id ="rside" >
< div class ="subtitle" >
< img alt ="" src ="./indexPics/circle.gif" >
div >
< ul id ="article" >
< li > 文章1li >
< li > 文章2li >
< li > 文章3li >
< li > 文章4li >
< li > 文章5li >
< li > 文章6li >
< li > 文章7li >
ul >
div >
div >
< div class ="clr" > div >
< div id ="footer" > div >
div >
body >
html >
第45课 首页实战之main区(2)
css
@CHARSET "UTF-8" ;
.clr {
clear : both ;
width : 0px ;
height : 0px ;
}
#container {
width : 1002px ;
}
#header {
height : 128px ;
background : gray url("../indexPics/top_bg.jpg") ;
}
#navi li {
width : 90px ;
margin-right : 1px ;
float : left ;
}
#navi a {
font-size : 16px ;
font-family : Microsoft YaHei ;
color : #363636 ;
display : block ;
width : 90px ;
height : 37px ;
text-align : center ;
}
#navi a :HOVER {
color : white ;
background-image : url("../indexPics/nav_on.gif") ;
}
#main {
}
#lside {
height : 480px ;
width : 694px ;
border : 1px solid gray ;
background-color : white ;
float : left ;
}
.subtitle {
height : 37px ;
background-image : url("../indexPics/index_main_top_bg.gif") ;
}
.subtitle img {
margin :5px 0 0 10px ;
float : left ;
}
.subtitle h1 {
float : left ;
margin-left :10px ;
font-size : 16px ;
font-family : Microsoft Yahei, SimHei, sans-serif ;
}
.subtitle a {
font-size :12px ;
color : gray ;
float : right ;
}
.four {
width : 326px ;
height : 200px ;
background-color : #eee ;
float : left ;
margin : 10px ;
}
.four h2 {
margin :6px 0 6px 10px ;
font-size : 16px ;
font-family : Microsoft Yahei, SimHei, sans-serif ;
}
.four img {
background-color :white ;
float : left ;
margin-left : 10px ;
padding : 6px ;
}
.four ul {
float : left ;
margin-left : 10px ;
}
.four li {
background-image : url("../indexPics/service_intro_bg.gif") ;
background-repeat : no-repeat ;
padding-left :10px ;
height : 20px ;
}
.four a {
color : gray ;
}
.four a :VISITED {
color : gray ;
}
.four a :HOVER {
text-decoration : underline ;
}
#rside {
width : 294px ;
float : right ;
}
#article {
background : #eee ;
margin-top : 1px ;
padding-top : 10px ;
}
#article a {
display : block ;
height : 29px ;
padding-left :30px ;
background-image : url("../indexPics/article_head.gif") ;
background-repeat : no-repeat ;
}
#article a :HOVER {
background-image : url("../indexPics/article_on_bg.gif") ;
}
#contact {
margin-top :1px ;
height : 240px ;
background-color : #eee ;
}
#footer {
height : 120px ;
background-color : black ;
}
html
DOCTYPE html>
< html >
< head >
< title > 首页实战title >
< meta http-equiv ="keywords" content ="keyword1,keyword2,keyword3" >
< meta http-equiv ="description" content ="this is my page" >
< meta http-equiv ="content-type" content ="text/html; charset=UTF-8" >
< link rel ="stylesheet" type ="text/css" href ="./css/reset.css" >
< link rel ="stylesheet" type ="text/css" href ="./css/index.css" >
< style type ="text/css" >
style >
head >
< body >
< div id ="container" >
< div id ="header" >
< img id ="logo" src ="./indexPics/logo.jpg" alt ="" >
< ul id ="navi" >
< li >< a href ="#" > 导航1a > li >
< li >< a href ="#" > 导航2a > li >
< li >< a href ="#" > 导航2a > li >
< li >< a href ="#" > 导航2a > li >
< li >< a href ="#" > 导航2a > li >
< li >< a href ="#" > 导航2a > li >
< li >< a href ="#" > 导航2a > li >
ul >
div >
< div id ="main" >
< div id ="lside" >
< div class ="subtitle" >
< img alt ="" src ="./indexPics/circle.gif" >
< h1 > 核心业务h1 >
< a href ="#" > MORE>> a >
div >
< div class ="four" >
< h2 > 电子商务类网站建设h2 >
< img alt ="" src ="./indexPics/eshop_service.jpg" >
< ul >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
ul >
div >
< div class ="four" >
< h2 > 电子商务类网站建设h2 >
< img alt ="" src ="./indexPics/eshop_service.jpg" >
< ul >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
ul >
div >
< div class ="four" >
< h2 > 电子商务类网站建设h2 >
< img alt ="" src ="./indexPics/eshop_service.jpg" >
< ul >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
ul >
div >
< div class ="four" >
< h2 > 电子商务类网站建设h2 >
< img alt ="" src ="./indexPics/eshop_service.jpg" >
< ul >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
ul >
div >
div >
< div id ="rside" >
< div class ="subtitle" >
< img alt ="" src ="./indexPics/circle.gif" >
< h1 > 文章观点h1 >
< a href ="#" > MORE>> a >
div >
< ul id ="article" >
< li >< a href ="#" > 好文章1a > li >
< li >< a href ="#" > 好文章1a > li >
< li >< a href ="#" > 好文章1a > li >
< li >< a href ="#" > 好文章1a > li >
< li >< a href ="#" > 好文章1a > li >
ul >
< div class ="subtitle" >
< img alt ="" src ="./indexPics/circle.gif" >
< h1 > 联系我们h1 >
< a href ="#" > MORE>> a >
div >
< div id ="contact" >
div >
div >
div >
< div class ="clr" > div >
< div id ="footer" > div >
div >
body >
html >
第46课 首页实战之footer区域开发
css
@CHARSET "UTF-8" ;
.clr {
clear : both ;
width : 0px ;
height : 0px ;
}
#container {
width : 1002px ;
margin : 0 auto ;
}
#header {
height : 128px ;
background : gray url("../indexPics/top_bg.jpg") ;
}
#navi li {
width : 90px ;
margin-right : 1px ;
float : left ;
}
#navi a {
font-size : 16px ;
font-family : Microsoft YaHei ;
color : #363636 ;
display : block ;
width : 90px ;
height : 37px ;
text-align : center ;
}
#navi a :HOVER {
color : white ;
background-image : url("../indexPics/nav_on.gif") ;
}
#banner {
margin : 5px 0 ;
}
#main {
}
#lside {
height : 480px ;
width : 694px ;
border : 1px solid #eee ;
border-top :none ;
background-color : white ;
float : left ;
}
.subtitle {
height : 37px ;
background-image : url("../indexPics/index_main_top_bg.gif") ;
}
.subtitle img {
margin :5px 0 0 10px ;
float : left ;
}
.subtitle h1 {
float : left ;
margin-left :10px ;
font-size : 16px ;
font-family : Microsoft Yahei, SimHei, sans-serif ;
}
.subtitle a {
font-size :12px ;
color : gray ;
float : right ;
}
.four {
width : 326px ;
height : 200px ;
background-color : #eee ;
float : left ;
margin : 10px ;
}
.four h2 {
margin :6px 0 6px 10px ;
font-size : 16px ;
font-family : Microsoft Yahei, SimHei, sans-serif ;
}
.four img {
background-color :white ;
float : left ;
margin-left : 10px ;
padding : 6px ;
}
.four ul {
float : left ;
margin-left : 10px ;
}
.four li {
background-image : url("../indexPics/service_intro_bg.gif") ;
background-repeat : no-repeat ;
padding-left :10px ;
height : 20px ;
}
.four a {
color : gray ;
}
.four a :VISITED {
color : gray ;
}
.four a :HOVER {
text-decoration : underline ;
}
#rside {
width : 294px ;
float : right ;
}
#article {
background : #eee ;
margin-top : 1px ;
padding-top : 10px ;
}
#article a {
display : block ;
height : 29px ;
padding-left :30px ;
background-image : url("../indexPics/article_head.gif") ;
background-repeat : no-repeat ;
}
#article a :HOVER {
background-image : url("../indexPics/article_on_bg.gif") ;
}
#contact {
margin-top :1px ;
height : 240px ;
background-color : #eee ;
}
#footer {
margin-top :15px ;
height : 120px ;
}
#footer ul {
height : 40px ;
background-color : #eee ;
}
#footer li {
float : left ;
margin-top : 15px ;
margin-right : 10px ;
}
#footer address {
font-family : Microsoft Yahei, SimHei, sans-serif ;
font-size : 12px ;
margin-top : 12px ;
}
DOCTYPE html>
< html >
< head >
< title > 首页实战title >
< meta http-equiv ="keywords" content ="keyword1,keyword2,keyword3" >
< meta http-equiv ="description" content ="this is my page" >
< meta http-equiv ="content-type" content ="text/html; charset=UTF-8" >
< link rel ="stylesheet" type ="text/css" href ="./css/reset.css" >
< link rel ="stylesheet" type ="text/css" href ="./css/index.css" >
< style type ="text/css" >
style >
head >
< body >
< div id ="container" >
< div id ="header" >
< img id ="logo" src ="./indexPics/logo.jpg" alt ="" >
< ul id ="navi" >
< li >< a href ="#" > 导航1a > li >
< li >< a href ="#" > 导航2a > li >
< li >< a href ="#" > 导航2a > li >
< li >< a href ="#" > 导航2a > li >
< li >< a href ="#" > 导航2a > li >
< li >< a href ="#" > 导航2a > li >
< li >< a href ="#" > 导航2a > li >
ul >
div >
< img alt ="" src ="./indexPics/about_banner.jpg" id ="banner" >
< div id ="main" >
< div id ="lside" >
< div class ="subtitle" >
< img alt ="" src ="./indexPics/circle.gif" >
< h1 > 核心业务h1 >
< a href ="#" > MORE>> a >
div >
< div class ="four" >
< h2 > 电子商务类网站建设h2 >
< img alt ="" src ="./indexPics/eshop_service.jpg" >
< ul >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
ul >
div >
< div class ="four" >
< h2 > 电子商务类网站建设h2 >
< img alt ="" src ="./indexPics/eshop_service.jpg" >
< ul >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
ul >
div >
< div class ="four" >
< h2 > 电子商务类网站建设h2 >
< img alt ="" src ="./indexPics/eshop_service.jpg" >
< ul >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
ul >
div >
< div class ="four" >
< h2 > 电子商务类网站建设h2 >
< img alt ="" src ="./indexPics/eshop_service.jpg" >
< ul >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
ul >
div >
div >
< div id ="rside" >
< div class ="subtitle" >
< img alt ="" src ="./indexPics/circle.gif" >
< h1 > 文章观点h1 >
< a href ="#" > MORE>> a >
div >
< ul id ="article" >
< li >< a href ="#" > 好文章1a > li >
< li >< a href ="#" > 好文章1a > li >
< li >< a href ="#" > 好文章1a > li >
< li >< a href ="#" > 好文章1a > li >
< li >< a href ="#" > 好文章1a > li >
ul >
< div class ="subtitle" >
< img alt ="" src ="./indexPics/circle.gif" >
< h1 > 联系我们h1 >
< a href ="#" > MORE>> a >
div >
< div id ="contact" >
div >
div >
div >
< div class ="clr" > div >
< div id ="footer" >
< ul >
< li >< a href ="#" > 联系我们a > li >
< li >< a href ="#" > 联系我们a > li >
< li >< a href ="#" > 联系我们a > li >
< li >< a href ="#" > 联系我们a > li >
< li >< a href ="#" > 联系我们a > li >
< li >< a href ="#" > 联系我们a > li >
< li >< a href ="#" > 联系我们a > li >
ul >
< address > © 2009-2016 西安豪氧公司 版权所有 http://www.gigigig.com
京ICP备123456789号address >
div >
div >
body >
html >
第47课 首页实战之色彩微调
@CHARSET "UTF-8" ;
.clr {
clear : both ;
width : 0px ;
height : 0px ;
}
#container {
width : 1002px ;
margin : 0 auto ;
}
#header {
height : 128px ;
background : gray url("../indexPics/top_bg.jpg") ;
}
#navi li {
width : 90px ;
margin-right : 1px ;
float : left ;
}
#navi a {
font-size : 16px ;
font-family : Microsoft YaHei ;
color : #363636 ;
display : block ;
width : 90px ;
height : 37px ;
text-align : center ;
}
#navi a :HOVER {
color : white ;
background-image : url("../indexPics/nav_on.gif") ;
}
#banner {
margin : 5px 0 ;
}
#main {
}
#lside {
height : 480px ;
width : 694px ;
border : 1px solid #eee ;
border-top :none ;
background-color : white ;
float : left ;
}
.subtitle {
height : 37px ;
background-image : url("../indexPics/index_main_top_bg.gif") ;
}
.subtitle img {
margin :5px 0 0 10px ;
float : left ;
}
.subtitle h1 {
float : left ;
margin-left :10px ;
font-size : 16px ;
font-family : Microsoft Yahei, SimHei, sans-serif ;
}
.subtitle a {
font-size :12px ;
color : #888 ;
float : right ;
}
.four {
width : 326px ;
height : 200px ;
background-color : #eee ;
float : left ;
margin : 10px ;
}
.four h2 {
color :#a0a0a0 ;
margin :6px 0 6px 10px ;
font-size : 16px ;
font-family : Microsoft Yahei, SimHei, sans-serif ;
}
.four img {
background-color :white ;
float : left ;
margin-left : 10px ;
padding : 6px ;
}
.four ul {
float : left ;
margin-left : 10px ;
}
.four li {
background-image : url("../indexPics/service_intro_bg.gif") ;
background-repeat : no-repeat ;
padding-left :10px ;
height : 20px ;
}
.four a {
color : #888 ;
}
.four a :VISITED {
color : #808080 ;
}
.four a :HOVER {
color :#ff832c ;
text-decoration : underline ;
}
#rside {
width : 294px ;
float : right ;
}
#article {
background : #eee ;
margin-top : 1px ;
padding-top : 10px ;
}
#article a {
color :#888 ;
display : block ;
height : 29px ;
padding-left :30px ;
background-image : url("../indexPics/article_head.gif") ;
background-repeat : no-repeat ;
}
#article a :HOVER {
color :#ff832c ;
background-image : url("../indexPics/article_on_bg.gif") ;
}
#contact {
margin-top :1px ;
height : 240px ;
background-color : #eee ;
}
#footer {
margin-top :15px ;
height : 120px ;
}
#footer ul {
height : 40px ;
background-color : #eee ;
}
#footer li {
float : left ;
margin-top : 15px ;
margin-right : 10px ;
}
#footer a {
color : #888 ;
}
#footer a :HOVER {
color :#ff832c ;
}
#footer address {
font-family : Microsoft Yahei, SimHei, sans-serif ;
font-size : 12px ;
margin-top : 12px ;
}
DOCTYPE html>
< html >
< head >
< title > 首页实战title >
< meta http-equiv ="keywords" content ="keyword1,keyword2,keyword3" >
< meta http-equiv ="description" content ="this is my page" >
< meta http-equiv ="content-type" content ="text/html; charset=UTF-8" >
< link rel ="stylesheet" type ="text/css" href ="./css/reset.css" >
< link rel ="stylesheet" type ="text/css" href ="./css/index.css" >
< style type ="text/css" >
style >
head >
< body >
< div id ="container" >
< div id ="header" >
< img id ="logo" src =" ./indexPics/logo.jpg " alt ="" >
< ul id ="navi" >
< li >< a href ="#" > 导航1a > li >
< li >< a href ="#" > 导航2a > li >
< li >< a href ="#" > 导航2a > li >
< li >< a href ="#" > 导航2a > li >
< li >< a href ="#" > 导航2a > li >
< li >< a href ="#" > 导航2a > li >
< li >< a href ="#" > 导航2a > li >
ul >
div >
< img alt ="" src ="./indexPics/about_banner.jpg" id ="banner" >
< div id ="main" >
< div id ="lside" >
< div class ="subtitle" >
< img alt ="" src ="./indexPics/circle.gif" >
< h1 > 核心业务h1 >
< a href ="#" > MORE>> a >
div >
< div class ="four" >
< h2 > 电子商务类网站建设h2 >
< img alt ="" src ="./indexPics/eshop_service.jpg" >
< ul >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
ul >
div >
< div class ="four" >
< h2 > 电子商务类网站建设h2 >
< img alt ="" src ="./indexPics/eshop_service.jpg" >
< ul >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
ul >
div >
< div class ="four" >
< h2 > 电子商务类网站建设h2 >
< img alt ="" src ="./indexPics/eshop_service.jpg" >
< ul >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
ul >
div >
< div class ="four" >
< h2 > 电子商务类网站建设h2 >
< img alt ="" src ="./indexPics/eshop_service.jpg" >
< ul >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
ul >
div >
div >
< div id ="rside" >
< div class ="subtitle" >
< img alt ="" src ="./indexPics/circle.gif" >
< h1 > 文章观点h1 >
< a href ="#" > MORE>> a >
div >
< ul id ="article" >
< li >< a href ="#" > 好文章1a > li >
< li >< a href ="#" > 好文章1a > li >
< li >< a href ="#" > 好文章1a > li >
< li >< a href ="#" > 好文章1a > li >
< li >< a href ="#" > 好文章1a > li >
ul >
< div class ="subtitle" >
< img alt ="" src ="./indexPics/circle.gif" >
< h1 > 联系我们h1 >
< a href ="#" > MORE>> a >
div >
< div id ="contact" >
div >
div >
div >
< div class ="clr" > div >
< div id ="footer" >
< ul >
< li >< a href ="#" > 联系我们a > li >
< li >< a href ="#" > 联系我们a > li >
< li >< a href ="#" > 联系我们a > li >
< li >< a href ="#" > 联系我们a > li >
< li >< a href ="#" > 联系我们a > li >
< li >< a href ="#" > 联系我们a > li >
< li >< a href ="#" > 联系我们a > li >
ul >
< address > © 2009-2016 西安豪氧公司 版权所有 http://www.gigigig.com
京ICP备123456789号address >
div >
div >
body >
html >
第48课 利用行高实现文字居中
@CHARSET "UTF-8" ;
.clr {
clear : both ;
width : 0px ;
height : 0px ;
}
#container {
width : 1002px ;
margin : 0 auto ;
}
#header {
height : 128px ;
background : gray url("../indexPics/top_bg.jpg") ;
}
#navi li {
width : 90px ;
margin-right : 1px ;
float : left ;
}
#navi a {
font-size : 16px ;
line-height :37px ;
font-family : Microsoft YaHei ;
color : #363636 ;
display : block ;
width : 90px ;
height : 37px ;
text-align : center ;
}
#navi a :HOVER {
color : white ;
background-image : url("../indexPics/nav_on.gif") ;
}
#banner {
margin : 5px 0 ;
}
#main {
}
#lside {
height : 480px ;
width : 694px ;
border : 1px solid #eee ;
border-top :none ;
background-color : white ;
float : left ;
}
.subtitle {
height : 37px ;
background-image : url("../indexPics/index_main_top_bg.gif") ;
}
.subtitle img {
margin :5px 0 0 10px ;
float : left ;
}
.subtitle h1 {
line-height :37px ;
float : left ;
margin-left :10px ;
font-size : 16px ;
font-family : Microsoft Yahei, SimHei, sans-serif ;
}
.subtitle a {
display :block ;
line-height :37px ;
font-family :SimSun, serif ;
font-size :12px ;
color : #888 ;
float : right ;
}
.four {
width : 326px ;
height : 200px ;
background-color : #eee ;
float : left ;
margin : 10px ;
}
.four h2 {
color :#a0a0a0 ;
margin :6px 0 6px 10px ;
font-size : 16px ;
font-family : Microsoft Yahei, SimHei, sans-serif ;
}
.four img {
background-color :white ;
float : left ;
margin-left : 10px ;
padding : 6px ;
}
.four ul {
float : left ;
margin-left : 10px ;
}
.four li {
background-image : url("../indexPics/service_intro_bg.gif") ;
background-repeat : no-repeat ;
padding-left :10px ;
height : 20px ;
}
.four a {
color : #888 ;
}
.four a :VISITED {
color : #808080 ;
}
.four a :HOVER {
color :#ff832c ;
text-decoration : underline ;
}
#rside {
width : 294px ;
float : right ;
}
#article {
background : #eee ;
margin-top : 1px ;
padding-top : 10px ;
}
#article a {
color :#888 ;
display : block ;
height : 29px ;
line-height :29px ;
padding-left :30px ;
background-image : url("../indexPics/article_head.gif") ;
background-repeat : no-repeat ;
}
#article a :HOVER {
color :#ff832c ;
background-image : url("../indexPics/article_on_bg.gif") ;
}
#contact {
margin-top :1px ;
height : 240px ;
background-color : #eee ;
}
#footer {
margin-top :15px ;
height : 120px ;
}
#footer ul {
height : 40px ;
background-color : #eee ;
}
#footer li {
float : left ;
margin-top : 15px ;
margin-right : 10px ;
}
#footer a {
color : #888 ;
}
#footer a :HOVER {
color :#ff832c ;
}
#footer address {
font-family : Microsoft Yahei, SimHei, sans-serif ;
font-size : 12px ;
margin-top : 12px ;
}
DOCTYPE html>
< html >
< head >
< title > 首页实战title >
< meta http-equiv ="keywords" content ="keyword1,keyword2,keyword3" >
< meta http-equiv ="description" content ="this is my page" >
< meta http-equiv ="content-type" content ="text/html; charset=UTF-8" >
< link rel ="stylesheet" type ="text/css" href ="./css/reset.css" >
< link rel ="stylesheet" type ="text/css" href ="./css/index.css" >
< style type ="text/css" >
style >
head >
< body >
< div id ="container" >
< div id ="header" >
< img id ="logo" src ="./indexPics/logo.jpg" alt ="" >
< ul id ="navi" >
< li >< a href ="#" > 导航1a > li >
< li >< a href ="#" > 导航2a > li >
< li >< a href ="#" > 导航2a > li >
< li >< a href ="#" > 导航2a > li >
< li >< a href ="#" > 导航2a > li >
< li >< a href ="#" > 导航2a > li >
< li >< a href ="#" > 导航2a > li >
ul >
div >
< img alt ="" src ="./indexPics/about_banner.jpg" id ="banner" >
< div id ="main" >
< div id ="lside" >
< div class ="subtitle" >
< img alt ="" src ="./indexPics/circle.gif" >
< h1 > 核心业务h1 >
< a href ="#" > MORE>> a >
div >
< div class ="four" >
< h2 > 电子商务类网站建设h2 >
< img alt ="" src ="./indexPics/eshop_service.jpg" >
< ul >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
ul >
div >
< div class ="four" >
< h2 > 电子商务类网站建设h2 >
< img alt ="" src ="./indexPics/eshop_service.jpg" >
< ul >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
ul >
div >
< div class ="four" >
< h2 > 电子商务类网站建设h2 >
< img alt ="" src ="./indexPics/eshop_service.jpg" >
< ul >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
ul >
div >
< div class ="four" >
< h2 > 电子商务类网站建设h2 >
< img alt ="" src ="./indexPics/eshop_service.jpg" >
< ul >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
ul >
div >
div >
< div id ="rside" >
< div class ="subtitle" >
< img alt ="" src ="./indexPics/circle.gif" >
< h1 > 文章观点h1 >
< a href ="#" > MORE>> a >
div >
< ul id ="article" >
< li >< a href ="#" > 好文章1a > li >
< li >< a href ="#" > 好文章1a > li >
< li >< a href ="#" > 好文章1a > li >
< li >< a href ="#" > 好文章1a > li >
< li >< a href ="#" > 好文章1a > li >
ul >
< div class ="subtitle" >
< img alt ="" src ="./indexPics/circle.gif" >
< h1 > 联系我们h1 >
< a href ="#" > MORE>> a >
div >
< div id ="contact" >
div >
div >
div >
< div class ="clr" > div >
< div id ="footer" >
< ul >
< li >< a href ="#" > 联系我们a > li >
< li >< a href ="#" > 联系我们a > li >
< li >< a href ="#" > 联系我们a > li >
< li >< a href ="#" > 联系我们a > li >
< li >< a href ="#" > 联系我们a > li >
< li >< a href ="#" > 联系我们a > li >
< li >< a href ="#" > 联系我们a > li >
ul >
< address > © 2009-2016 西安豪氧公司 版权所有 http://www.gigigig.com
京ICP备123456789号address >
div >
div >
body >
html >
第49课 IE浏览器兼容
主要是字体大小的问题
bug的几种常见原因:
1 没有正确使用doctype,解决方案正确声明即可
2 个浏览器对不同标签的初始值不同,解决方案 css初始化
3 自身书写不规范,写规范即可
4 浏览器bug
IE下真正的bug
1 盒模型bug,解决方案使用严格doctype声明
2 双倍margin bug,解决方案: _display:inline此时只影响IE浏览器, 左浮元素,左margin是定义的2倍
3 不认识a:link,解决方案只定义a
4 3像素margin bug,解决方案规范浮动与清楚浮动
最终代码:
DOCTYPE html>
< html >
< head >
< title > 首页实战title >
< meta http-equiv ="keywords" content ="keyword1,keyword2,keyword3" >
< meta http-equiv ="description" content ="this is my page" >
< meta http-equiv ="content-type" content ="text/html; charset=UTF-8" >
< link rel ="stylesheet" type ="text/css" href ="./css/reset.css" >
< link rel ="stylesheet" type ="text/css" href ="./css/index.css" >
< style type ="text/css" >
style >
head >
< body >
< div id ="container" >
< div id ="header" >
< img id ="logo" src ="./indexPics/logo.jpg" alt ="" >
< ul id ="navi" >
< li >< a href ="#" > 导航1a > li >
< li >< a href ="#" > 导航2a > li >
< li >< a href ="#" > 导航2a > li >
< li >< a href ="#" > 导航2a > li >
< li >< a href ="#" > 导航2a > li >
< li >< a href ="#" > 导航2a > li >
< li >< a href ="#" > 导航2a > li >
ul >
div >
< img alt ="" src ="./indexPics/about_banner.jpg" id ="banner" >
< div id ="main" >
< div id ="lside" >
< div class ="subtitle" >
< img alt ="" src ="./indexPics/circle.gif" >
< h1 > 核心业务h1 >
< a href ="#" > MORE>> a >
div >
< div class ="four" >
< h2 > 电子商务类网站建设h2 >
< img alt ="" src ="./indexPics/eshop_service.jpg" >
< ul >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
ul >
div >
< div class ="four" >
< h2 > 电子商务类网站建设h2 >
< img alt ="" src ="./indexPics/eshop_service.jpg" >
< ul >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
ul >
div >
< div class ="four" >
< h2 > 电子商务类网站建设h2 >
< img alt ="" src ="./indexPics/eshop_service.jpg" >
< ul >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
ul >
div >
< div class ="four" >
< h2 > 电子商务类网站建设h2 >
< img alt ="" src ="./indexPics/eshop_service.jpg" >
< ul >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
< li >< a href ="#" > 方便的订单管理a > li >
ul >
div >
div >
< div id ="rside" >
< div class ="subtitle" >
< img alt ="" src ="./indexPics/circle.gif" >
< h1 > 文章观点h1 >
< a href ="#" > MORE>> a >
div >
< ul id ="article" >
< li >< a href ="#" > 好文章1a > li >
< li >< a href ="#" > 好文章1a > li >
< li >< a href ="#" > 好文章1a > li >
< li >< a href ="#" > 好文章1a > li >
< li >< a href ="#" > 好文章1a > li >
ul >
< div class ="subtitle" >
< img alt ="" src ="./indexPics/circle.gif" >
< h1 > 联系我们h1 >
< a href ="#" > MORE>> a >
div >
< div id ="contact" >
div >
div >
div >
< div class ="clr" > div >
< div id ="footer" >
< ul >
< li >< a href ="#" > 联系我们a > li >
< li >< a href ="#" > 联系我们a > li >
< li >< a href ="#" > 联系我们a > li >
< li >< a href ="#" > 联系我们a > li >
< li >< a href ="#" > 联系我们a > li >
< li >< a href ="#" > 联系我们a > li >
< li >< a href ="#" > 联系我们a > li >
ul >
< address > © 2009-2016 西安豪氧公司 版权所有 http://www.gigigig.com
京ICP备123456789号address >
div >
div >
body >
html >
@CHARSET "UTF-8" ;
.clr {
clear : both ;
width : 0px ;
height : 0px ;
}
#container {
width : 1002px ;
margin : 0 auto ;
}
#header {
height : 128px ;
background : gray url("../indexPics/top_bg.jpg") ;
}
#navi li {
width : 90px ;
margin-right : 1px ;
float : left ;
}
#navi a {
font-size : 16px ;
line-height :37px ;
font-family : Microsoft YaHei ;
color : #363636 ;
display : block ;
width : 90px ;
height : 37px ;
text-align : center ;
}
#navi a :HOVER {
color : white ;
background-image : url("../indexPics/nav_on.gif") ;
}
#banner {
margin : 5px 0 ;
}
#main {
}
#lside {
height : 480px ;
width : 694px ;
border : 1px solid #eee ;
border-top :none ;
background-color : white ;
float : left ;
}
.subtitle {
height : 37px ;
background-image : url("../indexPics/index_main_top_bg.gif") ;
}
.subtitle img {
margin :5px 0 0 10px ;
float : left ;
}
.subtitle h1 {
color :#151515 ;
line-height :37px ;
float : left ;
margin-left :10px ;
font-size : 16px ;
font-family : Microsoft Yahei, SimHei, sans-serif ;
}
.subtitle a {
display :block ;
line-height :37px ;
font-family :SimSun, serif ;
font-size :12px ;
color : #888 ;
float : right ;
}
.four {
width : 326px ;
height : 200px ;
background-color : #eee ;
float : left ;
margin : 10px ;
}
.four h2 {
color :#a0a0a0 ;
margin :6px 0 6px 10px ;
font-size : 16px ;
font-family : Microsoft Yahei, SimHei, sans-serif ;
}
.four img {
background-color :white ;
float : left ;
margin-left : 10px ;
padding : 6px ;
}
.four ul {
float : left ;
margin-left : 10px ;
}
.four li {
background-image : url("../indexPics/service_intro_bg.gif") ;
background-repeat : no-repeat ;
padding-left :10px ;
height : 20px ;
}
.four a {
font-size :12px ;
color : #888 ;
}
.four a :VISITED {
color : #808080 ;
}
.four a :HOVER {
color :#ff832c ;
text-decoration : underline ;
}
#rside {
width : 294px ;
float : right ;
}
#article {
background : #eee ;
margin-top : 1px ;
padding-top : 10px ;
}
#article a {
color :#888 ;
display : block ;
height : 29px ;
line-height :29px ;
font-size :12px ;
padding-left :30px ;
background-image : url("../indexPics/article_head.gif") ;
background-repeat : no-repeat ;
}
#article a :HOVER {
color :#ff832c ;
background-image : url("../indexPics/article_on_bg.gif") ;
}
#contact {
margin-top :1px ;
height : 240px ;
background-color : #eee ;
}
#footer {
margin-top :15px ;
height : 120px ;
}
#footer ul {
height : 40px ;
background-color : #eee ;
}
#footer li {
font-size :12px ;
float : left ;
margin-top : 15px ;
margin-right : 10px ;
}
#footer a {
color : #888 ;
}
#footer a :HOVER {
color :#ff832c ;
}
#footer address {
font-family : Microsoft Yahei, SimHei, sans-serif ;
font-size : 12px ;
margin-top : 12px ;
}
第六章 附录
第50课 色彩的表示
第51课 尺寸的表示
像素表示
百分比表示:占父元素的百分比
DOCTYPE html>
< html >
< head >
< title > study51.html title >
< meta http-equiv ="keywords" content ="keyword1,keyword2,keyword3" >
< meta http-equiv ="description" content ="this is my page" >
< meta http-equiv ="content-type" content ="text/html; charset=UTF-8" >
< style type ="text/css" >
#parent {
font-size : 10px ;
}
#p1 {
font-size : 20px ;
}
#p2 {
font-size : 1.5em ;
}
style >
head >
< body >
< div id ="parent" >
父div
< p id ="p1" > 我用px 表示文字大小p >
< p id ="p2" > 我用em 表示文字大小,em 是相对大小,是指其父元素中的1个"M"的大小,简单理解为父元素的font-size就是一个emd 单位p >
div >
body >
html >
ex (x-height ,字母 "x" 的高度 ) cm (厘米, 1 厘米 =10 毫米 ) mm (米 ) pt (点, 1 点 =1/72 英寸 )
pc(12 点活字, 1pc=12 点 )
CSS中的单位有9种,他们是百分比(%)、英寸(in)、厘米(cm)、毫米(mm)、磅数(pt)、12点活字(pc)、字母高度一半(ex)、字体高度(em)和像素(px)。 网页制作时最常用的四个尺寸单位是:px、%、em、pt,但在使用时也需要根据不同的情况进行选择。 比如字体的大小经常使用px、em和pt,元素的宽度经常使用%、px、em。
第52课 CSS画圆角
DOCTYPE html>
< html >
< head >
< title > study52.html title >
< meta http-equiv ="keywords" content ="keyword1,keyword2,keyword3" >
< meta http-equiv ="description" content ="this is my page" >
< meta http-equiv ="content-type" content ="text/html; charset=UTF-8" >
< style type ="text/css" >
#test1 {
width :300px ;
height :300px ;
border :1px solid blue ;
border-radius :15px ;
}
#test2 {
width :300px ;
height :300px ;
border :1px solid red ;
border-radius :150px ;
}
style >
head >
< body >
< div id ="test1" > CSS画圆角,目前的主流浏览器都已经支持div >
< div id ="test2" > CSS画一个圆div >
body >
html >
第53课 相对定位与绝对定位
DOCTYPE html>
< html >
< head >
< title > study53.html title >
< meta http-equiv ="keywords" content ="keyword1,keyword2,keyword3" >
< meta http-equiv ="description" content ="this is my page" >
< meta http-equiv ="content-type" content ="text/html; charset=UTF-8" >
< style type ="text/css" >
#test1 {
width : 300px ;
height : 300px ;
background-color : green ;
}
p {
margin : 0 ;
padding : 0 ;
}
#p1 {
width : 100px ;
height : 100px ;
background-color : gray ;
position : relative ;
/* top: 20px;
left: 20px; */
right : 20px ;
bottom : 20px ;
}
#p2 {
width : 100px ;
height : 100px ;
background-color : orange ;
}
#test2 {
width : 300px ;
height : 300px ;
background-color : pink ;
position : relative ;
}
#p3 {
width : 100px ;
height : 100px ;
background-color : yellow ;
position : absolute ;
right :20px ;
bottom : 30px ;
z-index : 1000 ;
}
#p4 {
width : 100px ;
height : 100px ;
background-color : gray ;
position : absolute ;
right :30px ;
bottom : 40px ;
}
style >
head >
< body >
< div id ="test1" >
< p id ="p1" > 我是p1,相对定位是指元素在其正常的位置,偏移某些像素p >
< p id ="p2" > 我是p2,相对定位是指元素在其正常的位置,偏移某些像素p >
div >
< div id ="test2" >
用绝对定位时,父元素要求有position属性才行,否则将依据父的父,父的父的父……body,< br >
哪个祖先有position就相对哪个,否则相对body
< p id ="p3" > 我是p3,绝对定位是指相对于父元素的top,right,bottom,left来定位p >
< p id ="p4" > 我是p4p >
div >
body >
html >
第54课 overflow溢出处理
overflow 属性规定当内容溢出元素框时发生的事情。
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承overflow 属性的值。
清楚浮动的方法:1. 使用空div,这只其div
css{clear:both;}。
2.通过:after伪类来清理浮动,淘宝、腾讯使用的清除浮动的代码:
.allCon {}.allCon:after { clear: both; content: "."; display: block; height: 0; visibility: hidden;}
DOCTYPE html>
< html >
< head >
< title > study54.html title >
< meta http-equiv ="keywords" content ="keyword1,keyword2,keyword3" >
< meta http-equiv ="description" content ="this is my page" >
< meta http-equiv ="content-type" content ="text/html; charset=UTF-8" >
< style type ="text/css" >
div {
width : 200px ;
height : 200px ;
border : 1px solid blue ;
overflow : auto ;
}
p {
border : 1px solid red ;
}
style >
head >
< body >
< div id ="" >
< p > 内容很多,会不会溢出越过山和大海前端是近几年发展起来的职业,很多人对前端的认识比较模糊,因此开篇我有必要介绍一番,前端(这里的前端是大众口中的前端)偏美工是视觉设计,前端偏用户是用户体验,前端偏目标导向是交互设计,前端偏技术才是大家口中的前端。和前端有关系的几样技术:PS,DW,FL,HTML+CSS+JS,看过很多人给前端的建议也差不多是学习这几种软件和HTML+CSS+JS等等了,不过我却觉得大家在把前端往一个误区引导。为什么呢?听我慢慢解释。
先来说说和前端有联系的几个职位:前端工程师、视觉设计师、用户研究工程师、交互设计师。我用一个简单的例子来分析:我们都经常在一些社区评论留言,留言的表面过程:打开留言页面——输入留言内容——点击提交按钮——留言显示在留言列表上。我这里不解释这个过程的实现原理。
---2012年10月12日修改--- 前端工程师:留言框代码怎么写?留言框的显示、一些JS动态效果的显示(可能涉及异步请求)。
视觉设计师:什么样的留言框最漂亮?怎么布局?用什么色彩还是需要做一些纹理?
用户研究工程师:用户怎么留言最舒服?很多人可能会和用户体验师混淆在一起,其实这两种人有着本质的区别,用户研究更侧重的是方法论,注重问卷调查访谈等等行为来了解用户的潜在行为习惯,而用户体验是一种行为,更侧重的是体验之后的实际感受。
交互设计师:留言过程中的反馈?输入错误后的提示,留言成功后的反馈等等。交互设计可以理解为人机对话,交互设计侧重和用户交流之后,引导用户有效操作,比如鼠标放在超链接上字体变颜色,有title提示,用户点击超链接,我们就可以称这次交互是成功的,因此交互设计的重点在于目标向导。
---修改结束---
这些分工十分细微,如果留言本是一个项目的话,需要从几个不同的角度来分析留言框,一个大型的项目比如社交网站、门户网站、行业网站这些职位都必须明确分工才能把整个项目做好,但是实际上即使条理清晰在项目开展过程中还会出现诸多意想不到的问题,什么问题呢?不在本文讨论范畴。回到话题,现在你还认为你理解意义上的前端是前端吗?我以前以为前端是美工,但是后来我发现很多前端博客都在研究一个技术JS的各大框架,我更加确定前端并不是我理解意义上的前端,我更喜欢视觉设计,但是我依旧也是一个前端,所以前端是模糊的,甚至包括了一切。
前端没什么不好
如果你觉得前端没有前(钱)途,那我劝你干别的行业吧,如果你确定你喜欢前端,那就听听我的一些看法,当然也纯属主观臆断,你可以拍砖。逛过一些前端博客,大部分文章都是在分享JS的几大框架技术,Jquery 占很多数,那其他框架呢?所以我也有个疑问,前端难道就是JS吗?最后我的答案:是的,如果你想成为纯粹意义上的前端,JS很大部分上代表了前端。
程序员眼中的前端(后端程序员和前端工程师的不同)
真正意义上学习编程是在大学的时候,那时候我的一个师长,他现在是Java工程师,他给我的建议是HTML+CSS随便玩玩就好了,我不太认同他的观点还是玩了很久,我并没有停留在HTML上,而是了解了更多技术,HTML是很多技术人都不耻的语言,甚至在一些人看来HTML连编程语言都不是,这个我在大学招新时候很有感触,他们觉得HTML不值钱又是小儿科的东西,连PHP他们都觉得2个小时就能上手,那HTML他们不用看就懂了,甚至在一些无知的人看来网站开发不算真正意义上的程序,因此也就不是程序员了,因为他们的眼中只有C/C++,很多前人的建议也是学编程从C开始学起,我现在再来看这种回答,真好笑,无知的人在骗无知的人罢了。尤其再看看那些人在做着二级、三级试卷,我当时就想说哥们儿你醒醒吧,但是我还是忍住了,因为他跟我无关。所以不要以程序员的思维来看待前端,前端是快乐的,不是挑战各种技术。前端的出发点也是用户(体验等等),程序员是以电脑为核心(算法等等)。千万要记住前端是以用户为出发点的,而在很多公司面试前端工程师时,只考察了前端工程师的编程技巧。
如果你确定你想做一个优秀的前端,我的个人建议: 首先,了解HTTP协议(HTTP
1.1),玩弄各大浏览器于鼓掌之中,你是前端工程师不要跟我说你只知道IE核心的浏览器。IE系列,Firefox ,Chrome ,Opera,Safari 都应该是你平时常用的浏览器,我经常使用chrome ,其中elements,Resources,Network,Script,....这些你了解多少?还是你从来都不知道?那赶紧去了解吧。
其次,非常熟悉HTML+CSS+JS。我把学习技术放到了第二位,因为你必须首先了解整个网络,你才会更快捷和全面的了解前端技术。
之前说过很多技术人都不耻学HTML,那我来解释为什么要先学HTML?
先和大家一起梳理各类编程语言,大致分为了六大类:网页语言、解析型语言、混合型语言、编译型语言、汇编语言和机器语言,依次越来越苦逼,无论从用户还是开发者角度看待,越深入越不能让人理解,用户体验越差,当然开发者也是用户,所以也就能理解为什么会有PHP、Python ,Ruby之类的解释型语言了。
如果你只想学习好前端技术的话,只需要了解前两层的东西,也就是网页语言和解析型语言,网页语言HTML,解析型语言PHP,Python ,Ruby至少要学会一种。如果你有更多的精力,你可以跳到更高层次,学习混合型语言C#或者Java,对于编译型语言C和C++如果你想做好前端工作,你可以不用懂得的。
为什么前端工程师需要了解这些编程语言呢?
一个WEB项目需要三种人:项目经理、前端工程师和后端程序员,他们之间需要沟通,不懂得如何沟通?如何说服?懂得能让项目进展的更顺利一些。我们回到刚才的例子——留言本,过程可以参照PHP的CGI(请求和响应等等),如果你不懂或者还是很模糊的话,我认为你还不是一个合格的前端工程师,当然你可以说你更偏向于视觉设计、用户体验之类的了。我的这种说法并不绝对,甚至如果你觉得你需要鼓励才能进步?那不好意思了,我只知道这是残酷的招聘法则,你可以去看看各公司对招聘前端的要求。
最后HTML5很重要,就犹如空气,看似不存在,好似不重要,但是缺少了空气,人类就无法生存,所以HTML是根本。
再次,艺术品的欣赏能力。PS、切图等等这些只是工具,工具只要经常用就会的,但是欣赏能力,或者只能说是天生的了,但是也要多培养自己的艺术欣赏能力,或者说让自己时髦起来。学会欣赏学会鉴别,其他的不多说了。
最后,关注前端们都在做什么?国外的我不推荐,我觉得国外的天空没那么蔚蓝。腾讯、新浪、淘宝、网易、百度……很多公司都有前端体验中心,他们的前端博客你知道不?他们在干什么?这些你了解吗,去了解他们在干什么吧,慢慢你就能培养出你的前端嗅觉了。
学会思考,自己去辨别真伪,每个人都有自己的体验,本篇文章纯属一家之言,主观臆断的说法,你可以参考并自己去验证,这也是前端工程师需要学会的东西。p >
div >
< div > div >
body >
html >
第55课 表单
DOCTYPE html>
< html >
< head >
< title > study55.html title >
< meta http-equiv ="keywords" content ="keyword1,keyword2,keyword3" >
< meta http-equiv ="description" content ="this is my page" >
< meta http-equiv ="content-type" content ="text/html; charset=UTF-8" >
head >
< body >
< div >
在用户注册,在线报名等场合时< br >
需要把用户的信息,填写并提交,这时要用到表单来收集用户的信息
div >
< form action ="http://baidu.com" method ="post" >
< p >
用户名:< input type ="text" name ="username" value ="lisi" >
p >
< p >
密码:< input type ="password" name ="password" >
p >
< p >
性别:男< input type ="radio" name ="gender" value ="male" checked ="checked" >
女< input type ="radio" name ="gender" value ="female" >
p >
< p >
爱好:篮球< input type ="checkbox" name ="hobby" value ="basketball" >
足球< input type ="checkbox" name ="hobby" value ="football" >
乒乓球< input type ="checkbox" name ="hobby" value ="pingpang" >
游泳< input type ="checkbox" name ="hobby" value ="swimming" checked ="checked" >
p >
< p >
< select name ="xueli" >
< option value ="university" > 大学option >
< option value ="shighSchool" selected ="selected" > 高中option >
< option value ="jhighSchool" > 初中option >
select >
p >
< p >
< textarea rows ="" cols ="" name ="intro" > nimanaoiabkjgslfdghfdlskjghsld textarea >
p >
< p >
上传头像:< input type ="file" name ="pic" >
p >
< p >
隐藏域:< input type ="hidden" name ="IP" value ="192.168.1.100" >
p >
< p >
< input type ="submit" value =" 提交 " >
p >
form >
body >
html >
第56课 框架集
Element (frameset) is obsolete. Its use isdiscouraged in HTML5 documents.
第57课 结课作业
DOCTYPE html>
< html >
< head >
< title > study57.html title >
< meta http-equiv ="keywords" content ="keyword1,keyword2,keyword3" >
< meta http-equiv ="description" content ="this is my page" >
< meta http-equiv ="content-type" content ="text/html; charset=UTF-8" >
head >
< body >
< pre >
作业提交:论坛
有疑问:论坛
结课实习作业--做一个仿照京东商城主页。
做出首页,栏目页,商品页
pre >
body >
html >
你可能感兴趣的:(css,html,web)
前端开发:Webpack的使用总结
三掌柜666
web前端知识汇总 webpack 前端 javascript
前言在前端开发过程中,尤其是现在前端框架的频繁使用的当下,作为前端开发者想必对于Webpack并不陌生,尤其是在使用Vue框架做前端开发的时候,打包时候必用Webpack。还有就是在前端求职面试的时候,Webpack相关的知识点也是面试官必定考察的,那么本篇博文就来分享一下关于Webpack使用相关的知识点,记录下来,方便后期查阅使用。Webpack概念Webpack其实是一个前端资源加载/打包工
什么时候用到jupyter notebook的NBConvert
老光私享
jupyter python 人工智能 windows 机器学习
JupyterNotebook的NBConvert功能是用来将JupyterNotebook文件转换为其他格式的工具。通常情况下,我们会用到NBConvert功能来将JupyterNotebook文件转换为HTML、LaTeX、PDF或其他文本格式。这样可以方便地将JupyterNotebook分享给他人,或者将其用于报告、文章、文档或其他写作目的。要使用NBConvert功能,需要在命令行中运行
【css酷炫效果】纯CSS实现球形阴影效果
冰夏之夜影
css 前端
【css酷炫效果】纯CSS实现球形阴影效果缘创作背景html结构css样式完整代码基础版进阶版(动态版)效果图想直接拿走的老板,链接放在这里:上传后更新缘创作随缘,不定时更新。创作背景刚看到csdn出活动了,赶时间,直接上代码,令人丧气的是:活动的领域有要求,不是发够就行,瞬间意志消沉。html结构css样式.button{background-image:url('a.gif');border-
UNI-APP+VUE3+VITE+VSCode开发经验及填坑记录(持续更新ING)
集成显卡
前端 项目实践 uni-app vscode ide
uni-app是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。快速开发模板unibest:最好的uniapp开发框架,由uniapp+Vue3+Ts+Vite5+UnoCss+VSCode(可选webstorm)+uni插件+wot-ui(
sql与html
就很对
sql html jvm
sql与htmlsqlite3sqlsql_callbacksql_dicthtmlhtml01ser02sersql_workhtml_ser03.htmlwebser06ser012.html011.html013.html015.html03.html04.html05.html06.htmlsqlite3sql//sqlite3_open//sqlite3_exec//sqlite3_cl
封装一个分割线组件
小张快跑。
Vue2封装功能组件 css css3 前端
最终样式Vue2代码{{title}}exportdefault{name:'SepLine',props:{title:{type:String,default:'照片元数据'//默认值}}}/*样式7*/.sep-line{position:relative;height:28px;width:100%;display:-webkit-box;display:-ms-flexbox;displ
详细介绍 Jupyter nbconvert 工具及其用法:如何将 Notebook 转换为 Python 脚本
源代码杀手
python使用技巧 python jupyter ide
nbconvert是Jupyter提供的一个非常强大的工具,允许用户将JupyterNotebook文件(.ipynb)转换成多种格式,包括Python脚本(.py)、HTML、PDF、LaTeX等。你可以通过命令行来运行nbconvert,也可以在JupyterNotebook中通过一些自定义的设置来实现转换。安装nbconvert通常情况下,nbconvert会随Jupyter一起安装,因此不
Peach-Editor,一款Web版电子病例编辑器实验版本上线了
大神1573
Peach-Editor 编辑器
经过一年多的辛苦钻研,一款web版本的电子病例编辑器基础word编辑功能版本终于和大家见面了,编辑器实现了参照传统文档编辑习惯,尽可能的还原原汁原味的文档编辑体验。目前初步完成了基础的文本编辑、表格、分页、页面控制等后续还加加入电子病例相关内容,整个编辑器的研发进度正在有序推进中,现将阶段性成果展示给大家。整体界面,沿用了传统的文档编辑习惯,菜单栏分为文件、编辑、插入、页面、审阅。编辑菜单内容主要
Web自动化测试(一)
树的鲨鱼
前端 自动化 功能测试
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档Web自动化测试(一)前言一、自动化相关理论1.什么是自动化以及它的好处2.什么是软件测试3.什么是自动化测试4.自动化测试能解决什么问题4.自动化测试分类5.什么Web项目适合做自动化测试6.Web自动化测试所属分类7.主流的Web自动化测试化工具二、Selenium1.特点2.发展历程3.环境搭建4.第一个案例三、Selenium
CSS3背景与渐变
天涯学馆
大前端&移动端全栈架构 css3 前端 css
背景与渐变background-sizebackground-size属性用于设置背景图像的尺寸。您可以指定绝对或相对单位,或者使用关键词来控制背景图像在元素背景区域中的大小。.element{background-size:[length|percentage|cover|contain]|[length|percentage][length|percentage]|auto|inherit;}
HTML:ul标签的作用
凭君语未可
Web开发 html 前端
ul标签解释解释举例效果分析``标签支持的属性1.`type`举例:效果:分析2.`class`举例:效果:分析解释在HTML中,标签表示无序列表(UnorderedList)。它用于创建一个项目列表,其中列表项通常以圆形、方形或none的图标(也称为列表项标记)进行标记。每个列表项都是使用(listitem)标签创建的。举例123效果分析在上面的例子中,我们创建了一个包含三个项目的无序列表,这些
Web3身份验证技术对数据保护的影响研究
清 晨
反侦测指纹浏览器 社交媒体 web3 ClonBrowser 跨境电商 隐私保护
Web3身份验证技术对数据保护的影响研究在这个数字化时代,我们的身份和数据安全比以往任何时候都更加重要。Web3技术以其去中心化和用户主权的核心理念,为个人数据的管理和保护提供了新的视角。本文将探讨Web3身份验证技术如何影响数据保护,并分析其对我们数字生活的影响。Web3身份验证技术简介Web3身份验证技术依托于区块链和先进的加密技术,如非对称加密算法和智能合约,为用户提供了一种全新的身份验证方
Moodle + Websoft9:创新教育的强大组合,助力教学与学习
开源软件
Moodle+Websoft9:构建未来课堂的技术基石一、Moodle:开源生态的深度解析•模块化设计:支持超800个官方插件,如H5P交互内容创作、BigBlueButton虚拟课堂,满足个性化教学需求。•学习分析引擎:内置LearningAnalyticsAPI,可集成Python/R语言进行深度学习,预测学生学业风险。•移动优先战略:MoodleApp支持离线学习、扫码签到,2023年新增A
python-flask复习(一)
胖虎是只mao
python-web python函数 python python flask
一、Python现阶段三大主流Web框架Django、Tornado、Flask对比Django主要特点是大而全,集成了很多组件(例如Models、Admin、Form等等),不管你用得到用不到,反正它全都有,属于全能型框架,通常用于大型Web应用,由于内置组件足够强大所以使用Django开发可以一气呵成,优点是大而全,缺点也就暴露出来了,这么多的资源一次性全部加载,肯定会造成一部分的资源浪费;T
【使用 Element UI 实现手动上传文件:FormData 追加文件和其他参数,支持单文件覆盖上传】
Hermione_log
vue.js elementui 前端
在开发Web应用时,文件上传是一个常见的需求。ElementUI提供了强大的el-upload组件,可以轻松实现文件上传功能。本文将详细介绍如何使用ElementUI实现以下功能:手动触发文件上传:用户选择文件后,点击按钮手动上传。使用FormData追加文件和其他参数:将文件和其他表单数据一起提交。单文件覆盖上传:只允许上传一个文件,新文件会覆盖旧文件。1.实现思路为了实现上述功能,我们需要以下
基于 Websoft9 平台的 Odoo 教学实践:助力智能制造、物流与财务会计专业教师提升教学效果
开源
Websoft9作为企业级开源软件的自动化部署与管理平台,为高校智能制造、物流与财务会计等专业提供了完整的Odoo(开源ERP)教学解决方案。以下从部署、维护及功能扩展三方面解析其核心价值:一、部署:开箱即用的企业级业务场景模拟一键构建复杂业务架构Websoft9预置了Odoo全模块集成模板,部署时可自动关联PostgreSQL数据库、Nginx负载均衡及Let'sEncryptSSL证书,还原真
从 DeepSeek 到 AI 工具箱:Websoft9 应用托管平台赋能高校教学与科研
人工智能deepseek
从DeepSeek到AI工具箱:Websoft9应用托管平台赋能高校教学与科研人工智能技术的快速发展正在重塑高校的教学与科研生态。从智能教学辅助到跨学科研究,AI工具的应用场景不断扩展,而技术落地的复杂性也带来新的挑战。在这一背景下,如何将大模型能力与多样化AI工具无缝整合,构建安全、易用的科研教学环境,成为高校数字化转型的关键命题。一、高校智能化转型的三大痛点技术门槛高•AI工具部署依赖专业运维
Websoft9 开源多应用平台:培养学生数字化能力的实战工具
开源实践
引言数字化教育转型的核心在于将技术工具与教学场景深度融合,但传统模式常因环境配置复杂、工具链割裂等问题阻碍实践教学效率。Websoft9开源多应用平台以标准化部署、多工具集成、轻量化运维为核心能力,为教育场景提供了一种技术门槛更低、协作效率更高的解决方案。本文基于实际教学需求与技术验证,探讨如何通过该平台构建数字化能力培养体系。一、技术特性与教育场景的适配性开源生态覆盖全技术栈,缩短教学准备周期平
Ubuntu 22.05编译OpenWrt 23.05实战
诺依阁
ubuntu 数据库 linux
本篇文章原文地址:https://blog.nuoyis.net/posts/9990.html哔哩哔哩视频教程:https://www.bilibili.com/video/BV1rnsCe1ErV博主基本插件版本推荐编译配置:16核心20G内存150G硬盘用于存储数据包以及编译包等前情提要1.需要准备能访问到外网域名的加速器(自己斟酌)2.准备一个安装好的ubuntu虚拟机(或者直接使用海外服
Python前端开发
PITSU
正则表达式 html css3 mysql
Python前端开发1.前端三剑客(HTML,CSS和JavaScript)1.1HTML1.1.1HTML简介HyperTextMark-upLanguage,指的是超文本标记语言;html是开发网页的语言;html中的标签大多数都是成对出现的,格式:1.1.2HTML结构第一行是文档声明部分HTML:分为页头,页身和页脚。标签大部分是成对出现1.1.3第一行文档声明部分HTML在vscode中
初识HTML中的div块元素—零基础自学网页制作
猿说前端
html web开发
块元素基础属性讲解元素是个有故事的元素,这个元素很早就出现在html超文本标记语言中,它设计之初就是为了解决网页页面布局的需求。但是遗憾的是它出生后一直怀才不遇。在我还上初中的时候,智能手机还没有出现,更没有平板电脑等移动设备。上网是通过摆在桌子上的计算机来完成的。那时,大街小巷上有好多网吧。那时,马云刚刚辞去工作准备创业。那时,发送邮件的操作都会出现在计算机课程中。那时,对页面还没有现在的跨平台
TCP、UDP、HTTP、WebSocket 和 MQTT协议区别
PHPlai
php tcp/ip udp http
目录1.TCP协议2.UDP协议3.HTTP协议4.WebSocket协议5.MQTT协议总结1.TCP协议类型:面向连接的协议。可靠性:提供可靠的数据传输,确保数据包按顺序到达。流量控制:具备流量控制与拥塞控制机制。适用场景:适合对数据传输可靠性要求高的应用,如文件传输、网页加载。2.UDP协议类型:无连接的协议。可靠性:不保证数据包的可靠传输,可能会丢失、重复或顺序错乱。流量控制:不具备流量控
物联网 - JetLinks与ThingsBoard技术选型对比
天机️灵韵
物联网 开源项目 物联网
JetLinks与ThingsBoard作为两款主流的开源物联网平台,在技术架构、功能特性及适用场景上存在显著差异。以下从技术选型的关键维度进行深度对比分析:JetLinks与ThingsBoard物联网平台的深度技术对比及选型建议,综合多个维度分析两者的核心差异与适用场景:一、技术架构与性能技术栈JetLinks:基于Java8、SpringBoot2.x、WebFlux、Netty等,采用响应
localStorage在上面位置?数据存放文件名是什么?
2301_79698214
html java
在上述代码中,数据并不是以传统文件的形式存放在某个具体的文件里,而是存储在浏览器的localStorage中。localStorage是HTML5新增的一个会话存储对象,它用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页后数据仍然存在。数据存储位置和文件名存储位置:localStorage是浏览器提供的一个存储机制,数据存储在浏览器的本地存储区域,不同的浏览器存储位置不同,例如:Chro
微前端 qiankun vite vue3
可缺不可滥
前端项目框架 前端
文章目录简介主应用qiankun-mainvue3vite子应用qiankun-app-vue2webpack5子应用qiankun-reactwebpack5子应用quankun-vue3vite遇到的问题简介主要介绍以qiankun框架为基础,vite搭建vue3项目为主应用,wepackvue2和webpackreact搭建的子应用,形成的一个微前端框架。主应用qiankun-mainvue
Python逆向爬取Tik Tok,MsToken,X-Bogus以及signature
才华是浅浅的耐心
python javascript 前端
自5月起,抖音正式开放Web接口,并不断升级风控机制。从最初的_signature参数,到增加滑块验证,再到如今的JSVM混淆处理,以及mstoken和x-bougs等参数的引入。分析发现,部分国内接口仅需提供Cookie即可访问,无需额外验签,而获取Cookie的方式多种多样,其中利用OpenCV识别滑块验证码是一种简单可行的方法。相比之下,TikTok的接口无需Cookie,但对签名的校验更加
NSSCTF_crypto_[HGAME 2022 week3]RSA attack 3
岁岁的O泡奶
python 开发语言 密码学 crypto NSSCTF 维纳攻击
[HGAME2022week3]RSAattack3题目:太多了自己去看,提示:维纳攻击首先在做这题之前你得先懂得维纳攻击的原理https://www.cnblogs.com/wandervogel/p/16805992.htmlok啊看懂了维纳攻击的原理就来开始写脚本吧fromCrypto.Util.numberimportlong_to_bytesimportgmpy2#已知参数n=50741
springBoot中myBatisPlus的使用
无足鸟丶
spring boot 后端 java
MyBatis-Plus是一个MyBatis的增强工具,在SpringBoot项目里使用它能极大提升开发效率。下面为你详细介绍在SpringBoot中使用MyBatis-Plus的步骤以及示例代码。1.创建SpringBoot项目你可以借助SpringInitializr(https://start.spring.io/)来创建一个新的SpringBoot项目,添加以下依赖:SpringWebSp
网页大屏适配 使用css的scale方法 缺点是两边会有留白;
无足鸟丶
css css3 html javascript 前端
网页大屏适配使用css的scale方法缺点是两边会有留白;Document*{margin:0;padding:0;}html,body{width:100vw;height:100vh;background-color:blue;}#container{width:100%;height:100%;}.box{width:1920px;height:1080px;background-color
Browser-Use WebUI项目启动指南
思考在马桶上
人工智能 chatgpt 经验分享 python
摘要此前发布《Browser-UseWebUI使用体验》博文后,鉴于部分朋友运行时出现问题,重新运行并整理相关内容。本文详细记录WebUI项目启动全过程,涵盖Python3.11+、Chrome浏览器及APIKeys等环境要求,Python环境检查、依赖安装等环境配置步骤,.env文件中环境变量的设置方法。同时,针对启动中如lxml.html.clean依赖缺失、连接被拒等问题给出解决方案,介绍启
java类加载顺序
3213213333332132
java
package com.demo;
/**
* @Description 类加载顺序
* @author FuJianyong
* 2015-2-6上午11:21:37
*/
public class ClassLoaderSequence {
String s1 = "成员属性";
static String s2 = "
Hibernate与mybitas的比较
BlueSkator
sql Hibernate 框架 ibatis orm
第一章 Hibernate与MyBatis
Hibernate 是当前最流行的O/R mapping框架,它出身于sf.net,现在已经成为Jboss的一部分。 Mybatis 是另外一种优秀的O/R mapping框架。目前属于apache的一个子项目。
MyBatis 参考资料官网:http:
php多维数组排序以及实际工作中的应用
dcj3sjt126com
PHP usort uasort
自定义排序函数返回false或负数意味着第一个参数应该排在第二个参数的前面, 正数或true反之, 0相等usort不保存键名uasort 键名会保存下来uksort 排序是对键名进行的
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8&q
DOM改变字体大小
周华华
前端
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml&q
c3p0的配置
g21121
c3p0
c3p0是一个开源的JDBC连接池,它实现了数据源和JNDI绑定,支持JDBC3规范和JDBC2的标准扩展。c3p0的下载地址是:http://sourceforge.net/projects/c3p0/这里可以下载到c3p0最新版本。
以在spring中配置dataSource为例:
<!-- spring加载资源文件 -->
<bean name="prope
Java获取工程路径的几种方法
510888780
java
第一种:
File f = new File(this.getClass().getResource("/").getPath());
System.out.println(f);
结果:
C:\Documents%20and%20Settings\Administrator\workspace\projectName\bin
获取当前类的所在工程路径;
如果不加“
在类Unix系统下实现SSH免密码登录服务器
Harry642
免密 ssh
1.客户机
(1)执行ssh-keygen -t rsa -C "xxxxx@xxxxx.com"生成公钥,xxx为自定义大email地址
(2)执行scp ~/.ssh/id_rsa.pub root@xxxxxxxxx:/tmp将公钥拷贝到服务器上,xxx为服务器地址
(3)执行cat
Java新手入门的30个基本概念一
aijuans
java java 入门 新手
在我们学习Java的过程中,掌握其中的基本概念对我们的学习无论是J2SE,J2EE,J2ME都是很重要的,J2SE是Java的基础,所以有必要对其中的基本概念做以归纳,以便大家在以后的学习过程中更好的理解java的精髓,在此我总结了30条基本的概念。 Java概述: 目前Java主要应用于中间件的开发(middleware)---处理客户机于服务器之间的通信技术,早期的实践证明,Java不适合
Memcached for windows 简单介绍
antlove
java Web windows cache memcached
1. 安装memcached server
a. 下载memcached-1.2.6-win32-bin.zip
b. 解压缩,dos 窗口切换到 memcached.exe所在目录,运行memcached.exe -d install
c.启动memcached Server,直接在dos窗口键入 net start "memcached Server&quo
数据库对象的视图和索引
百合不是茶
索引 oeacle数据库 视图
视图
视图是从一个表或视图导出的表,也可以是从多个表或视图导出的表。视图是一个虚表,数据库不对视图所对应的数据进行实际存储,只存储视图的定义,对视图的数据进行操作时,只能将字段定义为视图,不能将具体的数据定义为视图
为什么oracle需要视图;
&
Mockito(一) --入门篇
bijian1013
持续集成 mockito 单元测试
Mockito是一个针对Java的mocking框架,它与EasyMock和jMock很相似,但是通过在执行后校验什么已经被调用,它消除了对期望 行为(expectations)的需要。其它的mocking库需要你在执行前记录期望行为(expectations),而这导致了丑陋的初始化代码。
&nb
精通Oracle10编程SQL(5)SQL函数
bijian1013
oracle 数据库 plsql
/*
* SQL函数
*/
--数字函数
--ABS(n):返回数字n的绝对值
declare
v_abs number(6,2);
begin
v_abs:=abs(&no);
dbms_output.put_line('绝对值:'||v_abs);
end;
--ACOS(n):返回数字n的反余弦值,输入值的范围是-1~1,输出值的单位为弧度
【Log4j一】Log4j总体介绍
bit1129
log4j
Log4j组件:Logger、Appender、Layout
Log4j核心包含三个组件:logger、appender和layout。这三个组件协作提供日志功能:
日志的输出目标
日志的输出格式
日志的输出级别(是否抑制日志的输出)
logger继承特性
A logger is said to be an ancestor of anothe
Java IO笔记
白糖_
java
public static void main(String[] args) throws IOException {
//输入流
InputStream in = Test.class.getResourceAsStream("/test");
InputStreamReader isr = new InputStreamReader(in);
Bu
Docker 监控
ronin47
docker监控
目前项目内部署了docker,于是涉及到关于监控的事情,参考一些经典实例以及一些自己的想法,总结一下思路。 1、关于监控的内容 监控宿主机本身
监控宿主机本身还是比较简单的,同其他服务器监控类似,对cpu、network、io、disk等做通用的检查,这里不再细说。
额外的,因为是docker的
java-顺时针打印图形
bylijinnan
java
一个画图程序 要求打印出:
1.int i=5;
2.1 2 3 4 5
3.16 17 18 19 6
4.15 24 25 20 7
5.14 23 22 21 8
6.13 12 11 10 9
7.
8.int i=6
9.1 2 3 4 5 6
10.20 21 22 23 24 7
11.19
关于iReport汉化版强制使用英文的配置方法
Kai_Ge
iReport汉化 英文版
对于那些具有强迫症的工程师来说,软件汉化固然好用,但是汉化不完整却极为头疼,本方法针对iReport汉化不完整的情况,强制使用英文版,方法如下:
在 iReport 安装路径下的 etc/ireport.conf 里增加红色部分启动参数,即可变为英文版。
# ${HOME} will be replaced by user home directory accordin
[并行计算]论宇宙的可计算性
comsci
并行计算
现在我们知道,一个涡旋系统具有并行计算能力.按照自然运动理论,这个系统也同时具有存储能力,同时具备计算和存储能力的系统,在某种条件下一般都会产生意识......
那么,这种概念让我们推论出一个结论
&nb
用OpenGL实现无限循环的coverflow
dai_lm
android coverflow
网上找了很久,都是用Gallery实现的,效果不是很满意,结果发现这个用OpenGL实现的,稍微修改了一下源码,实现了无限循环功能
源码地址:
https://github.com/jackfengji/glcoverflow
public class CoverFlowOpenGL extends GLSurfaceView implements
GLSurfaceV
JAVA数据计算的几个解决方案1
datamachine
java Hibernate 计算
老大丢过来的软件跑了10天,摸到点门道,正好跟以前攒的私房有关联,整理存档。
-----------------------------华丽的分割线-------------------------------------
数据计算层是指介于数据存储和应用程序之间,负责计算数据存储层的数据,并将计算结果返回应用程序的层次。J
&nbs
简单的用户授权系统,利用给user表添加一个字段标识管理员的方式
dcj3sjt126com
yii
怎么创建一个简单的(非 RBAC)用户授权系统
通过查看论坛,我发现这是一个常见的问题,所以我决定写这篇文章。
本文只包括授权系统.假设你已经知道怎么创建身份验证系统(登录)。 数据库
首先在 user 表创建一个新的字段(integer 类型),字段名 'accessLevel',它定义了用户的访问权限 扩展 CWebUser 类
在配置文件(一般为 protecte
未选之路
dcj3sjt126com
诗
作者:罗伯特*费罗斯特
黄色的树林里分出两条路,
可惜我不能同时去涉足,
我在那路口久久伫立,
我向着一条路极目望去,
直到它消失在丛林深处.
但我却选了另外一条路,
它荒草萋萋,十分幽寂;
显得更诱人,更美丽,
虽然在这两条小路上,
都很少留下旅人的足迹.
那天清晨落叶满地,
两条路都未见脚印痕迹.
呵,留下一条路等改日再
Java处理15位身份证变18位
蕃薯耀
18位身份证变15位 15位身份证变18位 身份证转换
15位身份证变18位,18位身份证变15位
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
蕃薯耀 201
SpringMVC4零配置--应用上下文配置【AppConfig】
hanqunfeng
springmvc4
从spring3.0开始,Spring将JavaConfig整合到核心模块,普通的POJO只需要标注@Configuration注解,就可以成为spring配置类,并通过在方法上标注@Bean注解的方式注入bean。
Xml配置和Java类配置对比如下:
applicationContext-AppConfig.xml
<!-- 激活自动代理功能 参看:
Android中webview跟JAVASCRIPT中的交互
jackyrong
JavaScript html android 脚本
在android的应用程序中,可以直接调用webview中的javascript代码,而webview中的javascript代码,也可以去调用ANDROID应用程序(也就是JAVA部分的代码).下面举例说明之:
1 JAVASCRIPT脚本调用android程序
要在webview中,调用addJavascriptInterface(OBJ,int
8个最佳Web开发资源推荐
lampcy
编程 Web 程序员
Web开发对程序员来说是一项较为复杂的工作,程序员需要快速地满足用户需求。如今很多的在线资源可以给程序员提供帮助,比如指导手册、在线课程和一些参考资料,而且这些资源基本都是免费和适合初学者的。无论你是需要选择一门新的编程语言,或是了解最新的标准,还是需要从其他地方找到一些灵感,我们这里为你整理了一些很好的Web开发资源,帮助你更成功地进行Web开发。
这里列出10个最佳Web开发资源,它们都是受
架构师之面试------jdk的hashMap实现
nannan408
HashMap
1.前言。
如题。
2.详述。
(1)hashMap算法就是数组链表。数组存放的元素是键值对。jdk通过移位算法(其实也就是简单的加乘算法),如下代码来生成数组下标(生成后indexFor一下就成下标了)。
static int hash(int h)
{
h ^= (h >>> 20) ^ (h >>>
html禁止清除input文本输入缓存
Rainbow702
html 缓存 input 输入框 change
多数浏览器默认会缓存input的值,只有使用ctl+F5强制刷新的才可以清除缓存记录。
如果不想让浏览器缓存input的值,有2种方法:
方法一: 在不想使用缓存的input中添加 autocomplete="off";
<input type="text" autocomplete="off" n
POJO和JavaBean的区别和联系
tjmljw
POJO java beans
POJO 和JavaBean是我们常见的两个关键字,一般容易混淆,POJO全称是Plain Ordinary Java Object / Pure Old Java Object,中文可以翻译成:普通Java类,具有一部分getter/setter方法的那种类就可以称作POJO,但是JavaBean则比 POJO复杂很多, Java Bean 是可复用的组件,对 Java Bean 并没有严格的规
java中单例的五种写法
liuxiaoling
java 单例
/**
* 单例模式的五种写法:
* 1、懒汉
* 2、恶汉
* 3、静态内部类
* 4、枚举
* 5、双重校验锁
*/
/**
* 五、 双重校验锁,在当前的内存模型中无效
*/
class LockSingleton
{
private volatile static LockSingleton singleton;
pri