HTML/CSS代码练习

要求效果图

polo360.jpg
用ps裁剪提取要用的图片

3.png

html代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>polo360练习</title><link rel="stylesheet" type="text/css" href="css/reset.css"><link rel="stylesheet" type="text/css" href="css/page-index.css"></head><body><div class="header w"><ul class="nav"><li><a href="#">HOME</a><p>Back to home</p></li><li><a href="#">PRODUCTS</a><p>What we have for you</p></li><li><a href="#">SERVICES</a><p>Things we do</p></li><li><a href="#">BLOG</a><p>Follow our updates</p></li><li><a href="#">CONTACT</a><p>Ways to reach us</p></li></ul><div class="logo"><a href="#" title="一个好看的logo"><img src="img/1.png" alt="网站的logo"></a></div></div><div class="banner w"><img src="img/3.png" alt="banner"><div class="pointerDiv"><a href="#"></a><a class="active" href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a></div></div><div class="w content clearfix"><h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1><div class="pl"><h2>Perfect Logic</h2><p class="p1">All you want your website to do.</p><div class="imgDiv"><img src="img/9.gif" alt="背景图"></div><p class="p2">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p><a class="lm" href="#">Learn More</a></div><div class="cs"><h2>Complete Solution</h2><p class="p1">A tool anything and everything you can think</p><div class="imgDiv"><img src="img/10.jpg" alt="背景图"></div><p class="p2">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciun tdolore magnam aliquam quaerat voluptatem.</p><a class="lm" href="#">Learn More</a></div><div class="uc"><h2>Uber Culture</h2><p class="p1">Fresh. Modern and ready for future</p><div class="imgDiv"><img src="img/11.jpg" alt="背景图"></div><p class="p2">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p><a class="lm" href="#">Learn More</a></div></div><div class="contact w clearfix"><div class="sc"><h2>Social Connection</h2><p class="p1">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</p><div class="icon"><a href="#"><img src="img/16.jpg" alt="rss"></a><a href="#"><img src="img/17.jpg" alt="rss"></a><a href="#"><img src="img/18.jpg" alt="rss"></a><a href="#"><img src="img/19.jpg" alt="rss"></a><a href="#"><img src="img/20.jpg" alt="rss"></a><h2 class="nl">Newsletter</h2><p class="p1">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</p><form action="#"><input class="txt" type="text" placeholder="your email address"><button class="btn">Subscribe</button></form></div></div><div class="co"><h2>Contact</h2><form action="#"><input class="txt" type="text" placeholder="your name"><input class="txt" type="text" placeholder="your email address"><textarea class="tarea" placeholder="message"></textarea><button class="btn">Send it</button></form></div><div class="nu"><h2>News Updates</h2><p><img src="img/21.jpg">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p><p><img src="img/22.jpg">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p><p class="no-margin"><img src="img/23.jpg">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.</p><button class="btn">Visit our Blog</button></div></div><div class="footer"><div class="w"><p class="copy">Copyright 2010. Studio VIVROCKS. All Rights Reserved.</p><p>Site Powered by Wordpress. Design and Developed by VIVROCKS.</p><p><a href="#">Home</a> | <a href="#">About</a> | <a href="#">Products</a> | <a href="#">Services</a> | <a href="#">Contact</a></p><p><a href="#">Privacy Policy</a> | <a href="#">Terms of use</a></p></div></div></body>
</html>

reset css代码

/* v2.0 | 20110126http://meyerweb.com/eric/tools/css/reset/ License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display: block;
}
body {line-height: 1;
}
ol, ul {list-style: none;
}
blockquote, q {quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;
}
table {border-collapse: collapse;border-spacing: 0;
}

网页css代码

body{background: url(../img/polo360.png.png) repeat-x;
}
.clearfix:after,.clearfix:before{content: "";display: table;clear: both;
}
.w{width: 940px;margin: 0 auto;
}
.header{padding-top: 37px;padding-bottom: 46px;
}
.logo{margin-left: 15px;
}
.nav{float: right;margin-top: 22px;
}
.nav li{float: left;padding: 0 10px 8px;border-left:1px #d6d6d6 dotted ;
}
.nav a{font: bold 14px Georgia ;text-decoration: none;color: #666;
}
.nav a:hover{color: #c3bfbf;text-decoration: underline;
}
.nav p{font: 11px Tahoma regular;color: #b7b7b7;
}
.banner{height: 356px;background: url(../img/4.png) no-repeat bottom center;position: relative;
}
.pointerDiv{position: absolute;left: 15px;top: 314px;
}
.pointerDiv a{float: left;width: 17px;height: 17px;background: url(../img/5.png) no-repeat;margin-left: 4px;
}
.pointerDiv .active,
.pointerDiv a:hover{background: url(../img/6.png) no-repeat;
}
.content{}
.content h1{text-align: center;font: 24px Georgia bold;color: black;padding: 6px 0 20px 0;background: url(../img/7.png) no-repeat bottom;margin-bottom:38px ;
}
.content .pl , .content .cs , .content .uc,
.contact .sc,.contact .co,.contact .nu{float: left;width: 300px;
}
.content .cs,.contact .co{margin: 0px 20px;
}
.content h2{font: 21px georgia regular;color:  #11719e;
}
.content .p1{font: Myriad Pro regular 12px;color:#8c8c8c;
}
.content .imgDiv{width: 299px;height: 190px;background: url(../img/8.png) no-repeat;margin: 16px 0 10px;/*设置图片位置居中*/text-align: center;padding-top: 12px;
}
.content .p2{height: 92px;color: #3e3e3e;font: 13px helvetica;
}
.content .lm{display: block;width: 163px;height: 40px;background: url(../img/12.png) no-repeat;text-decoration: none;color: #016999;font: 12px/40px helvetica;text-indent: 1em;margin-bottom: 35px;
}
.contact{background: url(../img/4.png) no-repeat top center;
}
.contact .sc,.contact .co,.contact .nu{height: 382px;
}
.contact .txt{width: 276px;height: 33px;background: url(../img/13.gif) no-repeat;border: none;padding: 0px 10px;margin: 3px 0 16px;
}
.contact .tarea{width: 276px;height: 114px;background: url(../img/14.png) no-repeat;border: none;resize: none;padding: 10px;margin: 0px;
}
.contact .btn{width: 163px;height: 32px;background: url(../img/15.png) no-repeat;border: none;padding: 0px;margin: 11px 0 23px;color: #fff;font: 13px georgia;text-align: left;text-indent: 1em;cursor: pointer;
}
.contact .btn:hover{color: yellow;
}
.contact h2{color: #444444;font: 18px/1 georgia ;border-bottom: 1px dashed #d3d3d3;padding: 44px 0 10px;margin-bottom: 15px;
}
.sc .p1{color: #444444;font: 12px/1 helvetica;
}
.sc .icon{font-size: 0px;margin-top: 10px;
}
.sc .icon a{margin-right: 2px;
}
.sc .nl{font: 18px/1 bold  "gill sans mt";padding: 28px 0 8px;
}
.sc .txt{margin: 18px 0 0px;
}
.nu p{color: #444;font:12px/1 helvetica ;height: 58px;border-bottom: 1px dashed #d3d3d3;margin-bottom: 14px;padding-bottom: 12px;
}
.nu .no-margin{margin-bottom: 0px;padding-bottom:9.5px ;
}
.nu img{float:left;margin-right: 8px;
}
.footer{height: 173px;background: #333;border-top: solid 10px #4c4c4c;
}
.footer a,.footer p{font: 11px Myriad Pro;color: #999;text-decoration: none;
}
.footer .w{padding-top: 18px;
}
.footer p{margin-left: 8px;margin-right: 23px;margin-bottom: 6px;
}
.footer .copy{float: right;
}
.footer a:hover{text-decoration: underline;color: #cccaca;
}

