网页设计 小项目 总结

最近做了一个很好看的网页（自认为 ），主要包括aside，main_container两个大块

其中aside部分比较好做，是绝对定位，固定宽度，ul的背景图片足够长，background-position: top center;

但是li填充有限，

所以在ul下面补<div id="bg_bottom">,background-position: bottom center;

#aside{  nav  {a,ul,div(bg_bottom) }   }

然后是main_container{#home,#work,#about,#contact}四个页面...用<section id="home">

#main_content {
float: right;
width: 670px;
}

#home{ #loader, #ps_container, header, #div1, #div2, #div3 }

#home {
width: 670px;
margin-bottom: 500px;
float: left;
position: relative;
padding-top: 15px;
}

在home需要特别注意的是#ps_container

 #ps_container { span(ribbon) , ps_image_wrapper , ps_prev ,ps_next , ps_nav }

#ps_container {
height: 345px;
width: 656px;
margin: 20px  auto  80  auto;  (注意中间木有 ,)
position: relative;
background-image: url(images/slider_bg.png);
background-repeat: no-repeat;
}

在此注意.ps_image_wrapper {img(初始化的第一张照片636*325)}注意...wrapper和img之间间隔右 20px,下 20px;

.ps_image_wrapper{
width:656px;
height:345px;
overflow:hidden;
position:relative;
margin:0 auto;
}

下面是难搞的ps_nav,为什么说难搞呢？因为本人在这里栽过跟头，我是这样想的：

首先ps_container不是345高，还有margin不是20,0,0,80？那么ps_img_wrapper也是345高，

就是ps_nav可以填充在m_b:80px，

ul.ps_nav{
list-style:none;
margin:0;
padding:0;
width:100px; /*change this width*/
margin:20px auto;
position:relative;
}  li {float:left;} 就行了

ul.ps_nav li a{
display:block;
text-indent:-9000px;
width:13px;
height:13px;
outline:none;
padding:0px 3px;
background-color: transparent;
background-image: url(../images/dot2.png)  no-repeat center  top; 
}

background-position  属性设置背景图像的起始位置。

默认值：	0% 0%

提示：您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。    如果您仅规定了一个关键词，那么第二个值将是"center"。默认值：0% 0%。

第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。

如果您仅规定了一个值，另一个值将是 50%

您可以混合使用 % 和 position 值

这样那两个圆圈的图片就

下面就是姐的哭诉了，就是因为下面的一个",”  我修了好久的代码

ul.ps_nav li a:hover,ul.ps_nav li.selected a{
background-position:center  -13px; (这里没有 ，-_-   -_-)  因为图片是13w * 26h...
} 记住不能改为“center，center”因为图片的中间位置和下一半图片是不一样的哦...

 以下是很好的 ps_prev,ps_next的定位了，

.ps_prev, .ps_next {
height: 59px;
width: 30px;
position: absolute;
opacity:0.5;
top: 50%;
margin-top: -40px; //因为margin_bottom:80px;
}

.ps_prev {
background-image: url(images/prev.png);
background-repeat: no-repeat;
left: 30px;
}
.ps_next {
background-image: url(images/next.png);
background-repeat: no-repeat;
right: 30px;
}
.ps_next:hover,.ps_prev:hover {
opacity:0.9;
}

下面是伤脑筋的一块了，关于缩略图的

ps_nav{ ul { li,li,li,li,li } + {li}}

<!--缩略图-->
        <li class="ps_preview">
            <div class="ps_preview_wrapper"> 
               <!-- Thumbnail comes here --> 
            </div>
               <!-- Little triangle --> 
            <span></span>

      </li>

.ps_preview {
position: absolute;
height: 90px;
width: 85px;
left: 34.5px;
top: -95px;
}
.ps_preview_wrapper {
height: 75px;
width: 75px;
border: 5px solid #FFF;
overflow:hidden;
position:relative;
-moz-box-shadow:0px 0px 5px #999;
-webkit-box-shadow:0px 0px 5px #999;
box-shadow:0px 0px 5px #999;
}
.ps_preview span {
background-image: url(images/triangle.png)  no-repeat;
/*background-position: bottom center;*/
display: block;
height: 6px;
width: 15px;
position: absolute;
left: 35px;
top: 85px;
}