网页实战--->「这是我曾经做的一个demo，如果有什么所谓的不合适侵权啊啥的，不该放人家logo啊什么的，请告诉我，我将删除这个文章」
1、在开始写网页乃至整个网站的时候，建立好项目后，一定要先写一个重置样式的css文件，可以将浏览器、标签自带的例如padding等其他属性重置一下，以防影响我们自己的布局。
/* reset */
/* outline: none; */
body{background: #f6f6f6 none repeat scroll 0 0;font-size: 14px; margin: 0px;font-family: Helvetica,"Microsoft Yahei",arial,"Hiragino Sans GB",sans-serif; color: #333333; min-width: 1080px;}
body,h1,h2,h3,h4,h5,h6,p,dl,dd,ul,ol,pre,form,input,textarea,th,td,select,table{margin:0;padding:0;}
em,i,b,strong{font-style:normal;font-weight: normal;}
/* 清除浮动 */
.clear:after{content:'';display:block;clear:both;}
.clear{zoom:1;}
----等
2、然后确定好布局再写代码，我不建议一个div包裹所有的。如图设计稿，我的做法是：分为头部、轮播图部、内容部、底部。我认为这样的好处，加载也友好，维护也友好---就是好，。
【现在都建议开发过程中注重前端语义化，我解释一下语义化：它是前端开发的专业术语，简单的说就是：头部我们用<header>、导航我们用 <nav>、底部我们用<footer>等，这样优点有助于构架良好的html结构，搜索引擎抓取的友好度提升，维护成本降低等等，可以搜索引擎搜去。这样Html5标准的火起来 还是有它的道理的吧，也很好理解它定义的header footer nav article标准了吧。】
说了这么多，然而我并没有，why？因为好的东西，有的需要，有的不需要。。。
头部：html部分 <div class="header clear"> <a class="logo" src=''> <img src="img/logo.png" /> <h1>教职工活动平台</h1> </a> <ul class="hs-link clear"> <li> <a href="###" class="active">首页</a> </li> <li> <a href="###">活动票务</a> </li> <li> <a href="###">联系我们</a> </li> </ul> <div class="header-right clear"> <div class="search"> <img src="img/search.png" /> <input /> </div> <a href="###">统一身份认证登录</a> </div> </div>
2、轮播图
我用的是swiper插件，代码都不太好意思复制，还是不要脸的复制上了，插件如何使用就不详说了，随便一搜一大把，官方的更好。你值得更好的-----??
<!--轮播区域start--> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="img/banner1.jpg" /> </div> <div class="swiper-slide"> <img src="img/banner2.jpg" /> </div> <div class="swiper-slide"> <img src="img/banner3.jpg" /> </div> <div class="swiper-slide"> <img src="img/banner4.jpg" /> </div> </div> <!-- 如果需要分页器 --> <div class="swiper-pagination"> </div> </div> <!--区域轮播end-->
3、内容部分，这部分我其实有用媒体查询，我的电脑小是1440px，设计稿是1920px「一列是有4个内容块的」，于是我开发的时候，思考在台式打电脑上，一列应该显示有4个内容块，小电脑上显示有3个内容块，这样可以使内容块100%还原设计稿。
<ul class="clear"> <li> <img src="img/active.jpg" /> <h3>ITMA2019-全球最大的国际纺织和制衣业技术展览会</h3> <p><i><img src="img/time.png" /> </i>2018-03-31 09:00 星期二</p> <p><i><img src="img/pic.png" /> </i>每个名额预订票数为 2 张</p> <a href="###">距离开始：02 天 19 小时 55 分 33 秒</a> </li> <li> <img src="img/active.jpg" /> <h3>ITMA2019-全球最大的国际纺织和制衣业技术展览会</h3> <p><i><img src="img/time.png" /> </i>2018-03-31 09:00 星期二</p> <p><i><img src="img/pic.png" /> </i>每个名额预订票数为 2 张</p> <a href="###" class="enroll">立即报名</a> </li> <li> <img src="img/active.jpg" /> <h3>ITMA2019-全球最大的国际纺织和制衣业技术展览会</h3> <p><i><img src="img/time.png" /> </i>2018-03-31 09:00 星期二</p> <p><i><img src="img/pic.png" /> </i>每个名额预订票数为 2 张</p> <a href="###" class="enroll">立即报名</a> </li> <li> <img src="img/active.jpg" /> <h3>ITMA2019-全球最大的国际纺织和制衣业技术展览会</h3> <p><i><img src="img/time.png" /> </i>2018-03-31 09:00 星期二</p> <p><i><img src="img/pic.png" /> </i>每个名额预订票数为 2 张</p> <a href="###" class="end">活动已结束</a> </li> <li> <img src="img/active.jpg" /> <h3>ITMA2019-全球最大的国际纺织和制衣业技术展览会</h3> <p><i><img src="img/time.png" /> </i>2018-03-31 09:00 星期二</p> <p><i><img src="img/pic.png" /> </i>每个名额预订票数为 2 张</p> <a href="###">距离开始：02 天 19 小时 55 分 33 秒</a> </li> <li> <img src="img/active.jpg" /> <h3>ITMA2019-全球最大的国际纺织和制衣业技术展览会</h3> <p><i><img src="img/time.png" /> </i>2018-03-31 09:00 星期二</p> <p><i><img src="img/pic.png" /> </i>每个名额预订票数为 2 张</p> <a href="###" class="enroll">立即报名</a> </li> <li> <img src="img/active.jpg" /> <h3>ITMA2019-全球最大的国际纺织和制衣业技术展览会</h3> <p><i><img src="img/time.png" /> </i>2018-03-31 09:00 星期二</p> <p><i><img src="img/pic.png" /> </i>每个名额预订票数为 2 张</p> <a href="###" class="enroll">立即报名</a> </li> <li> <img src="img/active.jpg" /> <h3>ITMA2019-全球最大的国际纺织和制衣业技术展览会</h3> <p><i><img src="img/time.png" /> </i>2018-03-31 09:00 星期二</p> <p><i><img src="img/pic.png" /> </i>每个名额预订票数为 2 张</p> <a href="###" class="end">活动已结束</a> </li> </ul>
结构很简单，就是ul无需列表，ul列表的用处太广泛了，真的，大家一定要好好用，因为这部分用了媒体查询，所以css样式的重要部分有必要贴出来的。
//要保持绝对的对称，所以显示3列，4列的时候，间距的需要特别注意
.newactive li:nth-of-type(3n+3) {
margin-right: 0px;
}
.newactive li:nth-of-type(4n+4) {
margin-right: 30px;
}
//媒体查询
@media screen and (max-width: 1440px) {
.logo{ padding: 17px 28px 14px 28px;}
.logo h1{font-size: 26px;padding-left:24px }
.hs-link li a{padding: 14px;}
}
好像特别初级的样子，我也不太好表达，总有一些人 有一些天生的缺陷。。例如我 不善言辞--
如果能帮助你，我也很开心～～～