学了一段时间,找个项目练练手,捕鱼猎人就是一个很好的素材嘛~点击链接去看,会发现这个布局还是很简单的,现在让我们一起来开始这个页面的还原吧~(注:所有的图片都可以在上面链接对应的页面上右键保存)
首先对HTML结构分析,不难发现,这个页面的结构是上中下结构,上面是header
部分,中间是content
部分,下面是footer
部分。header
部分是一个banner
宣传图片;content
部分分为4个小块,Part1
是一个并排的两个盒子,分别显示一个列表和一个小的轮播组件, Part2
是一个大的轮播盒子,Part3
则是友商链接,另外还有一个侧边栏aside
。footer
部分是公司的版权声明。
<body>
<header>
<div id="banner"></div>
</header>
<div id="content">
<div class="part1">
<div class="part1-left"></div>
<div class="part1-right"></div>
</div>
<div class="part2"></div>
<div class="part3"></div>
<aside class="floater"></aside>
</div>
<footer>
<div class="copyright"></div>
</footer>
</body>
整体框架就是以上代码,其他的内容代码在上面的框架中添加就可以了,是不是很简单~在这里用到了HTML5新标签<header>
、<aside>
、<footer>
标签来取代之前常用的<div id="header">
、<div id="aside">
、<div id="footer">
,避免了一系列盒子的嵌套。
再来看一下CSS的难点:首先难点在于列表项的切换,part1-left
部分是一个可以切换的列表,一般情况下这里是用的JS控制,我在网上搜索了一下,用的是单选按钮来替换JS的控制;其次是part1-right
的纯CSS的轮播组件,我在这里用得是网上的模板,关于这个部分,我会在之后自己去尝试写一个可运行的代码;最后一个小小的难点就是友商链接的浮动了,当然这个问题相对来说是比较简单的。让我们一一攻破:
<!-- 问题1:纯CSS的列表项切换对应的HTML结构 -->
<ul class="tab-list">
<li>
<input type="radio" name="tabs" id="tab1" checked/>
<label for="tab1">新闻</label>
<div id="tab-cont1" class="tab-content">
<ul class="news-list">
<li><a href="#" class="news-content">这里是链接内容1</a></li>
<li><a href="#" class="news-content">这里是链接内容1</a></li>
</ul>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab2"/>
<label for="tab2">活动</label>
<div id="tab-cont2" class="tab-content">
<ul class="news-list">
<li><a href="#" class="news-content">这里是链接内容2</a></li>
<li><a href="#" class="news-content">这里是链接内容2</a></li>
</ul>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab3"/>
<label for="tab3">公告</label>
<div id="tab-cont3" class="tab-content">
<ul class="news-list">
<li><a href="#" class="news-content">这里是链接内容3</a></li>
<li><a href="#" class="news-content">这里是链接内容3</a></li>
</ul>
</div>
</li>
</ul>
通过以上结构,我们会有一个简陋原始的可点击的单选列表,然后此时CSS要做的事情就是改变这个单选列表的显示方式。看这里看这里~~~
* {
padding: 0;
margin: 0;
}
body {
background-color: #ccc;
}
/* 清除无序列表的自带样式 */
ul {
list-style: none;
}
.part1-left {
position: relative;
width: 550px;
height: 365px;
float: left;
padding: 1.5%;
margin-top: 1%;
margin-left:1%;
margin-bottom: 1%;
overflow: hidden;
background-color: #fff;
-webkit-box-shadow: 0 5px 5px rgba(0,15,15,0.5);
-moz-box-shadow: 0 5px 5px rgba(0,15,15,0.5);
box-shadow: 0 5px 5px rgba(0,15,15,0.5);
}
.tab-list {
position: relative;
/*overflow: hidden;*/
text-align: center;
/*background-color: #fff;*/
}
.tab-list li {
display: block;
float: left;
margin-left: 1%;
margin-bottom: 1%;
}
/* 将单选按钮移出屏幕可见区域 */
.tab-list input[type="radio"] {
position: absolute;
top: -9999px;
left: -9999px;
}
.tab-list label {
position: relative;
/*top: 4px;*/
display: block;
padding: 5px 10px;
font-size: 20px;
font-weight: normal;
color: #333;
background-color: #fff;
border-radius: 2px 2px 0 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
cursor: pointer;
}
.tab-list label:hover {
color: #fff;
background: #1E1478;
box-shadow: 0 5px 10px rgba(0, 15, 15, 0.5);
}
.tab-list .tab-content {
position: absolute;
top: 50px;
left: 0;
display: none;
width: 100%;
padding-bottom: 5px;
overflow: hidden;
text-align: left;
font-size: 18px;
line-height: 20px;
}
.tab-content a{
text-decoration: none;
color: #333;
}
.tab-content a:hover {
text-decoration: underline;
color: #0B0141;
}
.tab-list [id^="tab"]:checked + label {
top: 0;
padding-top: 5px;
color: #fff;
background-color: #1E1478;
box-shadow: 0 5px 10px rgba(0,15,15,0.5);
}
.tab-list [id^="tab"]:checked ~ [id^="tab-cont"] {
display: block;
}
.news-list {
width: 99%;
overflow: hidden;
border: 1px outset #ccc;
}
.news-list li {
display: block;
float: none;
}
这样,一个纯CSS多列表切换就完成了。当然能够完成这样的项目基本上要归功于HTML5和CSS3的一些新变化,例如HTML5中自带页面验证,CSS3中添加了盒模型的阴影显示等。另外这里会有一个小小的问题,就是这边每次点击大标题“新闻”、“活动”、“公告”时,都会自动返回到页面顶端,我试过了一些方法,也没有得到解决,希望有大神能够告诉我解决方案~
关于第二个难点,纯CSS的轮播组件,这一块我还没有深入研究,所以我是直接用的网上的模板纯CSS的图片切换幻灯片代码。这个代码我觉得是非常炫酷,是我自己对纯CSS轮播不够熟悉和清晰,过一段时间我也会尝试去自己完成一个可以到处使用的轮播模板。
至于第三个问题,我倒觉得是小问题,讲道理对盒子内的所有图片左浮动然后调一下间距就可以了。这部分的HTML结构十分简单,就是一个无序列表,在列表中规定图片大小为指定大小(150*50),设置每个列表项左浮动,即可完成该部分。
所有的代码可见(资源之后会上传)。另外,我写的这个代码里有一些问题,在没有使用媒体查询的情况下,用百分比对页面各部分布局会有明显的短板——当我的页面缩放时,part1
的两个部分会由于位置不足变为上下两个部分,用滚动条查看,这显然不是想要的效果。所以我会再写一个Bootstrap版本的网站实现~
参考网址
http://www.buyulieren.com/
http://sc.chinaz.com/jiaoben/160218243950.htm