左边输入部分的样式比较简单。有一个小细节是使用CSS属性选择器，在input输入框选择提示问题，设置color属性：现在是时候在右边写搜索点击按钮部分了，先清除默认的borderbutton{border:none;}?写完之后，你可能会发现输入框和按钮并没有靠在一起，对吧？原来是我们忘记写float了。接下来我们依次给input和button加上leftfloat。设置完成后，感觉鼠标放在输入框和按钮上后边框太丑了。我们可以取消它。searchinput:focus,button:focus{outline:none;}以上步骤完成后，效果图如下？头像部分接下来是最后一部分。加油，头像部分其实很简单。设置一个浮动。有朋友想实现的话，把鼠标放在图片上，小手就会显示出来。可以用header的小细节来概括。如果一个盒子里有多个子盒子，如果其中一个盒子是浮动的，那么其他兄弟也应该是浮动的。应用于本文的页眉，页眉中的四个框都设置了浮动样式。文本垂直居中。在这里，盒子的高度设置为x，然后我们设置一个line-height等于x，元素将垂直居中。search搜索框中的两个元素，这里要注意，因为父元素search设置为float，子元素没有设置为float时，可??以看到两个子元素之间有一定的距离，这不是我们想要的效果。所以我们也会同时给子元素box设置两个float。由于版本中心是水平居中的，所以我们设置一个公共样式：/*versioncenter1000pxhorizo??ntallycentered*/.hcenter{width:1000px;margin:0auto;}CSS属性的书写顺序也要养成一个好习惯比如?：按照定位、本身、文本、其他的顺序书写CSS属性。主体部分banner制作后的效果：分析banner的布局。背景是一个固定的背景，不会随着鼠标的滚动而移动，这里我们使用之前写的背景相关的属性。中间是一个水平居中的大盒子，也就是版本的中心，左一盒子，右一盒子。HTML布局结构：我们先写一个大盒子，放置背景图，背景图是固定的，然后设置一个居中的盒子，水平居中，包含左右两个盒子。banner背景样式设置背景图片的高度和显示尺寸：background-size:100%100%;banner左右框样式为两个框，可以设置一个向左浮动，一个向右浮动。这里使用了背景透明色样式：background:rgba(0,0,0,.4);透明度：不透明度：0.8；作品展示页面完成后的效果：页面结构分析首先是一个水平居中的大框，居中的框：hcenter，包裹着两个框，上半部分是文字部分，下半部分是方框项目展示部分：这里要特别注意项目展示部分，因为我们不确定项目展示部分的高度，所以如果我们不写盒子的高度，自然就习惯了清除浮动，在最后一个浮动元素后添加一个空元素。页面底部效果：这是一个非常简单的页面底部布局，但不是常规的底部。这里主要是写一个footer把整个部分包裹起来。这里重点是文字的交错部分可以使用dl标签，比较方便的项目源码：SourceCode?:StaticBlogHomepage