margin | 易学教程

小白项目：静态油画商城

阅读更多关于小白项目：静态油画商城

练手项目之一静态油画商城分三个部分页眉正文区页脚区主要是练习html与css的用法，用的多就熟悉啦需要用的图片效果图： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>商城</title> 6 <link rel="stylesheet" href="css/common.css"> 7 <script type="text/javascript" src="js/js1.js"></script> 8 </head> 9 <body> 10 <div class="header"> 11 <div class="logo"> 12 <img src="image/logo.png"/> 13 </div> 14 <div class="menu" onmouseleave="show_menu1()" onclick="show_menu()"> 15 <div class="menu_title"><a href="###">内容分类</a></div> 16 <ul id="menu1" > 17 <li>现实主义</li> 18 <li>抽象主义</li> 19 </ul> 20 </div> 21 <div class="auth"> 22

ol li 不显示编号

阅读更多关于 ol li 不显示编号

第一种可能性是样式重置导致去掉list-style:none; 第二种可能性是设置了*{margin:0;padding:0} 可以在需要的位置加上margin-left:10px;(根据自己需要设定) 有序列表需要一定的边距才可以设置的 ul>li{ margin-left:30px; list-style-type: disc; } ol>li{ margin-left: 30px; list-style: decimal; } 来源： https://www.cnblogs.com/why98/p/12243255.html

CSS position relative absolute fixed

阅读更多关于 CSS position relative absolute fixed

position属性absolute与relative 详解最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,收藏下来,唯恐忘记。一. 解读absolute与relative 很多朋友问过我absolute与relative怎么区分，怎么用？我们都知道absolute是绝对定位，relative是相对定位，但是这个绝对与相对是什么意思呢？绝对是什么地方的绝对，相对又是相对于什么地方而言的呢？那他们又有什么样的特性，可以做出什么样的效果呢？关于两者之间又有什么样的技巧呢？下面我们就来一一解读。 Absolute，CSS中的写法是：position:absolute; 他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。一般来讲，网页居中的话用Absolute就容易出错，因为网页一直是随着分辨率的大小自动适应的，而Absolute则会以浏览器的左上角为原始点，不会应为分辨率的变化而变化位置。很多人出错就在于这点上出错

html经典布局方案

阅读更多关于 html经典布局方案

1、上中下一栏式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>上中下一栏式布局</title> <style> body{ margin: 0; font-size: 20px; text-align: center; } .wrap{ width:900px; margin:0 auto; } #header{ height: 80px; background: #abcdef; } #main{ height: 500px; background: #cff; } #footer{ height: 60px; background: #555; } </style> </head> <body> <header id="header" class="wrap">header</header> <section id="main" class="wrap">section</section> <footer id="footer" class="wrap">footer</footer> </body> </html> 2、左右两栏式（ 1）混合浮动+普通流右边的section的宽度是由wrap决定的，等于wrap的宽度 <!DOCTYPE html> <html lang="en

怎么用javascript进行拖拽(转摘)

阅读更多关于怎么用javascript进行拖拽(转摘)

*/ /*--> */ 本文译自：http://www.webreference.com/programming/javascript/mk/column2/index.html 所有版权归原文所有由 sohotx.com 雪山老人翻译整理，转载请标明 Javascript的特点是dom的处理与网页效果，大多数情况我们只用到了这个语言的最简单的功能，比如制作图片轮播/网页的tab等等，这篇文章将向你展示如何在自己的网页上制作拖拽．有很多理由让你的网站加入拖拽功能，最简单的一个是数据重组．例如：你有一个序列的内容让用户排序，用户需要给每个条目进行输入或者用select选择，替代前面这个方法的就是拖拽．或许你的网站也需要一个用户可以拖动的导航窗口！那么这些效果都是很简单：因为你可以很容易的实现！网页上实现拖拽其实也不是很复杂．第一你需要知道鼠标坐标，第二你需要知道用户鼠标点击一个网页元素并实现拖拽，最后我们要实现移动这个元素．样例- 拖拽页面元素 Item #1 Item #2 Item #3 Item #4 Item #5 Item #6 Item #7 Item #8 Item #9 Item #10 Item #11 Item #12 获取鼠标移动信息第一我们需要获取鼠标的坐标．我们加一个用户函数到 document.onmousemove 就可以了: document

css absolute relative 定位

阅读更多关于 css absolute relative 定位

