标题)
运用HTML+CSS制作多样化网页
先给大家看一下博主复原的漂亮又实用的网页如下
首先从ps中扣下需要的精灵图，当然也需要扣下触发效果时候的精灵图，图片有很多需要些耐心，图片如下：
扣好这些图后也算是做好了准备工作，然后开始布局，做任何网页界面前都需要对大体有一定的布局，不然写一部分算一部分到时候会很难排版和布局，布局如下：
大体的布局如图片所示，当想好大体的header，main和footer就可以开始写代码了，具体的代码如下可以先浏览一下
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Big Data</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<header>
<div class="head-content">
<a href="Javascript:void(0)" class="reg">
<img src="img/image1/picture_05.png">
<span>注册</span>
</a>
<a href="Javascript:void(0)" class="login">
<img src="img/image1/picture_03.png">
<span>登录</span>
</a>
</div>
</header>
<!--头部end-->
<!--搜索start-->
<div class="search">
<div class="search-logo">
<img src="img/image1/img_10.png"/>
</div>
<div class="search_main_1">
<form>
<input class="search_1" type="text" placeholder="按照标题搜索数据">
</form>
</div>
<div class="search_main_2">
<a class="search_2" href="#">
</a>
</div>
<a href="#" class="updata">
上传数据
</a>
</div>
<!--搜索end-->
<!--导航条start-->
<div class="head_footer">
<div class="head_footer_main">
<a href="#">首页</a>
<a href="#">数据变现</a>
<a href="#">免费专区</a>
<a href="#">数据众包</a>
<a href="#">数据商店</a>
<a href="#">个人中心</a>
</div>
</div>
<!--导航条end-->
<div class="main">
<div class="main_main">
<!--面包屑导航start-->
<div class="main_1">
<a class="main_1_first">当前位置：</a>
<a href="#">首页></a>
<a href="#">数据变现></a>
<a href="#">所有分类</a>
</div>
<!--面包屑导航end-->
<!--主体内容部分 start-->
<div class="main_2">
<div class="main_2_left">
<ul>
<li class="main_2_left_li_1"><span class="left_picture_1 li_a_1">所有分类</span></li>
<li><span class="left_picture_2 li_a_1">交通、环境</span><span class="li_a_2">632></span></li>
<li><span class="left_picture_3 li_a_1">公众服务</span><span class="li_a_2">412></span></li>
<li><span class="left_picture_4 li_a_1">健康医疗</span><span class="li_a_2">648></span></li>
<li><span class="left_picture_5 li_a_1">金融商贸</span><span class="li_a_2">1456></span></li>
<li><span class="left_picture_6 li_a_1">科研应用</span><span class="li_a_2">895></span></li>
<li><span class="left_picture_7 li_a_1">社交与征信</span><span class="li_a_2">98></span></li>
<li><span class="left_picture_8 li_a_1">文娱 娱乐</span><span class="li_a_2">62></span></li>
<li><span class="left_picture_9 li_a_1">知识产权</span><span class="li_a_2">417></span></li>
<li><span class="left_picture_10 li_a_1">智慧生活</span><span class="li_a_2">2854></span></li>
<li><span class="left_picture_11 li_a_1">产业数据</span><span class="li_a_2">711></span></li>
<li><span class="left_picture_12 li_a_1">政府数据</span><span class="li_a_2">569></span></li>
</ul>
</div>
<div class="main_2_right">
<div id="main_2_right_big">
<div class="main_2_right_1">
<div class="main_2_right_1_one">
<span class="span_mr_1">标价方式:</span>
<span class="span_mr_2 mr_2_all"><a href="#">不限</a></span>
<span class="span_mr_2"><a href="#">免费</a></span>
<span class="span_mr_2"><a href="#">收费</a></span>
</div>
<div>
<span class="span_mr_1">数据格式:</span>
<span class="span_mr_2 mr_2_all"><a href="#">不限</a></span>
<span class="span_mr_2"><a href="#">视频</a></span>
<span class="span_mr_2"><a href="#">音频</a></span>
<span class="span_mr_2"><a href="#">文本</a></span>
<span class="span_mr_2"><a href="#">图像</a></span>
<span class="span_mr_2"><a href="#">其他</a></span>
</div>
<div>
<span class="span_mr_1">数据来源:</span>
<span class="span_mr_2 mr_2_all"><a href="#">不限</a></span>
<span class="span_mr_2"><a href="#">企业</a></span>
<span class="span_mr_2"><a href="#">政府</a></span>
<span class="span_mr_2"><a href="#">公益</a></span>
<span class="span_mr_2"><a href="#">个人</a></span>
<span class="span_mr_2"><a href="#">其他</a></span>
</div>
<div>
<span class="span_mr_1">数据排序:</span>
<span class="span_mr_2 mr_2_all mr_2_four_1"><a href="#">销量</a></span>
<span class="span_mr_2 mr_2_four_2"><a href="#">最新</a></span>
<span class="span_mr_2 mr_2_four_3"><a href="#">价格</a></span>
</div>
<div class="main_2_right_1_five">
<span class="span_mr_1 main_2_five_1">共为您找到:<span id="orange_number">100000</span>条数据</span>
<span class="span_mr_2 main_2_five_2"><a href="#">列表</a></span>
<span class="span_mr_2 main_2_five_3"><a href="">大图</a></span>
</div>
</div>
<div class="main_2_right_2">
<ul>
<li>
<img src="img/image1/img_62.png">
<span class="main_2_r2_liword_1">工商诉讼数据</span>
<span class="main_2_r2_liword_2">￥ 500</span>
<span class="main_2_r2_liword_3">累计交易：1500.00元</span>
<div class="main_2_r2_lidiv">
<p>
数据来源于统计局，统计了近年来废弃的主要污染物数量
</p>
<a href="">查看详情</a>
</div>
</li>
<li>
<img src="img/image1/img_62.png">
<span class="main_2_r2_liword_1">工商诉讼数据</span>
<span class="main_2_r2_liword_2">￥ 500</span>
<span class="main_2_r2_liword_3">累计交易：1500.00元</span>
<div class="main_2_r2_lidiv">
<p>
数据来源于统计局，统计了近年来废弃的主要污染物数量
</p>
<a href="">查看详情</a>
</div>
</li>
<li>
<img src="img/image1/img_62.png">
<span class="main_2_r2_liword_1">工商诉讼数据</span>
<span class="main_2_r2_liword_2">￥ 500</span>
<span class="main_2_r2_liword_3">累计交易：1500.00元</span>
<div class="main_2_r2_lidiv">
<p>
数据来源于统计局，统计了近年来废弃的主要污染物数量
</p>
<a href="">查看详情</a>
</div>
</li>
<li>
<img src="img/image1/picture_57.png">
<span class="main_2_r2_liword_1">2018全国房价指数</span>
<span class="main_2_r2_liword_2">免费</span>
<span class="main_2_r2_liword_3">累计交易：150次</span>
<div class="main_2_r2_lidiv">
<p>
数据来源于统计局，统计了近年来废弃的主要污染物数量
</p>
<a href="">查看详情</a>
</div>
</li>
<li>
<img src="img/image1/img_62.png">
<span class="main_2_r2_liword_1">工商诉讼数据</span>
<span class="main_2_r2_liword_2">￥ 500</span>
<span class="main_2_r2_liword_3">累计交易：1500.00元</span>
<div class="main_2_r2_lidiv">
<p>
数据来源于统计局，统计了近年来废弃的主要污染物数量
</p>
<a href="">查看详情</a>
</div>
</li>
<li>
<img src="img/image1/img_62.png">
<span class="main_2_r2_liword_1">工商诉讼数据</span>
<span class="main_2_r2_liword_2">￥ 500</span>
<span class="main_2_r2_liword_3">累计交易：1500.00元</span>
<div class="main_2_r2_lidiv">
<p>
数据来源于统计局，统计了近年来废弃的主要污染物数量
</p>
<a href="">查看详情</a>
</div>
</li>
<li>
<img src="img/image1/img_82.png">
<span class="main_2_r2_liword_1">个人失信被执行黑名单</span>
<span class="main_2_r2_liword_2">免费</span>
<span class="main_2_r2_liword_3">累计交易：150次</span>
<div class="main_2_r2_lidiv">
<p>
数据来源于统计局，统计了近年来废弃的主要污染物数量
</p>
<a href="">查看详情</a>
</div>
</li>
<li>
<img src="img/image1/picture_57.png">
<span class="main_2_r2_liword_1">2018全国房价指数</span>
<span class="main_2_r2_liword_2">免费</span>
<span class="main_2_r2_liword_3">累计交易：150次</span>
<div class="main_2_r2_lidiv">
<p>
数据来源于统计局，统计了近年来废弃的主要污染物数量
</p>
<a href="">查看详情</a>
</div>
</li>
<li>
<img src="img/image1/img_62.png">
<span class="main_2_r2_liword_1">工商诉讼数据</span>
<span class="main_2_r2_liword_2">￥ 500</span>
<span class="main_2_r2_liword_3">累计交易：1500.00元</span>
<div class="main_2_r2_lidiv">
<p>
数据来源于统计局，统计了近年来废弃的主要污染物数量
</p>
<a href="">查看详情</a>
</div>
</li>
<li>
<img src="img/image1/img_62.png">
<span class="main_2_r2_liword_1">工商诉讼数据</span>
<span class="main_2_r2_liword_2">￥ 500</span>
<span class="main_2_r2_liword_3">累计交易：1500.00元</span>
<div class="main_2_r2_lidiv">
<p>
数据来源于统计局，统计了近年来废弃的主要污染物数量
</p>
<a href="">查看详情</a>
</div>
</li>
<li>
<img src="img/image1/img_62.png">
最低0.47元/天 解锁文章
476
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
