html+css技术去实现一个静态网站
1 企业站
http://www.boyaa.com/ 首页
大家课后完成 游戏http://www.boyaa.com/game.html
http://www.boyaa.com/news.html
2 电商类网站
京东 淘宝 天猫 小米
================================================
*.psd
美工---------->前端开发人员--------->网页（PC+移动端页面）
*.png
================================================
1 网站是一系列网页的集合
2 网站目录结构
-boyaa
--*.html
--css文件夹 管理css
--js文件夹 管理js
--img文件夹 管理图片
--font文件夹 管理字体图标
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>博雅首页</title> <link rel="stylesheet" type="text/css" href="css/reset.css" /> <link rel="stylesheet" type="text/css" href="css/common.css" /> </head> <body> <!--Header部分开始--> <div class="header"> <div class="inner_c"> <h1 class="logo"> <a href="index.html">博雅互动,手机游戏</a> </h1> <ul class="nav"> <li class="current"><a href="index.html">首页</a></li> <li><a href="game.html">博雅游戏</a></li> <li><a href="news.html">博雅新闻</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">客服中心</a></li> <li><a href="#">投资者关系</a></li> </ul> <div class="join-us"> <a href="#">加入我们</a> </div> </div> </div> <!--Header部分结束--> <!--banner部分开始--> <div class="banner"> <ul> <li><img src="" alt=""></li> <li><img src="" alt=""></li> <li><img src="" alt=""></li> <li><img src="" alt=""></li> </ul> <ol> <li></li> <li></li> <li></li> <li></li> </ol> </div> <!--banner部分结束--> </body> </html>
common.css
/* 公共类 */ body { font-size: 14px; color: #444866; font-family: "Arial","微软雅黑","宋体"; } a { text-decoration: none; color: #444866; } a:hover { color: #33b972; } .inner_c { width: 1000px; margin: 0 auto; } /* 头部header部分 */ .header { height: 58px; background-color: #000; background-color: #191d3a; } .header .logo { width: 205px; padding: 10px 0 0 20px; float: left; /* background-color: red; */ } .header .logo a { background: url(../img/logo.png) no-repeat; width: 157px; height: 35px; display: block; text-indent: -9999em; overflow: hidden; } .header .nav { float: left; width: 654px; overflow: hidden; border-left: 1px solid #252947; } .header .nav li { height: 58px; line-height: 58px; float: left; text-align: center; width: 85px; border-right: 1px solid #252947; } .header .nav li a { color: #818496; display: block; } .header .nav li.current { background-color: #252947; } .header .nav li.current a { color: #fff; } .header .join-us { float: left; width: 100px; padding-top: 12px; } .header .join-us a { width: 98px; height: 32px; line-height: 32px; text-align: center; color: #fff; background: #38b774; display: block; border-radius: 5px; border: 1px solid #3aca7a; }
index.css
index.css
reset.css
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0} ol,ul { list-style: none; }