尚狐网络首页练习

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</ul>

</div>

</div>

<h1>我们做的好不好？案例能说明一切</h1>

</form>

</div>

</ul>

<li><a href="">案例TOP</a></li>

<li><a href="">效果图设计</a></li>

<li><a href="">Android APP</a></li>

<li><a href="">企业VI设计</a></li>

</ul>

</ul>

</div>

</div>

</ul>

<dl>

<dd>

<h3>MySQL历史变迁-MySQL版本选择</h3>

<span>网站开发，离不开数据的支持，所以说，选择一套方便，高效的数据库就很重要，今天，成都网站建设为大家介绍一下时下最流行的一套数据库-MySQL...<a href="">[查看详情]</a></span>

</dd>

</dl>

<dl>

<dd>

<h3>MySQL历史变迁-MySQL版本选择</h3>

<span>MyISAM以及lnnoDB应当属是MySQL最经常使用的两种存储引擎。从成长史来讲lnnoDB比MyISAM泛起患上更晚，功能也就更强大，但它不克不及彻底取代MyISAM恰是它功能的壮大影响了它的...<a href="">[查看详情]</a></span>

</dd>

</dl>

</div>

</div>

<li>

<a href="">如何从设计上全方位打造官网 </a>

</li>

<li>

<a href="">DEDE栏目文章列表获取TAGS解决方法</a>

</li>

<li>

<a href="">尚狐观点：以人为本才是设计王道</a>

</li>

<li>

<a href="">热烈祝贺深圳蓝杰智库官方网站交付上线</a>

</li>

<li>

<a href="">AJAX-增加用户体验为网站飞一会</a>

</li>

<li>

<a href="">尚狐观点：网站设计对企业的重要性</a>

</li>

</ul>

</div>

<a href="">提交建站需求</a>

</div>

</div >

<p>APP咨询：15196625197(TEL) 2296465312(QQ)</p>

</div >

<p>友情链接：酷帝网站目录创新网络工作室香港保险第一分类目录设计路上无锡网站建设宜昌网站建设 app开发莫等闲</p>

<p>设计导航泸州网站建设上海网站建设深圳网站制作香港保险那些事儿成都做网站工作室北京网站建设成都建网站广州做网站</p>

</div >

</div>

</div>

<p><a href="">成都做网站</a> / <a href="">成都网站建设</a> / <a href="">成都网站制作</a> / <a href="">成都网站建设工作室</a> / <a href="">成都工作室做网站</a> / <a href="">成都网站建设公司</a> / <a href="">成都网站建设工作室</a> / <a href="">成都网站建设工作室</a> / <a href="">Sitemap</a></p>

</div>

</body>

</html>

/*css*/

html,body,ol,ul,li,h1,h2,h3,h4,h5,h6,p,th,td,dl,dt,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0;}

body{

font-size:16px;

font-family: '微软雅黑';

}

ul,ol,li{

list-style:none;

}

h1,h2,h3,h4,h5,h6{

font-size:16px;

font-weight: normal;

}

b,strong{

font-weight: normal;

}

i,em{

font-style: normal;

}

a,u,ins{

text-decoration: none;

}

img{

border:0;

display:block;

}

input,fieldset{

outline: none;

border:0;

}

.clear_fix:after{

content:'.';

clear:both;

height:0;

overflow:hidden;

display:block;

visibility: hidden;

}

.clear_fix{

zoom:1; /* 用来兼容IE6、7 的高度自适应的问题的； */

}

body{

width:100%;

height: 100%;

background: #f6f6f6;

}

/*header*/

.header-wrap{

background: #313131;

}

.header{

width:1200px;

height: 110px;

margin: 0 auto;

/*background: url(../img/logo.png) no-repeat left center;*/

position: relative;

}

.logo{

position: absolute;

left: 0;

top: 30px;

}

.header-nav{

float: right;

}

.header-nav li{

float: left;

margin-left: 6px;

margin-right: 30px;

}

.header-nav li a{

display: block;

font-size:22px;

font-family: "微软雅黑";

height: 110px;

line-height: 100px;

color: #fff;

}

/*banner*/

.banner{

width: 100%;

height:360px;

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

}

.search{

width: 1200px;

height: 241px;

margin: 0 auto;

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

}

.search h1{

text-align: center;

font-size: 48px;

font-family: "微软雅黑";

font-weight: bold;

height: 143px;

line-height: 143px;

}

.search form{

float: right;

}

.search input{

margin-top: 1px;

}

.search .inbox{

width: 577px;

height: 58px;

background: #fff;

border: 2px solid #cccccc;

border-right: none;

padding-left: 35px;

font-size: 22px;

line-height: 58px;

float:left;

}

.search img{

width:251px;

height:63px;

float:left;

margin-right: 6px;

}

/*main*/

.main{

width: 1200px;

margin: 0 auto;

}

.nav1{

height: 214px;

margin-top: 39px;

margin-bottom: 61px;

}

