margin | 易学教程

前端学习（419）：京东制作页面27左侧分类上

阅读更多关于前端学习（419）：京东制作页面27左侧分类上

index.css /* 中间模块 */ .grid{height: 480px;} .grid-coll1{width: 190px;height: 100%;background-color: pink;} .grid-coll1 ul{padding: 20px 0;} .grid-coll1 ul li{padding-left: 12px;} .grid-coll2{width: 790px;height: 100%;background-color: skyblue;margin-left:10px;} .grid-coll3{width: 190px;height: 100%;background-color:purple;} normalize.css /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ /* http://necolas.github.io/normalize.css/ */ /** * 1. Change the default font family in all browsers (opinionated). * 2. Correct the line height in all browsers. * 3. Prevent

大项目之网上书城（二）——主页（上）

阅读更多关于大项目之网上书城（二）——主页（上）

目录大项目之网上书城（二）——主页（上） 1.主页代码效果图 2.head2.jsp 代码效果图 3.二级页面的empty.jsp 代码效果图总结 WebContent图大项目之网上书城（二）——主页（上）实在是太复杂啦，弄了半天才调出来一个壳子。明天再继续吧。。。 1.主页代码值得一提的是，我把所以的路径都改成用${pageContext}来获取的了，这样就可以方便我在不同的地方复制粘贴同样的代码，能有同样的功效了。（甚至字体的url都改了23333） <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html> <html> <head> <title>主页</title> </head> <body style="background-color:#bbb">  <div style="width:100%;height:100px;float:left"> <jsp:include page="/client/head.jsp"></jsp:include> </div>  <div style="width:70%;height:886px

offset系列，scroll系列

阅读更多关于 offset系列，scroll系列

目录： 1.offset系列 * 在style标签中设置的css样式属性，不能使用如下方法: ele.style.width ele.style.height * 以后获取元素的宽和高，使用如下方法 ele.offsetWidth;//获取宽(包含边框) ele.offsetHeight;//获取高(包含边框) * 获取元素距离左边(上)的距离 ele.offsetLeft; ele.offsetTop; * ele.offsetLeft的值与什么有关？ - 没有脱离文档流 offsetLeft=父元素的margin+父元素的padding+父元素的border+自己的margin offsetLeft=自己的left+自己的margin 2.直接通过document获取元素 * 获取body var ele = document.body;//返回body元素 * 获取title document.title;//获取title标签中的文本 document.title="重新赋值"; * document.documentElement;//获取html标签 3.案例：图片跟着鼠标飞　　存在兼容问题，IE不起作用 <!DOCTYPE html> <html> <head> <title></title> </head> <body> <img src="a.jpg"

web前端入门到实战：CSS实现雨滴动画效果

阅读更多关于 web前端入门到实战：CSS实现雨滴动画效果

玻璃窗今天我们要实现的是雨滴效果，不过实现雨滴前，我们先把毛玻璃的效果弄出来，没有玻璃窗，雨都进屋了，还有啥好敲打的。 <div class='window'></div> .window { position: absolute; width: 100vw; height: 100vh; background: url("https://cn.bing.com//th?id=OHR.ParrotsIndia_ZH-CN8386276023_UHD.jpg"); background-size: cover; background-position: 100%; filter: blur(10px); } 其实就是给一张图片，做了个模糊化的效果，看起来像毛玻璃的效果一滴雨雨滴的效果就很巧妙了，让我们看下一滴雨完整的效果图这滴雨其实分为两个部分，第一部分是底部的阴影部分，其实是个边框来的，代码如下：专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享学习方法和需要注意的小细节，互相交流学习，不停更新最新的教程和学习技巧（从零基础开始到WEB前端项目实战教程，学习工具，全栈开发学习路线以及规划） .border { position: absolute; margin-left: 92px; margin-top: 51px; border-radius: 100%;

个人收藏的一些图片特效

阅读更多关于个人收藏的一些图片特效

第一个: Js模仿水波滑动效果图片轮显代码 < html > < head > < title > Js图片水波滑动效果 </ title > < style type ="text/css" > * { margin : 0 ; padding : 0 ; } body { margin : 5px auto ; background : #f0f0f0 ; } img { margin : 0 ; border : 0 ; padding : 0 ; } #jsF { position : relative ; margin : 0 ; width : 270px ; height : 185px ; overflow : hidden ; } #jsF ul { position : absolute ; top : 0 ; left : 0 ; list-style-type : none ; z-index : 1 ; } #jsF li { display : block ; position : absolute ; top : 0 ; margin : 0 ; padding : 0 ; overflow : hidden ; } </ style > </ head > < body > < div id ="jsF" ></ div > < div id =

订单页面布局

阅读更多关于订单页面布局

html <view class="consignee"> <view class="consignee-title"> 收件信息 </view> <view class="consignee-address"> <image class="right-arrow" src="/images/order/sub/you.png" /> <image class="bottom-stripe" src="/images/order/sub/xiushi.png" /> <view class="line-one"> <view class="name"> 动感超人 </view> <view class="tel"> 185****9875 </view> </view> <view class="line-two"> 北京朝阳区四环到五环之间878东区12层 </view> </view> </view> <!-- <view class="consignee"> <view class="consignee-title"> 收件信息 </view> <view class="consignee-address"> <image class="right-arrow" src="/images/order/sub/you.png" /> <image class="bottom

WPF自定义DatePicker实现仿HTML5日期选择控件功能

阅读更多关于 WPF自定义DatePicker实现仿HTML5日期选择控件功能

最近重写了WPF自带的DatePicker控件样式，可响应鼠标滚轮、键盘等事件修改日期，效果如图：话不多说，直接上源码： 1、主窗体xaml： <Window x:Class="WpfApp2.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:WpfApp2" mc:Ignorable="d" Title="MainWindow" Height="200" Width="400" WindowStartupLocation="CenterScreen" Loaded="Window_Loaded"> <Window.Resources>  <Style x:Key="ArrowButtonStyle"

圣杯布局 vs 双飞翼布局

阅读更多关于圣杯布局 vs 双飞翼布局

圣杯布局实现原理 html代码中，middle部分首先要放在container的最前部分，然后是left，right 将三者都设置 float:left , position:relative (因为相对定位后面会用到） middle设置 width:100% 占满一行此时middle占满一行，所以要把left拉到middle所在行的最左边，使用 margin-left:-100% 这时left拉回到middle所在行的最左边，但会覆盖middle内容的左端，要把middle内容拉出来，所以在外围container加上 padding:0 210px middle内容拉出来了，但left也跟着出来了，所以要还原，就对left使用相对定位 left:-210px 同理，right要拉到middle所在行的最右边，使用 margin-left:-210px ， right:-210px 实现代码 <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>圣杯布局</title> <style type="text/css"> body { text-align: center;; } #demo { margin: auto; } #header, #footer { height: 50px;

盒子模型

阅读更多关于盒子模型

padding padding: 10px; 表示上下左右的内边距都是10像素 padding: 0 10px; 表示左右的内边距为10像素 padding: 5px 6px 10px; 5 是上内边距像素 6 是左右内边距像素， 10 是下边距像素。 padding: 4px 5px 6px 10px; 4 是上边距 5右边距 6 是下边距，10 是左边距顺时针旋转但是内边距像素值不可以为负数，负数无效。 margin margin:是外边距，是一个盒子与另外一个盒子的距离 margin:没有浮动的情况下上下叠加，取大值。有浮动的情况下，两个外边距相加例如：第一个盒子的样式 .div01 { width:300px; height:100px; background-color:gray; margin:20px; } 第二个盒子的样式 .div02 { width:300px; height:100px; background-color:red; margin:100px 0px 0px 20px; } 如上图所示，理论上上面的margin 20px 和下面的margin 100 应该相加等于120，但是这里注意了，取100（较大的值）作为这2个盒子的距离。第一个盒子的样式 .div01 { width:300px; height:100px;

margin和padding

阅读更多关于 margin和padding

margin指外边距，padding指内边距，通常我们指的宽度width包含内容、内边距、border、外边距。实现代码： 1.html: <el-container class="contaniner_content"> <el-header> <topBarLeft></topBarLeft> <topBarRight></topBarRight> </el-header> <el-container class="contaniner_inside"> <el-main class="mainStyle"> <keep-alive include="log"> <router-view id="main-content-value" class="page-component-wrap animated fadeIn"></router-view> </keep-alive> </el-main> </el-container> </el-container> 2.css: .contaniner_content{ height: 100%; min-width: 1300px; //整个屏幕最小1300px .contaniner_inside{ padding: 20px 120px; .mainStyle{ display: flex; justify-content

订阅 margin