网页HTML编写练习:华语榜中榜
网页效果
HTML代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>华语榜中榜</title><link rel="stylesheet" href="css/reset.css"><link rel="stylesheet" href="css/华语榜中榜.css">
</head>
<body><!-- 1.头部header --><div class="header"><div class="header-top"><img src="images/header.png" alt="" class="header-logo fl"><span>官方微信</span><span>官方微博</span></div><div class="header-bottom"><ul class="header-nav fr"><li>首页</li><li>品牌内容</li><li>频道介绍</li><li>节目合作</li><li>消息公告</li><li>联系我们</li></ul></div></div><!-- 2.广告图banner --><div class="banner"><img src="images/banner.png" alt=""></div><!-- 3.列表list --><div class="list"><div class="list-nav fl"><div class="list-nav-top"><div class="logo-box"><img src="images/list1.png" alt=""></div><h2>星空传媒</h2><h5>高度国际化</h5><h5>传媒公司</h5><h5>打造中外文化交流平台</h5></div><div class="list-nav-bottom"><p>查看详情</p></div></div><div class="list-nav fl"><div class="list-nav-top"><div class="logo-box"><img src="images/list2.png" alt=""></div><h2>星空卫视中文台</h2><h5>与综艺和娱乐内容为主</h5><h5>全天24小时普通话输出</h5><h5>高收视率频道</h5></div><div class="list-nav-bottom"><p>查看详情</p></div></div><div class="list-nav fl"><div class="list-nav-top"><div class="logo-box"><img src="images/list3.png" alt=""></div><h2>Channel[V]</h2><h5>自94年成立以来</h5><h5>作为亚洲第一的</h5><h5>华语音乐频道</h5></div><div class="list-nav-bottom"><p>查看详情</p></div></div><div class="list-nav fl"><div class="list-nav-top"><div class="logo-box"><img src="images/list4.png" alt=""></div><h2>星空卫视国际台</h2><h5>开播于2004年</h5><h5>定位文化时尚</h5><h5>想世界展示中国的窗口</h5></div><div class="list-nav-bottom"><p>查看详情</p></div></div></div><!-- 4.案例case --><div class="case"><div class="case-title"><span>CASES</span><span>节目合作</span></div><div class="case-content"><div class="case-left fl"><h1>视频推荐</h1><img src="images/case1.png" alt=""><h2>与星共舞</h2><h3>2015-08-21</h3><h4><<与星共舞>>是指2014年12月21日,大型明星舞蹈真人秀<<与星共舞>>于2014年12月21日晚在东方卫...</h4></div><div class="case-right fl"><div class="case-list fl"><h5>中国好歌曲</h5><h6>2015-08-18</h6><img src="images/case21.png" alt=""></div><div class="case-list fr"><h5>出彩中国人</h5><h6>2015-08-18</h6><img src="images/case22.png" alt=""></div><div class="case-list fl"><h5>娱乐梦工厂</h5><h6>2015-08-18</h6><img src="images/case23.png" alt=""></div><div class="case-list fl"><h5>中国好声音</h5><h6>2015-08-18</h6><img src="images/case24.png" alt=""></div></div></div></div><!-- 5.关于我们about --><!-- ????用新增h5标签创建高级表单????? --><!-- hgroup等用法,示例 --><div class="about"><div class="about-top"><table class="about-left fl"><tr><td>关于我们</td><td>星空传媒</td><td>星空卫视</td><td>CHANNEL[V]</td><td>星空国际</td></tr><tr><td>服务项目</td><td>星空传媒服务</td><td>星空卫视服务</td><td>CHANNEL[V]服务</td><td>星空国际服务</td></tr><tr><td>新闻动态</td><td>公司动态</td><td>行业资讯</td><td></td><td></td></tr><tr><td>联系我们</td><td>联系方式</td><td>需求提交</td><td></td><td></td></tr></table><div class="about-right fl"><p><span>网站建设咨询:</span><span>(QQ)445581301</span></p><p><span>投诉电话:</span><span>021-52032888转6366</span></p></div> </div><div class="about-bottom"><p><span>友情链接</span><span>/</span><span>LINK</span></p><ul><li><a>星空中国</a></li><li><a>星空国际</a></li><li><a>CHANNEL[V]</a></li><li><a>技术支持</a></li></ul></div></div><!-- 6.底部footer --> <div class="footer"><p><span>Copyright©2013-2015</span><span>星空华文国际传媒有限公司</span><span>b版权所有</span></p></div>
</body>
</html>
css 代码
/* 1.头部header */
.header{width: 1450px;height: 106px;background: #303030;margin: 0 auto;
}
.header-top{width: 100%;height: 36px;
}
.header-logo{display: block;margin-left: 116px;
}
.header-bottom{width: 100%;height: 70px;background: white;
}
.header-top span{float: right;margin-right: 30px;font-size: 12px;color: #c0c0c0;height: 100%;line-height: 25px;
}
.header-nav{width: 630px;height: 100%;/* background: rosybrown; */
}
.header-nav li{float: left;height: 100%;width: 105px;text-align: center;line-height: 70px;color: 1b1b1b;font-size: 12px;
}
.header-nav li:hover{color: #fdfdfd ;background: #303030;
}/* 2.广告图banner */
.banner{width: 1450px;height: 576px;margin: 0 auto;
}/* 3.列表list */
.list{width: 1000px;height: 450px;/* background: pink; */margin: 0 auto;
}
.list-nav{width: 230px;height: 350px;background: white;border: 1px solid #d2d2d2;margin: 50px 7px;
}
.list-nav-top{width: 200px;height: 266px;margin: auto 16px;/* background:cyan; */border-bottom: dotted #d2d2d2;}
.logo-box{width: 104px;height: 104px;background: #666666;border-radius: 50%;display: flex;margin: 24px auto;
}
.logo-box>img{margin: auto;
}
.list-nav h2{font-size: 16px;font-weight: bolder;color: #2c2c2c;text-align: center ;margin-bottom: 18px;
}
.list-nav h5{font-size: 12px;color: #484848 ;text-align: center;margin-bottom: 12px;
}
.list-nav-bottom{width: 100%;height: 57px;/* background: red; */display: flex;
}
.list-nav-bottom p{width: 120px;height: 36px;line-height: 36px;font-size: 12px;color: #484848 ;text-align: center; /* background: darkcyan; */margin:auto;border: 1px solid #d2d2d2; border-radius: 5px;
}/* 4.案例case */
.case{width: 1450px;height: 626px;background: #ebebeb;margin:0 auto;
}
.case-title{width: 1000px;height: 72px;margin: 0 auto;
}
.case-title span:first-child{display: block-inline;height: 72px;line-height: 72px;font-weight: 900;font-size: 24px;color: #a2a2a2;margin-right: 10px;
}
.case-title span:last-child{display: block-inline;height: 72px;line-height: 72px;font-size: 14px;font-weight: 600;color: #0f0f0f;margin-right: 10px;
}
.case-content{width: 1000px;height:525px;background: white;margin: 0 auto;
}
.case-left{width: 406px;height: 100%;padding-top: 1px;
}
/* 视频推荐 */
.case-left h1{font-size: 15px;color: #a0a0a0;margin: 34px auto 31px 20px;
}
/* 与星共舞 */
.case-left h2{display: block;width: 100%;/* height: 40px; */height: 16px;/* 此处要处理margin-top连同父盒子会下拉的bug问题 */margin-top: 24px;margin-left: 20px;font-size: 16px;color: #353535;
}
/* 2015-08-21 */
.case-left h3{width: 100%;height: 38px;line-height: 38px;font-size: 10px;color: #b2b2b2;border-bottom: 2px solid #f4f4f4;margin-left: 20px;
}
/* 与星共舞是指... */
.case-left h4{color:#858585;font-size: 12px;padding: 20px;line-height: 20px;
}
.case-right{width: 594px;height: 100%;background: #ebebeb;
}
.case-list{height: 250px;width: 288px;background: #fff;margin:0px -5px 20px 14px;
}
.case-list h5{height: 14px;margin: 13px auto 11px 16px;font-size: 14px;color: #3a3a3a;
}
.case-list h6{color: #bbbbbb;font-size: 9px;margin-bottom:18px;margin-left: 16px;
}/* 5.关于我们about */
.about{width: 1000px;/* height: 360px; */height: 320px;margin: 10px auto;
}
.about-top{width: 1000px;height: 224px;border: 2px solid #d2d2d2;
}
.about-left{width: 620px;/* height: 160px; */height: 110px;
}
.about-left tr{float: left;display: block;width: 150px;padding: 30px 0;text-align: center;
}
.about-left td{border-right:2px dotted #ebebeb;
}
td:nth-child(1){margin-top: 32px;margin-bottom: 20px;color: #363636;font-size: 14px;/* background: chocolate; */
}
td:not(td:nth-child(1)){font-size: 12px;line-height: 24px;color: #7a7a7a;
}
.about-left td{display: block;font-size: 12px;
}
.about-right{/* width: 378px; */width: 318px;/* height: 224px; *//* height: 158px; */height: 48px;padding-left: 60px;padding-top: 66px;padding-bottom: 110px;
}
.about-right span:nth-child(2){color: #ae3131;
}
.about-right span:nth-child(4){color: #ae3131;
}
/* 友情链接 */
.about-bottom{width: 1000px;height: 94px;/* background: lightseagreen; */margin-top: -9px;float: left;border: 2px solid #d2d2d2;border-top: none;
}
.about-bottom p{/* height: 60px; */height: 43px;padding-top: 17px;padding-left: 18px;
}
.about-bottom span{margin-right: 10px;
}
.about-bottom span:nth-child(1){font-size: 14px;color: #000;
}
.about-bottom span:nth-child(2){font-size: 9px;color: #b2b2b2;
}
.about-bottom span:nth-child(3){font-size: 9px;color: #b2b2b2;
}
.about-bottom li{ float: left;padding-left: 30px ;color: #ababab;font-size: 12px;
}/* 7.底部footer */
.footer{width: 1450px;height: 82px;background: #232323;margin: 0 auto;text-align: center;
}
.footer p{/* height: 82px; */height: 32px;padding-top: 50px;
}
.footer span{font-size: 12px;color: #7c7c7c;
}
拓展内容:window对象
0.window对象是所有对象的父对象,默认一直存在
1.window对象的属性与方法
属性:(实际上就是获取当前可视窗的宽高)
主流:window.innerWIdth/兼容IE浏览器:document.document.documentElement.ClientWidth
方法:
alert弹窗/prompt/comfirm确认/open和close
2.window有两个常用的内置子对象history和location
history:
属性:length返回当前窗口的历史记录的数量
方法:forword前进/back后退/go(num)去往num个历史记录
location:
属性:href返回url/search返回?后内容/hash返回#后内容
方法:reload刷新页面
3.window的三个事件
onload等待刷新/onscroll滚动条/onresize窗口大小改变