margin

01 DIV+CSS 固定页面布局

由 微笑、不失礼 提交于 2020-03-09 06:15:45
本文讲解使用DIV+CSS布局最基本的内容，读完本文你讲会使用DIV+CSS进行简单的页面布局。 DIV+CSS布局中主要CSS属性介绍： Float: Float属性是DIV+CSS布局中最基本也是最常用的属性，用于实现多列功能，我们知道<div>标签默认一行只能显示一个，而使用Float属性可以实现一行显示多个div的功能，最直接解释方法就是能实现表格布局的多列功能。 Margin: Margin属性用于设置两个元素之间的距离。 Padding: Padding属性用于设置一个元素的边框与其内容的距离。 Clear: 使用Float属性设置一行有多个DIV后（多列），最好在下一行开始之前使用Clear属性清楚一下浮动，否则上面的布局会影响到下面。 实例讲解：下面使用实例如果做一个简单又基本的布局，效果如下图： 代码： ? 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 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

DIV+CSS布局-固定页面开度布局

由 ∥☆過路亽．° 提交于 2020-03-09 06:14:25
DIV+CSS布局中主要CSS属性介绍： Float: Float属性是DIV+CSS布局中最基本也是最常用的属性，用于实现多列功能，我们知道<div>标签默认一行只能显示一个，而使用Float属性可以实现一行显示多个div的功能，最直接解释方法就是能实现表格布局的多列功能。 Margin: Margin属性用于设置两个元素之间的距离。 Padding: Padding属性用于设置一个元素的边框与其内容的距离。 Clear: 使用Float属性设置一行有多个DIV后（多列），最好在下一行开始之前使用Clear属性清楚一下浮动，否则上面的布局会影响到下面。 实例讲解：下面使用实例如果做一个简单又基本的布局，效果如下图： 代码： ? 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 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR

CSS的水平居中和垂直居中方式

由 眉间皱痕 提交于 2020-03-08 22:02:28
水平居中 1.行内元素或行内块元素水平居中，即给其父元素添加text-align：center 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <style> 9 * { 10 padding: 0; 11 margin: 0; 12 } 13 14 .wrapper { 15 height: 400px; 16 background-color: pink; 17 text-align: center; 18 } 19 </style> 20 </head> 21 22 <body> 23 24 <div class="wrapper"> 25 <span class="center">text-align：center</span> 26 </div> 27 28 </body> 29 30 </html> 2.块级元素水平居中可以用margin：0 auto 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta

list-style-type:none是加在ul还是li中呢？

