关键字:
  • Web、移动开发之Web前端:(3)Css及Css3

    作者: king       发表时间: 2017-10-07 01:43
    参考网址: http://www.runoob.com/css 1 CSS概述及发展历程 CSS(Cascading Style Sheet) 层叠样式表:控制布局和显示效果。 布局选择CSS div css 内容和显示分离 与其他标签元素兼容性好 尺寸小速度快 更有利于响应式布局 ul li css适合列表项目 菜单项目的布局 摒弃table布局,table可用来展示表格数据。 CSS1.0 1997年 W3C 颁布 HTML4 标准的同时也发布了有关样式单的第一个标准 CSS1.0。主要涉及选择器、样式属性、伪类 / 对象几个大的部分。 选择器分为派生选择器、ID 选择器和类选择器几种。样式属性主要包括 Font 字体、Text 文本、Background 背景、Position 定位、Dimensions 尺寸、Layout 布局、Margins 外边距、Border 边框、Padding 内边距、List 列表、Table 表格、Scrollbar 滚动条、a 的 link、hover、active...
  • div内容垂直居中

    作者: king       发表时间: 2017-09-23 17:21
    1.单行内容可以设置height和line-height相同: div { height:30px; line-height:30px; width:100px; overflow:hidden; } 2.多行内容使用css3的transform属性 .center-vertical{ position: relative; top:50%; transform:translateY(-50%); } transform在嵌套中可能50%取值为非预期,而导致不居中。 3.多行内容使用display:table 将子元素设置为display:table-cell 和vertical-align:middle .wrapper{ display: table; } .cell { display: table-cell; vertical-align: middle; } html结构如下: <div class="wra...
  • div半透明背景效果 div背景颜色渐变 背景图占满div 背景适应窗体大小

    作者: king       发表时间: 2017-09-23 17:04
    div 半透明背景效果: background:rgba(255,255,255,0.5)   div背景颜色渐变(从左到右90deg 开始颜色#00b9fe 结束颜色transparent):   background-image: linear-gradient(90deg, #00b9fe, transparent), linear-gradient(90deg, #00b9fe, transparent);   div背景图铺满div大小:     background-size: cover;/*100%*/     -webkit-background-size: cover;     -moz-background-size: cover;     -o-background-size: cover;   页面背景图片适应窗体大小: css代码...
  • div内容超长显示省略号

    作者: king       发表时间: 2017-09-23 15:37
    div 省略号  要设置width最大值      overflow: hidden;      text-overflow: ellipsis;      white-space: nowrap;           div 两行省略号  要设置width最大值    text-overflow: -o-ellipsis-lastline;    text-overflow: ellipsis;    display: -webkit-box;    -webkit-line-clamp: 3;    -webkit-box-orient: vertical;
  • CSS+Js快速实现仿CSDN和博客园页面布局

    作者: king       发表时间: 2014-11-23 19:17
    一、Css+Js实现2列CSDN页面布局 1.功能说明  页面分左右两列宽度固定的内容区域,页面左右两侧留有相等宽度的边距。 当改变浏览器窗体大小时,页面随着窗体宽度的变化自动调整左右边距的宽度,同时保持2列内容区域占据的宽度固定不变。 2. 关键代码 主要用到css样式的float属性和margin属性。通过float:left属性使第1列内容区域向左浮动,float:right属性使第2列内容区域向右浮动。 使用margin-left和margin-right属性分别设置2个div的左右边距。左右边距的设置通过Js在页面加载设置一次,窗体变化时实时动态修改。     <script src="./jquery-1.7.1.min.js" type="text/javascript"></script>     <style>       ...