Web布局

最新推荐文章于 2024-06-27 22:40:21 发布

m0_56959781

最新推荐文章于 2024-06-27 22:40:21 发布

阅读量83

点赞数

分类专栏： web 文章标签：前端

本文链接：https://blog.csdn.net/m0_56959781/article/details/128174750

版权

web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

html文件

<!doctype html>
<html lang="en">
<head>
   <meta charset="utf-8" />
   <title>美丽家乡</title>
   <link rel="stylesheet" href="styles.css" type="text/css" media="screen" />


</head>
<body>
<div id="wrapper">

   <header>
       <h1><a href="#">美丽家乡——镇江</a></h1>
   </header>

   <nav>
       <div class="menu">
           <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>
               <li><a href="#">主页</a></li>
           </ul>
       </div>
   </nav>

   <section id="main">

           <section id="content">

       <article>
                           <h2><a href="#">家乡简介</a></h2>
                           <img src="images/leaves2.jpg" alt="" class="alignleft" /><p>镇江是国务院批复确定的中国长江三角洲重要的港口、风景旅游城市，是南京都市圈成员城市、扬子江城市群重要组成部分和华东地区重要的交通中枢。市境有京沪铁路、京沪高铁、沪宁高铁、沪蓉高速公路、扬溧高速公路、312国道、104国道等通达中国各主要城市，是长江与京杭大运河唯一交汇枢纽，长江流域亿吨港口镇江港通江达海。</p>
                       </article>

       <article>
                           <h2><a href="#">地理位置简介</a></h2>
                           <img src="images/leaves1.jpg" alt="" class="alignleft" /><p>镇江，古称京口、润州、南徐，是江苏省辖地级市，长江三角洲中心区城市，地处中国华东地区、江苏省西南部，西衔南京，南靠常州，北邻扬州。截至2018年，全市下辖3个区、代管3个县级市，总面积3840平方千米 </p>
                           <p>镇江市地貌走势为西高东低、南高北低，大部分地区属宁镇—茅山低山丘陵，沿江洲滩属长江新三角洲平原区，丹阳东南部则属太湖平原区。镇江市区地貌南高北低，北部沿江分布着心滩、洲滩、边滩以及冲积平原，海拔高度5米～10米。</p>
                       </article>

           </section>

       <aside id="sidebar1">
               <h3>地理环境</h3>
                   <ul>
                       <li><a href="#">位置境域</a></li>
                       <li><a href="#">地形地貌</a></li>
                       <li><a href="#">气候</a></li>
                       <li><a href="#">水文</a></li>
                   </ul>

</aside>

</aside>

   </section>

       <footer>
       <section id="footer-area">

                   <aside class="footer-segment">
                           <h4>更多详情</h4>
                               <ul>
                                   <li><a href="#">链接1</a></li>
                                   <li><a href="#">链接2</a></li>
                                   <li><a href="#">链接3</a></li>
                               </ul>
                   </aside>

                   <aside class="footer-segment">
                           <h4>说明</h4>
                               <p>本网站文章仅供交流学习,不作为商用，版权归属原作者，部分文章推送时未能及时与原作者取得联系，若来源标注错误或侵犯到您的权益烦请告知，我们将立即删除。</p>
                   </aside>

</section>

       </section>
   </footer>

</div>

</body>
</html

css文件

* {
margin: 0;
padding: 0;
}

header, footer, section, aside, nav, article {display: block;}

body {line-height: 1;
background: #bbb;
font-family: Garamond, Georgia, Times, "Times New Roman", serif;
color: #666;
font-size: 16px;
line-height: 18px;
}

#wrapper {width: 940px;margin: 0 auto;margin-top: 15px;margin-bottom: 15px;}

nav {width: 940px;height: 50px;margin: 0 auto;background: #6B3507;}

header {width: 940px;height: 200px;margin: 0 auto;background: #ddd url(images/headerimg.jpg) no-repeat left top;}

#main {width: 940px;margin: 0 auto;padding-top: 30px;
background: #FFF url(images/colbg.png) repeat-y;overflow: hidden;}

#content {float: left;width: 450px;margin-left: 40px;}

#sidebar1 {float: left;padding-left: 20px;width: 180px;}

#sidebar2 {float: right;padding-right: 30px;width: 180px;}

footer {width: 940px;margin: 0 auto;clear: both;}

h1,h2,h3,h4,h5,h6 {font-weight: bold;clear: both;}

h2, h3 {border-bottom: 2px dotted #ddd;color: #6B3507;}

a:link, a:visited {color:#333;text-decoration: none;}

a:hover, a:active {color: #6B3507;text-decoration: underline;}

p {margin-bottom: 18px;}

li {padding-left: 5px;}

nav .menu {font-size: 18px;font-weight: bold;}

nav .menu ul {margin: 0;padding: 17px 0 0 20px;list-style: none;line-height: normal;}

nav .menu li {display: block;float: right;}

nav .menu a {display: block;float: left;margin-right: 5px;padding: 0px 25px;color: #ddd;}

header h1 {margin: 0;padding: 0 0 0 10px;line-height: normal;float: left;padding-top: 2px;}

header h1 a:link, header h1 a:visited {text-decoration: none;color: #6B3507;font-size: 48px;}

header h1 a:hover { text-decoration: underline; }

article {padding-right: 15px;}

article img {border: none;-webkit-box-shadow: 3px 3px 7px #777;-moz-box-shadow: 3px 3px 7px #777;}

#content p, ul, ol, hr {margin-bottom: 24px;}

#content ul ul, ol ol, ul ol, ol ul {margin-bottom: 0;}

#content h1, h2, h3, h4, h5, h6 {margin: 0 0 20px 0;line-height: 1.5em;}

.alignleft, img.alignleft {display: inline;float: left;margin-right: 12px;}

.alignright, img.alignright {display: inline;float: right;margin-left: 12px;}

.aligncenter, img.aligncenter {clear: both;display: block;margin-left: auto;margin-right: auto;}

img.alignleft, img.alignright, img.aligncenter {margin-bottom: 12px;}

aside h3 {color: #6B3507;font-size: 20px;}

aside ul {list-style: inside url(images/arrow.gif);}

#footer-area
{background: #6B3507;color: #ddd;font-size: 90%;padding: 18px 0;overflow: hidden;}

.footer-segment {float: left;margin-right: 20px;margin-left: 20px;width: 190px;}

footer aside h4 {color: #ddd;font-size: 18px;line-height: 1.5em;}

footer a:link, footer a:visited {color: #ddd;}

footer a:hover { text-decoration: underline; }

m0_56959781

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Web布局

web布局
复制链接

扫一扫

专栏目录

Web布局

“相关推荐”对你有帮助么？