您现在的位置是：主页 > news > 英文垃圾站wordpress/网络营销策略方案

英文垃圾站wordpress/网络营销策略方案

admin2025/5/8 17:24:45【news】

简介英文垃圾站wordpress,网络营销策略方案,品牌网站建设9小蝌蚪9a,保定哪家公司做网站写在前面：参考哔哩哔哩黑马程序员pink老师教程 地址：https://www.bilibili.com/video/BV14J4114768?t328&p26目录 外边距（margin） 外边距 设置： 块级盒子水平居中 文字居中和盒子居中区别 插入图片和背景图片区别…

英文垃圾站wordpress,网络营销策略方案,品牌网站建设9小蝌蚪9a,保定哪家公司做网站写在前面：参考哔哩哔哩黑马程序员pink老师教程 地址：https://www.bilibili.com/video/BV14J4114768?t328&p26目录 外边距（margin） 外边距 设置： 块级盒子水平居中 文字居中和盒子居中区别 插入图片和背景图片区别…
  • 写在前面：参考哔哩哔哩黑马程序员pink老师教程 
  • 地址：https://www.bilibili.com/video/BV14J4114768?t=328&p=26

目录

外边距（margin）

外边距

设置：

块级盒子水平居中

文字居中和盒子居中区别

插入图片和背景图片区别

清除元素的默认内外边距(重要)

外边距合并

盒子模型布局稳定性

综合案例

去掉列表默认的样式

圆角边框(CSS3)

盒子阴影(CSS3)

CSS书写规范

空格规范

选择器规范

属性规范

总结

外边距（margin）

外边距

  • margin属性用于设置外边距。 margin就是控制盒子和盒子之间的距离

设置：

属性作用
margin-left左外边距
margin-right右外边距
margin-top上外边距
margin-bottom下外边距
  • margin值的简写 （复合写法）代表意思 跟 padding 完全相同。
  • 案例：margin外边距
div {width: 200px;height: 200px;background-color: pink;padding: 20px;/*外边距*//*margin-left: 100px;margin-top: 50px;*/margin: 100px 20px 0 10px;
}

块级盒子水平居中

  • 可以让一个块级盒子实现水平居中必须：
    • 盒子必须指定了宽度（width）
    • 然后就给左右的外边距都设置为auto，
  • 实际工作中常用这种方式进行网页布局，示例代码如下：
.header{ width:960px; margin:0 auto;
}
  • 常见的写法，以下下三种都可以。
margin-left: auto;   margin-right: auto;
margin: auto;
margin: 0 auto;
  • 案例：块级盒子居中对齐
div {width: 600px;height: 400px;background-color: pink;/*让块级盒子居中对齐水平 1. 必须有宽度 2. 左右外边距设置为auto*//*1. margin-left: auto;margin-right: auto;*//*2. margin: auto;*/margin: 0 auto;
}

文字居中和盒子居中区别

  • 盒子内的文字水平居中是 text-align: center, 而且还可以让 行内元素和行内块居中对齐
  • 块级盒子水平居中 左右margin 改为 auto
text-align: center; /*  文字 行内元素 行内块元素水平居中 */
margin: 10px auto;  /* 块级盒子水平居中  左右margin 改为 auto 就阔以了 上下margin都可以 */
  • 案例：文字居中和盒子居中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>div {width: 600px;height: 300px;background-color: pink;/*块级盒子水平居中*/margin: 50px auto;/*盒子里面的文字 行内元素 、行内块居中对齐水平居中*/text-align: center;}</style>
</head>
<body><div> 稳住 <strong>我们能赢</strong> <input type="text"> </div>
</body>
</html>