转自： http://apps.hi.baidu.com/share/detail/11121011 例如如下A-B的嵌套结构 <div id="A"> <div id="B"> </div> </div> 当A的position为relative时，B的position为absolute才有效。这时候left:0、top:0就不再针对窗口文档，而是针对id为A的这个div了。实例演示div+css的绝对定位和相对定位布局说明：占位空间：元素在文档流中所占据的空间。物理空间：元素本身所占据的空间。下面分3种情况分别对相对定位和绝对定位进行讨论： 1.只使用css第一组属性布局定位元素的情况 2.只使用css第二组属性布局定位元素的情况 3.混合使用第一组和第二组属性的情况图1为未定位时的初始效果，层级关系为： <div <div box1 <div box2 <div box3 效果图：图1 一、用相对定位布局块级元素元素设置position值： position:relative 此属性值的设置，元素没有脱离文档流，还是普通流定位模型的一部分，会对文档流中其它元素布局产生影响。（说明：蓝色代表占位空间，红色代表元素） 1.仅使用left、right、top和bottom属性布局相对定位元素的情况元素原本所占的占位空间仍保留，物理空间偏移。图2中

PC端flex+media媒体查询自适应布局案例

阅读更多关于 PC端flex+media媒体查询自适应布局案例

<!DOCTYPE html> <html> <head> <title>flex</title> <meta name="format-detection" content="telephone=no" /> <meta charset="UTF-8">  <meta name="renderer" content="webkit|ie-comp|ie-stand"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <!--[if lte IE 8]><script>alert("您正在使用的浏览器版本过低，为了您的最佳体验，请先升级浏览器。");window.location.href="http://support.dmeng.net/upgrade-your-browser.html?referrer="

悬浮框，中间文字两边横线

阅读更多关于悬浮框，中间文字两边横线

wxml wxss 悬浮框 .mask { width: 100%; height: 100%; position: absolute; background-color: #999; z-index: 9999; top: 0; left: 0; opacity: 0.5; } 中间文字两边横线 .tip_text { height: 64rpx; line-height: 44rpx; font-size: 32rpx; text-align: center; margin-top: 20rpx; } .tip_text .line { display: inline-block; width: 200rpx; border: 1rpx solid lightgrey; } .tip_text .txt { color: black; vertical-align: middle; vertical-align: -20%; margin: 0 20px; } 来源： CSDN 作者：谈蕾蕾链接： https://blog.csdn.net/weixin_43828196/article/details/103952859

C# WPF 一个设计界面

阅读更多关于 C# WPF 一个设计界面

原文: C# WPF 一个设计界面微信公众号： Dotnet9 ，网站： Dotnet9 ，问题或建议：请网站留言，如果对您有所帮助：欢迎赞赏。 C# WPF 一个设计界面今天正月初三，大家在家呆着挺好，不要忘了自我充电。武汉人民加油，今早又有噩耗，24号（8号）一路走好。阅读导航本文背景代码实现本文参考源码 1. 本文背景一个不错的界面设计 2. 代码实现使用 .NET Framework 4.8 创建名为 “Dashboard1” 的WPF模板项目，添加3个Nuget库：MaterialDesignThemes.3.1.0-ci981、MaterialDesignColors.1.2.3-ci981和ModernUICharts.WPF.Beta.0.9.1，ModernUICharts 库用于绘制统计图，此库没有 .NET CORE 版本，所以项目是创建的 .NET Framework 版本。解决方案主要文件目录组织结构： Dashboard1 App.xaml MainWindow.xaml MainWindow.xaml.cs 2.1 引入样式文件【App.xaml】，在 StartupUri 中设置启动的视图【MainWindow.xaml】，并在【Application.Resources】节点增加

.NET CORE(C#) WPF 方便的实现用户控件切换（祝大家新年快乐）

阅读更多关于 .NET CORE(C#) WPF 方便的实现用户控件切换（祝大家新年快乐）

原文: .NET CORE(C#) WPF 方便的实现用户控件切换（祝大家新年快乐）微信公众号： Dotnet9 ，网站： Dotnet9 ，问题或建议：请网站留言，如果对您有所帮助：欢迎赞赏。 .NET CORE(C#) WPF 方便的实现用户控件切换（祝大家新年快乐）快到2020年了，祝大家新年快乐，今年2019最后一更，谢谢大家支持！阅读导航本文背景代码实现本文参考源码 1. 本文背景一个系统主界面，放上一个菜单，点击菜单在客户区切换不同的展示界面，这是很常规的设计，见下面展示效果图：左侧一个菜单，点击菜单，右侧切换界面，界面切换动画使用MD控件的组件实现（自己使用动画也能实现）。 2. 代码实现使用 .NET CORE 3.1 创建名为 “MenuChange” 的WPF模板项目，添加1个Nuget库：MaterialDesignThemes，版本为最新预览版3.1.0-ci948。解决方案主要文件目录组织结构： AnimatedMenu App.xaml MainWindow.xaml MainWindow.xaml.cs ..[数个演示模块用户控件] 2.1 引入样式文件【App.xaml】，在 StartupUri 中设置启动的视图【MainWindow.xaml】，并在【Application.Resources】节点增加

订阅 margin