html在页面右侧,HTML&CSS基础_页面练习_联系栏右侧

2020.10.26

polo360练习

• HOME

  Back to home

• PRODUCTS

  What we have for you

• SERVICES

  Things we do

• BLOG

  Follow our updates

• CONTACT

  Ways to reach us

Lorem ipsum dolor sit amet, consectetur adipisicing elit

Perfect Logic

All you want your website to do.

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

Learn More

Complete Solution

A tool anything and everything you can think

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.

Learn More

Uber Culture

Fresh. Modern and ready for future

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.

Learn More

Social Connection

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium

Newsletter

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium

Subscribe

Contact

Sent it

News Updates

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.

Visit our Blog

body{

background: url(../img/bd-bg.png) repeat-x;

}

.w{

width: 940px;

margin: 0px auto;

}

.header{

padding-top: 37px;

padding-bottom: 46px;

/*background: #bfa;*/

}

.logo{

margin-left: 15px;

}

.nav{

float: right;

margin-top: 22px;

}

.nav li{

float: left;

padding: 0px 10px 8px;

border-left: 1px #D6D6D6 dotted;

}

.nav a{

color: #666;

font: bold 14px georgia;

text-decoration: none;

}

.nav p{

color: #B7B7B7;

font: 11px tahoma;

}

.nav a:hover{

color: red;

text-decoration: underline;

}

.banner{

height: 356px;

background: url(../img/banner-bg.png) no-repeat bottom center;

position: relative;

}

.pointerDiv{

position: absolute;

top: 314px;

left: 15px;

}

.pointerDiv a{

width: 17px;

height: 17px;

float: left;

background: url(../img/pointer.png) no-repeat;

}

.pointerDiv .active,

.pointerDiv a:hover

{

background: url(../img/pointer-active.png) no-repeat;

}

.content h1{

text-align: center;

font: bold 24px georgia;

padding: 6px 0px 20px 0px;

background: url(../img/line.png) no-repeat bottom center;

margin-bottom: 38px;

}

.content .pl,.content .cs,.content .uc,

.contact .sc,.contact .co,.contact .nu

{

float: left;

width: 300px;

/* height: 100px;*/

/* background: yellow;*/

}

.content .cs,.contact .co{

margin: 0px 20px;

}

body{

height: 3000px;

}

/*.content{

background: red;

}*/

.clearfix:before,

.clearfix:after{

content: "";

display: table;

clear: both;

}

.clearfix{

zoom: 1;

}

.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/btn1.png) no-repeat;

text-decoration: none;

color: #016999;

font: 12px/40px helvetica;

text-indent: 1em;

margin-bottom: 35px;

}

.contact .sc,.contact .co,.contact .nu{

height: 500px;

/*background-color: yellow;*/

}

.contact .txt{

height: 33px;

width: 276px;

background: url(../img/input.png) no-repeat;

_background-attachment: fixed;

border: none;

padding: 0px 10px;

margin: 0px 0px 16px 0px;

line-height: 33px;

}

.contact .tarea{

height: 114px;

width: 276px;

background: url(../img/textarea.png) no-repeat;

border: none;

overflow: auto;

resize: none;

padding: 10px;

margin: 0px;

_background-attachment: fixed;

}

.contact .btn{

height: 32px;

width: 163px;

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;

}

.contact h2{

color: #444444;

font: 18px/1 georgia;

border-bottom: 1px dashed #D3D3D3;

padding: 44px 0px 10px 0px;

}

.contact{

background: url(../img/line.png) no-repeat top center;

}

.sc .p1{

font: 12px/1 helvetica;

color: #444444;

}

.sc .icon{

font-size: 0px;

margin-top: 4px;

}

.sc .icon a{

margin-right: 6px;

}

.sc .nl{

font: bold 18px/1 "gill sans mt";

padding: 34px 0px 10px;

/*margin-bottom: 0px;*/

}

.sc .txt{

margin-top: 15px;

_margin-top: 18px

margin-bottom: 0px;

}

.nu img{

float: left;

margin-right: 8px;

}

.nu p{

color: #444444;

font: 12px/1 helvetica;

height: 58px;

_height: 60px;

border-bottom: 1px dashed #D3D3D3;

margin-bottom: 14px;

padding-bottom: 9px;

}

.nu .btn{

margin-top: 0px;

}

/*.no .no-margin{

margin-bottom: 0px;

}*/