概述
文章目录
- POLO360网页效果图
- HTML代码
- CSS代码
POLO360网页效果图
目前为止我们关于HTML和CSS的基础内容就差不多了，我们做一POLO360网页来巩固我们的知识，从实践中总结经验！！！我们看一下这次要做的网页：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w2DeDGdo-1588067178447)(/Users/mac/Desktop/MarkDown /polo360/polo360picture/1.png)]](https://file2.kaopuke.com:8081/files_image/2023061300/20200428174650144.png)
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-->
<link rel="stylesheet" type="text/css" href="css/page-index.css"/>
</head>
<body>
<!--
id class 文件 命名规范
- 命名时尽量使用英文，如果不会可以使用拼音。
- 命名格式：
- 驼峰命名法：首字母小写，每个单词的开头字母大写。
- 所有的字母都小写，单词之间使用_或-连接。
-->
<!--创建头部div header-->
<!--header开始-->
<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中设置logo，将logo放在导航条的下面-->
<div class="logo">
<a href="#" title="一个非常非常好的网站！！">
<img src="img/logo.png" alt="网站的logo"/>
</a>
</div>
</div>
<!--header结束-->
<!--banner开始-->
<div class="banner w">
<img src="img/banner/banner1.png" alt="这是一个图片"/>
<!--创建一个div，用于防止导航按钮-->
<div class="pointerDiv">
<a href="#"></a>
<a href="#" class="active"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
</div>
<!--banner结束-->
<!--content开始-->
<div class="content w clearfix">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
<!--方式内容的三个div-->
<div class="pl">
<h2>Perfect Logic</h2>
<p class="p1">All you want your website to do.</p>
<!--创建图片的div-->
<div class="imgDiv">
<img src="img/pic/pic1.jpg" alt="小男孩"/>
</div>
<p class="p2">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quaeab illo inventore veritatis et quasi architocto beatae vitae dicta sunt.
</p>
<a href="#" class="lm">Learn More</a>
</div>
<div class="cs">
<h2>Compete Solution</h2>
<p class="p1">All you want your website to do.</p>
<!--创建图片的div-->
<div class="imgDiv">
<img src="img/pic/pic2.jpg" alt="小女孩"/>
</div>
<p class="p2">
Nemo qnim ipasam voluptatem quia voluptas sit aspernatur aut odit aut fugit,sed quia consequuntur magni dolores eos qui ratione volupatatem sequi nesciun tdolore magnam aliquam quaerat voluptatem.
</p>
<a href="#" class="lm">Learn More</a>
</div>
<div class="uc">
<h2>Uber Culture</h2>
<p class="p1">All you want your website to do.</p>
<!--创建图片的div-->
<div class="imgDiv">
<img src="img/pic/pic3.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 href="#" class="lm">Learn More</a>
</div>
</div>
<!--content结束-->
<!--contact开始-->
<div class="contact w clearfix">
<!--创建三栏div-->
<dic class="sc">
<h2>Social Connection</h2>
<!--设置段落-->
<p class="p1">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.</p>
<!--设置小图标div-->
<div class="icon">
<a href="#"><img src="img/rss.jpg"/></a>
<a href="#"><img src="img/fb.jpg"/></a>
<a href="#"><img src="img/in.jpg"/></a>
<a href="#"><img src="img/yt.jpg"/></a>
<a href="#"><img src="img/tw.jpg"/></a>
</div>
<h2 class="nl">Newsletter</h2>
<p class="p1">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.</p>
<input class="txt" type="text" placeholder="your name"/>
<button class="btn">Subscribe</button>
</dic>
<!--联系栏中间部分-->
<div class="co">
<!--创建镖旗-->
<h2>Contact</h2>
<!--创建表单-->
<form action="#">
<!--
在文本框和文本域中可以指定提示文字，placeholder属性。
这个属性在IE8及以下的版本不支持，如果要兼容IE8需要使用JS。
-->
<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 Upadas</h2>
<p>
<img src="img/1.jpg"/>
Lorem ipsum dolor sit amet , consectetur adipidicing elit , sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
<img src="img/2.jpg"/>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloreamque laudantium, totam rem aperiam.
</p>
<p class="no-margin">
<img src="img/3.jpg"/>
At vero eos et accusamus et iusto odio dignissimos ducimus qui blandtiis praesentium.
</p>
<button class="btn">Visit our Blog</button>
</div>
</div>
<!--contact结束-->
<!--footer开始-->
<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 VIVEOCKS.</p>
<p><a href="">Home</a> | <a href="">About</a> | <a href="">Proudct</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>
<!--footer结束-->
</body>
</html>
CSS代码
/*
* 在这里编辑主页样式表
*/
/*设置body*/
body{
/*方便调试添加高度*/
/*height:3000px;*/
/*设置body的背景水平方向 重复*/
background: url(../img/bd-bg.png) repeat-x;
}
/*解决高度塌陷问题的clearfix*/
.clearfix:before,
.clearfix:after{
content: "";
display: table;
clear: both;
}
/*固定元素的宽度和居中*/
.w{
width: 940px;
margin: 0 auto;
}
/*设置header*/
.header{
/*设置背景颜色以便观察*/
/*background-color: #bfa;*/
/*设置上内边距使header垂直居中*/
padding-top: 37px;
/*设置下内边距*/
padding-bottom: 49px;
}
.logo{
/*设置logo的位置*/
margin-left: 15px;
}
/*设置导航条*/
.nav{
/*设置向右浮动*/
float: right;
/*设置上外边距*/
margin-top: 21px;
}
.nav li{
/*设置向左浮动*/
float: left;
/*设置左右内边距*/
padding: 0px 10px 8px;
/*设置左边框*/
border-left: 1px #d6d6d6 dotted;
}
.nav a{
/*设置字体*/
font: bold 14px sans-serif;
/*设置字体颜色*/
color: #666;
/*去除下滑线*/
text-decoration: none;
}
/*设置超链接的移入效果*/
.nav a:hover{
/*设置移入颜色*/
color: #aaa9a9;
/*设置超链接*/
text-decoration:underline ;
}
/*设置导航中的小标题*/
/*在chrome浏览器中字体最小支持到12px，1px-11px都显示为12px*/
.nav p{
/*设置字体颜色*/
color: #b7b7b7;
/*设置字体*/
font: 11px tahoma;
}
/*设置banner*/
.banner{
/*设置高度*/
height: 352px;
/*设置背景*/
background: url(../img/banner/banner-bg.png) no-repeat bottom center;
/*给banner开启相对定位*/
position: relative;
}
/*设置导航按钮*/
.pointerDiv{
/*开启绝对定位*/
position: absolute;
/*设置绝对定位坐标*/
top: 314px;
left: 15px;
}
.pointerDiv a{
/*设置a浮动*/
float: left;
/*设置宽高*/
width: 17px;
height: 17px;
/*设置左外边距*/
margin-left: 4px;
/*设置背景*/
background: url(../img/banner/pointer.png) no-repeat;
}
/*设置超链接的hover伪类*/
.pointerDiv .active,
.pointerDiv a:hover{
background: url(../img/banner/pointer-active.png) no-repeat;
}
/*设置content部分*/
.content{
/*background-color: red;*/
}
.content h1{
/*设置文本居中*/
text-align: center;
/*设置字体*/
font: bold 24px georgia ;
/*设置上内边距*/
padding: 5px 0px 20px 0px;
/*设置下外边距*/
margin-bottom: 38px;
/*设置背景*/
background: url(../img/line.png) no-repeat bottom center;
}
/*中间的三个div*/
.content .pl ,.content .cs ,.content .uc,
.contact .sc, .contact .co, .contact .nu{
/*设置向左浮动*/
float: left;
/*height: 100px;*/
width: 300px;
/*background-color: yellow;*/
}
/*给div添加左右边距*/
.content .cs, .contact .co{
margin: 0px 20px;
}
/*设置div中的标题*/
.content h2{
color: #11719e;
font: 21px Georgia;
}
.content .p1{
color: #8c8c8c;
font: 12px helvetica;
}
/*设置图片Div*/
.content .imgDiv{
width: 299px;
height: 195px;
background: url(../img/img-bg.png) no-repeat;
/*设置上下外边距*/
margin: 12px 0px 8px 0px;
/*设置水平方向居中*/
text-align: center;
/*设置上内边距*/
padding-top: 18px;
}
/*设置第二个段落*/
.content .p2{
height: 90px;
color: #3e3e3e;
font: 13px helvetica;
/*设置文字间距*/
word-spacing: 3px;
}
.content .lm{
/*设置块元素*/
display: block;
/*设置宽高*/
width: 163px;
height: 38px;
/*设置背景*/
background: url(../img/btn1.png) no-repeat;
/*取消下划线*/
text-decoration: none;
/*颜色*/
color: #016999;
/*设置文字*/
font: 12px/38px helvetica;
/*设置文字缩进*/
text-indent: 1em;
/*设置下外边距*/
margin-bottom: 36px;
}
/*设置背景*/
.contact{
background: url(../img/line.png) no-repeat top center;
}
/*设置联系栏的高度背景颜色，用来观察，一会儿关掉*/
.contact .sc, .contact .co, .contact .nu{
/*height: 500px;*/
/*background-color: yellow;*/
}
/*设置练习栏中的表单项*/
.contact .txt{
width: 276px;
height: 33px;
/*line-height: 33px;*/
background:url(../img/input.png) no-repeat;
/*去除默认边框*/
border: none;
/*去除默认的内边距*/
padding: 0px 10px;
margin: 0px 0px 16px 0px;
}
.contact .tarea{
width: 276px;
height: 114px;
background: url(../img/testarea.png) no-repeat;
/*去除默认边框*/
border: none;
/*去除滚动条*/
overflow: auto;
/*设置文本域不能调整大小*/
resize:none;
/*去除默认的内外边距*/
padding: 10px 10px;
margin: 0px;
}
.contact .btn{
width: 163px;
height: 32px;
background: url(../img/btn2.png) no-repeat;
border: none;
/*去除默认的内外边距*/
padding: 0px;
margin: 11px 0px 23px 0px;
/*设置字体*/
color: white;
font: 13px georgia;
/*设置位置*/
text-align: left;
text-indent:1em ;
/*cursor可以用来设置鼠标指针的样式*/
cursor: pointer;
}
/*设置标题*/
.contact h2{
color: #444;
font: 18px/1 georgia;
padding: 40px 0px 13px 0px;
border-bottom: 1px dashed #d3d3d3;
margin-bottom: 15px;
}
/*设置联系栏左侧*/
.sc .p1{
color: #444;
font: 12px/1 helvetica;
}
.sc .icon{
/*设置字体大小为0去除空格*/
font-size: 0px;
/*设置往外边距*/
margin-top: 5px;
}
.sc .icon a{
margin-right: 7px;
}
/*设置左侧第二个标题*/
.sc .nl{
font: bold 18px/1 "gill sans mt";
/*设置内边距*/
padding: 35px 0px 10px 0px;
/*设置下外边距*/
margin-bottom: 14px;
}
/*设置左侧的表单项*/
.sc .txt{
margin-top: 14px;
margin-bottom: 3px;
}
/*设置联系栏右侧*/
.nu p{
color: #444;
font: 12px/1 helvetica;
height: 58px;
border-bottom: 1px dashed #d3d3d3;
padding-bottom: 8px;
margin-bottom: 15px;
}
.nu img{
/*向左浮动*/
float: left;
padding-right: 9px;
}
/*取消最后一个p标签的下外边距*/
.nu .no-margin{
margin-bottom: 0px;
}
/*为最后一个按钮调整上外边距，使三个按钮水平*/
.nu .btn{
margin-top:14px;
}
/*设置底部*/
.footer{
background: #333;
height: 173px;
/*设置上边框*/
border-top: 10px solid #4c4c4c;
}
/*设置底部文字样式*/
.footer a , .footer p{
color: #999;
font: 11px helvetica;
text-decoration: none;
}
/*设置a元素的hover*/
.footer a:hover{
color: yellow;
text-decoration: underline;
}
.footer p{
margin-left: 8px;
margin-right: 23px;
margin-bottom: 8px;
}
.footer .w{
padding-top: 18px;
}
.footer .copy{
float: right;
}
最后
以上就是贤惠睫毛为你收集整理的POLO360网站制作POLO360网页效果图HTML代码CSS代码的全部内容，希望文章能够帮你解决POLO360网站制作POLO360网页效果图HTML代码CSS代码所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复