前台开发总结01

最新推荐文章于 2021-04-19 09:52:47 发布

霜月枫桥

最新推荐文章于 2021-04-19 09:52:47 发布

阅读量640

点赞数

分类专栏：经验之谈

本文链接：https://blog.csdn.net/MOONCOM/article/details/54911681

版权

经验之谈专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1、在网站首页中，logo采用的是h1标签，一般是为了让搜索引擎更好的抓取关键字，建议一个页面只有一个h1，而且是最重要的关键字放在里面。
并且，使用text-indent对该<h1>标签样式进行设置，如下所示：

h1{
    text-indent:-9999px;
}

//从而使该<h1>在页面上消失不见。
或者使用display:none;

2、页面导航条，通常是使用list列表和浮动样式配合实现的。在页面需求中，有时是让导航条显示在页面的右方，你可以通过以下样式来实现

ul{
    list-style-type:none;
    float:right;
}
ul > li{
    float:left;
}

3、问题描述：想让搜索框位于页面内容<body>的中间
代码实现：首先，设置搜索框的父元素，即<body>的position:relative；
其次，设置搜索框的css为：position:absolute;top:50%;left:50%;
假设该搜索框width:200px;height:80px;
最后，设置该搜索框的外边距：margin:-40px 0px 0px -100px;
//因为搜索框的绝对定位是以搜索框的左上角为基准的，所以要通过外边距减去搜索框长和宽的一半。

4、在网站的首页中，分为头部<header>、底部<footer>和主体内容部分，在首页总体编码完成后，最好可以在<header>下方，与主体连接处加上阴影，
代码如下所示：

header{
    box-shadow:0px 1px 1px gray;
    position:relative;
    z-index:9999;
}

5、为了确保css文件的编码格式为utf-8，可以在xxx.css文件的开头，加上@charset "utf-8";

6、在页面背景图片的基础上，加上图像线性渐变(其实是为了让图片变得暗一点，从而使图片上的文字变得更加清晰)，可以凸显出背景图片上的文字，提高用户体验。

div{
    ……
    background:linear-gradient(to right bottom,rgba(0,0,0,0.7),rgba(255,255,255,0)),url(……) no-repeat center;
}

提示：在css的属性值中，逗号隔开的是同一类型/属性的值；空格隔开的是不同类型/属性的值。

7、浮动布局是很常用的布局方法，但是，当对页面的主体使用浮动布局后，若要增大页面主体和页面底部的间隔，此时对页面底部使用常用的margin-top属性进行设置时，属性值的大小不是主体和底部的间隔，而是底部和顶部的间隔。此时，我们可以对底部使用定位。

footer{
    position:relative;
    top:20px;
}

8、对于阴影box-shadow的使用，可以设置其属性值为inset，从而制造出按钮被点击时的效果。

$(function(){
      $(":button").mousedown(function(){
        $(this).css("box-shadow","5px 5px 3px gray inset");
      });
      $(":button").mouseup(function(){
        $(this).css("box-shadow","0px 0px 0px");
      });
      $(":button").mouseout(function(){
        $(this).css("box-shadow","0px 0px 0px");
      });
    });