.nav1 li{

float: left;

width:214px;

height:214px;

border-radius: 50%;

background: #c2e3ff;

text-align: center;

margin-left: 30px;

}

.nav1 li:nth-child(1){

margin-left: 0;

}

.nav1 li img{

margin: 45px auto 19px;

}

.nav1 span{

font-size: 21px;

color: #428bca;

}

.nav2{

height:35px;

}

.nav2 li{

background: #C2E3FF;

margin-left: 9px;

float: left;

}

.nav2 li:nth-child(1){

margin-left: 0;

}

.nav2 a{

display: block;

width:163px;

height:35px;

font-size:16px;

line-height: 35px;

text-align: center;

color: #333333;

}

.nav3{

height:230px;

margin: 47px 0 52px;

}

.nav3 li{

float:left;

}

.nav3 li:nth-child(1){

margin-right: 14px;

}

.nav3 li:nth-child(2){

margin-right: 28px;

}

.nav3 li img{

width:385px;

height:230px;

}

.main-footer{

width: 100%;

height: 93px;

background: #428bca url(../img/process.png) no-repeat center;

}

/*article*/

.article{

width:1200px;

height: 312px;

margin: 0 auto;

}

.news-left{

width:728px;

float: left;

}

.news-nav{

width:728px;

height: 34px;

margin-top: 17px;

border-bottom: 1px solid #cccccc;

}

.news-nav li{

float:left;

width: 57px;

height: 51px;

margin-right: 31px;

}

.news-nav li a{

color:#838383;

font-size: 14px;

display: block;

width: 57px;

height: 34px;

line-height: 34px;

}

.news-content{

/* float: none;*/

}

.news-content img{

width: 133px;

height:88px;

}

.news-content dl{

width:728px;

height:96px;

float: left;

margin-bottom: 14px;

}

.news-content dt{

width: 133px;

height:88px;

padding: 3px 4px;

border:1px solid #ccc;

float: left;

}

.news-content h3{

font-size: 14px;

color: #333333;

line-height: 32px;

}

.news-content dd{

float: left;

width: 517px;

height:96px;

padding: 0 39px 0 29px;

font-size: 14px;

color: #999999;

line-height: 19px;

}

.news-content dd a{

font-size: 12px;

color: #72a8d6;

}

.news-right{

width: 438px;

float: right;

}

.news-right-header{

width: 438px;

height: 34px;

margin-top: 17px;

border-bottom: 1px solid #cccccc;

}

.news-right-content{

width: 438px;

height:206px;

background: #e5e5e5;

margin-top: 12px;

padding-top: 9px;

}

.news-right-content li{

background: url(../img/dian.png) no-repeat 23px center;

}

.news-right-content a{

margin-left: 38px;

font-size: 12px;

line-height: 32px;

color:#666666;

}

.news-right-content span{

font-size: 12px;

color:#666666;

float: right;

margin-right: 18px;

height: 32px;

line-height: 32px;

}

.sloganwrap{

width: 100%;

height: 95px;

background: #e5e5e5;

}

.slogan{

width: 1200px;

height: 95px;

margin: 0 auto;

background: url(../img/slogan.png) no-repeat left center;

position: relative;

}

.slogan a{

display: block;

width: 133px;

height:35px;

font-size: 14px;

line-height: 35px;

color: #fff;

background: #428bca url(../img/jiao.png) no-repeat 127px center;

padding-left: 30px;

position: absolute;

right: 41px;

top:50%;

margin-top: -17px;

}

.footerwrap{

width: 100%;

height:472px;

background: #1e1e1e;

}

.footer{

width: 1200px;

height: 472px;

margin: 0 auto;

}

.left{

height:348px;

float: left;

}

.section1{

width:833px;

height: 47px;

padding:51px 0 21px 0;

border-bottom: 1px solid #393939;

position: relative;

background: url(../img/tel.png) no-repeat 12px 51px;

}

.section1 span{

display: block;

margin-left:65px;

color: #fff;

font-size: 29px;

}

.q{

position: absolute;

top:51px;

right:169px;

}

.section2{

width:833px;

height:72px;

border-bottom: 1px solid #393939;

padding:21px 0 14px 0;

}

.section2,.section3 p{

color: #fff;

font-size: 14px;

line-height: 36px;

}

.section3{

width:833px;

height:72px;

border-bottom: 1px solid #393939;

padding:16px 0 31px 0;

}

.right{

width:367px;

height:348px;

float: right;

}

.right img{

margin: 78px 0 0 31px;

}

.section4{

width: 1200px;

height: 74px;

padding: 25px 0;

clear: both;

}

.section4 p{

color: #fff;

font-size: 14px;

line-height: 25px;

}

.section4 a{

color:#fff;

font-size: 14px;

}

.section4 img{

display: inline-block;

}

尚狐网络首页练习

推荐阅读更多精彩内容