网页学习之实战

最新推荐文章于 2024-02-18 12:10:32 发布

他说少年如歌

最新推荐文章于 2024-02-18 12:10:32 发布

阅读量299

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_27437781/article/details/53326404

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>首页实战</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布尔教育 http://www.itbool.com" />
<link rel="stylesheet" type="text/css" href="1.css"/>
<link rel="stylesheet" type="text/css" href="./index.css"/>
</head>
    <body>
    	<div id = "continer">
    		<div id = "header">
    			<img src="./images/logo.jpg" alt="" id = "logo" />
    			<ul id="nav">
    				<li><a href="#">导航1</a></li>
    				<li><a href="#">导航2</a></li>
    				<li><a href="#">导航3</a></li>
    				<li><a href="#">导航4</a></li>
    				<li><a href="#">导航5</a></li>
    				<li><a href="#">导航6</a></li>
    				<li><a href="#">导航7</a></li>
    			</ul>
    		</div>
                   <img src="./images/about_banner.jpg" alt="" id="banner" />
    		<div id = "main">
    			<div id = "lside">
    				<div class = "subtitle">
    					<img src="./images/circle.gif" alt=""/>
    					<h1>核心业务</h1>
    					<a href="#">MORE>></a>
    				</div>
    				<div class="four">
    					<h2>电子商务网站建设</h2>
    					<img src="./images/eshop_service.jpg" alt="" />
    					<ul>
    						<li><a href="#">方便的订单管理1</a></li>
                                                              <li><a href="#">方便的订单管理2</a></li>
                                                              <li><a href="#">方便的订单管理3</a></li>
                                                              <li><a href="#">方便的订单管理4</a></li>
                                                              <li><a href="#">方便的订单管理5</a></li>
    					</ul>
    				</div>
    				<div class="four">
    					<h2>电子商务网站建设</h2>
    					<img src="./images/eshop_service.jpg" alt="" />
    					<ul>
    						<li><a href="#">方便的订单管理1</a></li>
                                                              <li><a href="#">方便的订单管理2</a></li>
                                                              <li><a href="#">方便的订单管理3</a></li>
                                                              <li><a href="#">方便的订单管理4</a></li>
                                                              <li><a href="#">方便的订单管理5</a></li>
    					</ul>
    				</div>
    				<div class="four">
    					<h2>电子商务网站建设</h2>
    					<img src="./images/eshop_service.jpg" alt="" />
    					<ul>
    						<li><a href="#">方便的订单管理1</a></li>
                                                              <li><a href="#">方便的订单管理2</a></li>
                                                              <li><a href="#">方便的订单管理3</a></li>
                                                              <li><a href="#">方便的订单管理4</a></li>
                                                              <li><a href="#">方便的订单管理5</a></li>
    					</ul>
    				</div>
    				<div class="four">
    					<h2>电子商务网站建设</h2>
    					<img src="./images/eshop_service.jpg" alt="" />
    					<ul>
    						<li><a href="#">方便的订单管理1</a></li>
                                                              <li><a href="#">方便的订单管理2</a></li>
                                                              <li><a href="#">方便的订单管理3</a></li>
                                                              <li><a href="#">方便的订单管理4</a></li>
                                                              <li><a href="#">方便的订单管理5</a></li>
    					</ul>
    				</div>
    			</div>
    			<div id = "rside">
                                     <div class = "subtitle">
                                            <img src="./images/circle.gif" alt=""/>
                                            <h1>文章观点</h1>
                                            <a href="#">MORE>></a>
                                    </div>            
    				<ul id="art">
    					<li><a href="#">文章1</a></li>
                                                    <li><a href="#">文章2</a></li>
                                                    <li><a href="#">文章3</a></li>
                                                    <li><a href="#">文章4</a></li>
                                                    <li><a href="#">文章5</a></li>
    				</ul>
                                    <div class = "subtitle">
                                            <img src="./images/circle.gif" alt=""/>
                                            <h1>联系我们</h1>
                                            <a href="#">MORE>></a>
                                    </div>     
                                    <div id = "contact"></div> 
    			</div>
                                
    			<div class="clr"></div>
    		</div>
    		<div id = "footer">
                                <ul>
                                          <li><a href="">联系我们1</a></li>
                                          <li><a href="">联系我们2</a></li>
                                          <li><a href="">联系我们3</a></li>
                                          <li><a href="">联系我们4</a></li>
                                          <li><a href="">联系我们5</a></li>
                                          <li><a href="">联系我们6</a></li>
                                          <li><a href="">联系我们7</a></li>
                                </ul>   
                                <address>&copy; © 2006-2009 北京市灵犀慧通科技有限公司 版权所有 http://www.lionhit.com 京ICP备07020337号 </address>
            </div>

    	</div>
    </body>
