)
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)
WebRTC建立Description的通信的实际的原理
堕落年代
vue 杂论 webrtc 网络
一、正确流程的核心逻辑//发送端正确代码示例constsenderPC=newRTCPeerConnection();//生成Offer时立即开始收集候选✅senderPC.createOffer().then(offer=>{awaitsenderPC.setLocalDescription(offer);//触发icecandidate事件sendToReceiver(offer);});//
微服务即时通讯系统的实现(客户端)----(2)
Smile丶凉轩
项目 微服务 架构 云原生
目录1.将protobuf引入项目当中2.前后端交互接口定义2.1核心PB类2.2HTTP接口定义2.3websocket接口定义3.核心数据结构和PB之间的转换4.设计数据中心DataCenter类5.网络通信5.1定义NetClient类5.2引入HTTP5.3引入websocket6.小结7.搭建测试服务器7.1创建项目7.2服务器引入http7.3服务器引入websocket7.4服务器引
使用hel-micro微服务实现在jsp项目中引入react组件
小灰灰学编程
微服务 微服务 react.js jsp hel-micro
以下是一个完整的示例,涵盖React子应用配置、JSP主应用集成以及样式隔离的实现细节。我们将通过CSSModules和ShadowDOM确保React样式与JSP样式互不干扰。一、React子应用配置1.项目结构react-module/├──src/│├──index.js#模块入口文件│├──App.js#React组件│└──App.module.css#组件样式(CSSModules)├
Angular与ASP.NET Core:解决表单数据传输问题
t0_54coder
编程问题解决手册 angular.js asp.net 前端 个人开发
在现代Web开发中,Angular和ASP.NETCore是两个非常流行的框架,它们的组合可以构建出高效且易于维护的应用程序。然而,在使用Angular发送表单数据到ASP.NETCoreAPI时,开发者常常会遇到一些数据传输的问题。今天我们就来探讨如何正确地处理这种情况,并通过实际例子来展示解决方案。问题描述假设我们有一个Angular前端应用,需要将一个包含文件和其他数据的表单提交到ASP.N
2021-最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)---React篇
圆白菜和大白菜
前端 react 大前端 react
★★★React事件绑定原理★★★React中的setState缺点是什么呢★★★React组件通信如何实现★★★类组件和函数组件的区别★★★请你说说React的路由是什么?★★★★★React有哪些性能优化的手段?★★★★Reacthooks用过吗,为什么要用?★★★★虚拟DOM的优劣如何?实现原理?★★★★React和Vue的diff时间复杂度从O(n^3)优化到O(n),那么O(n^3)和O
Graylog日志系统超详细部署和配置
kim_liao123
部署 elasticsearch docker
Graylog日志系统部署和配置1.软件介绍:Graylog是一个开源的日志聚合、分析、审计、展现和预警工具。功能上和ELK类似,但又比ELK要简单,依靠着更加简洁,高效,部署使用简单;官方文档:https://docs.graylog.org/en/3.3/pages/users_and_roles.html以下所有部署方式都来源与官方文档2.软件准备:服务端:Mongo:存储graylog的一
docker(10、日志管理4)5、Graylog 日志系统(1、部署Graylog日志系统,2、Graylog管理日志)
junior1206
k8s docker
部署Graylog日志系统Graylog是与ELK可以相提并论的一款几种式日志管理方案,支持数据收集、检索、可视化Dashboard。将实践用Graylog来管理Docker日志Graylog架构Graylog架构如下图所示:Graylog负责接收来自各种设备和应用的日志,并未用户提供Web访问接口。Elasticsearch用于索引和保存Graylog接收到的日志MongoDB负责保存Grayl
Electron打包文件生成.exe文件打开即可使用
糕冷小美n
electron javascript 前端
1、Electron打包,包括需要下载的内容和环境配置步骤注意:Electron是一个使用JavaScript、HTML和CSS构建跨平台桌面应用程序的框架首先需要电脑环境有Node.js和npm我之前的文章有关nvm下载node的说明也可以去官网下载检查是否有node和npm环境命令node-vnpm-v输出版本号,说明安装成功2、创建Electron项目2.1创建项目目录打开命令行工具,创建一
JavaScript基础-事件对象
難釋懷
javascript 开发语言
在现代Web开发中,事件处理是实现动态和交互式网页的核心。当用户与页面进行交互时(如点击按钮、提交表单等),浏览器会生成相应的事件。为了有效地响应这些事件,JavaScript提供了事件对象,它包含了关于事件的详细信息。本文将详细介绍事件对象的概念、重要的属性和方法,并通过实例展示其应用场景。一、什么是事件对象?每当一个事件被触发时,浏览器都会创建一个事件对象,这个对象包含了该事件的所有相关信息,
node-ddk, electron 组件,任务栏,托盘,通知
eli960
node-ddk electron javascript node.js
node-ddk任务栏,托盘,通知https://blog.csdn.net/eli960/article/details/146207062也可以下载demo直接演示http://linuxmail.cn/go#node-ddk在渲染进程(既web端)操作importrenderer,{NODEDDK}from"node-ddk/renderer"letw=renderer.window//让托
Three.js世界中的三要素:场景、相机、渲染器
Front_Yue
3D技术实践指南 javascript three.js 3d
一、Three.js简介Three.js是一个基于WebGL的JavaScript库,它允许开发者在网页上创建和显示复杂的3D图形和动画,而无需用户安装任何额外的插件或软件。Three.js在Web开发中的地位非常重要,它通过提供简单直观的API,极大地降低了3D图形开发的门槛,使得开发者可以更专注于实现创意。Three.js广泛应用于游戏开发、虚拟现实、数据可视化、艺术创作等多个领域。二、场景:
致现在的我与未来的我:编程长河中的摆渡手札
星糖曙光
后端语言(node javascript vue等等) 笔记 学习 深度学习 人工智能 网络
致现在的我与未来的我:编程长河中的摆渡手札一、技术积累:从萤火微光到星河初现(约3000字)前端的启蒙:HTML/CSS与"所见即所得"的魔法“代码是诗,但诗未必能成为产品”,初学编程时,我如《禅与摩托车维修艺术》中追寻"良质"的探索者,在W3School的教程中笨拙地敲下第一行。记得仿写京东首页时,一个浮动布局的错位让我通宵调试,最终发现竟是未闭合的标签——这让我想起《代码大全》中的警示:“计算
C++在线OJ负载均衡项目
平凡的小y
c++ 开发语言
1.演示项目项目源码链接:2.项目所用技术和开发环境所用技术C++STL标准库Boost准标准库(字符串切割)cpp-httplib第三方开源网络库ctemplate第三方开源前端网页渲染库jsoncpp第三方开源序列化、反序列化库负载均衡设计MySQLCconnectAce前端在线编辑器html/css/js/jquery/ajax开发环境Ubuntu云服务器vscodeMysqlWorkben
量化交易系统中如何处理机器学习模型的训练和部署?
openwin_top
量化交易系统开发 机器学习 人工智能 量化交易
microPythonPython最小内核源码解析NI-motion运动控制c语言示例代码解析python编程示例系列python编程示例系列二python的Web神器Streamlit如何应聘高薪职位量化交易系统中,机器学习模型的训练和部署需要遵循一套严密的流程,以确保模型的可靠性、性能和安全性。以下是详细描述以及相关的示例:1.数据收集和预处理数据收集在量化交易中,数据是最重要的资产。收集的数
基于Streamlit实现的音频处理示例
大霸王龙
音视频 ffmpeg
基于Streamlit实现的音频处理示例,包含录音、语音转文本、文件下载和进度显示功能,整合了多个技术方案:一、环境准备#安装依赖库pipinstallstreamlitstreamlit-webrtcaudio-recorder-streamlitopenai-whisperpython-dotx二、完整示例代码importstreamlitasstfromaudio_recorder_stre
npm install 报错 gyp info it worked if it ends with ok npm ERR gyp verb cli [
m0_61083409
前端 html npm 前端 node.js
今天新启动一个项目,在npminstall安装依赖项时出现报错。ERR!code1npmERR!pathC:UsersAdministratorDesktope31mall-admin-webode_modulesode-sassnpmERR!commandfailednpmERR!commandC:Windowssystem32cmd.exe/d/s/cnodescripts/build.jsn
大屏自适应终极方案:基于比例缩放的完美适配实践(Vue3版)
FFF-X
html5 javascript
需求背景在数据可视化大屏开发中,我们常面临这样的挑战:如何让1920*1080的设计稿在不同分辨率设备上完美呈现?传统的响应式布局难以应对复杂的大屏元素排布,本文介绍一种基于CSS3变换的终极适配方案实现思路本方案的核心是动态比例缩放,通过以下关键步骤实现:基准比例锁定:基于设计稿宽高比(16:9)建立基准比例视口实时检测:通过resize事件监听窗口变化智能比例判断:当视口更宽时:保持高度基准,
如何实现具备自动重连与心跳检测的WebSocket客户端
FFF-X
websocket 网络协议 网络
本文介绍如何通过原生WebSocketAPI封装一个具备自动重连、心跳检测、错误恢复等能力的稳健客户端。适用于需要长连接的实时通讯场景(如聊天室、实时数据监控等)。核心功能亮点自动重连机制-指数退避策略重连心跳保活-双向检测连接活性消息可靠性-失败消息自动重发异常处理-错误分类处理机制状态管理-精准控制连接生命周期关键优化点说明事件监听优化改用addEventListener替代onopen等属性
Font Awesome 的使用
FFF-X
第一种直接使用命令npminstallfont-awesome--save进行安装,安装成功后里面包含样式和字体,然后直接引入样式就可以了入口js中引入import'font-awesome/css/font-awesome.min.css'然后就可以使用了,例如下面这样第二种cdn要使用FontAwesome图标,请在HTML页面的部分中添加以下行:1、国内推荐CDN:2、海外推荐CDN推荐第二
人民日报报道,华为云赋能智能制造助力图扑软件构造数字孪生场景
智慧园区
华为 人工智能 物联网
2021年12月22日,《人民日报》头版头条刊登了《华为云赋能智能制造,助力图扑软件构造数字孪生场景》一文,聚焦数据可视化建设发展。报道指出,数字经济发展的背后,是大数据时趋势下各地区积极贯彻国家数字经济发展战略的时代精神;高效便捷管控的背后,是云端平台各大企业的互助共赢;高质精准2D、3D数据可视图的背后,是专注于数据可视化Web组态开发的厦门图扑软件科技有限公司。并对厦门图扑软件科技有限公司进
通过浏览器扩展获取本机 MAC 地址
云水木石
macos
在Web技术主导的B/S架构项目中,获取终端设备硬件信息(如MAC地址)的需求经常会碰到。尽管Electron/CEF等混合应用框架可通过系统级API轻松实现,但纯浏览器环境下的硬件信息获取则不那么容易。因为现代浏览器基于沙箱机制和隐私保护策略,严格禁止网页直接访问底层硬件资源。但用户的需求不能不考虑,特别是在做商业项目时,这时就不得不给出方案,总结下来有如下三种方案:扩展JSAPI:比如以前在做
vLLM - 查看模型是否支持
云客Coder
人工智能
支持的模型:https://docs.vllm.ai/en/latest/models/supported_models.html要确定是否支持给定模型,您可以检查HF存储库中的config.json文件。如果"architectures"字段包含下面列出的模型架构,那么理论上应该支持它。查看模型架构查看模型的config.json中的architecturescat~/.cache/huggin
JavaScript基础-删除事件(解绑事件)
難釋懷
javascript 前端 开发语言
在现代Web开发中,动态地添加和移除事件处理器是构建交互式网页的关键技能之一。虽然添加事件处理器相对直观,但了解如何有效地移除或“解绑”这些处理器同样重要。这不仅有助于优化性能,还能防止潜在的内存泄漏问题。本文将介绍几种方法来删除JavaScript中的事件处理器,并探讨它们的应用场景及最佳实践。一、为什么需要删除事件?随着页面复杂度的增加,不恰当地管理事件处理器可能会导致性能下降或出现意外行为。
Python爬虫笔记一(来自MOOC) Requests库入门
小灰不停前进
# Python python pycharm 爬虫
Python爬虫笔记一通用代码框架:importrequestsdefgetHTMLText(url):try:r=requests.get(url,timeput=30)r.raise_for_status()#如果状态不是200,引发HTTPError异常r.encoding=r.apparemt_encodingreturnr.textexcept:return"产生异常"if__name_
SenseVoice 部署记录
安静六角
开源软件
最近试用了SenseVoice(阿里团队开源的语音转文字)效果可以,可以本地部署,有webui界面,测试了万字以上的转换效果可以。首先部署好conda环境和cuda,这个可以查看他人的文章。步骤1.创建虚拟环境:condacreate-nmainenvpython=3.102.然后安装依赖condaactivatemainenvpipinstall-rC:\Users\xx\Documents\P
form 表单内容序列化成一个字符串
sayyy
jquery jquery
html关键字1:关键字2:关键字3:form表单数据转json对象$('#form1').serialize()ajax调用时提交表单数据$.ajax({url:"http://localhost:8080/xxx",type:"POST",data:$('#form1').serialize(),success:function(data){$('#serverResponse').html(
Android Token的原理和本地安全存储
Ya-Jun
android 安全
AndroidToken的原理和本地安全存储前言在移动应用开发中,Token是实现用户身份验证和授权的重要机制。本文将深入介绍Token的原理,以及在Android平台上如何安全地存储Token,帮助开发者构建可靠的身份验证系统。基础知识1.Token概述1.1Token的作用身份验证授权访问无状态设计1.2Token类型AccessTokenRefreshTokenJWT(JSONWebToke
中国大陆网站用了lightHouse之后还有必要用WebPageTest么?
混血哲谈
网络
对于中国大陆的网站,即使已使用Lighthouse进行性能优化,WebPageTest仍有不可替代的价值。两者并非互斥,而是互补工具,适用于不同维度的性能分析。以下是具体原因和场景说明:一、核心结论:Lighthouse与WebPageTest的定位差异工具核心价值适用场景中国大陆场景的局限性Lighthouse提供代码级优化建议(如压缩资源、渲染阻塞修复)本地开发调试、快速生成优化清单仅反映本地
py之某website之music搜索接口
我不是程序员~~~~
爬虫项目实战 开发语言
fromlxmlimportetreeimportrequestsheaders={"accept":"text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7","accept-lan
HTTP核心知识
Sean2077
HTTP http
理解HTTP协议是优化Web应用性能、调试问题和实现高效通信的基础。以下是前端开发者需要掌握的核心HTTP知识:1.HTTP基础概念请求与响应模型理解客户端(浏览器)发送HTTP请求,服务器返回HTTP响应的基本流程。HTTP方法(Methods)GET:获取资源(幂等操作)POST:提交数据(非幂等)PUT:更新资源DELETE:删除资源HEAD:仅获取响应头OPTIONS:查看服务器支持的通信
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