<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>t3</title>
<link rel="stylesheet" href="./yh.css" />
<style>
#container{
width: 1002px;
margin: 0 auto;
}
#header{
height: 128px;
border:1px solid #eee;
background: url(./imgs/titlebg.png);
}
#nav ul{
height: 110px;
}
#nav li{
float: left;
width: 90px;
}
#nav a{
text-align: center;
display: block;
font-family: '微软雅黑';
font-size: 16px;
}
#nav a:hover{
background: url(./imgs/nav_hover.png);
}
#left{
width: 680px;
height: 600px;
border: 1px solid #eee;
float: left;
}
#right{
width: 300px;
height: 600px;
border: 1px solid #eee;
float: right;
}
#footer{
height: 120px;
border: 1px solid #eee;
background: #eee;
}
.clear_float{
width: 0;
height: 0;
clear: both;
}
.subtitle{
height: 49px;
background: #eee;
}
.subtitle img{
float: left;
margin: 12px 10px;
}
.subtitle h1{
float: left;
font-size: 16px;
margin: 10px 0px 10px 1px;
}
.subtitle a{
float: right;
}
.four{
width: 335px;
height: 270px;
float: left;
border: 1px solid #eee;
}
.four img{
width: 200px;
float: left;
padding: 3px;
background: white;
}
.four li{
float: left;
/*padding-left: 19px;*/
height: 24px;
}
.four a{
background: url(./imgs/point_focus.png) no-repeat;
font-size: 16px;
font-family: '微软雅黑';
padding-left: 18px;
}
#art ul{
margin-top: 1px;
padding-top: 10px;
height: 200px;
border: 1px solid #eee;
}
#art li{
height: 20px;
}
#art a{
background: url(./imgs/point_focus.png) no-repeat;
padding-left: 18px;
font-family: '微软雅黑';
font-size: 16px;
}
#footer ul{
height: 30px;
border: 1px solid #eee;
margin-top: 10px;
/*margin-right: 10px;*/
}
#footer li{
float: left;
margin-right: 15px;
}
#footer a{
font-family: '微软雅黑';
font-size: 16px;
}
#footer address{
font-family: '微软雅黑';
font-size: 16px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<img src="./imgs/logo.png" alt="" />
<div id="nav">
<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>
</ul>
</div>
</div>
<div id="main">
<div id="left">
<div class="subtitle">
<img src="./imgs/point.png" alt="" />
<h1>核心业务</h1>
<a href="#">More>></a>
</div>
<div class="four">
<h2>电子商务网站1</h2>
<img src="./imgs/2.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>
<li><a href="#">随便吧无聊啊6</a></li>
</ul>
</div>
<div class="four">
<h2>电子商务网站1</h2>
<img src="./imgs/2.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>
<li><a href="#">随便吧无聊啊6</a></li>
</ul>
</div>
<div class="four">
<h2>电子商务网站1</h2>
<img src="./imgs/2.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>
<li><a href="#">随便吧无聊啊6</a></li>
</ul>
</div>
<div class="four">
<h2>电子商务网站1</h2>
<img src="./imgs/2.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>
<li><a href="#">随便吧无聊啊6</a></li>
</ul>
</div>
</div>
<div id="right">
<div class="subtitle">
<img src="./imgs/point.png" alt="" />
<h1>核心业务</h1>
<a href="#">More>></a>
</div>
<div id="art">
<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>
</ul>
</div>
<div id="contact">
<div class="subtitle">
<img src="./imgs/point.png" alt="" />
<h1>核心业务</h1>
<a href="#">More>></a>
</div>
</div>
</div>
</div>
<div class="clear_float"></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>
</ul>
<address>
版权所有：©2003-2016 摔角网 版权所有 浙ICP备12034799号-3
</address>
</div>
</div>
</body>
</html>
分享到：
相关推荐
提供给初学者使用学习的前端web代码，可以快速熟悉的掌握
HTML综合练习题一公开课.docx
HTML简单设计
Html5程序设计基础教程(练习题参考答案)Html5程序设计基础教程(练习题参考答案)Html5程序设计基础教程(练习题参考答案)Html5程序设计基础教程(练习题参考答案)Html5程序设计基础教程(练习题参考答案)Html5程序设计...
Python综合练习答案.html
第13课 综合练习.html
此文件是使用HTML和CSS写的一个网页，整合了前面学习html和css中学到的大部分知识，是一个很有意思的项目，这一整套学习都是在b站中看的 李立超 老师的视频学习的，非常建议初学者看看：...
配合HTML学习笔记9使用
项目负责人 联系电话 项目支出细化预算(单位：万元)项目类别 发展性专项 建设性专项 基本建设和大修理项目 合计 项目前期费用 征地费 建筑工程费 安装工程费 设备等购置费 原 材 料 其他费用 各种建筑...
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于...
2021-2022-1-21级高级语言程序设计-综合练习参考答案.html
测试一下js的api阶段学的怎么样
HTML css 基础综合练习 有大量练习的页面 欢迎下载
...
...
2023.3.13
--*-- 1 单元目标 2 教学内容 3 动手实践 4 课堂小结 单元目标 能灵活使用HTML、CSS设计网页 能力目标 综合使用HTML、CSS设计网页 知识目标 《CSS网页样式设计与制作》 参考资料 2 教学内容 1 单元目标 3 动手实践 4...
适合前端刚入门的小白，对前端感兴趣的小伙伴
JavaEE综合练习项目，涉及：html、css、js、Jquery、bootstrap、layui、layer、ajax、mysql、tomcat、servlet、filter、listener、jsp和公有云服务器。