</html>

.clr{
	clear: both;
	width: 0px;
	height: 0px;
}

#continer{
		margin: 0 auto;
		width:1002px;
	}
	#header{
		height: 128px;
		background: gray url(./images/top_bg.jpg);
	}
	#nav li{
		
		width: 90px;
		margin-right: 1px;
		float:left;
	}
	#nav a{
		font-size: 16px;
		line-height: 37px;
		font-family: '微软雅黑';
		color: #363635;
		display: block;
		width: 90px;
		height: 37px;
		text-align: center;;
	}
	#nav a:hover{
		color:white;
		background: url(./images/nav_on.gif);
	}

	#banner{
		margin: 6px 0;
	}

	#main{
		
	}

	#lside{
		height: 480px;
		width: 694px;
		border: 1px solid #EEE;
		float:left;
		border-top: none;
	}

	.subtitle{
		height: 37px;
		background: gray url(./images/index_main_top_bg.gif);
	}

	.subtitle img{
		margin: 5px 0  0 10px;
		float:left;
	}

	.subtitle h1{
		color: #151515;
		float:left;
		line-height: 37px;
		margin-left: 10px;
		font-size: 16px;
		font-family: 'Microsoft Yahei',SimHei,sans-serif;
	}

	.subtitle a{
		line-height: 37px;
		color:#888;
		font-size: 12px;
		float:right; 
	}

	.four{
		width: 326px;
		height: 200px;
		background: #EEE;
		margin: 10px;
		float:left;
	}

	.four img{
		float:left;
		margin-left: 10px;
		padding: 6px;
		background: white;
	}

	.four ul {
		float:left;
		margin-left: 10px;
	}

	.four li {
		background: url(./images/service_intro_bg.gif)  no-repeat;
		padding-left: 6px;
		height: 20px;
	}

	.four a{
		font-size: 12px;      /*若是浏览器的默认值不一样  则可以提前设定字体的大小*/
		color:#888;
	}

	.four a:visited{
		color:#808080;
	}

	.four a:hover{
		color: #FF832C;
	}

	.four h2{
		color: #A0A0A0;
		margin: 6px 0 6px 10px;
		font-size: 16px;
		font-family: 'Microsoft Yahei',SimHei,sans-serif;
	}



	#rside{
		width: 294px;
		
		float: right;
	}

	#art {
		background: #EEE;
		margin-top: 1px;
		padding-top: 10px;
	}

	#art a {
		line-height: 29px;
		color: #888;
		display: block;
		height: 29px;
		padding-left: 30px;
		background: url(./images/article_head.gif)  no-repeat;
	}

	#art a:hover{
		color: #FF832C;
		background: url(./images/article_on_bg.gif);
	}

	#contact {
		height: 249px;
		background: #EEE;
		margin-top: 1px;
	}

	#footer{

		height: 120px;
		margin-top: 15px;
	}

	#footer ul {
		height: 40px;
		background: #EEE;
	}

	#footer li {
		float: left;
		margin-top: 15px;
		margin-right: 10px; 
	}

	#footer address{
		margin-top: 10px;
		font-size: 12px;
		font-family: '微软雅黑',sans-serif;
	}