插入图片和背景图片区别

  • 插入图片 我们用的最多 比如产品展示类 移动位置只能靠盒模型 padding margin
  • 背景图片我们一般用于小图标背景 或者 超大背景图片 背景图片 只能通过 background-position
 img {  width: 200px;/* 插入图片更改大小 width 和 height */height: 210px;margin-top: 30px;  /* 插入图片更改位置 可以用margin 或padding  盒模型 */margin-left: 50px; /* 插入当图片也是一个盒子 */}div {width: 400px;height: 400px;border: 1px solid purple;background: #fff url(images/sun.jpg) no-repeat;background-position: 30px 50px; /* 背景图片更改位置 我用 background-position */}

清除元素的默认内外边距(重要)

  • 为了更灵活方便地控制网页中的元素，制作网页时，我们需要将元素的默认内外边距清除，代码：
* {padding:0;         /* 清除内边距 */margin:0;          /* 清除外边距 */
}
  • 注意：行内元素为了照顾兼容性， 尽量只设置左右内外边距， 不要设置上下内外边距。

外边距合并

  • 使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
  • 相邻块元素垂直外边距的合并
    • 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom
    • 下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和
    • 取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

  • 解决方案：
    • 尽量给只给一个盒子添加margin值
  • 案例：外边距合并-上下外边距
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.top,.bottom {width: 200px;height: 200px;background-color: pink;}.top {margin-bottom: 100px;}.bottom {background-color: purple;margin-top: 50px;}</style>
</head>
<body><div class="top"></div><div class="bottom"></div>
</body>
</html>
  • 嵌套块元素垂直外边距的合并（塌陷）
    • 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框
    • 父元素的上外边距会与子元素的上外边距发生合并
    • 合并后的外边距为两者中的较大者

  • 解决方案：
    • 可以为父元素定义上边框。
    • 可以为父元素定义上内边距
    • 可以为父元素添加overflow:hidden
  • 还有其他方法，比如浮动、固定、绝对定位的盒子不会有问题
  • 案例：嵌套关系外边距合并

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.father {width: 500px;height: 500px;background-color: pink;/*嵌套关系 垂直外边距合并  解决方案 *//*1. 可以为父元素定义上边框  transparent 透明*//*border-top: 1px solid transparent;*//*2. 可以给父级指定一个 上 padding值*//*padding-top: 1px; *//*3. 可以为父元素添加overflow:hidden。*/overflow: hidden;}.son {width: 200px;height: 200px;background-color: purple;margin-top: 100px;}</style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>
</html>

盒子模型布局稳定性

  • 学习完盒子模型，内边距和外边距，什么情况下用内边距，什么情况下用外边距？
    • 大部分情况下是可以混用的。 就是说，你用内边距也可以，用外边距也可以。 你觉得哪个方便，就用哪个。
  • 我们根据稳定性来分，建议如下：
    • 按照 优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距（margin）。
 width >  padding  >   margin
  • 原因：
    • margin 会有外边距合并 还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。
    • padding 会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。
    • width 没有问题我们经常使用宽度剩余法 高度剩余法来做。

综合案例

去掉列表默认的样式

  • 无序和有序列表前面默认的列表样式，在不同浏览器显示效果不一样，而且也比较难看，所以，我们一般上来就直接去掉这些列表样式就行了。 代码如下
li { list-style: none; }

  • 代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>新闻列表综合案例</title><style>/*这句话必须要写， 不要忘却了*/* {margin: 0;padding: 0;}/*取消列表样式*/li {list-style: none;}.box {width: 298px;height: 198px;border: 1px solid #ccc;/*块级盒子水平居中*/margin: 100px auto;/*如果一个盒子给了一个padding值，会撑大盒子*/padding: 15px;background: url(images/line.jpg);}.box h2 {font-size: 18px;padding: 5px 0;/*底边框思密达*/border-bottom: 1px solid #ccc;margin-bottom: 10px;}.box ul li {height: 30px;line-height: 30px;/*background-color: pink;*/border-bottom: 1px dashed #ccc;background: url(images/arr.jpg) no-repeat 5px center;/*因为这个li 没有宽度 所以padding 不会撑开盒子*/padding-left: 20px;}.box ul li a {color: #333;font-size: 12px;text-decoration: none;/*margin-left: 20px;*//*padding-left: 20px;*/}.box ul li a:hover {text-decoration: underline;}</style>
</head>
<body><div class="box"><!-- 标题盒子 --><h2>最新文章/New Articles</h2><!-- 列表盒子 --><ul><li><a href="#">北京招聘网页设计，平面设计，php</a></li><li><a href="#">体验javascript的魅力</a></li><li><a href="#">jquery世界来临</a></li><li><a href="#">网页设计师的梦想</a></li><li><a href="#">jquery中的链式编程是什么</a></li></ul></div>
</body>
</html>

圆角边框(CSS3)

border-radius:length;
  • 其中每一个值可以为 数值或百分比的形式。
  • 技巧： 让一个正方形 变成圆圈
border-radius: 50%;

  • 以上效果图矩形的圆角， 就不要用 百分比了，因为百分比会是表示高度和宽度的一半。
  • 而我们这里矩形就只用 用 高度的一半就好了。精确单位。
  • 案例：圆角矩形

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>div {width: 200px;height: 200px;background-color: pink;/*border-radius: 100px;*/border-radius: 50%;}p {width: 100px;height: 20px;background-color: red;font-size: 12px;color: #fff;text-align: center;line-height: 20px;border-radius: 10px;}</style>
</head>
<body><div> </div><p> 特价 免费送 </p>
</body>
</html>

盒子阴影(CSS3)

box-shadow:水平阴影 垂直阴影 模糊距离（虚实）  阴影尺寸（影子大小）  阴影颜色  内/外阴影；

  • 前两个属性是必须写的。其余的可以省略。
  • 外阴影 (outset) 是默认的 但是不能写 想要内阴影可以写 inset
div {width: 200px;height: 200px;border: 10px solid red;/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);  *//* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色  内/外阴影； */box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);		
}
  • 案例：盒子阴影

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>div {width: 200px;height: 200px;background-color: pink;margin: 50px auto;/*box-shadow:水平阴影 垂直阴影 模糊距离（虚实）  阴影尺寸（影子大小）  阴影颜色  内/外阴影；*/box-shadow: 0 15px 30px rgba(0,0,0,.3);}</style>
</head>
<body><div></div>
</body>
</html>

CSS书写规范

空格规范

  • 【强制】 选择器 与 { 之间必须包含空格。
.selector {
}
  • 【强制】 属性名 与之后的 : 之间不允许包含空格， : 与 属性值 之间必须包含空格。
font-size: 12px;

选择器规范

  • 【强制】 并集选择器，每个选择器声明必须独占一行。
/* good */
.post,
.page,
.comment {line-height: 1.5;
}/* bad */
.post, .page, .comment {line-height: 1.5;
}
  • 【建议】 一般情况情况下，选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。
/* good */
#username input {}
.comment .avatar {}/* bad */
.page .header .login  input {}
.comment div * {}

属性规范

  • 【强制】 属性定义必须另起一行
/* good */
.selector {margin: 0;padding: 0;
}/* bad */
.selector { margin: 0; padding: 0; }
  • 【强制】 属性定义后必须以分号结尾。
/* good */
.selector {margin: 0;
}/* bad */
.selector {margin: 0
}

总结

相关文章

最新文章