做公司网站可以抄别人的吗,公司网站设计哪家公司好,win7用本地文件做网站模板,手机app制作开发一、效果图前面对CSS基础知识有了一定的了解#xff0c;是时候开始实战了#xff01;以下我对抽屉(https://dig.chouti.com/)主页进行模拟布局。官方网站效果图#xff1a;模拟网站图#xff1a;二、实现步骤1、整体布局(header、body、footer)抽屉的首页主要分为三块…一、效果图前面对CSS基础知识有了一定的了解是时候开始实战了以下我对抽屉(https://dig.chouti.com/)主页进行模拟布局。官方网站效果图模拟网站图二、实现步骤1、整体布局(header、body、footer)抽屉的首页主要分为三块头部、网页内容、底部内容。2、header实现header由logo、内容菜单、登录菜单、搜索框四部分组成。代码架构为CSS代码body{margin:0px;background-color:#ededed;}ul{list-style:none;margin:0px;}ul li{float:left;}div.pg-header {font-size: 14px;height:44px;background-color:#2459a2;top: 0;left: 0;z-index: 1000;width: 100%;position: fixed;}.w {width:960px;margin:0 auto;}a {text-decoration:none;}.pg-header .logo{float:left;margin-top:10px;}.pg-header .menu {float:left;line-height:44px;}.pg-header .search {float:right;margin-top:-5px;}.pg-header .account {float:right;margin-top:10px;}.pg-header .account ul li a{color:white;padding:0 20px;text-decoration:none;}.pg-header .account{margin:0;}.pg-header .menu ul li a{color:white;padding:0 20px;text-decoration:none;}.pg-header .menu {line-height:44px;}.pg-header .menu ul li:hover{background-color:rgba(255,255,255,0.1);}.pg-header .account {line-height:44px;}.pg-header .account ul li:hover{background-color:rgba(255,255,255,0.1);}3、body实现body分为左边内容和右边内容通过floatright和floatleft来实现。代码架构为CSS代码为.pg-body .content-left {float:left;width:630px;background-color:white;font-size: 14px;min-height:1000px;}.pg-body .content-right {float:right;background-color:white;width:320px;height:auto;font-size: 14px;margin-top:40px;position:relative;}4、footer实现footer分为友情链接和备案信息两部分代码结构如下CSS代码为.pg-footer {clear:both;background-color:white;width:960px;margin:0 auto;font-size: 12px;text-align:center;padding-top: 30px;}.pg-footer .footer-list a {color: #369;margin-left: 10px;margin-right: 10px;text-decoration:none;}.pg-footer .footer-list a:hover{text-decoration: underline;}.pg-footer .footer-list span {color: #5681ab;display: inline-block;height: 12px;overflow: hidden;}.pg-footer .footer-list {text-align:center;padding-left:150px;}5、其他(回到最顶部)大部分网站都有回到顶部这一功能而且我个人认为这是一个用户体验很好的小功能尤其是对非常长的页面而言。实现起来其实非常简单就是一个div设定一个onclick动作。CSS实现代码如下.pg-top{height:40px;width:50px;background-color:#aaa;background:url(top.png) 0 0 no-repeat;right:10px;bottom:10px;float:right;position:fixed;line-height:50px;text-align:center;}JS实现代码如下function Top(){$(window).scrollTop(0);}
