实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3月28日作业</title> <link rel="stylesheet" type="text/css" href="css/reset.css"> <link rel="stylesheet" type="text/css" href="css/common.css"> <link rel="stylesheet" type="text/css" href="css/index.css"> </head> <body> <div class="box"> <header> <div class="logo"><a href="http://www.rada.net.cn/"><img src="images/logo.png"></a></div> <div class="nav"> <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><input type="submit" id="search" name="search" value=""></li> </ul> </div> </header> <div class="banner"> <ul> <li><a href=""><img src="images/banner.jpg" width="100%"></a></li> </ul> </div> <div class="youshi"> <h2>选择锐达RADA ICR的绝佳理由</h2> <ul> <li><i><img src="images/youshi_01.png"></i><h3>超多样化的产品选型</h3><p>宽电压设计，产品结构多种多样，本体、定位孔距、滤光片、镜头座、导线都可选配，满足不同结构的使用要求。</p></li> <li><i><img src="images/youshi_02.png"></i><h3>经久持续的产品更新</h3><p>遵循最新的行业标准提供最高质量的产品更迭换代，不断覆盖市面上所有的CCD/CMOS模块，确保能配合您的需求。</p></li> <li><i><img src="images/youshi_03.png"></i><h3>7*24小时无休技术支持</h3><p>技术支持团队7*24小时全天候快速响应，贴心的售前咨询和售后服务，及时为客户排忧解难，全年无休。</p></li> <li><i><img src="images/youshi_04.png"></i><h3>简单易用的产品模块</h3><p>产品采用模块化堆砌式设计，确保零部件具有很强的互换性、通用性以及可接近性好，可实现快速安装和更换零部件。</p></li> <li><i><img src="images/youshi_05.png"></i><h3>臻于完美的品质保证</h3><p>管理团队大胆创新、精通业务，确保产品的品质完美。超过6年行业实战经验，拥有亲密无间的分工配合沉淀出的稳健。</p></li> <li><i><img src="images/youshi_06.png"></i><h3>自由开放的用户定制</h3><p>锐达电子可以根据客户要求，进行原材料采购、模具选择、设备调整、参数设置以及成本核算等方面综合安排生产。</p></li> </ul> </div> <div class="product"> <h2>产品中心</h2> </div> <div class="video"> <video autoplay="" loop="" class="bg-video" poster="video/video.jpg" preload="none" src="video/the_stars.mp4"></video></div> <div class="news"> <h3>新闻资讯</h3> <ul> <li><img src="images/news.jpg"><p>大华助推高清智能网络技术应用普及</p><small>随着经济的快速发展和技术的突飞猛进，公共秩序安全、生产安全、…...</small></li> <li><img src="images/news.jpg"><p>大华助推高清智能网络技术应用普及</p><small>随着经济的快速发展和技术的突飞猛进，公共秩序安全、生产安全、…...</small></li> <li><img src="images/news.jpg"><p>大华助推高清智能网络技术应用普及</p><small>随着经济的快速发展和技术的突飞猛进，公共秩序安全、生产安全、…...</small></li> <li><img src="images/news.jpg"><p>大华助推高清智能网络技术应用普及</p><small>随着经济的快速发展和技术的突飞猛进，公共秩序安全、生产安全、…...</small></li> <li><img src="images/news.jpg"><p>大华助推高清智能网络技术应用普及</p><small>随着经济的快速发展和技术的突飞猛进，公共秩序安全、生产安全、…...</small></li> <li><img src="images/news.jpg"><p>大华助推高清智能网络技术应用普及</p><small>随着经济的快速发展和技术的突飞猛进，公共秩序安全、生产安全、…...</small></li> </ul> </div> <div class="pingjia"></div> <div class="flink"> <h3>友情链接</h3> <ul> <li><a href="">淘宝</a></li> <li><a href="">腾讯</a></li> <li><a href="">百度</a></li> </ul> </div> <div class="footer"> <div class="info"></div> <div class="copy"></div> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
reset样式重置实例
*{ margin:0;padding:0;border:none; list-style: none;font-weight:normal;}
a{ text-decoration: none; }运行实例 »
点击 "运行实例" 按钮查看在线实例
公共样式实例
body{ background:url(../images/bg.png) repeat; font-family: 'Microsoft Yahei', Arial, sans-serif;font-size: 16px; color: #252525}
.box{ width: 1200px; margin:0 auto;background:#fff}
header{ width: 100%;height: 100px;padding: 0 30px; overflow: hidden;}
.logo{line-height: 100px; float: left;}
.logo img { vertical-align: middle; overflow: hidden;}
.nav{ line-height: 100px; float: right;margin-right:100px;}
.nav ul li{ float: left; padding:0 10px;}
#search{ background: url(../images/search.png) no-repeat; background-size: cover; width: 20px;height:20px; vertical-align: middle; cursor: pointer;}
.footer{height: 300px; background: #353e44}
.info{ height: 250px; }
.footer .copy{ height: 50px; background: #31393f}运行实例 »
点击 "运行实例" 按钮查看在线实例
首页样式实例
.youshi{ padding:0 20px; margin: 20px 0px; overflow: hidden;}
.youshi h2{ font-size: 24px; line-height: 36px; text-align: center; margin:20px 0 50px 0;clear: both;}
.youshi ul li{ float: left; width:360px; overflow: hidden; padding:0 10px; margin:10px 0 30px 0;}
.youshi ul li i{ width: 70px; float: left; border-radius: 50%;border:1px solid #ccc; margin-top:10px;}
.youshi ul li:hover h3{color: #3367d6;}
.youshi ul li:hover i{ box-shadow: 0 0 10px #ddd;}
.youshi ul li h3{ float: left; line-height: 50px; padding-left: 20px;}
.youshi p{ color: #777; font-size: 15px;padding:0 0 0 80px; clear: both; }
.product {text-align: center;}
.video{ width: 100%; height: 180px; overflow: hidden; margin:80px 0 30px 0;}
.bg-video{ position: relative; }
.vtext{ position:absolute; top: 30px; z-index: 99 }
.news{padding: 0 20px 0 30px;}
.news h3{text-align: center; font-size: 24px; margin:60px 0 20px 0;}
.news ul li{width: 360px; float: left; margin:20px 10px; overflow: hidden;}
.flink{ clear: both; overflow: hidden; padding: 20px 30px; border-top: 2px solid #888;}
.flink ul li{ float: left; margin-top: 10px; }
.flink ul li a{ margin:0 10px 0 0; }运行实例 »
点击 "运行实例" 按钮查看在线实例
原网站：www.rada.net.cn
代码运行效果：http://43d.cc/front/0328/index.html
