网页源码详解网页实战-含代码

导读网页实战--->「这是我曾经做的一个demo，如果有什么所谓的不合适侵权啊啥的，不该放人家logo啊什么的，请告诉我，我将删除这个文章」1、在开始写网页乃至....

网页实战--->「这是我曾经做的一个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 ><a src=><img src="http://img.studyofnet.comimg/logo.png" /><h1>教职工活动平台</h1></a><ul ><li><a href="###" >首页</a></li><li><a href="###">活动票务</a></li><li><a href="###">联系我们</a></li></ul><div ><div ><img src="http://img.studyofnet.comimg/search.png" /> <input /></div><a href="###">统一身份认证登录</a></div></div>

2、轮播图

我用的是swiper插件，代码都不太好意思复制，还是不要脸的复制上了，插件如何使用就不详说了，随便一搜一大把，官方的更好。你值得更好的-----⛽️

<!--轮播区域start--><div ><div ><div ><img src="http://img.studyofnet.comimg/banner1.jpg" /></div><div ><img src="http://img.studyofnet.comimg/banner2.jpg" /></div><div ><img src="http://img.studyofnet.comimg/banner3.jpg" /></div><div ><img src="http://img.studyofnet.comimg/banner4.jpg" /></div></div><!-- 如果需要分页器 --><div ></div></div><!--区域轮播end-->

3、内容部分，这部分我其实有用媒体查询，我的电脑小是1440px，设计稿是1920px「一列是有4个内容块的」，于是我开发的时候，思考在台式打电脑上，一列应该显示有4个内容块，小电脑上显示有3个内容块，这样可以使内容块100%还原设计稿。

<ul ><li><img src="http://img.studyofnet.comimg/active.jpg" /><h3>ITMA2019-全球最大的国际纺织和制衣业技术展览会</h3><p><i><img src="http://img.studyofnet.comimg/time.png" /> </i>2018-03-31 09:00 星期二</p><p><i><img src="http://img.studyofnet.comimg/pic.png" /> </i>每个名额预订票数为 2 张</p><a href="###">距离开始：02 天 19 小时 55 分 33 秒</a></li><li><img src="http://img.studyofnet.comimg/active.jpg" /><h3>ITMA2019-全球最大的国际纺织和制衣业技术展览会</h3><p><i><img src="http://img.studyofnet.comimg/time.png" /> </i>2018-03-31 09:00 星期二</p><p><i><img src="http://img.studyofnet.comimg/pic.png" /> </i>每个名额预订票数为 2 张</p><a href="###" >立即报名</a></li><li><img src="http://img.studyofnet.comimg/active.jpg" /><h3>ITMA2019-全球最大的国际纺织和制衣业技术展览会</h3><p><i><img src="http://img.studyofnet.comimg/time.png" /> </i>2018-03-31 09:00 星期二</p><p><i><img src="http://img.studyofnet.comimg/pic.png" /> </i>每个名额预订票数为 2 张</p><a href="###" >立即报名</a></li><li><img src="http://img.studyofnet.comimg/active.jpg" /><h3>ITMA2019-全球最大的国际纺织和制衣业技术展览会</h3><p><i><img src="http://img.studyofnet.comimg/time.png" /> </i>2018-03-31 09:00 星期二</p><p><i><img src="http://img.studyofnet.comimg/pic.png" /> </i>每个名额预订票数为 2 张</p><a href="###" >活动已结束</a></li><li><img src="http://img.studyofnet.comimg/active.jpg" /><h3>ITMA2019-全球最大的国际纺织和制衣业技术展览会</h3><p><i><img src="http://img.studyofnet.comimg/time.png" /> </i>2018-03-31 09:00 星期二</p><p><i><img src="http://img.studyofnet.comimg/pic.png" /> </i>每个名额预订票数为 2 张</p><a href="###">距离开始：02 天 19 小时 55 分 33 秒</a></li><li><img src="http://img.studyofnet.comimg/active.jpg" /><h3>ITMA2019-全球最大的国际纺织和制衣业技术展览会</h3><p><i><img src="http://img.studyofnet.comimg/time.png" /> </i>2018-03-31 09:00 星期二</p><p><i><img src="http://img.studyofnet.comimg/pic.png" /> </i>每个名额预订票数为 2 张</p><a href="###" >立即报名</a></li><li><img src="http://img.studyofnet.comimg/active.jpg" /><h3>ITMA2019-全球最大的国际纺织和制衣业技术展览会</h3><p><i><img src="http://img.studyofnet.comimg/time.png" /> </i>2018-03-31 09:00 星期二</p><p><i><img src="http://img.studyofnet.comimg/pic.png" /> </i>每个名额预订票数为 2 张</p><a href="###" >立即报名</a></li><li><img src="http://img.studyofnet.comimg/active.jpg" /><h3>ITMA2019-全球最大的国际纺织和制衣业技术展览会</h3><p><i><img src="http://img.studyofnet.comimg/time.png" /> </i>2018-03-31 09:00 星期二</p><p><i><img src="http://img.studyofnet.comimg/pic.png" /> </i>每个名额预订票数为 2 张</p><a href="###" >活动已结束</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;}}

好像特别初级的样子，我也不太好表达，总有一些人 有一些天生的缺陷。。例如我 不善言辞--

如果能帮助你，我也很开心～～～