最详细的html+css笔记（三）

三部分附录（因为暂时不支持插入超链接所以部分内容无法显示）

附录一 DIV命名规范

企业DIV使用频率高的命名方法
网页内容类
标题: title
摘要: summary
箭头： arrow
商标： label
网站标志： logo
转角/圆角：corner
横幅广告： banner
子菜单： subMenu
搜索： search
搜索框： searchBox
登录： login
登录条：loginbar
工具条： toolbar
下拉： drop
标签页： tab
当前的： current
列表： list
滚动： scroll
服务： service
提示信息： msg
热点：hot
新闻： news
小技巧： tips
下载： download
栏目标题： title
热点： hot
加入：joinus
注册： regsiter
指南： guide
友情链接： friendlink
状态： status
版权： copyright
按钮： btn
合作伙伴： partner
投票： vote
左右中：left right center

注释的写法: /* Footer */ 内容区/* End Footer */
id的命名:
页面结构
容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center

导航
导航：nav
主导航：mainbav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary

功能
标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：regsiter
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标签页：tab
文章列表：list
提示信息：msg
当前的:current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：copyright

class的命名:
颜色:使用颜色的名称或者16进制代码,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
字体大小,直接使用”font+字体大小”作为名称,如
.font12px { font-size: 12px; }
.font9px {font-size: 9pt; }
对齐样式,使用对齐目标的英文名称,如
.left { float:left; }
.bottom { float:bottom; }
标题栏样式,使用”类别+功能”的方式命名,如
.barnews { }
.barproduct { }

注意事项::
一律小写;
尽量用英文;
不加中杠和下划线;
尽量不缩写，除非一看就明白的单词.

推荐的 CSS 书写顺序：
显示属性
display
list-style
position
float
clear
自身属性
width
height
margin
padding
border
background
文本属性
color
font
text-decoration
text-align
vertical-align
white-space
other text
content

附录二 CSS精灵

CSS精灵原理以及应用
CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量。
该图片使用CSS background和background-position属性渲染，这也就意味着你的标签变得更加复杂了，图片是在CSS中定义，而非<img>标签。
一个简单的例子：
一张图片作出一个按钮的三个状态
一个链接用CSS做成按钮的样式，我们可以使用同一张图片，完成按钮的三个状态，a:link，a:hover，a:active <a class="button" href="#">链接</a>
加入右侧的图片为：200px 65px的三个按钮图拼合而成的图片button.png，从上到下一次为按钮的普通、鼠标滑过、鼠标点击的状态。则可以使用CSS进行定义。

a {
 display:block; 
 width:200px; 
 height:65px; 
 line-height:65px; /*定义状态*/
 text-indent:-2015px; /*隐藏文字*/
 background-image:url(button.png); /*定义背景图片*/
 background-position:0 0;
 /*定义链接的普通状态，此时图像显示的是顶上的部分*/
}
a:hover {
 background-position:0 -66px;
 /*定义链接的滑过状态，此时显示的为中间部分，向下取负值*/
}
a:active {
 background-position:0 -132px; 
 /*定 义链接的普通状态，此时显示的是底部的部分，向下取负值*/
}

更多的CSS雪碧，图片更复杂，背景定位更精确。可能会用到大量的数值
如：background:url(nav.png) -180px 24pxno-repeat; 来达到更精确的定位
优点：
减少加载网页图片时对服务器的请求次数
可以合并多数背景图片和小图标，方便在任何位置使用，这样不同位置的请求只需要调用一个图片，从而减少对服务器的请求次数，降低服务器压力，同时提高了页面的加载速度，节约服务器的流量。
提高页面的加载速度
sprite技术的其中一个好处是图片的加载时间(在有许多 sprite 时，单张图片的加载时间)。由所需图片拼成的一张 GIF图片的尺寸会明显小于所有图片拼合前的大小。单张的 GIF只有相关的一个色表，而单独分割的每一张 GIF 都有自己的一个色表，这就增加了总体的大小。因此，单独的一张 JPEG 或者 PNGsprite 在大小上非常可能比把一张图分成多张得来的图片总尺寸小。
减少鼠标滑过的一些bug
IE6不会主动预加载鼠标滑过即a:hover中的背景图片，所以，如果使用多张图片，鼠标滑过会出现闪白的现象。使用CSS雪碧，由于一张图片即可，所以不会出现这种现象。
不足：
CSS雪碧的最大问题是内存使用
影响浏览器的缩放功能
拼图维护比较麻烦
使CSS的编写变得困难
CSS 雪碧调用的图片不能被打印
错误得使用 Sprites 影响可访问性

