css基础笔记7-页面的基本制作

页面布局整体思路

1.必须确定页面的版心（可视区），我们测量可得知。

2.分析页面中的行模块，以及每个行模块中的列模块。页面布局第一准则。

3.一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置。页面布局第二准则。

4.制作HTML结构。遵循先有结构，后有样式的原则。结构永远最重要。

5.所以，先理解布局结构，再写代码尤为重要，这需要我们多写多积累。

最好做一个专门居中且宽度固定的类，因为整个网页需要一个整齐的布局，这个类可以更好的布局页面，这也叫做版心

头部制作

先要有一个大盒子，里面有所有的头部元素，给大盒子高度（因为宽度可以靠那个专门的类来设置），如果要用margin设置这个大盒子的位置，要注意那个专门的类（版心）的居中可能是用margin来设置的，所以在设置大盒子的margin左右值的时候要设置auto，不然会冲突，覆盖版心的居中设置，使大盒子不会居中。

logo制作

用一个和logo图片等大的盒子，里面放logo图片，然后盒子左浮就行了

导航栏注意点

实际开发中，我们不会直接用链接a而是用li包含链接（li+a）的做法。

原因：li+a语义更清晰，一看这就是有条理的列表型内容。如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名。

注意：让导航栏一行显示，要给li加浮动，因为li是块级元素。又因为导航栏的文字不一样多，所以不要给a宽度，给链接a左右padding就可以撑开盒子。nav导航栏可以不给宽度，这样将来可以继续添加其余文字。如果导航栏之间a的距离不够，应该直接给li一个margin来使左右的距离变长。要让文字垂直居中需要在li里面添加行高等于高度。

搜索模块

可以先弄一个大盒子，大盒子里面有一个文本框和按钮，大盒子给一个固定死的宽高，然后固定好大盒子的位置，之后只用在调大盒子里面的文本框和按钮了。文本框在设置宽高的时候记住要减去边框的宽度，文本框里的文字可以用padding来控制位置，但是设置了padding后要将原来的宽度减去padding值，因为padding会撑大盒子，如果要让文本居中，让行高等于高度就可以了。

注意：按钮自带一个边框，记得加border:0;然后又因为input是行内块元素，表单元素（button属于）也是行内块元素，行内块元素之间会有一个距离，而浮动的两个元素是没有缝隙的，所以这里要加一个浮动，让它们贴合在一起，这样才不会导致按钮掉出去。

用户模块

让图片和文字居中对齐

banner制作

可以大概这么布局

 

 

侧导航栏还是用ul li的形式来布局，如果4号盒子用的是浮动，那么三号盒子也要设置浮动，不然4号盒子会靠三号盒子下面浮动。

也可以直接放一个轮播图在2号盒子里。

轮播图里面的按钮布置

1.先用一个大盒子装轮播图的所有东西，

2.左右两个按钮可以直接用链接，又因为要压住盒子，且不能占文档流位置，所以必须是绝对定位（在这里就要给大盒子一个相对定位），又因为链接加了绝对定位所以可以设置高度和宽度。要设置垂直居中：

{position:absolute;top:50%;margin-top:盒子自己高度的一半的负值;}左边的按钮多给一个left:0;右边给right:0;。要让链接里的内容居中，就要让它行高等于宽高并且text-align要等于center。

3.可以选择的小圆点用ul li来做。ul跟按钮一样，要给绝对定位，然后放具体位置,给宽和高，记得给li清除小圆点{list-style:none;},然后li左浮，再给li margin值来控制li的位置。

如果要加一个选择li的类，记得不要忘记选择器的权重问题。

底部

底部像这样的布局可以用dl dt dd来做，dt是是最上面的内容，dd是下面的内容。用dl dt dd直接可以让内容竖着排列。

调完样式后的样子

布局技巧

相邻边框的问题（巧妙运用margin）

在给两个紧贴在一起的盒子加边框，会使贴在一起的那个边的边框会叠加，使边框更粗，解决方法：给一个负值的margin，让边框重叠在一起。

但是在这个时候，后面的盒子的边框会覆盖住前面的，在某些情况下会对我们的样式造成影响，比如：在给前面盒子加:hover，并给边框颜色的时候，被覆盖的边就无法显示hover时的边框颜色，解决方法：盒子都没有定位的情况下给hover里面添加一个相对定位即可，在有定位的情况下，给hover里面加一个z-index属性就行，具体给多少值看情况，没有其他的影响的话，给个1就行。

文字围绕浮动元素巧妙运用

原理：浮动元素不会覆盖文字

所以在有宽高的大盒子里，可以直接给一个有宽高的小盒子左浮，然后直接在大盒子里写文字（用p标签），文字会就会在大盒子里面，在小盒子的右边。如果要设置文字的位置，可以给小盒子设置margin值，来挤开文字。

行内块的巧妙运用

 

行内块元素之间默认会有一个距离（这个是因为行内块元素之间有空格或是换行），并且可以之间在父元素里添加text-align:center;来水平居中。这里可以用a标签来写，用一个div来包裹住它们。

css三角强化

{
width:0;
height:0;
border-top:100px solid pink;
border-right:50px solid skyblue;
border-bottom:0 solid blue;
border-left: 50px solid green;
}

 

 

{
width:0;
height:0;
border-top:100px solid transparent;
border-right:50px solid skyblue;
border-bottom:0 solid blue;
border-left: 0 solid green;
}
可以简写为
{
    width:0;
    height:0;
    border-color:transparent blue transparent transparent;
    border-style:solid;
    border-width:100px 50px 0 0;
}

css初始化

/*把我们所有标签的内外边距清零*/
*{
   margin:0;
    padding:0; 
}
/*em,i斜体的文字不倾斜*/
em,i{
    font-style:normal;
}
/*去掉li的小圆点*/
li{
    list-style:none;
}
​
img{
    /*照顾低版本浏览器，如果图片外面包含了链接会有边框的问题*/
    border:0;
    /*取消图片底侧有空白缝隙的问题*/
    vertical-align:middle;
}
​
button{
    /*当我们鼠标经过button按钮的时候，鼠标会变成小手*/
    cursor:pointer;
}
​
a{
    /*取消下划线*/
    text-decoration:none;
}
​
/*定义元素隐藏类*/
.hide,
.none{
    display:none;
}
/*定义清除浮动类*/
.clearfix:after{
    content:"";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearfix{
    *zoom:1;
}