死亡是一座永恒的灯塔

0%

发表于 更新于 分类于 ，
本文字数： 951 阅读时长 ≈ 1 分钟

什么时自适应网页设计

页面能适配众多不同的终端设备，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局.

2010年，Ethan Marcotte提出了”自适应网页设计”（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。响应式网页设计是自适应网页设计的子集。响应式网页设计指的是页面的布局（流动网格、灵活的图像及媒介查询）。总体目标就是去解决设备多样化问题。响应式布局等于流动网格布局，而自适应布局等于使用固定分割点来进行布局。当固定宽度与流动宽度结合起来时，自适应布局就是一种响应式设计，而不仅仅是它的一种替代方法。

阅读全文 »

发表于 更新于 分类于 ，
本文字数： 1.5k 阅读时长 ≈ 1 分钟

改变默认radio样式

思路：

step1.可以为<label>元素添加生成性内容(伪元素)，并基于单选按钮的状态来为其设置样式；
step2. 然后把真正的单选按钮隐藏起来；
step3. 最后把生成内容美化一下。

编码实战

1、可以为<label>元素添加生成性内容(伪元素)，并基于单选按钮的状态来为其设置样式；
为label设置样式

1
2
3
4
5
6
7
8
label::before{
display: inline-block;
content: "";
width: 10rem;
height: 10rem;
border: 10px solid #d7d7d7;
border-radius: 50%;
}

阅读全文 »

发表于 更新于 分类于 ，
本文字数： 1.2k 阅读时长 ≈ 1 分钟

媒体查询

媒体查询是非常别致的”有条件的 CSS 规则”。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式。

为什么使用媒体查询

使用@media媒体查询，可以针对不同的媒体类型定义不同的样式。

媒体查询的使用

引入方式

媒体查询有两种引入方法：

link元素中的CSS媒体查询

css样式表中媒体查询

阅读全文 »

发表于 更新于 分类于 ，
本文字数： 567 阅读时长 ≈ 1 分钟

响应式网站是在2010年提出来的，是为了能让网页在不同设备下兼容多个终端，而不是为每个终端特定一种版本。

优点

1.在不同设备下能有不同的页面排版，这也是响应式最大的优点，在分辨率不同，设备环境进行一些不同的设计，所有开发维护和运营上，相对多个版本成本会降低很多。

2.兼容性好，能在不同的设备下浏览。

阅读全文 »

发表于 更新于 分类于 ，
本文字数： 731 阅读时长 ≈ 1 分钟

bootstrap栅格系统

bootstrap

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

bootstrap栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

阅读全文 »

发表于 更新于 分类于 ，
本文字数： 542 阅读时长 ≈ 1 分钟

  1. 左右列固定，中间列自适应布局

    此例适用于左右栏宽度固定，中间栏宽度自适应的布局。由于网页的主体部分一般在中间，很多网页都需要中间列优先加载，而这种布局刚好满足此需求。

  2. 去除列表右边框

    项目中经常会使用浮动列表展示信息，为了美观通常为每个列表之间设置一定的间距（margin-right）,当父元素的宽度固定式，每一行的最右端的li元素的右边距就多余了，去除的方法通常是为最右端的li添加class，设置margin-right:0; 这种方法需要动态判断为哪些li元素添加class，麻烦！！！利用负margin就可以实现下面这种效果：

  3. 负边距+定位：水平垂直居中

    使用绝对定位将div定位到body的中心，然后使用负margin（content宽高的一半），将div的中心拉回到body的中心，已到达水平垂直居中的效果。

  4. 去除列表最后一个li元素的border-bottom

    列表中我们经常会添加border-bottom值，最后一个li的border-bottom往往会与外边框重合，视觉上不雅观，往往要移除。

  5. 多列等高

    此例关键是给每个框设置大的底部内边距，然后用数值相似的负外边距消除这个高度。这会导致每一列溢出容器元素，如果把外包容器的overflow属性设为hidden，列就在最高点被裁切。

发表于 更新于 分类于 ，
本文字数： 5.5k 阅读时长 ≈ 5 分钟

背景介绍

前端在设计一个版面时，通常都会用到水平，垂直居中，水平居中相对来说比较好处理，而垂直居中就稍微复杂点，但他们两个都是我们需要熟练掌握的知识点。

Flex大法实现水平垂直居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo</title>
    <style>
        .father {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 200px;
            height: 200px;
            background: green;
        }
        .child {
            background: red;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="father">
        <div class="child">
            我要水平垂直居中
        </div>
    </div>
</div>
</body>
</html>
阅读全文 »

发表于 更新于 分类于 ，
本文字数： 114 阅读时长 ≈ 1 分钟

什么是组件

组件:一般是指软件系统的一部分，承担了特定的职责，可以独立于整个系统进行开发和测试， 一个良好设计的组件应该可以在不同的软件系统中被使用(可复用)。

目前常用的bootstrap组件：

1.轮播图

2.下拉菜单

3.响应式导航栏

发表于 更新于 分类于 ，
本文字数： 677 阅读时长 ≈ 1 分钟

背景介绍

tableE布局是WEB早期CSS不存在的时候兴起的，是对TABLE标签的不正规使用，Table标签就是表格，是用来显示数据的，而不是用来布局网页的，虽然它有时候布局网页很简单。现在绝大多数的网站都是用DIV+CSS布局，现在的网页越来越倾向于使用DIV的方法来布局网页了。 这两种布局各有各的优缺点。

阅读全文 »

发表于 更新于 分类于 ，
本文字数： 619 阅读时长 ≈ 1 分钟

外边距重叠

边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。两个或多个块级盒子的垂直相邻边界会重合。

外边距重叠的结果

结果的边界宽度是相邻边界宽度中最大的值。

如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。

如果没有正边界，则从零中减去绝对值最大的负边界。

阅读全文 »