POLO360练习

最新推荐文章于 2022-04-30 17:55:47 发布
最新推荐文章于 2022-04-30 17:55:47 发布
阅读量1.3k 收藏 2
点赞数
文章标签： POLO360练习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42715483/article/details/101262249
版权

代码部分

1.首先导入reset.css文件夹来去除基本的样式，性能比*{padding:opx;margin:0px;
}好。
2.处理IE6图片透明问题在body中

清除div img a h1的透明问题；
3. 在这里插入图片描述关于左边设置外边距还是内边距问题，首先width=940px，若设置padding则撑开原先的定义好的宽度，到时候需要重新定义宽度，所有用margin。
4. “图片” title作用：鼠标移入到图片就会有提示文字。 alt：描述这张图片
5. 导航条

ps切图

1、 截一个像素的图作为背景图，样式→固定大小→图像 →裁剪→文件→存储为web所用格式→存储到img下。
2、 在这里插入图片描述来晒选图层。
3、 在这里插入图片描述在这里插入图片描述查看字体
在这里插入图片描述查看字体颜色
4、 在这里插入图片描述选中图层，Alt+图标位置，留下你要选的图层，过滤掉不要的图层

素材

在这里插入图片描述
*

*代码部分

body{
background: url(img/xia) repeat-x;
}
.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{
color: #666；
font: bold 14px Georgia;
text-decoration: none;
}
.nav a:hover{
color: #a1a1a1;
text-decoration: underline;
}
.nav p{
color: #b7b7b7；
font: 11px tahoma;
}
.banner{
height: 356px；
background: url(…/img/banner-bg.png) no-repeat bottom center;
position: relative;
}
.pointerDiv{
position: absolute;
top: 314px;
left: 15px;
}
.pointerDiv a{
float: left;
width: 17px;
height: 17px;
margin-left: 4px;
background:url(…/img/sprite.png) no-repeat;
}
.pointerDiv .active,
.pointerDiv a:hover{
background:url(…/img/sprite.png) no-repeat -27px 0px;
}
.content h1{
text-align: center;
font: bold 24px Georgia;
padding: 6px 0 20px 0;
margin-bottom: 38px;
background: url(…/img/line.png) no-repeat bottom center;
}
.content .pl , .content .cs , .content .uc,
.contact .sc , .contact .co , .contact .nu{
float: left;
width: 300px;
}
.content .cs , .contact .co {
margin: 0 20px;
}
.content h2{
color: #11719e;
font: 21px Georgia;
}
.content .p1{
color: #8c8c8c;
font: 12px Helvetica;
}
.content .imgDiv{
width: 299px;
height: 190px;
background: url(…/img/img-bg.png) no-repeat;
margin: 16px 0px 10px 0px;
text-align: center;
padding-top: 12px;
}
.content .p2{
height: 92px;
color: #3e3e3e;
font: 13px Helvetica;
word-spacing: 2px;
}
.content .lm{
display: block;
width: 163px;
height: 40px;
background: url(…/img/sprite.png) no-repeat 0px -70px;
text-decoration: none;
color: #016999;
font: 12px/40px Helvetica ;
text-indent: 1em;
margin-bottom: 35px;
}
.contact{
background: url(…/img/line.png) no-repeat top center;
}
.contact .txt{
width: 276px;
height: 33px;
line-height: 33px;
background: url(…/img/input.png) no-repeat;
_background-attachment: fixed;
border: none;
padding: 0px 10px;
margin: 0px 0px 16px;
}
.contact .tarea{
width: 276px;
height: 114px;
background: url(…/img/textarea.png) no-repeat;
_background-attachment: fixed;
border: none;
overflow: auto;
resize: none;
padding: 10px;
margin: 0;
}
.contact .btn{
width: 163px;
height: 32px;
background: url(…/img/sprite.png) no-repeat 0px -27px;
border: none;
padding: 0;
margin: 11px 0px 23px;
color: white;
font: 13px Georgia;
text-align: left;
text-indent: 1em;
cursor:pointer ;
}
.contact h2{
color: #444;
font: 18px/1 georgia；
border-bottom: 1px dashed #d3d3d3;

        padding: 44px 0px 10px;
        margin-bottom: 15px;
        }

    .sc .p1{
        color: #444;
        font: 12px/1 Helvetica;
        }
    .sc .icon{
        font-size: 0;
        margin-top: 4px;
        }

    .sc .icon a{
        margin-right: 6px;
        }

    .sc .nl{font: bold 18px/1 "gill sans mt";

padding: 34px 0px 10px;

}