由 本小妞迷上赌 提交于 2020-03-08 13:27:25
很多时候我们都需要多对列表元素进行初始化，方法是给列表元素添加list-style-type: none，但作为小白的我是经常纠结一个问题：是把它加在ul中还是li中呢 我试了一下，加在ul和li都能达到同样的效果，如下 把list-style-type: none加在li上： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>前端小王子</title> <style> /*reset*/ body{ margin: 0; } ul{ margin-top: 0; margin-bottom: 0; padding-left: 0; } li{ list-style-type: none; } /*list*/ .list{ width: 125px; margin: 50px auto; background-color: #e8e8e8; } </style> </head> <body> <ul class="list"> <li>放假了</li> <li>买个地球仪吧</li> <li>世界那么大</li> <li>你不但可以看看</li> <li>还可以转转</li> </ul> </body> </html> 虽然可以去掉前面的符号，li的list-style-type也为none，但是ul的list

HTML的各个标签的默认样式

由 不问归期 提交于 2020-03-08 09:33:26
head{ display: none } body{ margin: 8px;line-height: 1.12 } button, textarea,input, object,select { display:inline-block;} ol, ul, dir,menu, dd{ margin-left: 40px } i, cite, em,var, address{ font-style: italic } //块级元素 html, body, div,ol, p, ul, h1, h2,h3,h4,h5, h6, address,blockquote, form, dd,dl, dt, fieldset, frame, frameset,noframes,center, dir, hr, menu, pre { display: block } //列表元素 li{ display:list-item } ol{list-style-type: decimal } ol ul, ul ol,ul ul, ol ol { margin-top: 0; margin-bottom: 0 } //标题 h1{ font-size:2em; margin: .67em 0 } h2{ font-size:1.5em; margin: .75em 0 } h3{ font

小米商城首页的实现

由 假装没事ソ 提交于 2020-03-08 04:43:15
小米首页 效果图 html代码 由于代码过多，上传困难。 请访问链接：https://share.weiyun.com/5BWIENo 小米商城源文件 里面附带完整的源码文件 css代码 * { margin : 0 ; padding : 0 ; } ul,ol,li { list-style : none ; } img { display : block ; width : 100% ; } a { text-decoration : none ; } h1,h2,h3,h4 { font-size : 16px ; } body { font-size : 14px ; color : #000000 ; font-family : 宋体 , 微软雅黑 ; } html, body { width : 100% ; } /* css common */ .l { float : left ; } .r { float : right ; } .clear:after { content : "" ; display : block ; clear : both ; } .container { width : 1226px ; margin : 0 auto ; position : relative ; } .container-fluid { position :

商城项目日结5

由 早过忘川 提交于 2020-03-07 03:53:57
今天完成了商城的购物车功能 ，并细化了css样式使页面看起来更加舒适。 项目地址 购物车代码如下： html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="../lib/bootstrap/dist/css/bootstrap.css"> <link rel="stylesheet" href="../css/reset.css"> <link rel="stylesheet" href="../css/common.min.css"> <link rel="stylesheet" href="../css/index.css"> <link rel="stylesheet" href="../css/footer.css"> <link rel="stylesheet" href="../css/cart.css"> </head> <body style="background-color: #fff;"> <!-- 头部 --> <div class=

前端整理——css部分

由 南笙酒味 提交于 2020-03-07 00:12:45
（1）盒模型（普通盒模型、怪异盒模型） 1、元素的content（内容）、padding(内边距)、border（边框）、margin（外边距）构成了CSS盒模型 2、IE盒模型和W3C盒模型 1）IE盒模型是怪异模式下的盒模型，W3C盒模型是标准模式下的盒模型； 2）IE盒模型的width/height包含了content的width/heigh+padding+border W3C盒模型的width/height只是content的width/height 3、CSS3中的box-sizing 不同的人有不同的习惯，在css3中增加了box-sizing：content-box（遵循W3C盒模型）| border-box（遵循ie盒模型）|inherit（该属性的值从父元素继承） （2）如何让元素水平居中 1、绝对定位实现水平垂直居中： position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; 注意： 1>对父元素要使用 position: relative; 对子元素要使用 position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; 缺一不可。 2>如果只要垂直居中，可以不写right: 0；left: 0;

博客界面美化

由 孤街浪徒 提交于 2020-03-06 07:53:24
www.cnblogs.com/shaokele/ 美化无止境，还是学OI ！！！ 美化无止境，还是学OI ！！！ 美化无止境，还是学OI ！！！ 催更请留言 ～～博主很懒～～ 我的博客皮肤是Simple Memory 由于背景图比较高清，部分设备可能显示的很慢：） 背景图可以自己换，修改代码第三行的网址即可 现在的版本： “页面定制CSS代码” body { color: #000; background: url(https://i.loli.net/2018/07/18/5b4f176e73e07.png) fixed; background-size: cover; background-repeat: repeat; font-family: "微软雅黑","Helvetica Neue",Helvetica,Verdana,Arial,sans-serif; font-size: 12px; min-height: 101%; } #home { opacity: 0.8; margin: 0 auto; width: 80%; min-width: 950px; background-color: #fff; padding: 30px; margin-top: 30px; margin-bottom: 50px; box-shadow: 0 2px 6px rgba

css排版常用样式、三种不同html类型、css布局盒模型介绍

由 寵の児 提交于 2020-03-06 01:29:51
把CSS样式与网页编排通过网页排版中主要格式化要素实现网页实用性与欣赏性相结合，实现出设计效果。 字体：div{font-family: "Microsoft Yahei";}为网页中的文字设置字体为微软雅黑,这里注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。（因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。）现在一般网页喜欢设置“微软雅黑”，如下代码：body{font-family:"Microsoft Yahei";}或body{font-family:"微软雅黑";}注意：第一种方法比第二种方法兼容性更好一些。当然了如果你想用特殊字体怎么办了？通过css3的自定义字体实现@font-face{ font-family:dhnblog;src:url('images/fzm.ttf');}/*自定义字体类型*/ 字号、颜色：div.box{font-size: 14px;color: #f90;} 设置网页中文字的字号为14像素，并把字体颜色设置为#f90；此外颜色分为3种表现形式：a.rgb（255,255,255）b.英文单词c.16进制，如#f90，具体参考 css基本概念与css核心语法介绍 中有关颜色介绍 粗体：如果想为文字设置粗体除了使用h1-h6或strong标签
订阅 margin