Articles in the category of Web开发

web前端
  1. Home
  2. Web开发

CSS3媒体查询

```css /* 去除浏览器默认样式 */ * { margin: 0; padding: 0; box-sizing: border-box; }/* 一个高度为100px的盒子 */ header { height: 100px; background: purple; }/* 当浏览器宽度小于768px的时候 header的背景色变为红色 */ @media screen and (...
  • 逸云先生
  • July 19, 2020
  • No comments

    • swiper实现响应式全屏自动轮播

    ">``````.Excellent_swi { width: 100%; height: 100%; }.swiper-container { width: 100%; height: 100%; margin-left: auto; margin-right: auto; } //图片水平垂直居中 .swiper-slide { text-align: center; font-size...
  • 逸云先生
  • July 18, 2020
  • No comments

    • 浏览器存储相关storage工具函数

    ### localStorage 存储```jsx /** * 目前对象值如果是函数 、RegExp等特殊对象存贮会被忽略 * @param { String } key 属性 * @param { string } value 值 */ export const localStorageSet = (key, value) => { if (typeof (value) === 'obj...
  • 逸云先生
  • April 26, 2020
  • No comments

    • css美化input单选框按钮

    **html部分：**```css微信支付支付宝支付银行卡支付```**css部分：**```css .xuanxiang { position: relative; line-height: 30px; }.xuanxiang input[type="radio"] { width: 20px; height: 20px; opacity: 0; }.xuanxiang label { p...
  • 逸云先生
  • April 15, 2020
  • No comments

    • 单选按钮css样式的代码

    **html部分：**```css```**css部分：**``` .item { position: relative; line-height: 30px; }input[type="radio"] { width: 20px; height: 20px; opacity: 0; }label { position: absolute; left: 5px; top: 3px; widt...
  • 逸云先生
  • April 2, 2020
  • 1 comments

    • 用css写一个底部弧度的效果

    html部分：```csshello world```css部分：```css .box { position: relative; width: 100%; height: 200px; text-align: center; color: #fff; background-color: yellow; } .box:after { position: absolute; left: 0;...
  • 逸云先生
  • April 1, 2020
  • No comments

    • css3实现背景和字体渐变

    ``````````````````````````````````````````````````````````css background: linear-gradient(to bottom,#fff 0%,#333 100%);background: -webkit-linear-gradient( bottom,black,transparent );//背景渐变（botton是...
  • 逸云先生
  • March 28, 2020
  • No comments

    • flex实现三列排序

    html部分：```css```css部分：```css * { margin: 0; padding: 0; }#box { width: 100%; height: 100%; top: 0; z-index: -1; position: absolute; background: black; background-size: 100% 100%; }.box { margin: 40...
  • 逸云先生
  • March 23, 2020
  • 4 comments