html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>火狐首页</title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/common.css"> <link rel="stylesheet" href="css/index.css"> </head> <body> <div class="zong"> <header> <div class="navs clear"> <div class="top-bar"> <div class="layout top-bar"> <ul class="top-bar-lul lfloat"> <li><a href="##">火狐移动联盟</a></li> <span>|</span> <li><a href="##">火狐主页</a></li> <span>|</span> <li><a href="##">火狐社区</a></li> <span>|</span> <li><a href="##">下载火狐浏览器</a></li> </ul> <ul class="top-bar-lul rfloat"> <li><a href="##">网站导航</a></li> <span></span> <li><a href="##">收藏本站</a></li> </ul> </div> </div> </div> <div class="layout"> <div class="header-wrapper clear"> <a href="www.firefox.com" class="lfloat"></a> <div class="search lfloat"> <form action=""> <select name="search" id=""> <option value="百度">百度</option> <option value="必应">必应</option> <option value="搜狗">搜狗</option> </select> <input type="text" name="search"> </div> <div class="lfloat"><p>百度指数 研究生招生</p></div> </form> </div> </div> <div class="header-image layout clear"> <a class="lfloat" href="www.taobao.com"></a> <div style="padding-top:34px;"> 从这里是一组滚动的图片 </div> </div> <div class="header-nav"> <div class="layout"> <a href="##">携程旅行网</a> <a href="##">京东商城</a> <a href="##">1号店商城</a> <a href="##">百度糯米</a> <a href="##">聚美优品</a> <a href="##">亚马逊</a> <a href="##">唯品会</a> <a href="##">小米商城</a> <a href="##">国美在线</a> <a href="##">苏宁易购</a> </div> </div> <div class="header-menu"> <div class="layout"> <ul> <li class="colorblue"><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> <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> </div> </div> </header> <main> <a class="fanhui" href="#"><img src="./imges/jiantou.png" alt=""></a> <div class="sec1 layout clear"> <div class="sec1-left lfloat"> <div class="lunbotu1"> <a href=""><img src="./imges/4crR-fysqfnf9556418.png" alt=""></a> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div class="tupeiwen"> <div class="tupeiwen1" > <div > <ul class="tuwen-biaoqian"> <li class="border-top">科技</li> <li>财经</li> </ul> </div> <h4 class="blue-left"><a href="##">美国AR M200播放器蹭听记:入门开始...</a></h4> <div class="tuwen"> <a href="##"><img src="./imges/Oszl-fyssmmc0604503.jpg" alt=""></a> <p><a>说起AR这个牌子(Acoustic...</a></p> </div> </div> <div class="tupeiwen2"> <h4 class="blue-left"><a href="##">著名风投:Facebook股价将深陷泥潭一...</a></h4> <div class="tuwen"> <a href="##"><img src="./imges/peFF-fyhskrq0504291.jpg" alt=""></a> <p><a href="##">风投家蒙斯特表示，未来广告商必须要考虑在Facebook上投放广告...</a></p> </div> </div> </div> <div class="wenzi-news"> <div> <ul class="tuwen-biaoqian"> <li class="border-top">娱乐</li> <li>社会</li> </ul> </div> <div class="wenzi-news-neirong"> <ul> <li><a href="##" title="任贤齐与郑秀文16年后再合作 自比杨过小龙女">任贤齐与郑秀文16年后再合作 自比杨过小龙女</a></li> <li><a href="##" title="高云翔涉嫌性侵董璇拒回应 原定今晚现身访谈节目">高云翔涉嫌性侵董璇拒回应 原定今晚现身访谈节目</a></li> <li><a href="##" title="公主变凡人！吴千语分手后搬离豪宅租万元房子">公主变凡人！吴千语分手后搬离豪宅租万元房子</a></li> <li><a href="##" title="韩星金汎吴涟序姐弟恋认爱 双方称刚刚才交往">韩星金汎吴涟序姐弟恋认爱 双方称刚刚才交往</a></li> <li><a href="##" title="薛家燕今年入行60年 68岁生日愿望红馆开演唱会">薛家燕今年入行60年 68岁生日愿望红馆开演唱会</a></li> <li><a href="##" title="胡枫向黎明分享当爸心得 称不知会不会多个干孙女">胡枫向黎明分享当爸心得 称不知会不会多个干孙女</a></li> </ul> </div> </div> </div> <div class="sec1-middle lfloat"> <div class="sec1-middle-biaoti clear"> <h3 class="blue-left lfloat">要闻</h3> <span class="rfloat"><a>大牌闪购</a></span> </div> <div class="middle-neirong"> <ul> <li class="jiahei"><a href="##">互联网金融催收公约：着装须文明 现场要录音录像</a></li> <li><a href="##">哥哥初中毕业打工4年 为12岁残疾弟弟攒2万手术费</a></li> <li><a href="##">伤人逃犯得知同伙受审去听庭审 被受害者家属认出</a></li> <li><a href="##">3名公安协勤收钱删吸毒者案底 同伙发朋友圈揽客</a></li> <li><a href="##">男子为一颗杨梅杀人后逃亡24年 中巨额彩票不敢花</a></li> </ul> </div> <div class="middle-neirong"> <ul> <li class="jiahei"><a href="##">北京今晨解除沙尘蓝色预警信号 能见度已明显转好</a></li> <li><a href="##">行人闯红灯被逮 广州交警：可自拍发朋友圈集20赞</a></li> <li><a href="##">国务院“双首长”部门如何分工？改革前后不一样</a></li> <li><a href="##">美贸易代表:6月份前不会对华增税 有望避免关税战</a></li> <li><a href="##">武统台湾需要多久?南京军区副司令员:不用3天拿下</a></li> </ul> </div> <div class="middle-neirong"> <ul> <li class="jiahei"><a href="##">日本“第一夫人”被曝身兼多职 挂55个名誉职位</a></li> <li><a href="##">韩法院决定不予批捕涉性侵前忠清南道知事安熙正</a></li> <li><a href="##">韩首架F-35A战机出厂 韩媒：大有助于慑止战争</a></li> <li><a href="##">英首相府:英德商定共同对抗“俄愈演愈烈的攻击”</a></li> <li><a href="##">两架客机在以色列机场发生尾翼相撞</a></li> </ul> </div> <div class="middle-neirong"> <ul> <li class="jiahei"><a href="##">高云翔被曝涉性侵在悉尼被捕 曾出演《芈月传》</a></li> <li><a href="##">“易视网”不发货又失联疑骗钱遭投诉 负责人回应</a></li> <li><a href="##">14岁男孩入研究生复试:年龄不够参加高考只好考研</a></li> <li><a href="##">“黑老大”涉黑赌博被判10年 撑面子买枪买关公刀</a></li> <li><a href="##">小区内拟建养老护理院 因设临终关怀科遭反对搁浅</a></li> </ul> </div> <div class="middle-neirong"> <ul> <li class="jiahei"><a href="##">苹果公司故意使手机性能变慢 在美受到近60起投诉</a></li> <li><a href="##">美加州一辆SUV跌下悬崖 6名儿童2名女性恐遇难</a></li> <li><a href="##">阿桑奇被禁与外界通讯 厄方:不排除采取其他措施</a></li> <li><a href="##">所罗门群岛附近海域5.0级地震 震源深度76.3公里</a></li> <li><a href="##">俄前间谍病情堪忧 分析人士:其生命关乎国际局势</a></li> </ul> </div> </div> <div class="sec1-right lfloat"> <div class="sec1-right-tuwen"> <h3 class="blue-left">八卦</h3> <ul class="clear"> <li class="lfloat"> <a href="##"> <img src="./imges/FNgS-fyssmmc0611053.jpg" alt=""> </a> <p> <a href=""> <歌手>开启最后一场</a> </p> </li> <li class="lfloat"> <a href="##"> <img src="./imges/bh9p-fyssmmc0612382.jpg" alt=""> </a> <p> <a>与高云翔涉性侵案男子</a> </p> </li> <li class="lfloat"> <a href="##"> <img src="./imges/y6vX-fyssmmc0604999.jpg" alt=""> </a> <p><a href="##">杨陈琳否认和林荣浩</a></p> </li> <li class="lfloat"> <a href="##"> <img src="./imges/-x_J-fyssmmc0595051.jpg" alt=""> </a> <p><a href="##">杨云晒双胞胎女儿欢欢</a></p> </li> </ul> </div> <div class="sec1-right-kandian"> <h3 class="blue-left">今日看点</h3> <ul> <li><a href="##" title="老司机以为被拍到超速 下车把值7万多测速仪扔了">老司机以为被拍到超速 下车把值7万多测速</a></li> <li><a href="##" title="手机里有钱的最好关掉这个开关 多人已被盗">手机里有钱的最好关掉这个开关 多人已被盗</a></li> <li><a href="##" title="花花公子宣布删除Facebook官方主页 称价值观不同">花花公子宣布删除Facebook官方主页 称价</a></li> <li><a href="##" title="熊孩子嫌学习难留自杀遗书 众人苦寻他却暗中观察">熊孩子嫌学习难留自杀遗书 众人苦寻他却暗</a></li> <li><a href="##" title="男子无证醉驾撞墙 被送医后又偷开救护车撞上台阶">男子无证醉驾撞墙 被送医后又偷开救护车撞</a></li> <li><a href="##" title="老人花3.5万让美容"</a></li> <li><a href="##" title="九旬老人把乘公交当“锻炼” 主动要签免责合同">九旬老人把乘公交当“锻炼” 主动要签免责合同</a></li> </ul> </div> <div class="sec1-right-image"></div> </div> </div> </main> <footer> <div class="layout"> <p> <a href="##">在线反馈</a><span>|</span> <a href="##">常见问题</a><span>|</span> <a href="##">职业机会</a><span>|</span> <a href="##">关于我们</a><span>|</span> <a href="##">联系我们</a><span>|</span> <a href="##">法律声明</a><span>|</span> <a href="##">火狐官网</a><span>|</span> <a href="##">火狐社区</a> </p> <p>Copyright ©2011 Mozilla Firefox.北京谋智火狐信息技术有限公司版权所有.</p> <p>京ICP备11011334号-1</p> <p><img src="./imges/7_5abca89f90a300.png" alt="">京公网安备11010102001811号</p> </div> </footer> </div> </body> </html>
css重置代码
body,h1,h2,h3,h4,h5,h6,p,ul,li{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
a{
text-decoration: none;
}css公共代码
body{
color: #aaa;
font-size: 14px;
}
.layout{
margin: 0 auto;
width: 1000px;
min-width: 1000px;
}
.clear{
clear:both
}
.lfloat{
float: left;
}
.rfloat{
float: right;
}
img{
width: 100%;
height: 100%;
}
.blue-left{
border-left:3px solid #0066cc;
}
.border-top{
border-top: 2px solid #0066cc;
}css 首屏页面代码
/* 去掉横向的滚动条 */
body{
overflow-x: hidden;
}
/* 头部 */
/* 顶栏 */
a{
color: #aaa;
}
a:hover{
color: #ff9500 !important;
text-decoration: underline;
}
header{
background: #f9f9f9;
}
.navs{
height: 30px;
border-bottom: 1px solid #edeef0;
font-size: 12px;
color: #aaa;
line-height: 30px;
background: #fcfcfc;
}
.top-bar-lul li{
display: inline-block;
}
.top-bar li a:hover{
color: #ff9500;
}
.top-bar-lul span{
margin: 0 10px;
font-size: 16px;
color: rgba(170, 170, 170, 0.322)
}
/* 头部第二层 */
.header-wrapper{
padding: 12px 0;
overflow: hidden;
}
.header-wrapper a{
margin-right: 100px;
width: 200px;
height: 68px;
display: block;
background: url("../imges/logo_zww.png") center no-repeat;
}
.search{
margin-top: 15px;
margin-right: 20px;
width: 398px;
height: 30px;
border: 1px solid #aaa;
text-align: center;
}
.search select{
width: 72px;
height: 30px;
border: 0;
border-right: 1px solid #aaa;
}
.search input{
width: 312px;
height: 25px;
outline: 0;
border: 0;
}
.header-wrapper p{
margin-top: 22px;
}
/* 头部图片 */
.header-image{
height: 88px;
border: 1px solid #aaa;
overflow: hidden;
}
.header-image a{
width: 134px;
height: 88px;
text-align: center;
background: url("../imges/T16NiRFrdcXXXBSxLq-86-40.gif") center no-repeat;
}
.header-image a img{
vertical-align: middle;
}
/* 头部图片下的导航 */
.header-nav{
margin-bottom: 15px;
height: 30px;
text-align: center;
line-height: 30px;
}
.header-nav a{
margin: 0 14px;
font-size: 12px;
}
.header-nav a:hover{
color: #ff9500
}
/* 头部菜单栏 */
.header-menu{
height: 30px;
background: #f4f4f4;
border-top: 2px solid #0066cc;
border-bottom: 1px solid #e7e6e6;
}
.header-menu li{
display: inline-block;
width: 60px;
height: 30px;
text-align: center;
line-height: 30px;
}
.header-menu a{
color: #777;
font: 14px 微软雅黑 ;
}
.header-menu a:hover{
color: #ff9500;
}
.colorblue{
background: #0066cc;
}
.header-menu .colorblue a{
color: white;
}
.header-menu .colorblue a:hover{
color: white;
}
/* 中间内容开始 */
/* 返回首页 */
.fanhui{
position:fixed;
right: 5%;
bottom: 20%;
z-index: 2;
cursor: pointer;
}
.fanhui img{
width: 40px;
height: 40px;
}
/* 第一组内容 */
.sec1{
margin: 20px auto;
border-bottom: 1px dotted rgba(170, 170, 170, 0.555);
overflow: hidden;
}
/* 左边 */
.sec1-left{
width: 300px;
/* height: 878px; */
text-align: center;
/* border: 1px solid red; */
}
.lunbotu1{
margin-bottom: 35px;
}
.lunbotu1 a{
display: block;
width: 298px;
height: 238px;
border: 1px solid #aaa;
overflow: hidden;
}
.lunbotu1 ul{
margin: 5px auto;
}
.lunbotu1 ul li{
margin: 0 3px;
display: inline-block;
width: 8px;
height: 5px;
background: #aaa;
}
.tupeiwen{
margin-bottom: 35px;
width: 300px;
text-align: left;
}
.tupeiwen>div{
margin: 35px auto;
width: 300px;
}
.tuwen-biaoqian{
text-align: left;
}
.tuwen-biaoqian li{
display: inline-block;
width: 72px;
height: 30px;
text-align: center;
font-size: 14px;
line-height: 30px;
color: black;
font-weight: 700;
}
.tupeiwen h4{
margin: 5px auto;
}
.tupeiwen h4 a{
margin-left: 12px;
color: black;
}
.tuwen{
width: 300px;
height: 92px;
}
.tuwen a{
display: inline-block;
width: 134px;
height: 92px;
color: black;
font-size: 12px;
}
.tuwen p{
padding: 8px;
display: inline-block;
height: 76px;
vertical-align: top;
background: #f9f9f9;
}
.wenzi-news-neirong li{
margin: 10px auto;
list-style: square;
text-align: left;
height: 22px;
vertical-align: middle;
list-style-position: inside;
overflow: hidden;
}
.wenzi-news-neirong li a{
color: black;
}
/* 第一组中间 */
.sec1-middle{
margin: 0 30px;
}
.sec1-middle h3{
padding-left: 12px;
color: black;
}
.sec1-middle-biaoti{
overflow: hidden;
width: 340px;
padding: 8px 0;
border-bottom: 1px solid rgba(170, 170, 170, 0.562);
}
.sec1-middle-biaoti span{
vertical-align: middle;
}
.middle-neirong{
border-bottom: 1px dotted rgba(170, 170, 170, 0.562);
}
.middle-neirong:nth-of-type(6){
border-bottom: 0;
}
.middle-neirong li{
margin: 10px auto;
line-height: 21px;
list-style-type: circle;
vertical-align: middle;
list-style-position: inside;
overflow: hidden;
}
.middle-neirong li a{
color: black;
}
.jiahei{
font-weight: 700;
}
/* 第一组右边 */
.sec1-right{
width: 300px;
overflow: hidden;
}
.sec1-right h3{
margin-bottom: 10px;
padding-left: 12px;
color: black;
}
.sec1-right-tuwen ul{
text-align: center;
overflow: hidden;
}
.sec1-right-tuwen li:nth-of-type(2n-1){
margin-right: 20px;
margin-bottom: 10px;
}
.sec1-right-tuwen li:nth-of-type(2n){
margin-bottom: 10px;
}
.sec1-right-tuwen img{
width: 138px;
height: 96px;
}
.sec1-right a{
color: black;
}
.sec1-right-kandian ul{
margin-bottom: 20px;
width: 300px;
height: 210px;
background: #f9f9f9;
}
.sec1-right-kandian li{
width: 300px;
line-height: 32px;
list-style: square;
list-style-position: inside;
}
.sec1-right-image{
width: 300px;
height: 250px;
background: url("../imges/F001Nl1QjYzN00171Rxh.jpg") center no-repeat;
background-size: 100% 100%;
}
/* 底部 */
footer{
padding: 20px;
width: 100%;
border-top: 1px solid #edeef0;
background: #f9f9f9;
font-size: 12px;
text-align: center;
}
footer p:nth-of-type(1){
height: 30px;
}
footer span{
margin: 0 6px;
}
footer p img{
width: 20px;
height: 20px;
vertical-align: top;
}总结:
只是仿制静态页面,能复用的代码尽量复用,这样可以加快速度,让代码更加简介.仿制过程中,出现一个属性无效的情况,找来找去,发现是其中一个属性的单词拼错了,这一点要注意.
还有一个问题,css的代码是从外部引用的,在实际使用的过程中是按照引用的顺序来的,后引用的相同的会覆盖之前引用的,这一点也要注意.
还有一个问题,权重问题,在css实际编写中,权重问题会造成有的样式不能生效,如果写的单词没问题,格式没问题,那么就要考虑这方面.
最后一个问题,css类名污染问题.页面写的复杂了, 相对的,css的样式也就会复杂,并且有可能一个css的文件不能整完所有样式,当分类,分文件编写样式时,要注意类名的使用.
最后一个,
重点注意事项:
1.写注释
2.用语义化的类名,就算用拼音,也要让你再看到代码时,不用费太大劲就知道他写的是什么.
