页面实战练习的知识点总结
2017-07-09 15:48
281 查看
前言:之前学习过慕课网上的电商网站的实战练习,感觉那个老师讲的挺好的。但是那时候写完没有认真的总结,这次练习了一个页面,和之前的很类似,但是比较简单一些。这里总结一下我平时写静态页面经常遇到的困惑点,梳理一下知识点。注:都是想到什么写什么,有些问题比较弱智,但是也还是记录一下,哈哈。
css样式优先级的问题
简单的搜索框的常见写法
文字环绕图片的实现
行内元素设置了float之后就可以改变宽高了
如何把无序列表默认的实心圆点改成自己喜欢的图标
background的相关语法(主要是居中和左对齐)
垂直居中(块垂直居中,内容垂直居中)
写页面的一些通用样式的设置技巧
1、css样式优先级问题:
①同一个元素引用多个样式之后, 越在后面的优先级越高。
②同一个div设置了不同类型的样式选择器,优先级顺序为:
id选择器>class选择器>标签选择器
③子类会继承父类的属性,但是子类自己定义了相同的属性值之后就会覆盖父类的属性值。
④带有!important标记的样式属性的优先级最高。
⑤内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式
2、简单的搜索框的写法
首先看一下效果图:
![](https://img-blog.csdn.net/20170709105609205?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3VueXVlcnU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
内容代码:
样式代码:
解释:就是一个大的div里面包含一个input和一个button,然后分别给这三个块设置样式。需要注意的就是长度和宽度要算好就可以。给整个大的div设置边框颜色。给button设置背景颜色,改变字体颜色。。。就可以了。
3、文字环绕图片的实现
这个问题也比较好实现, 就是记录一下。
效果图:
![](https://img-blog.csdn.net/20170709111134537?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3VueXVlcnU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
代码:
解释:就是给图片设置左浮动(右浮动)就可以了,再根据自己的需求设置margin值
4、行内元素设置了float就可以改变宽高
这个问题还挺神奇的,哈哈~
查了网上的资料,也不知道是为什么,先记着吧。另外就是,position:absolute;fixed;relative也可以将元素变成block元素。
下面上代码验证一下:
效果图:
![](https://img-blog.csdn.net/20170709114502135?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3VueXVlcnU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
5、如何把无序列表默认的实心圆点改成自己喜欢的图标
一般默认的是一个实心圆点,如果要改成方的呢?
其中一种方法就是自己切图,然后给左边预留一个合适的位子(padding-left),然后加入背景图或者自己用span实现。
![](https://img-blog.csdn.net/20170709115213480?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3VueXVlcnU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
代码如下:
6、background的相关语法(主要是居中和左对齐)
这个问题就是上一个问题的background的那句代码,之前一般很少使用center left。这里简单总结一下background的语法:
![](https://img-blog.csdn.net/20170709151135798?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3VueXVlcnU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
下面详细说明一下:
①background-position:
用于定位background-image的,默认值:0%,0%
![](https://img-blog.csdn.net/20170709152015896?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3VueXVlcnU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
还有其他的属性,用到我再来追加总结吧,嘻嘻~
7. 垂直居中(块垂直居中,文本垂直居中,图片垂直居中)
① 块垂直居中
使用position和margin-top:
![](https://img-blog.csdn.net/20170709153340857?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3VueXVlcnU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
或者,把关键点3改成transform: translate(0,-50%);也是一样的效果。
②文本垂直居中
![](https://img-blog.csdn.net/20170709154022643?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3VueXVlcnU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
注意点就是,看到有的博客说到line-height不能设置为100%(还好我平时也没有这个习惯)line-height取值为百分比时候的描述:基于当前字体尺寸的百分比行间距。所以,这里的百分比并不是相对于父元素尺寸而言,而是相对于字体尺寸来讲的。
③图片的垂直居中
图片的垂直居中一般使用vertical-align属性,只要给img设置vertical-align:middle就可以了。注意:不是所有的元素都可以使用这个属性哦,不要乱用。
最后~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
8、写页面的一些通用样式的设置
对于整体宽度都相同的页面可以设置一个div“comwidth”来包裹内容
对于有很多左浮动,右浮动的页面可以设置两个class“fl”,”fr”,随时添加到需要设置浮动的div里面就可以
对于一些初始化的css样式,下次最好先复制到最前面作为通用样式
最后就是,每写一个模块的样式,之前最好加注释说明是那部分的样式。
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样式,下次最好先复制到最前面作为通用样式
最后就是,每写一个模块的样式,之前最好加注释说明是那部分的样式。
相关文章推荐
- android几个知识点总结(全屏显示,倒计时,页面切换动画效果,obtainmessage)
- IOS新浪微博客户端开发练习知识点总结(一)
- 【WEB】Vue2.0音乐APP实战中的知识点总结(三)
- 一、网页练习知识点小总结
- H5基础实战练习-Polo360小项目总结
- 传智播客--AJAX知识点和实用练习总结
- 一个页面布局的知识点总结
- 【jQuery实战知识点总结】
- 机器学习实战项目里面 常出现概念知识点总结(持续更新)
- 登陆注册页面知识点总结
- linux运维实战练习及linux shell脚本、awk、sed工具命令学习总结
- linux运维实战练习及YUM和RPM程序包管理学习总结
- 【Web】vue2.0音乐APP实战中的知识点总结(二)
- springmvc 项目完整示例08 前台页面以及知识点总结
- AJAX知识点和实用练习总结
- #每日Linux小练习#08 Shell Script知识点总结(下)
- 完整项目实战备忘录的实现之知识点总结
- Unity3D学习笔记4-五子棋实战项目知识点总结
- 前端页面开发几点小知识点总结
- 【WEB】Vue2.0音乐APP实战中的知识点总结(四)