.sc .txt{
margin-top: 15px;
_margin-top: 18px;
margin-bottom: 0px;
}

/设置è�”ç³»æ �å�³ä¾§/

.nu p{
color: #444;
font: 12px/1 helvetica;
height: 58px;
_height: 60px;
border-bottom: 1px dashed #d3d3d3;

margin-bottom: 14px;
padding-bottom: 9px;

}

.nu .no-margin{
margin-bottom: 0px;
}

.nu img{
float: left;
margin-right: 8px;

}

.nu .btn{
_margin-left: -1em;
}

.footer{
height: 173px;
background: #333;
/设置上边框/
border-top: 10px solid #4c4c4c;
}

.footer a , .footer p{
color: #999;
font: 11px Helvetica ;
text-decoration: none;
}

.footer a:hover{
color: #cccaca;
text-decoration: underline;
}

.footer p{
margin-left: 8px;
margin-right: 23px;
margin-bottom: 6px;
}

.footer .w{
padding-top:18px ;
}

.footer .copy{
float: right;
display: inline;
}

     <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 -->
    <div class="logo">
        <a href="#" title="周天作业的网站">
            <img src="img/di.png" alt="网站的logo" />
        </a>
    </div>
</div>
<!--header结束-->

<!--banner开始-->
<div class="banner w">
    <img src="img/datu.png" alt="这是一个图片" />
    
    <!-- 创建一个div，用于放置导航按钮 -->
    <div class="pointerDiv">
        <a href="#"></a>
        <a class="active" href="#"></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/zz.png" 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 
        </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 -->
        <div class="imgDiv">
            <img src="img/nv.png" 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 -->
        <div class="imgDiv">
            <img src="img/qiu.png" 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>
<!--content结束-->

<!--contact开始-->
<div class="contact w clearfix">
    <!-- 创建三栏div -->
    <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 -->
        <div class="icon">
            <a href="#"><img src="img/wx.png" /></a>
            <a href="#"><img src="img/f.png" /></a>
            <a href="#"><img src="img/in.png" /></a>
            <a href="#"><img src="img/you.png" /></a>
            <a href="#"><img src="img/t.png" /></a>
        </div>
        
        <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 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 Updates</h2>
        <p>
            <img src="img/yu.png"/>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
        <p>
            <img src="img/yin.png"/>
            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
        </p>
        <p class="no-margin">
            <img src="img/se.png"/>
            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.
        </p>
        <button class="btn">Visit our Blog</button>
    </div>
    
</div>
<!--contact结束-->

<!--footer开始-->
<div class="footer">
    <div class="w"></div>
        <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>
<!--footer结束-->


<!-- 处理ie6的png问题 -->
<!--[if IE 6]>
    <script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
    <script type="text/javascript">DD_belatedPNG.fix("div,img,a,h1");</script>
