页面实战练习的知识点总结

来源：互联网发布：java面试题下载编辑：程序博客网时间：2024/06/05 14:18

前言：之前学习过慕课网上的电商网站的实战练习，感觉那个老师讲的挺好的。但是那时候写完没有认真的总结，这次练习了一个页面，和之前的很类似，但是比较简单一些。这里总结一下我平时写静态页面经常遇到的困惑点，梳理一下知识点。注：都是想到什么写什么，有些问题比较弱智，但是也还是记录一下，哈哈。

css样式优先级的问题
简单的搜索框的常见写法
文字环绕图片的实现
行内元素设置了float之后就可以改变宽高了
如何把无序列表默认的实心圆点改成自己喜欢的图标
background的相关语法（主要是居中和左对齐）
垂直居中（块垂直居中，内容垂直居中）
写页面的一些通用样式的设置技巧
1、css样式优先级问题：
①同一个元素引用多个样式之后，越在后面的优先级越高。
②同一个div设置了不同类型的样式选择器，优先级顺序为：
id选择器>class选择器>标签选择器
③子类会继承父类的属性，但是子类自己定义了相同的属性值之后就会覆盖父类的属性值。
④带有！important标记的样式属性的优先级最高。
⑤内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式
2、简单的搜索框的写法
首先看一下效果图：

内容代码：

<div class="search fr">                    <form>                        <input class="fl" type="text" name="search" placeholder="请输入关键字">                        <button class="fr">搜索</button>                        <!-- <input type="submit" name=""> -->                    </form>                </div>

样式代码：

.top2 .search{    width: 330px;    height: 40px;    /*line-height: 40px;*/    margin-top: 5px;    border:2px solid #bd1d17;}.top2 .search input{    width: 240px;    height: 30px;    padding: 5px;    border:0;}.top2 .search button{    width: 50px;    height: 40px;    font-size: 15px;    background-color:  #bd1d17;    color: #fff;    border:0;}

解释：就是一个大的div里面包含一个input和一个button，然后分别给这三个块设置样式。需要注意的就是长度和宽度要算好就可以。给整个大的div设置边框颜色。给button设置背景颜色，改变字体颜色。。。就可以了。
3、文字环绕图片的实现
这个问题也比较好实现，就是记录一下。
效果图：
这里写图片描述
代码：

.center .content img{    float: left;    margin: 0 10px 10px 0;}

解释：就是给图片设置左浮动（右浮动）就可以了，再根据自己的需求设置margin值
4、行内元素设置了float就可以改变宽高
这个问题还挺神奇的，哈哈~
查了网上的资料，也不知道是为什么，先记着吧。另外就是，position：absolute；fixed；relative也可以将元素变成block元素。

下面上代码验证一下：

<style type="text/css">        .box1{            height: 50px;         }        .box2{            height: 50px;        }        .box1 span{         background-color: green;         color: black;         margin: 10px;         /*以下设置无效*/         width: 50px;         height: 50px;        }        .box2 span{         background-color: green;         color: black;         margin: 10px;        /*加左浮动*/         float: left;         /*以下设置有效*/         width: 50px;         height: 50px;        }    </style></head><body>    <div class="box1">      <span>123</span>      <span>123</span>      <span>123</span>    </div>    <div class="box2">      <span>123</span>      <span>123</span>      <span>123</span>    </div>

效果图：
这里写图片描述

5、如何把无序列表默认的实心圆点改成自己喜欢的图标
一般默认的是一个实心圆点，如果要改成方的呢？
其中一种方法就是自己切图，然后给左边预留一个合适的位子（padding-left），然后加入背景图或者自己用span实现。
这里写图片描述
代码如下：

.news li{    position: relative;    padding-left: 15px;/*给图标预留的空间*/    margin-bottom: 5px;    background: url("images/list_bg.jpg") no-repeat center left;}

6、background的相关语法（主要是居中和左对齐）
这个问题就是上一个问题的background的那句代码，之前一般很少使用center left。这里简单总结一下background的语法：
这里写图片描述
下面详细说明一下：
①background-position：
用于定位background-image的，默认值：0%，0%

还有其他的属性，用到我再来追加总结吧，嘻嘻~
7. 垂直居中（块垂直居中，文本垂直居中，图片垂直居中）
① 块垂直居中
使用position和margin-top:

<style type="text/css">        .box{           width: 200px;           height: 200px;           background-color: red;           /*关键点1*/           position:relative;        }        .div{            width: 100px;            height: 100px;            background-color: green;            /*关键点2*/            position: absolute;            top:50%;            /*关键点3：margin-top为高度的一半*/            margin-top:-50px;        }    </style></head><body> <div class="box">    <div class="div">这里是如小乘的blog~</div> </div>

这里写图片描述
或者，把关键点3改成transform: translate(0,-50%);也是一样的效果。
②文本垂直居中

height: 100px;/*关键点*/line-height: 100px;

这里写图片描述

注意点就是，看到有的博客说到line-height不能设置为100%（还好我平时也没有这个习惯）line-height取值为百分比时候的描述：基于当前字体尺寸的百分比行间距。所以，这里的百分比并不是相对于父元素尺寸而言，而是相对于字体尺寸来讲的。
③图片的垂直居中
图片的垂直居中一般使用vertical-align属性，只要给img设置vertical-align：middle就可以了。注意：不是所有的元素都可以使用这个属性哦，不要乱用。
最后~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
8、写页面的一些通用样式的设置
对于整体宽度都相同的页面可以设置一个div“comwidth”来包裹内容
对于有很多左浮动，右浮动的页面可以设置两个class“fl”,”fr”，随时添加到需要设置浮动的div里面就可以
对于一些初始化的css样式，下次最好先复制到最前面作为通用样式
最后就是，每写一个模块的样式，之前最好加注释说明是那部分的样式。

阅读全文

0 0