附录三一些tips解决方案

页面优化实践

从下面的几个方面可以进行页面的优化：
减少请求数
图片合并
CSS文件合并
减少内联样式
避免在 CSS中使用 import
减少文件大小
选择适合的图片格式
图片压缩
CSS 值缩写（Shorthand Property)
文件压缩
页面性能
调整文件加载顺序
减少标签数量
调整选择器长度
尽量使用CSS 制作显示表现
增强代码可读性与可维护性
规范化
语义化
模块化

写DIV+CSS 的一些常识

不要使用过小的图片做背景平铺
这就是为何很多人都不用 1px 的原因，这才知晓。宽高 1px 的图片平铺出一个宽高 200px 的区域，需要 200200=40, 000 次，占用资源
无边框
推荐的写法是 border:none;，哈哈，我一直在用这个。 border:0; 只是定义边框宽度为零，但边框样式、颜色还是会被浏览器解析，占用资源
慎用通配符
所谓通配符，就是将CSS 中的所有标签均初始化，不管用的不用的，过时的先进的，一视同仁，这样，大大的占用资源。要有选择的初始化标签。
CSS的十六进制颜色代码缩写
习惯了缩写及小写，这才知道，原来不是推荐的写法，为的是减少解析所占用的资源。但同时会增加文件体积。孰优孰劣，有待仔细考证。
样式放头上，脚本放脚下。不内嵌，只外链
坚决不用 CSS表达式
使用引用样式表，而不是通过@import 导入。
一般来说，PNG比 GIF 要小，小得多。再者，GIF 中有多少颜色是被浪费的，很值得优化。
千万不要在 HTML中缩放图片，一者不好看，二者占资源。
正文字体最好用偶数
12px、14px、16px，效果非常好。特例，15px。
block、ul、ol等上下留出至少一倍行距，左侧至少两倍行距，右侧随意。
段落之间，至少要有一倍行距
强行指定某些元素的 line-height，正文 1.6倍于文字大小，标题1.3倍。
中文标点用全角
英文夹杂在中文中，左右空格，半角。
中文字体的粗体和斜体，远离较好

常用代码片段

雅虎工程师提供的CSS初始化示例代码【仅供参考】
可以在html头文件中直接引用，从而避免浏览器的不兼容带来的错误。

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
p,
blockquote,
th,
td { 
 margin:0; padding:0; 
}
body {
 background:#fff; 
 color:#555; 
 font-size:14px; 
 font-family: Verdana, Arial, Helvetica, sans-serif; 
}
td,
th,
caption { 
 font-size:14px;
}
h1, 
h2, 
h3, 
h4, 
h5, 
h6 { 
 font-weight:normal; 
 font-size:100%; 
}
address, 
caption,
cite, 
code, 
dfn, 
em, 
strong,
th, 
var { 
 font-style:normal; 
 font-weight:normal;
}
a { 
 color:#555; 
 text-decoration:none; 
}
a:hover { 
 text-decoration:underline; 
}
img {
 border:none;
}
ol,ul,li { 
 list-style:none; 
}
input, 
textarea, 
select, 
button { 
 font:14px Verdana,Helvetica,Arial,sans-serif; 
}
table { 
 border-collapse:collapse; 
}
html {
 overflow-y: scroll;
} 
.clearfix:after {
 content: "."; 
 display: block; 
 height:0; 
 clear:both; 
 visibility: hidden;
}
.clearfix { 
 *zoom:1; 
}

mobile meta标签

<meta name=”viewport” content=”width=320,target-densitydpi=dpi_value,initial-scale=1, user-scalable=no”/>

表格不被撑开

table-layout: fixed; word-break: break-all;;border-collapse: collapse

不设宽高居中

<div id=”abc” style=”display:table;text-align:center;width:100%;height:100%;”>
 <span style=”background:#f00; display:table-cell; vertical-align:middle;”>
 <input type=”button” value=”item1″ />
 </span>
</div>

透明度的兼容代码

filter:alpha(opacity=50); /*1-100*/
-moz-opacity:0.5; /*0-1.0*/
-khtml-opacity:0.5; /*0-1.0*/
opacity:0.5; /*0-1.0*/

文字溢出点点省略

white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;

清除浮动的几种方法
方法一：投机取巧法 – 不推荐
直接一个放到当作最后一个子标签放到父标签那儿，此方法屡试不爽，兼容性强
方法二：overflow + zoom方法 –不推荐
.fix{overflow:hidden; zoom:1;}
此方法优点在于代码简洁，涵盖所有浏览器
方法三：after + zoom方法 -推荐–此方法可以说是综合起来最好的方法了
clearfix只应用在包含浮动子元素的父级元素上

