豆瓣首页制作笔记

㈠搜索框的知识

⑴输入文字,回车完成搜索

①问题:在搜索栏输入文字,点击键盘上的回车键,就会完成搜索,这是如何做到的呢?

②方法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;
 }

 

④效果图:

 

posted @ 2020-02-17 11:27  石海莹  阅读(377)  评论(0编辑  收藏  举报