豆瓣首页制作笔记
㈠搜索框的知识
⑴输入文字，回车完成搜索
①问题：在搜索栏输入文字，点击键盘上的回车键，就会完成搜索，这是如何做到的呢？
②方法1：通过JavaScript代码进行完成
③方法2：给input元素外面套一个form表单元素，利用form元素把input元素包起来，再加上一个提交按钮，这样，只要是一回车，就相当于点了提交按钮，就完成了搜索。
④具体代码如下：
<div class="search left">
<form>
<input type="text">
<button>
<i class="iconfont iconsousuo" ></i><!--字体图标-->
</button> </form> </div>
⑵重置文本框
/*重置文本框*/
input{
border:none;
outline:none;
outline-offset: 0;
}
⑶重置按钮
/*重置按钮*/
button{
border:none;
outline:none;
outline-offset: 0;
background: initial;
padding: 0px;
}
㈡页面中的小知识点
⑴vertical-align属性
①设置垂直对齐时，可采用vertical-align 属性设置元素的垂直对齐方式。
②属性说明：
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。
这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
③具体参数如下：
⑵position定位
父元素：相对定位（position: relative）
子元素：绝对定位（position: absolute）
⑶创建页面的三栏布局
①创建一个盒子，分为三个部分，左区域，右区域，中间区域
设置左区域：左浮动，宽度：自己调整，右外边距：自己调整
设置由区域：右浮动，宽度：自己调整，右外边距：自己调整
设置中间区域：创建BFC，自适应
②具体代码如下：
HTML部分代码
<!--注意高度塌陷-->
<div class="container clearfix">
<!--左边栏-->
<div class="aside-left">
左边栏
</div>
<!--右边栏-->
<div class="aside-right">
右边栏
</div>
<!--中间区域-->
<div class="main">
中间区域
</div>
</div>
CSS部分代码
/*解决高度坍塌*/
.clearfix::after{
content:"";
display:block;
clear:both;
}
.aside-left{
float: left;
width: 100px;
margin-right: 20px;
}
.aside-right{
float: right;
width: 265px;
margin-right: 30px;
}
.main{
/*创建BFC*/
overflow: hidden;
}
⑷页面背景颜色
在设置整体页面中每个区域的页面背景颜色时遇到的问题：
单数区域一个背景颜色，双数区域一个背景颜色；这时候我们可以采用:nth-child来解决；
但是这个属性，会随着我们在设置其他区域时增加div元素，而出现单双数背景颜色受影响的问题；
我们可以通过以下的方法进行解决：在这个区域的外层套一个div盒子，这样就不会受上面代码的影响了。
⑸超链接部分的小知识
在页面中会出现在超链接的左右有小括号括起来的样式：例如（a超链接文字）；我们可以采用两种方法设置。
①第一：在页面的HTML代码中a标签的前后直接写上“（” 与 “）”，简单直接粗暴。
HTML部分代码
<div class="section-title">
(
<a href="">去话题广场</a>
)
</div>
②第二：在超链接中利用伪元素进行设置
HTML部分代码
<div class="section-title">
<a href="" class="link">去话题广场</a>
</div>
CSS部分代码
.section-title .link::before{
content: "(";
}
.section-title .link::after{
content: ")";
}
但是这有一个问题：就是当我们设置超链接鼠标移入和点击样式时，这个利用伪元素设置的（）也会被选中，如何处理呢？
方法：在超链接的外面套一个span元素，就可以了。
<div class="section-title">
<span class="link">
<a href="">去话题广场</a>
</span>
</div>
⑹word-break属性
①定义和用法：word-break 属性规定自动换行的处理方法。
②提示：通过使用 word-break 属性，可以让浏览器实现在任意位置的换行。
③属性值：
⑺网页中页面区域的知识
下面问题的示例图片：
①问题1：在双栏布局的左边栏中，设置了固定的宽度，里面需要放置四个小区域（li），每个小区域里包括文字和图片，需要这四个小区域分上下两部分放置好。如何做呢（提示：使用列表(ul)进行的分区）？
⑴首先说明：如果选择使用浮动，因为每个小区域的高度是不固定的，如果一个小区域的文字过多，则会造成上部分区域文字过多的部分整体高度过高；而文字少的部分高度过低，造成下部分的元素跑到高度过低部分的下面。因此不推荐使用。
⑵推荐使用：display: inline-block （但是会出现空白折叠）;
②问题2：上下两部分中，每部分都有两个小区域，那么如何让这两个区域的元素，一个靠左一个靠右呢？
方法：给列表（ul）设置：text-align: justify（表示适应宽度）;
③问题3：使用text-align: justify，它只会影响除最后一行的其他行，最后一行是不受影响的，如何解决这个问题？
方法：给列表（ul）加一个伪元素选择器after，具体css样式设计如下：
.hot-main ul::after{
content: "";
display: inline-block;
width: 100%;
}
非常巧妙的解决了上面的问题。
⑻无序列表添加顺序的数字
示例：HTML代码
<ul class="order-movie-list">
<li><a href="">1917</a></li>
<li><a href="">寄生虫</a></li>
<li><a href="">小妇人</a></li>
<li><a href="">囧妈</a></li>
<li><a href="">乔乔的异想世界</a></li>
<li><a href="">小丑</a></li>
<li><a href="">阳光普照</a></li>
<li><a href="">半个喜剧</a></li>
<li><a href="">爱尔兰人</a></li>
<li><a href="">婚姻故事</a></li>
</ul>
CSS代码
.order-movie-list li{
list-style-type: decimal;
list-style-position: inside;
border-bottom: 1px solid #eaeaea;
}
效果图：
①list-style 属性
⑴定义和用法：list-style 简写属性在一个声明中设置所有的列表属性。
⑵说明：该属性是一个简写属性，涵盖了所有其他列表样式属性。
由于它应用到所有 display 为 list-item 的元素，所以在普通的 HTML 和 XHTML 中只能用于 li 元素，
不过实际上它可以应用到任何元素，并由 list-item 元素继承。
⑶可以按顺序设置如下属性：
- list-style-type：设置列表项标记的类型。
- list-style-position：设置在何处放置列表项标记。
- list-style-image：使用图像来替换列表项的标记。
⑷可以不设置其中的某个值，比如 "list-style:circle inside;" 也是允许的。未设置的属性会使用其默认值。
②list-style-type 属性
⑴定义和用法：list-style-type 属性设置列表项标记的类型。
⑵可能的值：CSS2 的值：
③list-style-position 属性
⑴定义和用法：list-style-position 属性设置在何处放置列表项标记。
⑵说明：该属性用于声明列表标志相对于列表项内容的位置。
外部 (outside) 标志会放在离列表项边框边界一定距离处，不过这距离在 CSS 中未定义。
内部 (inside) 标志处理为好像它们是插入在列表项内容最前面的行内元素一样。
⑶可能的值：
④list-style-image 属性
⑴定义和用法：list-style-image 属性使用图像来替换列表项的标记。
⑵说明：这个属性指定作为一个有序或无序列表项标志的图像。
图像相对于列表项内容的放置位置通常使用 list-style-position 属性控制。
⑶可能的值：
⑼文字隐藏
①方法：给a元素设置一个最大的宽度，它不能超过这个宽度，如果文字超过这个宽度，使用溢出隐藏，文字超过部分使用三个点，并且文字不能换行。
②具体代码如下：
.movie-area .item-list li .words a{
/*转换元素属性，让a元素可以设置宽度*/
display: inline-block;
/*最大宽度*/
max-width: 100%;
/*空白的处理方式是不换行*/
white-space: nowrap;
/*溢出隐藏*/
overflow: hidden;
/*隐藏部分用3个点表示*/
text-overflow: ellipsis;
}
效果图：
③涉及的属性知识补充
⑴text-overflow 属性
①定义和用法：text-overflow 属性规定当文本溢出包含元素时发生的事情。
②可能的值：
⑵white-space 属性
①定义和用法：white-space 属性设置如何处理元素内的空白。
②可能的值：
⑽!important用法
①语法：Selector{sRule!important;}
②说明：提升指定样式规则的应用优先权。
IE6及以下浏览器有个比较显式的支持问题存在，!important并不覆盖掉在同一条样式的后面的规则。
③详见：http://www.w3chtml.com/css3/rules/!important.html
⑾列表最后一个边款样式设置
①在设置列表时，每一个列表项底部之间都有一个像素灰色实线的边框，但是最后一项没有，如何设置？
②利用伪类选择器:last-child设置为：border-bottom:none;
③具体代码：
.book-area .group{
border-bottom: 1px solid #eaeaea;
padding:10px 0;
}
.book-area .group:last-child{
border-bottom:none;
}
效果图：
⑿列表中的列表项设置
①每四个列表项，自动换行，如何书写CSS样式？
②利用伪类选择器：nth-child(4n)，设置右外边距为0
③具体代码如下：
.book-area .item-list li:nth-child(4n){
margin-right: 0;
}
④效果图：