.fix{zoom:1;}
.fix:after{
 display:block; 
 content:'clear'; 
 clear:both;
 line-height:0; 
 visibility:hidden;
}

更多代码片段详情
实用的60个CSS代码片段

一些总结

自动继承属性：
color
font
text-align
list-style
…
非继承属性：
background
border
position
…
具有破坏性的元素：
float
display:none;
position:absoblute/fixed/sticky;
具有包裹性的元素：
display:inline-block/table-cell
position:absolute/fixed/sticky
overflow:hidden/scroll
消除图片底部间隙的方法
图片块状化-无基线对齐
img{display:block;}
图片底线对齐
img{vertical-align:bottom;}
行高足够小 - 基线位置上移
.box{line-height:0;}

一些概念

BFC
BFC全称”Block Formatting Context” 中文为“块级格式化上下文”
记住这么一句话：BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此
优雅降级(graceful degradation)
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容
渐进增强 progressive enhancement：
是在浏览器开启JavaScript功能后，如果浏览器版本不支持某些 JavaScript 能力，我们解决这种问题的方式
平稳退化
是在浏览器没有JavaScript功能，或没有开启JavaScript功能情况下，我们解决这种问题的方式；

学习从来不是一个人的事情，要有个相互监督的伙伴，想要学习或交流前端问题的小伙伴可以私信“学习”小明加群获取2019web前端最新入门资料，一起学习，一起成长！

过CSS背景属性，可以给页面元素添加背景样式。

背景属性可设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

背景颜色

background-color：rgb值或颜色单词；

默认背景颜色值为transparent（透明）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景属性</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            border: 1px solid;
        }
        /* 背景颜色 */
        .bg-color {
            background-color: transparent;
        }
        .bg-color-trans {
            text-align: center;
            background-color: pink;
            width: 100px;
            height: 100px;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div class="bg-color">背景颜色
        <div class="bg-color-trans">透明背景</div>
    </div>
</body>
</html>

效果：

背景图片

Background-image：图片路径URL；

默认背景图片值为none。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景属性</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            border: 1px solid;
        }
        .bg-image {
            background-image: url(../images/meitizhub.jpg);
        }
    </style>
</head>
<body>
    
    <div class="bg-image">背景图片</div>
    
</body>
</html>

效果：

背景平铺

background-repeat：repeat | no-repeat | repeat-x | repeat-y

background-repeat：repeat；

默认情况下背景图片状态为平铺，指的是图片会从左向右且从上到下整个铺满盒子。

background-repeat：no-repeat；

关闭默认平铺状态，只在盒子左上角显示一个完整的背景图片。

background-repeat：repeat-x；

沿着x轴方向在盒子内最顶部横向平铺背景图片。

background-repeat：repeat-y；

沿着y轴方向在盒子内最左侧纵向平铺背景图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景属性</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            border: 1px solid;
        }
        .bg-repeat {
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div class="bg-image">背景平铺默认值</div>
    <div class="bg-image bg-repeat">背景不平铺</div>
    <div class="bg-image bg-repeatx">x轴方向平铺背景图片</div>
    <div class="bg-image bg-repeaty">y轴方向平铺背景图片</div>
</body>
</html>

效果：

背景图片位置

background-position：x y；

x轴和y轴的值可以是方位名词或者精确数值都可。

方位名词：top、bottom、center、left、right。

当属性值使用方位名词时如果只写一个值，则第二个值默认为居中状态。

当属性值使用精确数值时如果只写一个值，则默认是x轴方向的值，y轴方向默认垂直居中。

如果参数是方位词和精确单位混合使用时，默认第一个值是x值，第二个是y值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景属性</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            border: 1px solid;
        }
        .bg-position {
            background-repeat: no-repeat;
            background-position: center top;
        }
        .bg-position2 {
            background-repeat: no-repeat;
            background-position: right;
        }
        .bg-position3 {
            background-repeat: no-repeat;
            background-position: 20px 50px;
        }
        .bg-position4 {
            background-repeat: no-repeat;
            background-position: 20px ;
        }
        .bg-position5 {
            background-repeat: no-repeat;
            background-position: 80px bottom ;
        }
    </style>
