热门关键词:十大信誉的平台网址,最有信誉的网投app  
当前位置:首页 > 案例展示
网页实战-含代码_十大信誉的平台网址
2021-10-29 [39659]
本文摘要:网页实战--->「这是我曾经做的一个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;}}似乎特别低级的样子,我也不太好表达,总有一些人 有一些天生的缺陷。例如我 不善言辞--如果能资助你,我也很开心~~~。


本文关键词:十大信誉的平台网址,最有信誉的网投app

本文来源:十大信誉的平台网址-www.iro-onna.net