终于做完了。。做的很粗糙。。
我做的是介绍家乡。。
下面是结果图。。
~X)%(`KI9{D4WA@WHAH5$OB.png
![S7DY43C72G14]8Y_DU0NS1V.png](http://upload-images.jianshu.io/upload_images/4363689-2ff2f4544a8fd7ea.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
这里看起来还行。。但是在线上就变成了这个样子了。。
(1FVN}8T$VX1WT)`XY3LHML.png
我的图片，我的样式去哪了。。。我有点晕。。这是哪里写错了。。
求解。。
下面是我的代码
主体部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的家乡宁波</title>
<link rel="stylesheet" href="../ningbo/i.css">
</head>
<body>
<div class="box">
<div class="header">
<div id="header1">
<a href="#header">首页</a>
<a href="#content1">地理位置</a>
<a href="#content2">历史</a>
<a href="#content3">美食</a>
<a href="#content4">美景</a>
<a href="../ningbo/denglu.html" target="_blank"> 登录</a>
<a href="../ningbo/zhuce.html" target="_blank"> 注册</a>
</div>
</div>
<div class="content">
<div id="content1">
地理位置
<p class="content11">宁波地处东南沿海，位于中国大陆海岸线中段，长江三角洲南翼，东有舟山群岛为天然屏障，北濒杭州湾，西接绍兴市的嵊州、新昌、上虞，南临三门湾，并与台州的三门、天台相连。
</p>
<div class="content12">
</div>
</div>
<div id="content2">
历史
<p class="content21">
宁波，简称甬，或亦可称宁，副省级市、计划单列市，新一线城市，世界第四大港口城市，有制订地方性法规权限的较大的市，中国大陆综合竞争力前15强城市，长三角五大区域中心之一，长三角南翼经济中心，浙江省经济中心，连续四次蝉联全国文明城市，中国著名的院士之乡，2016年东亚文化之都。
宁波地处东南沿海，位于中国大陆海岸线中段，长江三角洲南翼，东有舟山群岛为天然屏障，北濒杭州湾，西接绍兴市的嵊州、新昌、上虞，南临三门湾，并与台州的三门、天台相连。
宁波人文积淀丰厚，历史文化悠久，属于典型的江南水乡兼海港城市，是中国大运河南端出海口、“海上丝绸之路”东方始发港，其中最具宁波代表性的宁波港被国际港航界权威杂志——英国《集装箱国际》评为“世界五佳港口”。
</p>
<div class="content22">
<p>
早在七千年前，先民们就在这里繁衍生息，创造了灿烂的河姆渡文化。公元前2000多年的夏代，宁波的名称为“鄞”，春秋时为越国境地，秦时属会稽郡的鄞（县治为今奉化区西坞街道白杜村）、鄮（县治为今鄞州区五乡镇同岙村）、句章（县治为今江北区慈城镇王家坝村）三县，唐时称明州。唐开元二十六年（738年）设明州，辖鄮、慈溪、奉化、翁山4县。唐长庆元年（821年）州治迁至三江口（今海曙区），并建子城，为其后一千多年来城市的发展奠定基础。[2]
隋开皇九年（公元589年），称句章城，县治置小溪（今鄞州区鄞江镇）。
唐武德四年（公元621年），设州治于三江口；[2]
唐武德八年（公元625年），改称鄮县。
唐开元二十六年（公元738年），设明州，辖慈溪、奉化、镇海、定海、象山等5县，州治鄞县，属浙江东道。
唐长庆元年（公元821年），州治从小溪迁至三江口，并建子城，为其后一千多年宁波城市的发展奠定了基础。据记载，宁波市中心最早的城垣为东晋隆安四年（公元400年）刘牢之所筑，称筱墙，旧址相传在今天西门口筱墙巷一带。
五代十国属于吴越国。北宋建隆元年（公元960年），称明州奉国军，属于两浙路。
<br>
<br>
水韵宁波
<br>
南宋绍兴三年（公元1133年），属于两浙东路。<br>
南宋庆元元年（公元1195年），升为庆元府，属于两浙东路。<br>
元朝至开元十三年（公元1276年），称庆元路。<br>
元朝大德七年（公元1303年），设浙东道都元帅府。属于江浙行省。<br>
明朱元璋吴元年（公元1367年），中国沿海地区海禁，唯独明州对外开放。<br>
明洪武十四年（公元1381年），为避国号讳，朱元璋采纳鄞县读书人单仲友的建议，取“海定则波宁”之义，将明州府改称宁波府。宁波之名沿用至今。<br>
清顺治十五年（1658年）设宁绍台道，驻宁波。<br>
民国1927年划鄞县城区设宁波市，属于浙江省。<br>
1949年5月浙东解放，鄞县城区建置宁波市，城区为宁波专署驻地。<br>
1983年撤销专署，实行市管县体制。随着北仑深水良港的开发建设，<br>
宁波逐渐由内河城市向海港城市演变，并形成三江片、镇海片、北仑片相对独立的滨海临江发展空间格局。1986年宁波被列为中国第二批历史文化名城，1987年经国务院审核，成为计划单列市。
1984年，宁波被列为14个沿海开放城市之一。<br>
1988年3月批准为有制订地方性法规权限的较大的市。<br>
1994年宁波被确定为副省级市。<br>
2015年11月1日宁波当选2016“东亚文化之都”。<br>
2016年，撤销宁波市江东区，将原江东区管辖的行政区域划归宁波市鄞州区管辖。将鄞州区的集士港镇、古林镇、高桥镇、横街镇、鄞江镇、洞桥镇、章水镇、龙观乡、石碶街道划归宁波市海曙区管辖。撤销县级奉化市，设立宁波市奉化区。<br>
</p>
</div>
</div>
<div id="content3">美食
<div class="content31 fl">
<span>红膏炝蟹(虽然是生的但是美味)</span><br>
<br>
</div>
<div class="content32">
<span>宁波汤团(小吃)</span><br>
<br>
</div>
<div class="content33">
<span>雪菜大黄鱼(很鲜)</span><br>
</div>
</div>
<div id="content4">美景
<div class="content41">
<span> 东钱湖又称钱湖，是浙江省著名的风景名胜区，距宁波城东去１５公里，享 有“西湖风光，太湖气魄”的美称。东钱湖由谷子湖、梅湖和外湖三部分组成，环湖周长４５公里，面积２２平 方公里，是浙江省最大的（天然）淡水湖，面积为杭州西湖的４倍。湖四周群山环抱，绿树簇拥。湖中碧水清澈，烟波浩渺。无论风雨阴睛，四季更替，都能向游客展示出一幅赏心悦目的画面。东钱湖开凿至今已有1200多年历史。历史遗迹星罗棋布，留下陶公钓矶、霞屿锁岚、二灵夕照、白石仙坪等十大胜景以及南宋石窟“补陀洞天”，元塔二灵塔，王安石庙等70余处古迹，21处文物保护点和200余具南宋时期石雕。目前已形成霞屿二灵、平水芦汀、名人景区、度假休闲区四个游览区域。主要景点有：补陀洞天、二灵塔、王安石纪念馆、岳鄂王庙以及台湾文献初祖沈光文塑像、书法泰斗沙孟海书画院、世界昆虫分类学专家周尧昆虫博物馆、国防教育中心、蝴蝶阁、湖滨公园等。</span><br><br><br>
<br><br><br><br><br><br>
<div class="content42">
<span>雪窦山风景区，国家AAAA-旅游景区位于浙江省宁波市奉化区溪口镇西北，为四明山支脉的最高峰，海拔800米。有“四明第一山”之誉，是弥勒佛道场。风景区包括溪口镇、雪窦山、亭下湖三部分。有千丈岩、三隐潭瀑布，妙高台、商量岗、林海等景观。雪窦山早在汉代就有海上蓬莱之美誉，是华东主要旅游干线上的一颗明珠，获得浙江省十佳美景乐园桂冠并入选中国五大佛教名山等。徐凫岩徐凫岩瀑布位于雪窦寺西，徐凫岩村附近。岩顶海拔476米。崖石有巨石外突，传为仙人骑凫徐徐升天外，故名。远望巨石，酷似石猴倚天而鞠猴岩，以鞠猴岩为中心，两边绝壁呈放射状亘延数百米，其形如斧凿刀削，其色黛赭相杂。崖顶松木苍翠，虬影乱舞，崖下草木丛生，成簇弄影。其壮观、秀丽，胜于千丈岩。宋宝庆《四明志》载，绝壁凿有“鞠猴岩”三大字。崖顶涧间，有古朴洞桥横跨，涧水自踌躇岭林间潺潺流来，渐而湍急澎湃，过桥后飞流直挂，声震山谷。</span><br>
<br><br><br><br><br><br>
</div>
<div class="content43">
<span> 天一阁位于宁波市天一街10号，在风光秀丽的月湖历史文化景区内。它建于明嘉靖四十年至四十五年（1561－1566）之间，原为兵部右侍郎范钦藏书处，是我国现存历史最久、亚洲第一、世界第三的私人藏书楼，1982年被公布为第二批国家级文物保护单位。</span><br>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="footer1">
<a href="" class="footer11">关于我们</a>
<a href="" class="footer11">联系我们</a>
<a href="" class="footer11">建议或意见</a>
<a href="" class="footer11">更多</a>
</div>
</div>
</div>
</body>
</html>
CSS部分
@charset "UTF-8";
a{
color:black;
font-size:14px;
text-decoration: none;
}
.box{
width: 1020px;
margin: 0 auto;
}
.header{
width:1020px;
height: 540px;
background: url(../ningbo/picture/shouye.png) no-repeat;
}
#header1{
width: 1020px;
height: 70px;
background: white;
opacity: 0.4;
text-indent: 3em;
font:bold 20px/60px "宋体";
}
.content{
width: 1020px;
margin:50px 0;
position: relative;
}
#content1{
height: 500px;
width: 1020px;
font:bold 30px/60px "宋体";
color: #333333;
}
.content11{
font:bold 20px/40px "宋体";
color: #333333;
text-indent: 2em;
}
#content2{
width: 1020px;
height: 600px;
font:bold 30px/60px "宋体";
color: #333333;
position: absolute;
top:800px;
}
.content21{
font:bold 20px/40px "宋体";
color: #333333;
text-indent: 2em;
}
.content22{
font:bold 20px/40px "宋体";
color: #333333;
text-indent: 2em;
}
#content3{
width: 1020px;
font:bold 30px/60px "宋体";
color: #333333;
position: absolute;
top:3500px;
}
.content31{
font:bold 20px/40px "宋体";
color: #333333;
text-indent: 2em;
}
.content32{
font:bold 20px/40px "宋体";
color: #333333;
text-indent: 2em;
}
.content33{
font:bold 20px/40px "宋体";
color: #333333;
text-indent: 2em;
position: absolute;
top:300px;
left: 600px;
}
#content4{
width: 1020px;
height: 600px;
font:bold 30px/60px "宋体";
color: #333333;
position: absolute;
top:4400px;
}
.content41{
font:bold 20px/40px "宋体";
color: #333333;
text-indent: 2em;
}
.footer{
height: 100px;
width: 1020px;
background-color: #333333;
position: absolute;
top:8090px;
}
.footer1{
font:30px/40px "宋体";
text-indent: 2em;
}
.footer11{
color: white;
text-indent: 2em;
}
链接：http://pan.baidu.com/s/1o8PkaLk 密码：p1zs
改了下。。网址：http://hometownningbo.duapp.com/
