项目实战——仿360囧图
一.项目实战
1.创新从模仿开始，咱们的第一综合实例就从模仿网页-360囧图开始，网址：http://xiaohua.360.cn/jiongtu
2.第一个项目采用固定浮动布局，单位为像素。
3.由于录制课程的时候使用1024*768的分辨率，所以项目设定屏幕分辨率为：1024*768
二.学习要点
1.常用快捷方式
2.清除浮动的技巧
3.利用css3的动画实现图片轮播
4.综合应用我们之前学过的知识来构建一个完整的web页面
三.开始
1.创建项目文件夹存放相应的素材、文档等。
将网页另存在桌面上，这样网站的图片素材都会存储在文件夹中。
2.对页面进行结构分析。
3.准备素材。
4.开始编写代码。
四.
1.常用快捷方式
1）乘法 *： ul>li*5
在编辑器中输入缩写代码： ul>li*5 ,然后按下拓展键（默认为tab），即可得到代码片段
2）后代 >： nav>ul>li
3）兄弟 +： div+h3+p*3
4）缩写 ： div>dl>(dt+dd)*3+footer>p
5）自增符号： $
6）缩写 ： #header
7）缩写 ： p.class1.class2.class3
8）缩写 ： ul>.class
9）其他百度
2.清除浮动的技巧
消除子元素浮动对父元素背景/边框/不能被子元素撑开的方法
1） 父元素结尾处增加一空元素div，并清除其浮动。缺点：如果布局复杂，需要增加许多空标签。
2）在父元素定义overflow:hidden（浏览器会自动检查浮动区域的高度）
注：不必理会原理，知道用法即可。缺点：超出部分会被隐藏
3）利用伪类：after 父元素内容后增加空元素，并清除浮动。
3.利用css3的动画实现图片轮播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lunbo</title>
</head>
<style type="text/css">
*{margin:0;padding:0;}
.d0{width:100px;height:100px;margin:100px;
border:1px solid red; position:relative;}
.d1{width:400px;height:100px;position:absolute;
animation:lunbo 5s linear infinite;animation-direction:normal;}
.d2{background:green;}
.d3{background:red;}
.d4{background:blue;}
.d2,.d3,.d4{width:100px;height:100px;float:left;/*display:inline-block;*/}
@keyframes lunbo{
0%{left:0px;}
55%{left:-100px;}
75%{left:-200px;}
100%{left:-300px;}
}
</style>
<body>
<div class="d0"><!--100-->
<div class="d1"><!--400-->
<div class="d2">1</div><!--100-->
<div class="d3">2</div>
<div class="d4">3</div>
<div class="d2">1</div>
</div>
</div>
</body>
</html>
4.综合应用我们之前学过的知识来构建一个完整的web页面
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿360囧图</title>
<link rel="stylesheet" type="text/css" href="css/style1.css">
</head>
<body>
<header>
<nav>
<h1>360笑话</h1>
<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>
</nav>
</header>
<aside><img src="img/2.jpg"> </aside>
<section class="switch">
<div class="sw">
<ul class="swi">
<li class="swi1"><a href=""><img src="img/11.jpg" alt=""></a><p>一招制敌</p></li>
<li class="swi1"><a href=""><img src="img/12.jpg" alt=""></a><p>cvbnfdf</p></li>
<li class="swi1"><a href=""><img src="img/13.jpg" alt=""></a><p>ghjtyuj</p></li>
<li class="swi1"><a href=""><img src="img/14.jpg" alt=""></a><p>rtyujk</p></li>
<li class="swi1"><a href=""><img src="img/15.jpg" alt=""></a><p>fghj</p></li>
<li class="swi1"><a href=""><img src="img/12.jpg" alt=""></a><p>cvbnfdf</p></li>
<li class="swi1"><a href=""><img src="img/13.jpg" alt=""></a><p>ghjtyuj</p></li>
<li class="swi1"><a href=""><img src="img/14.jpg" alt=""></a><p>rtyujk</p></li>
<li class="swi1"><a href=""><img src="img/15.jpg" alt=""></a><p>fghj</p></li>
</ul>
<ul class="swi">
<li class="swi1"><a href=""><img src="img/21.jpg" alt=""></a><p>一招制敌</p></li>
<li class="swi1"><a href=""><img src="img/22.jpg" alt=""></a><p>cvbnfdf</p></li>
<li class="swi1"><a href=""><img src="img/23.jpg" alt=""></a><p>ghjtyuj</p></li>
<li class="swi1"><a href=""><img src="img/24.jpg" alt=""></a><p>rtyujk</p></li>
<li class="swi1"><a href=""><img src="img/25.jpg" alt=""></a><p>fghj</p></li>
<li class="swi1"><a href=""><img src="img/22.jpg" alt=""></a><p>cvbnfdf</p></li>
<li class="swi1"><a href=""><img src="img/23.jpg" alt=""></a><p>ghjtyuj</p></li>
<li class="swi1"><a href=""><img src="img/24.jpg" alt=""></a><p>rtyujk</p></li>
<li class="swi1"><a href=""><img src="img/25.jpg" alt=""></a><p>fghj</p></li>
</ul>
<ul class="swi">
<li class="swi1"><a href=""><img src="img/31.jpg" alt=""></a><p>一招制敌</p></li>
<li class="swi1"><a href=""><img src="img/32.jpg" alt=""></a><p>cvbnfdf</p></li>
<li class="swi1"><a href=""><img src="img/33.jpg" alt=""></a><p>ghjtyuj</p></li>
<li class="swi1"><a href=""><img src="img/34.jpg" alt=""></a><p>rtyujk</p></li>
<li class="swi1"><a href=""><img src="img/35.jpg" alt=""></a><p>fghj</p></li>
<li class="swi1"><a href=""><img src="img/32.jpg" alt=""></a><p>cvbnfdf</p></li>
<li class="swi1"><a href=""><img src="img/33.jpg" alt=""></a><p>ghjtyuj</p></li>
<li class="swi1"><a href=""><img src="img/34.jpg" alt=""></a><p>rtyujk</p></li>
<li class="swi1"><a href=""><img src="img/35.jpg" alt=""></a><p>fghj</p></li>
</ul>
<ul class="swi">
<li class="swi1"><a href=""><img src="img/11.jpg" alt=""></a><p>一招制敌</p></li>
<li class="swi1"><a href=""><img src="img/12.jpg" alt=""></a><p>cvbnfdf</p></li>
<li class="swi1"><a href=""><img src="img/13.jpg" alt=""></a><p>ghjtyuj</p></li>
<li class="swi1"><a href=""><img src="img/14.jpg" alt=""></a><p>rtyujk</p></li>
<li class="swi1"><a href=""><img src="img/15.jpg" alt=""></a><p>fghj</p></li>
<li class="swi1"><a href=""><img src="img/12.jpg" alt=""></a><p>cvbnfdf</p></li>
<li class="swi1"><a href=""><img src="img/13.jpg" alt=""></a><p>ghjtyuj</p></li>
<li class="swi1"><a href=""><img src="img/14.jpg" alt=""></a><p>rtyujk</p></li>
<li class="swi1"><a href=""><img src="img/15.jpg" alt=""></a><p>fghj</p></li>
</ul>
</div>
</section>
<section class="mid">
<div class="mid-nav">
<a href="" class="all">全部</a>
<a href="" class="all1">推荐</a>
<a href="" class="all1">热门</a>
<a href="" class="all1">内涵</a>
</div>
<div class="maoo">
<ul class="mimg">
<li class="mimgg"><a href=""><img src="img/12.jpg" alt=""></a><p>cvbnfdf</p></li>
<li class="mimgg"><a href=""><img src="img/13.jpg" alt=""></a><p>ghjtyuj</p></li>
<li class="mimgg"><a href=""><img src="img/14.jpg" alt=""></a><p>rtyujk</p></li>
<li class="mimgg"><a href=""><img src="img/15.jpg" alt=""></a><p>fghj</p></li>
<li class="mimgg"><a href=""><img src="img/12.jpg" alt=""></a><p>cvbnfdf</p></li>
<li class="mimgg"><a href=""><img src="img/13.jpg" alt=""></a><p>ghjtyuj</p></li>
<li class="mimgg"><a href=""><img src="img/14.jpg" alt=""></a><p>rtyujk</p></li>
<li class="mimgg"><a href=""><img src="img/15.jpg" alt=""></a><p>fghj</p></li>
<li class="mimgg"><a href=""><img src="img/12.jpg" alt=""></a><p>cvbnfdf</p></li>
<li class="mimgg"><a href=""><img src="img/13.jpg" alt=""></a><p>ghjtyuj</p></li>
<li class="mimgg"><a href=""><img src="img/14.jpg" alt=""></a><p>rtyujk</p></li>
<li class="mimgg"><a href=""><img src="img/15.jpg" alt=""></a><p>fghj</p></li>
<li class="mimgg"><a href=""><img src="img/12.jpg" alt=""></a><p>cvbnfdf</p></li>
<li class="mimgg"><a href=""><img src="img/13.jpg" alt=""></a><p>ghjtyuj</p></li>
<li class="mimgg"><a href=""><img src="img/14.jpg" alt=""></a><p>rtyujk</p></li>
<li class="mimgg"><a href=""><img src="img/15.jpg" alt=""></a><p>fghj</p></li>
<li class="mimgg"><a href=""><img src="img/12.jpg" alt=""></a><p>cvbnfdf</p></li>
<li class="mimgg"><a href=""><img src="img/13.jpg" alt=""></a><p>ghjtyuj</p></li>
<li class="mimgg"><a href=""><img src="img/14.jpg" alt=""></a><p>rtyujk</p></li>
<li class="mimgg"><a href=""><img src="img/15.jpg" alt=""></a><p>fghj</p></li>
<li class="mimgg"><a href=""><img src="img/12.jpg" alt=""></a><p>cvbnfdf</p></li>
<li class="mimgg"><a href=""><img src="img/13.jpg" alt=""></a><p>ghjtyuj</p></li>
<li class="mimgg"><a href=""><img src="img/14.jpg" alt=""></a><p>rtyujk</p></li>
<li class="mimgg"><a href=""><img src="img/15.jpg" alt=""></a><p>fghj</p></li>
<li class="mimgg"><a href=""><img src="img/12.jpg" alt=""></a><p>cvbnfdf</p></li>
<li class="mimgg"><a href=""><img src="img/13.jpg" alt=""></a><p>ghjtyuj</p></li>
<li class="mimgg"><a href=""><img src="img/14.jpg" alt=""></a><p>rtyujk</p></li>
<li class="mimgg"><a href=""><img src="img/15.jpg" alt=""></a><p>fghj</p></li>
<li class="mimgg"><a href=""><img src="img/14.jpg" alt=""></a><p>rtyujk</p></li>
<li class="mimgg"><a href=""><img src="img/15.jpg" alt=""></a><p>fghj</p></li>
</ul>
</div>
<div style="clear:both;"></div>
<div class="more"><a href="">点击加载更多图片</a></div>
</section>
<div style="clear:both;"></div>
<footer>
<section class="footer1">
<nav class="footnav footnav1">
<h3>轻松生活</h3>
<ul class="foot-list foot-list1">
<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>
</nav>
<nav class="footnav footnav2">
<h3>消磨时间</h3>
<ul class="foot-list foot-list2">
<li><a href="">小说</a></li>
<li><a href="">NBA</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>
<li><a href="">曲艺</a></li>
</ul>
</nav>
<nav class="footnav footnav3">
<h3>消磨时间</h3>
<ul class="foot-list foot-list2">
<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>
</nav>
</section>
<section class="footer2">
<div class="foot">
<a href="">关于我们</a>|
<a href="">广告</a>|
<a href="">投诉建议</a>|
<a href="">挂马监测</a>|
<a href="">手机版</a>|
<span class="rights">Copyright @360.cn. ...</span>
<a href="">京ICP证080047号</a>
<a href="">京公网安备11000000006号</a>
</div>
</section>
</footer>
</body>
</html>
style1.css
*{margin:0;padding:0;}
body{ background:whitesmoke;}
ul{list-style-type:none;}
a{text-decoration:none; }
header{height:50px;width:100%;background:url(../img/1.png) repeat-x; }
nav{width:1000px;height:50px;margin:0 auto; }
nav a{color:#fff;}
h1{color:#fff; font:bold 40px 隶书; float:left;margin-left:50px;}
nav li{float:left; font-size:20px; height:50px; line-height:50px;letter-spacing:5px; margin-right:5px;
width:100px; text-align:center;}
/*左浮动部分*/
aside{ position:fixed; left:100px; top:100px;}
/*图片轮播部分*/
.switch{width:1000px; margin:0 auto;background:white;margin-top:15px;
boder:2px solid red; overflow:hidden;}
.swi{width:1000px; float:left;}
.swi1{float:left; text-align:center;margin:10px 15px 10px 15px;}
/*.switch:after{content:""; display:block; clear:both;}*/
.swi1:hover,.swi1:active{
color:orange;
}
.sw{width:4000px;position:relative;animation:swimg 9s linear infinite normal;}
@keyframes swimg{
0%{left:0px;}
5%{left:0px;}
30%{left:-1000px;}
40%{left:-1000px;}
60%{left:-2000px;}
70%{left:-2000px;}
95%{left:-3000px;}
100%{left:-3000px;}
}
.mid{ width:1000px;margin:0 auto;margin-top:15px; }
.mid-nav{height:50px;line-height:50px;font-size:20px;}
.more{ width:1000px;line-height:50px;height:50px;
text-align:center; background:white;font-size:24px;margin:20px auto 20px auto;}
.more a{color:black;}
.all{color:orange;}
.all1{color:black;}
footer{width:100%;background:gray;}
.footer1{width:1000px;
text-align: center; margin:0 auto; background:darkgray;display:flex;}
.footnav{height:180px; border-right:1px solid rgba(60,60,30,0.3)}
.footnav h3{font-weight:normal;color:rgba(30,30,30,0.8);}
.footnav1{}
.footnav2{}
.footnav3{}
.foot-list{}
.foot-list1{}
.foot-list2{}
.footer2{width:100%;height:50px; ;margin:0 auto;background:rgba(50,50,50,0.6);}
.foot{width:1000px;margin:0 auto;color:#c2c2c2;font-size:14px; line-height:50px;}
.maoo{background:white;width:100%;}
.mimg{background:white;width:1000px;}
.mimg li a{color:black;}
/*.mimg li{text-align:center;float:left;margin:10px 14px 10px 14px;}*/
.mimgg{background:white;margin:5px 5px;text-align:center;float:left;margin:10px 14px 10px 14px;}
浙公网安备 33010602011771号