一、div+css布局1.css水平垂直居中方法1:兼容性最好的方法.box{position: absolute;top: 0;right: 0;left: 0;bottom: 0;margin: auto;width: 200px;height: 200px;background-color: #eee;}方法2: css3 transform属性.box{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 200px;height: 200px;background-color: #eee;}方法3: flex ie11才支持 用mdn查看属性的兼容性和应用实例 display: flex; 设...
很多人对CSS的布局有困惑，实际的应用场景中由于布局种类多难以选择。今天我花些时间总结下自己对CSS布局的理解，分析下了解各种布局的优劣，同时希望能分享给初入前端的朋友们一些在布局上的经验，如果有那些地方总结的不好，欢迎大家指正。言归正传，现在就来揭开各种布局的面纱。 单列布局 水平居中 水平居中的布局方式是最常见的一种，常常用于头部、内容区、页脚，它主要的作用是控制盒子在整个页面以...
一、使用html 加粗标签使用b标签或strong标签即可对文字粗体。1、分别对应语法如下：<b></b><strong><strong>2、应用案例1）、html案例完整代码（可以拷贝测试）：<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>粗体实现 DIVCSS51. html文字粗体字体加粗如何设置简介：一、使用html 加粗标签 使用b标签或strong标签即可...
最近又搞了一波网站的兼容,由于要求ie浏览器还是要兼容到ie8，所以调起来还是各种蛋疼。 现在就post一些做兼容的总结，可能不够全面，但是可以告诉大家如何避过一些坑。主要测试了chrome，firefox，ie8、9、11，360浏览器。 一、基本的css兼容： 1、可能很多人喜欢用css hack的形式去兼容ie浏览器，但是我自己用起来感觉其实不好使 。ie7-就不考虑了，问题在哪呢，就在ie8的甑别上，你怎么让样式只对ie8起作用。上网搜你...
最近又搞了一波网站的兼容,由于要求ie浏览器还是要兼容到ie8，所以调起来还是各种蛋疼。 现在就post一些做兼容的总结，可能不够全面，但是可以告诉大家如何避过一些坑。主要测试了chrome，firefox，ie8、9、11，360浏览器。一、基本的css兼容： 1、可能很多人喜欢用css hack的形式去兼容ie浏览器，但是我自己用起来感觉其实不好使 。ie7-就不考虑了，问题在哪呢，就在ie8的甑别上，你怎么让样式只对ie8起作用。上网搜你可能会得到这...
background属性是CSS中最常见的属性之一，要想实现CSS抠图，只需要用到一个属性：background-position。background-position是用来控制元素背景图片的位置。技巧是，实际上指定的是图片左上角相对于元素左上角的位置。它接受三种值：关键词，比如top、right、bottom、left和center；长度值，比如px、em、rem等；百分值%。下面的内容就来聊一聊有关background-position属性用法的话题。首先可以学习Gxl网相关的免费课程1. 学习《CSS...
在css中，我们常见到选择器class，那么对于class的用法与规范，我们来做个总结：1.CSS Id 和 Class选择器的相关介绍id 和 class 选择器如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。id 选择器id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。2.a.class 与 a .class的区别，注意空格 - CSS调试技巧使用图片精灵技术进行图片...
语法： text-overflow : clip | ellipsis 参数： clip : 不显示省略标记（...），而是简单的裁切 ellipsis : 当对象内文本溢出时显示省略标记（...） 说明： 设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。 对应的脚本特性为textOverflow。请参阅我编写的其他书目。 示例： div { text-overflow : clip; }CSS2.1中如何实现text-overflow的效果 看起来不错，我们测试一下 <div style="width:100px;height:20px;...
1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行2. margin加倍的问题 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上 display:inline; 例如： <#div id=”imfloat”> 相应的css为 #IamFloat{ float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/...
本篇文章主要给大家介绍css中position是什么意思，及所有值的作用。对于学习前端开发的朋友来说，css中的position属性是至关重要的。简单的说，css中position的意思就是，规定元素的定位类型。那么position的属性值又有哪些呢？也就是css中定位类型有哪些？下面我们就结合简单的代码示例，为大家总结介绍，position的值及其作用。1、absolute生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "l...
在计算机应用中，下拉式选单是选单的一种表现形式。具体表现为：当用户选中一个选项后，该选单会向下延伸出具有其他选项的另一个选单。下拉式选单通常应用于把一些具有相同分类的功能放在同一个下拉式选单中，并把这个下拉式选单置于主选单的一个选项下。下拉菜单内的项目可以据需要设置为多选或单选，可以用来替代一组复选框（设置为多选）或单选框（设置为单选）。这样比复选框组或单选框组的占用位置小，但不如它们直观。1. 实现...
按照常规的理解，处理图像的效果都应该是设计师的工具，甚至这些事情应该都交给PhotoShop之类的设计软件来完成。但是随着css技术的发展以及css3的出现，各大厂商的浏览器的兼容性越来越好，利用css技术来处理和实现图片的各种效果变得越来越便捷。css及css3中的各种属性将很容易的帮助我们实现各种想要的图片效果。这里我们就来谈一谈使用css和css3来实现各种图片效果。首先可以学习Gxl网相关的免费课程1. 学习《CSS3 入门教程》中...
很多时候，我们需要让元素居中显示：1. 一段文本的水平居中，2. 一张图片的水平居中，3. 一个块级元素的水平居中；4. 单行文本的竖直居中，5. 不确定高度的一段文本竖直居中，6. 确定高度的块级元素竖直居中等等。现在分别对其进行总结下(这篇文章也在 imooc 里发表过手记，可是因为板式的原因不太容易读懂。)： 1. 让元素水平居中，使用 text-align: center;水平居中 .text-center {width: 200px;height: 100px;text-align...
css如何对文本进行修饰？本篇文章就给大家总结了css修饰文本文字的一些方法，介绍一些css 修饰文本的属性，让大家了解css修饰文本文字的9种属性有哪些。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。1、css设置文本文字颜色的属性color属性：设置文本文字颜色。用法如下：color：颜色值;color属性可以设置的合法颜色值包括：16进制颜色值（例：#ffffff），rgb颜色值【例：rgb(0,0,0)】，rgba颜色值【例：rgb(...
在CSS3出现之前，想要实现圆角的效果可以通过图片或者用margin属性实现，传统的圆角生成方案，需要多张图片作为背景图案。CSS3出现以后，就不需要浪费时间去制作多张图片了，大大的减少了工作量，提高了网页的性能，提升页面加载速度，并且增加了视觉的可靠性。既然说了CSS3中的圆角有这么多的优势，那么我们就来总结下css3圆角和圆角边框使用方法。可以先学习《快速玩转CSS3教程》中的 CSS3圆角介绍 章节课程CSS3圆角及圆角边框使...