结果展示：

1.png

2.png

当然光有源码是不行的，还要有剪切的图片

1.png

3.png

4.png

5.png

6.png

7.png

8.png

9.gif

10.jpg

11.jpg

12.png

13.gif

14.png

15.png

16.jpg

17.jpg

18.jpg

19.jpg

20.jpg

21.jpg

22.jpg

23.jpg

polo360.png.png

我已将该源码和图片上传至网盘中，网盘下载链接：
HTML/CSS制作网页练习

链接：https://pan.baidu.com/s/1zZyrVKhCNiFwzJ0umxW70A
提取码：ay2j

HTML/CSS制作网页相关推荐

html css做网页总结,学习CSS制作网页总结的一些经验
学习CSS制作网页总结的一些经验互联网发布时间:2008-10-17 19:28:20 作者:佚名我要评论让你使用DIV CSS排版不是让你用换个标签然后再去按照表格的方式去排版 ...
做网页很实用代码集合和CSS制作网页小技巧整理
做网页很实用代码集合控制横向和纵向滚动条的显隐?<body style="overflow-y:hidden"> 去掉x轴 <body style=" ...
利用html制作网页的小结,HTML_CSS制作网页的一些经验分享，CSS制作网页总结的一些经验 1: - phpStudy...
CSS制作网页的一些经验分享 CSS制作网页总结的一些经验 1: ID用于标识页面单独元素以及持久行的结构性元素方便JS的调用类用于标识同一页面可重复定义使用的结构性元素 ID与类的命名需与表现形 ...
html css 制作网站,HTML/CSS制作网页
HTML/CSS代码练习要求效果图 polo360.jpg 用ps裁剪提取要用的图片 3.png html代码 polo360练习 HOME Back to home PRODUCTS What w ...
html相册浏览页面怎么做,ul结合CSS制作网页相册滑动浏览效果
ul结合CSS制作网页相册滑动浏览效果互联网发布时间:2008-10-17 19:25:02 作者:佚名我要评论英文原文:Sliding Photograph Galleries ...
用div和css制作网页,DIVCSS网页设计总结:有用的3个网页制作_css
网页制作Webjx文章简介:DIVcss网页设计总结:有用的3个网页制作技巧. 我们在进行DivCSS布局的时候,非常关注CSS技巧的学习,今天向大家推荐3个所谓的 "顶级"CSS ...
CSS - 制作网页技巧
1 ico图标引入ico图标 <link rel="shortcut icon" href="favicon.ico" type="image ...
html图片滚动浏览,ul结合CSS制作网页相册滑动浏览效果
别开生面纯CSS实现相册预览 ximicc.com body{ font-size:12px; color: #CC0000; } p { background-color: #F1FAFE; } # ...
html做相册浏览,ul结合CSS制作网页相册滑动浏览效果
别开生面纯CSS实现相册预览 ximicc.com body{ font-size:12px; color: #CC0000; } p { background-color: #F1FAFE; } # ...
css网页制作的基本步骤,以图例方式介绍CSS制作网页详细步骤
首先要做的是确定页面结构.随着你对CSS布局的逐步学习,这个过程会变得越来越简单.通过运用大量绝对定位和大幅背景图片,我们可以非常简单地完成这个设计. 第三步现在,我们需要两张背景图片.一张大的,存 ...

HTML/CSS制作网页

HTML/CSS代码练习

html代码

reset css代码

网页css代码

HTML/CSS制作网页相关推荐

最新文章

热门文章