网页实战-含代码

本文摘要：网页实战---「这是我曾经做的一个demo，如果有什么所谓的不合适侵权啊啥的，不应放人家logo啊什么的，请告诉我，我将删除这个文章」1、在开始写网页以致整个网站的时候，建设好项目后，一定要先写一个重置样式的css文件，可以将浏览器、标签自带的例如padding等其他属性重置一下，以防影响我们自己的结构。

网页实战--->「这是我曾经做的一个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;}}似乎特别低级的样子，我也不太好表达，总有一些人 有一些天生的缺陷。例如我 不善言辞--如果能资助你，我也很开心～～～。

本文关键词：网页,实战,含,代码,网页,实战,---,「,这,是我,kaiyun

本文来源：kaiyun-www.gdyiban.com