第四章 HTML语义标签
第32课HTML学习思维导图
一、html结构:
主要包括3部分:doctype、head、body
1)doctype:文档类型,XHTML1.0提供了3中DTD供可供选择
* 过渡的(Transitional):要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法),完整代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
* 严格的(Strict):要求严格的DTD,你不能使用任何表现层的标识和属性,例如<br>,完整代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
* 框架的(Frameset):专门针对框架页面设计使用的DTD,如果你的页面中包含有框架,需要采用这种DTD,完整代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.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标签:
<style type="text/css">
div{margin: 0;padding: 0;border:1px red solid;}
</style>
②外部css文件,在head部分加入link:
<link rel="stylesheet"type="text/css" hre="xxx.css"/>
③行内style标签,直接在页面的标签里加style属性:
<div style="border:1px redsolid;">测试信息</div>
④import导入即在head部分加入@import:
<style type="text/css">
@import url(xxx.css);
</style>
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标签
<img src =" " alt="图片" title="标题" />
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">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</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标签的:<!DOCTYPE>文档声明标签
设置页面元信息的:<meta>标签
设置网页所有链接的相对目录(如根目录)的:<base>标签
换行:<br>
水平线:<hr>
图像:<img>
表单元素<input>
在表格table中定义一个或多个列的属性的:<col>标签
定义框架的一个窗口的:<frame>标签
定义文档与外部资源的关系的:<link>链接标签
第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">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<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
替换元素:
替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。
比如:<input /> type="text" 的是,这是一个文本输入框,换一个其他的时候,浏览器显示就不一样
(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素,这些元素都没有实际的内容。
第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">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <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">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <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">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <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">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</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">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</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>1asdfasdf</p> <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>2asdfasdf</p> <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>3asdfasdf</p> </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">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <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">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</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">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body> <div id="container"> <div id="header"> <ul id="navi"> <li>导航1</li> <li>导航2</li> <li>导航3</li> <li>导航4</li> <li>导航5</li> <li>导航6</li> <li>导航7</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>文章1</li> <li>文章2</li> <li>文章3</li> <li>文章4</li> <li>文章5</li> <li>文章6</li> <li>文章7</li> </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="#">导航1</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></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>文章1</li> <li>文章2</li> <li>文章3</li> <li>文章4</li> <li>文章5</li> <li>文章6</li> <li>文章7</li> </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="#">导航1</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></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>文章1</li> <li>文章2</li> <li>文章3</li> <li>文章4</li> <li>文章5</li> <li>文章6</li> <li>文章7</li> </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="#">导航1</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航2</a></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="#">好文章1</a></li> <li><a href="#">好文章1</a></li> <li><a href="#">好文章1</a></li> <li><a href="#">好文章1</a></li> <li><a href="#">好文章1</a></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>
|
要加行高: