前端学习-POLO360项目实战
学习完前端，拿一个经典的网站设计模板作为练习对象，巩固一下html+css代码基础，顺带搞了一波ps
我的个人博客：https://www.kimiye.xyz
效果展示：
点击查看
index.html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>POLO360</title>
<!-- 引入reset.css清除默认样式 -->
<link rel="stylesheet" type="text/css" href="css/reset.css">
<!-- 引入page-index.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="#">
<img src="image/logo.png" alt="logo">
</a>
</div>
</div>
<div class="banner w">
<img src="image/banner/banner01.png" alt="banner01">
<div class="pointerDiv">
<a href="#"></a>
<a class="active" href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
</div>
<div class="content w clearfix">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
<div class="pl">
<h2>Perfect Logic</h2>
<h3>All you want your website to do.</h3>
<div class="imgDiv">
<img src="image/picture/pic01.png" alt="pic01">
</div>
<p>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 href="#">Learn More</a>
</div>
<div class="cs">
<h2>Complete Solution</h2>
<h3>A tool anything and everything you can think</h3>
<div class="imgDiv">
<img src="image/picture/pic02.png" alt="pic02">
</div>
<p>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 href="#">Learn More</a>
</div>
<div class="uc">
<h2>Uber Culture</h2>
<h3>Fresh. Modern and ready for future</h3>
<div class="imgDiv">
<img src="image/picture/pic03.png" alt="pic03">
</div>
<p>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 href="#">Learn More</a>
</div>
</div>
<div class="contact w clearfix">
<div class="sc">
<h2>Social Connection</h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</p>
<div class="icon">
<a href="#"><img src="image/rss.png" alt="rss"/></a>
<a href="#"><img src="image/fb.png" alt="fb"/></a>
<a href="#"><img src="image/in.png" alt="in"/></a>
<a href="#"><img src="image/yt.png" alt="yt"/></a>
<a href="#"><img src="image/tw.png" alt="tw"/></a>
</div>
<h2 class="nl">Newsletter</h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</p>
<input class="txt" type="text" placeholder="your email address"/>
<button class="btn">Send it</button>
</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="image/1.gif" />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
<img src="image/2.gif" />
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
</p>
<p class="p2">
<img src="image/3.gif" />
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="cp">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>
page-index.css代码
body{
/* 设置背景图片 */
background: url(../image/body-bg.png) repeat-x;
}
/* 解决高度塌陷 */
.clearfix:before, .clearfix:after{
content: "";
display: table;
clear: both;
}
/* 固定宽度并居中 */
.w{
width: 940px;
margin: 0px auto;
}
/* header样式 */
.header{
/* 设置上内边距 */
padding-top: 37px;
/* 设置下内边距 */
padding-bottom: 46px;
}
/* logo样式 */
.logo{
/* 设置左外边距 */
margin-left: 15px;
}
/* 导航条样式 */
.nav{
/* 向右浮动 */
float: right;
/* 设置上外边距 */
margin-top: 22px;
}
/* 导航条列表样式 */
.nav li{
/* 向左浮动 */
float: left;
/* 设置左、右内边距 */
padding: 0px 10px 8px 10px;
/* 设置左边框 */
border-left: 1px #d6d6d6 dotted;
}
/* 导航条超链接样式 */
.nav a{
/* 设置字体样式 */
font: bold 14px Georgia; /* 粗细 大小 字体 */
color: #666666;
/* 去除下划线 */
text-decoration: none;
}
/* 设置导航条超链接伪类 */
.nav a:hover{
color: #a1a1a1;
text-decoration: underline;
}
/* 导航条p标签样式 */
.nav p{
/* 设置字体样式 */
font: 11px Tahoma;
color: #b7b7b7;
}
/* 设置banner样式 */
.banner{
/* 设置高度（不设置的话高度被img撑开 阴影无法显示） */
height: 355px;
/* 设置背景图片 */
background: url(../image/banner-bg.png) no-repeat;
/* 背景图片位置 */
background-position: bottom center;
/* 父元素开启相对定位 */
position: relative;
}
/* 设置pointerDiv样式 */
.pointerDiv{
/* 开启绝对定位 */
position: absolute;
/* 绝对定位位置 */
top: 313px;
left: 18px;
}
/* 设置banner按钮 */
.pointerDiv a{
/* 向左浮动并把a变成块元素（下面设置宽高） */
float: left;
/* 设置宽高 */
width: 17px;
height: 17px;
/* 设置背景图片 */
background: url(../image/pointer.png) no-repeat;
/* 设置左外边距 */
margin-left: 4px;
}
/* 设置banner-active按钮和伪类 */
.pointerDiv .active, .pointerDiv a:hover{
background: url(../image/pointer-active.png) no-repeat;
}
/* 设置content样式 */
.content{
}
/* 设置content中的h1 */
.content h1{
/* 设置字体样式 */
font: bold 24px Georgia;
color: #000000;
text-align: center;
/* 设置上内边距 */
padding-top: 6px;
/* 设置背景图片 */
background: url(../image/line.png) no-repeat;
background-position: bottom center;
/* 设置下内边距（移动line） */
padding-bottom: 20px;
/* 设置下外边距 */
margin-bottom: 38px;
}
/* 设置content中的div */
.content .pl, .content .cs, .content .uc{
float: left;
width: 300px;
}
/* 设置content中的cs样式 */
.content .cs{
/* 左右外边距20px */
margin: 0px 20px;
}
/* 设置h2样式 */
.content h2{
color: #11719e;
font: 21px Georgia;
}
/* 设置h3样式 */
.content h3{
color: #8c8c8c;
font: 12px Myriad Pro;
}
/* 设置imgDiv样式 */
.content .imgDiv{
widows: 299px;
height: 190px;
/* 设置背景图片 */
background: url(../image/img-bg.png) no-repeat;
/* 设置上下外边距 */
margin: 16px 0px 10px 0px;
/* 图片水平居中 */
text-align: center;
/* 使图片垂直居中 */
padding-top: 12px;
}
/* 设置content中的p样式 */
.content p{
height: 92px;
color: #3e3e3e;
font: 13px Myriad Pro;
/* 设置左外边距 */
margin-left: 4px;
word-spacing: 2px;
}
/* 设置content中的button样式 */
.content a{
/* 内联元素改块元素 */
display: block;
width: 163px;
height: 40px;
background: url(../image/btn.png) no-repeat;
text-decoration: none;
color: #016999;
/* 设置字体样式 行高40px（跟button高度相等 垂直居中） */
font: 14px/40px Myriad Pro;
/* 向右缩进1个字符 */
text-indent: 1em;
/* 设置下外边距 */
margin-bottom: 35px;
/* 设置左外边距 */
margin-left: 4px;
}
/* 设置contact样式 */
.contact{
background: url(../image/contact-bg.png) no-repeat top center;
}
/* 设置contact中的div */
.contact .sc, .contact .co, .contact .nu{
float: left;
width: 300px;
}
/* 设置content中的co样式 */
.contact .co{
/* 左右外边距20px */
margin: 0px 20px;
}
/* 设置contact中的表单项 */
.contact .txt{
/* 指定宽高和背景图片 */
width: 276px;
height: 33px;
background: url(../image/txt-bg.png) no-repeat;
/* 去除边框 */
border: none;
/* 去除默认边距 */
padding: 0px 10px;
margin: 0px 0px 16px 0px;
/* 字体 */
color: d4d4d4;
font: 10px Verdana;
}
.contact .tarea{
/* 指定宽高和背景图片 */
width: 276px;
height: 114px;
background: url(../image/tarea-bg.png) no-repeat;
/* 去除边框 */
border: none;
/* 不能改变大小 */
resize: none;
/* 去除默认边距 */
padding: 10px 10px;
margin: 0px;
/* 字体 */
color: d4d4d4;
font: 10px Verdana;
/* 清除IE滚动条样式 */
overflow: auto;
}
/* 设置contact中的btn */
.contact .btn{
/* 指定宽高和背景图片 */
width: 163px;
height: 32px;
background: url(../image/btn2.png) no-repeat;
/* 设置字体 */
color: #ffffff;
font: 13px Georgia;
text-align: left;
text-indent: 1em;
/* 去除边框 */
border: none;
/* 去除默认边距 */
padding: 0px;
margin: 11px 0px 23px 0px;
/* 鼠标指针样式 */
cursor: pointer;
}
/* 设置contact中的h2 */
.contact h2{
/* 设置字体样式 */
font: 18px Georgia;
color: #444444;
/* 设置下边框 */
border-bottom: 1px dashed #d3d3d3;
/* 设置上下外边距 */
margin: 44px 0px 10px 0px;
/* 设置下内边距 */
padding-bottom: 15px;
}
/* 设置contact左侧p标签 */
.sc p{
color: #444444;
font: 12px Myriad Pro;
}
/* 设置icon间距 */
.icon {
/* 清除间距 */
font-size: 0px;
margin-top: 5px;
}
.icon a{
margin-right: 6px;
}
/* 设置左侧的nl */
.contact .nl{
color: #444444;
font: bold 18px Gill Sans MT;
margin-top: 18px;
}
/* 设置左侧的txt边距 */
.sc .txt{
margin-top: 17px;
margin-bottom: 0px;
}
/* 设置右侧p标签 */
.nu p img{
float: left;
margin-right: 8px;
}
.nu p{
height: 58px;
columns: #444444;
font: 12px Myriad Pro;
border-bottom: 1px dashed #d3d3d3;
padding-bottom: 9px;
margin-bottom: 14px;
}
.nu .p2{
margin: 0px 0px 2px;
}
/* 设置footer样式 */
.footer{
height: 183px;
background-color: #333333;
border-top: 10px solid #4c4c4c;
padding:
}
/* footer中的超链接和p */
.footer a, .footer p{
color: #999999;
font: 11px Myriad Pro;
text-decoration: none;
margin-bottom: 10px;
}
.footer .cp{
float: right;
}
.footer .w{
padding: 18px 23px 0px 8px;
}
.footer a:hover{
color: #cacaca;
text-decoration: underline;
}
reset.css代码
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 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;
}
html笔记：
1.html引入外部css/js文件的方法
<!-- css -->
<link rel="stylesheet" type="text/css" href="xxx.css">
<!-- js -->
<script type="text/javascript" src="xxx.js"></script>
2.a是内联元素 a是内联元素 a是内联元素
3.表单使用格式
<form action="#">
xxx
</form>
4.文本框和文本域
<!-- value="值" -->
<input type="text" placeholder="默认水印"/>
<textarea placeholder="默认水印"></textarea>
css笔记：
1.注意高度塌陷 注意高度塌陷 注意高度塌陷
元素浮动的时候注意 元素浮动的时候注意 元素浮动的时候注意
/* 解决高度塌陷 */
.clearfix:before, .clearfix:after{
content: "";
display: table;
clear: both;
}
2.margin和padding
margin:外边距，元素与元素之间的间距
paddind:内边距，元素与内容之间的间距，会造成元素宽高增大
3.border style
none 定义无边框。
hidden 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted 定义点状边框。在大多数浏览器中呈现为实线。
dashed 定义虚线。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。双线的宽度等于 border-width 的值。
groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
inset 定义 3D inset 边框。其效果取决于 border-color 的值。
outset 定义 3D outset 边框。其效果取决于 border-color 的值。
inherit 规定应该从父元素继承边框样式。
4.font
font: bold 14px Georgia; /* 粗细 大小 字体 */
5.文本样式
/* 去除下划线 */
text-decoration: none;
/* 向右缩进1个字符 */
text-indent: 1em;
6.背景
background: url(xxx) [repeat] [position] [position];
/* no-repeat repeat-x repeat-y */
/* left right bottom top center x-px y-px */
7.调节布局时尽量考虑以后同类型组件，方便管理，要有大局观
腾讯公司福利 650人发布
韶音科技二面89人在聊
查看7道真题和解析