<![endif]-->
Mine-mine-Xiang
关注
Polo360网站页面制作练习
qq_44087363的博客
07-16 795
目录 页面效果图 HTML源码 CSS源码 涉猎知识点 总结 页面效果 HTML源码 <!DOCTYPE html> <html> <head> <title>Polo360</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="../css/reset.css..
html网站素材
03-12
里面近50个常用HTML模板，包含视频全屏前景，时间日历控件，弹出窗，覆盖层，百度地图，抽奖转盘等样式，商城源码，地市高校多级联动，各种图片滑动特效等
polo-360静态页面练习
07-10
一个很经典的静态页面练习，和大家分享一下！！！！！
polo-360.rar
07-18
在教学视频中学习到的知识 ，然后跟着视频制作的静态页面 利用HTML和css+div 的技术编写的一个简单的静态页面。 前期有个设计图，然后按照设计图进行切图等操作进行编码实现
前端 polo-360
wuxingge的博客
05-16 1430
reset.css /* v2.0 | 20110126 http://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, ...
一个静态HTML页面，Polo360页面
05-18
一个静态页面，比较复杂。可以作为练习使用。
前端项目实战——polo360
一李
10-31 1291
目录 性能优化： 效果图片 ​ Html代码片段 CSS代码片段 心得： 设置段落div的时候要看清框架的大致内容，不然容易造成各种的问题，高度塌陷等问题 设置行高清楚浏览器的默认格式，防止高度不齐 起名的时候根据内容位置等特殊的值起名 解决高度塌问题。clearfix：after clear：before 加一张空的表解决。见前文 为整个页面设置固定的宽度，高度让页面撑开 ...
李立超web前端网页练习polo360.html
10-10
适用于学习入门级web前端
web前端练习polo-360
03-19
本资源“web前端练习polo-360”是专为新手设计的入门级练习项目，旨在帮助初学者熟悉Web前端开发的基础知识和技能。通过这个项目，学习者可以了解并实践如何构建一个名为“Polo360”的静态页面。 “Polo360”可能是...
polo360.rar
11-27
"POLO360"可能是一个特定的设计概念或者项目名称，这个练习可能是针对这个概念的实践应用。它可能要求开发者创建一个360度全方位展示的产品界面，或者包含环绕式视觉效果的网页设计，用户可以通过滚动或交互来查看...
HTML-POLO360项目实战
QNANWang的博客
09-26 880
HTML-POLO360项目实战 #使用HTML+CSS 1. 引入reset.css清除默认样式 - 2.解决高度塌陷问题 3.引入外部CSS 4.设置文字居中.行高等 5.相对定位和绝对定位 6.背景不重复 居中等等 7.鼠标移入变色 a:hover{ } ...
oa素材（静态页面）
12-18
oa素材（静态页面）做oa的请拿去，好不好用看你的了。我觉得不错，试试吧！
HTML之案例素材
09-06
HTML案例素材与源文件
几个国外的网站PSD素材
01-01
这是几个国外的网站PSD素材，对于网站开发来说有很大的借鉴帮助哦
网页制作之图层
05-12
给大家介绍网页制作过程中图层的添加，隐藏等方法
复习静态页面polo-360
weixin_34292287的博客
03-16 345
1、ps快捷键 ctrl+1 恢复到100% ctrl+0 适应屏幕大小 ctrl+r 显示标尺 辅助线的利用 矩形框--图像--裁剪；文件存储为web所用格式，注意选格式。 1个像素的平铺 雪碧图的制作：图像--画布大小；文件--存储为web所用格式； 可利用工具合成：http://developer.51cto.com/art/201206/341225.htm ...
HTML练习—POLO360
老顽固也可爱
07-21 196
index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>POLO360练习</title> <!-- 引入reset.css用来清除浏览器的默认样式 --> <link rel="s...
POLO360网站制作
weixin_46351593的博客
04-28 1789
文章目录POLO360网页效果图HTML代码CSS代码 POLO360网页效果图 目前为止我们关于HTML和CSS的基础内容就差不多了，我们做一POLO360网页来巩固我们的知识，从实践中总结经验！！！我们看一下这次要做的网页： HTML代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /...
(2)polo360页面实现
Q_999999的博客
04-30 1030
目录结构： polo.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/reset.css" /> <link rel="stylesheet" type="text/css" href="css
polo360css
最新发布
11-28
因此，polo360css主要是通过CSS来实现页面的样式设计。 如果你想了解更多关于CSS的知识，可以参考以下内容： 1. CSS是什么？ CSS（Cascading Style Sheets）是一种用于描述HTML或XML等文档样式的语言。它定义了...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值