</head>
<body>
    <div class="bg-image bg-position">背景图片存放位置1</div>
    <div class="bg-image bg-position2">背景图片存放位置,设置一个值</div>
    <div class="bg-image bg-position3">背景图片存放位置精确单位值</div>
    <div class="bg-image bg-position4">背景图片存放位置精确单位值</div>
    <div class="bg-image bg-position5">背景图片存放位置混合使用</div>

</body>
</html>

效果：

背景图像固定

background-attachment：scroll | fixed；

背景图像在页面的某一处固定不动或者随页面的其余部分滚动。可以制作视差滚动效果。

background-attachment：scroll ；

默认值，背景图像固定在页面上，随着滚动条滚动而移动。

background-attachment：fixed；

背景图像固定在某一区域，滚动条滑动时位置不变。

body {
            background-image: url(../images/43619545307190.png);
            background-repeat: no-repeat;
            background-position: center top;
            background-attachment: fixed;
        }

背景属性复合写法

background：背景颜色、背景图片地址、背景平铺、背景图像滚动、背景图片位置；

没有特定书写顺序，按需使用属性。

背景颜色半透明

实现背景颜色半透明效果。

background：rgb（0,0,0, 0.3）；

最后一个参数是alpha透明度，取值范围在0~1之间。

总结：

属性	定义	值
Background-color	背景颜色	Rgb值 \| 十六进制 \| 颜色英文单词
Background-image	背景图片	Url（图片路径）
Background-repeat	背景平铺	Repeat \| no-repeat \|repeat-x \|repeat-y
Background-position	背景固定	x轴和y轴。方向名词或者精确数值
Background-attachment	背景附着	Scroll（固定在页面上）\| fixed（与滚动条固定）
背景复合写法	代码简洁	背景颜色、图片地址、平铺、滚动、位置。
背景颜色半透明	显示效果	Background：rgba（0,0,0，0~1）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    /*总体的样式*/
    <style>
    	/*盒子样式*/
        #box{
            width: 350px; //宽
            height: 450px; //高
            border: 1px solid black; //边框
            border-radius: 10px; //边框弧度
            font-family: 黑体; //字体
            letter-spacing:8px; //段间距
            word-spacing: 10px; //字间距
            line-height: 40px; //行高
            font-size: 18px; //字大小
            padding: 20px; //内边框
        }
        /*给'注册'赋予样式*/
        .register{
            width:280px ; //宽
            height: 50px; //高
            background-color: skyblue; //背景颜色
            border-radius: 10px; //边框弧度

        }
        /*将所有边框都改变*/
        *{
            border-radius: 5px; 边框弧度
        }
        /*使用class选择器，赋予number宽高和边框*/
        .number{
            width: 185px; //宽
            height: 27px; //高
            border-width: 1px; //边框宽度

        }
        /*id选择器*/
        #two{
            width: 55px; //宽
            border-width: 1px; 边框宽度
        }
        /*id选择器*/
        #phone{
            width: 103px; //宽
        }
        /*class 选择器*/
        .boxs{
            zoom: 75%; //清除浮动
            color: darkgray; //颜色
        }
        /*class选择器*/
        .box_a{
            width: 50px; //宽
            height: 50px; //高
            background-image: url("../image/04.jpg "); //背景图片
            background-repeat: no-repeat; // 是否平铺
            background-size: 50px 25px; //背景尺寸
            position: relative; //定位 相对定位
            left: 310px; //定位后左移
            bottom: 32px; //定位后下移

        }
    </style>
</head>
<body>
<div id="box">
    <h1>请注册</h1>
<p style="color: darkgray">已有帐号?<a href="https://im.qq.com/index">登录</a></p>
<form action="" method="post">
    <label for="name">用户名</label>
    <input type="text" placeholder="请输入用户名" id="name" class="number"> <br>
    <label for="phone">手机号</label>
    <select name="" id="two" class="number">
    <optgroup>
        <option style="" class="">+86</option>
    </optgroup>
    </select>
    <input type="text" placeholder="请输入手机号" id="phone" class="number"> <br>
    <label for="mima">密 码</label>
    <input type="password" placeholder="请输入密码" id="mima" class="number"> <br>
    <label for="mima">验证码</label>
    <input type="password" placeholder="请输入验证码" id="is" class="number">
    <div class="box_a"></div>
    <div class="boxs">
        <input type="radio" id="" class="accept">阅读并接受协议<br>
    </div>
    <input type="submit" value="注册" class="register" >

    </form>
</div>


</body>
</html>
在这里插入图片描述

在线咨询

上一篇：Vue3 封装第三方组件（一）做一个合格的传声筒
下一篇：HTML文档元素

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商