HTML+CSS一揽子方案

HTML1(HTML结构、规范、标签)

标记(标签)---<单词>
        挨着<是标记
    表型:每一个标签都有一定的表现形式
    表意:每一个标签都有一定的意义
    双标签---语法:<标签 属性名="属性值">...内容...</标签>
    单标签---语法:<标签 属性名="属性值">
Html基本骨架结构
<html>
    <head>
        <meta content="text/html;charest=UTF-8"/>
        <title></title>
    </head>
    <body>
    </body>
</html>
<html>含义:告诉浏览器,网页的代码用什么格式来解析
<head>含义:告诉浏览器网页的汉字用什么字符集
gb2312简体中文,gbk国标码,utf-8多国语言
<title>:便于搜索引擎
<body>:网页内容
Html书写规范
    1、不区分大小写,2、顺序嵌套,不能交叉,3、一定要闭合(/),4、标签的属性和个数是w3c规定好的,5、属性值要用双引号("")引起来。
Html文本标签
    1、Font设置文本的颜色/大小/字体
    <font>设置的内容</font>
    属性:color,size,face
<b></b>与<strong></strong>
<i></i>与<em></em>
<u></u>与<ins></ins>
<sup></sup>与<sub></sub>上下标
Html段落标签
    <p></p>
    段落的属性
    ALign取值left,center,right     <h1 align="center">
    <h1></h1>...<h6></h6>
    Pre:标签:预定义标签
    Div:本身无含义,自己独占一行,划分网页结构,结合Css样式一起使用。
    Span:本身无含义,结合Css样式一起使用构成功能。
    块标签--<h1></h1> <p></p> <div></div>
    行内标签--<u></u〉<em></em> <span></span>
    ---通常块标签里包括行内标签---
列表:Ul属性--Type类型:设置列表前面符号的样式,取值circle disc默认square
无序列表:
    <ul>
    <li></li>
    <li></li>
    <li></li>
    </ul>
有序列表:<ol></ol>
自定义列表:
    <dl>
    <dt></dt>
    <dd></dd>
    </dl>
特殊字符:
&nbsp;
&copy;
&lt;和&gt;和&yen;和&trade;和&amp;

HTML2(图片、表格、链接和meta标签 )

图片标签(单标签,行内标签)
图片语法:<img 属性名="属性值"/>
图片属性
    图片路径:src="图片的地址"(同一站点或同一文件夹)
    图片宽度:width="数值"(像素px,不写单位)
    图片高度:height="数值"(像素px,不写单位)例height="200"
    图片边框:border="数值"
    图片解释说明:alt="对图片的描述内容"
    图片和内容左右、上下之间的距离:hspace="数值",vspace="数值"
    注意:图片等比例变化只需要设置宽度或高度。
表格:
语法---
<table>
    <tr>
        <td>内容</td>
        <td>&nbsp;</td>
    </tr>
</table>
表格属性:
1、表格边框border="数值",默认是0;
2、表格的宽度、高度width="",height=""
3、表格居中方式align="水平对齐方式"left,right,center
4、内容和单元格距离cellpadding="数值"默认数值是2像素
5、单元格和单元格距离cellspacing="数值"默认数值是2像素
6、bgcolor="",background="图片的地址"注意:背景图片的优先级高于背景颜色
<tr>的属性:Height,Bgcolor,Background,Align水平对齐方式,Valign(top,middle,bottom)
<td>单元格属性:Bgcolor,Background,width,height,align
表格的扩充:
合并单元格的问题
横向合并:左右合并Colspan="数值"
纵向合并:rowspan="数值"

链接
语法:<a 属性="属性值">内容</a>
属性---链接的地址 href="链接的地址url"url绝对地址和相对地址
Target,_blank新的,_self默认打开方式
    <a href="http://www.XXX.com" target="_blank">打开一个网页</a>
Name定义锚点的位置
绝对地址:1、<a href="http://www.XXX.com">网页</a>,2、本地的地址<a href="E:\CZwj\CZwenjian\lianxi\lianxi2-1.html">本地</a>
相对地址:在同一个站点,同一个文件夹或父文件或子文件:直接写文件名,../文件名,XX/文件名...
<a href="../../链接.html">首页</a>登录 添加新闻
特殊链接:下载链接(无需下载和必须.zip、.exe)
邮件链接:<a href="mailto:gongfuxiong@whereit.cn">功夫熊</a>
空链接:<a href="#">首页</a>或<a href="javascript:void(0)">首页</a>
Javascript链接:<a href="javascript:window.close()">关闭</a>
Name定义锚点的名称
同一页面不同区域跳转
定义锚点
<a name="自定义名称"></a>在<a></a>不加内容,给链接中的target用。
跳转锚点
<a href=”#锚点名称”>内容</a>
颜色代码:
英文    red        green        blue
十六进制 #ff0000    #00ff00        #0000ff
十进制    rgb(255,0,0)    green(0,255,0)    blue(0,0,255)
meta标签
描述网页文档的属性
http-equiv和name
http-equiv:模拟http文件头信息,当内容从服务器端发送到客户端,告诉浏览器如何正确显示信息。
字符集:<meta http-equiv="content-type" content="text/html;charest=utf-8"/>多国语言,charest=gbk国标码,charest=gb2312简体中文
网页自动刷新
<meta http-equiv="refresh" content="5"/>
<meta http-equiv="refresh"content="8;http://www.XXX.com"/>等待8秒自动跳转网页
Name可以设置网页关键字,描述信息等
<meta name="keywords" content="关键字"/>
<meta name="description" content="网站的描述信息"/>
<meta name="author" content="网站作者"/>

HTML3(表单、表单属性和控件)

表单的介绍:获取客户端数据,有控件、输入框、复选框、按钮等
表单的功能:交互功能
表单工作原理:浏览有表单的页面,填写必要的信息,提交
对表单数据验证,是否符合要求,提交服务器,储入数据库
表单:前台的制作页面,php对数据的处理,添加数据,删除,更改,查询
表单的结构:
语法<form 属性="属性值">
    控件
    </form>
表单的属性:
1、Name表单的识别名称 一个页面有多个表单,通过表单名称辨别提交的哪个表单的数据
<form name="bill"></form>
<form name="game"></form>
2、Action="XX.php"对数据进行处理
   Action=""对表单中的数据处理的程序就是在当前的文档
3、Method="get/post"把表单中的数据提交到服务器的方法,传递数据的方法
   Get方法:默认的传递方法,通过地址来传递表单中的数据
   特点:不安全,每次只能传递1024字节,不能上传附件
   Post方法:数据传给文件处理程序
   特点:相对安全,传递海量数据,能上传附件
控件:单行文本框、密码框、单选按钮、复选框、多行文本框、下拉列表、隐藏域、文件域、按钮
   <input type="text"/>属性:
   Name单行文本框的识别名称,可以自定义名称,起名要有意义,命名规则(开头字母或下划线,后面是字母数字下划线)
   Size="数值"输入框宽度,以字符为单位
   Maxlength="数值"最多允许输入字符数
   Value="内容"设置输入框的初始值,在输入框中默认的内容
   用户名:<input type="text" name="username" size="10" maxlength="30" value="请输入账号/用户名"/>
   密码:语法<input type="password"/>属性:Name,Size,Maxlength,Value
   Readonly只读属性,只能选中、不能修改,disabled禁止属性:不能选中、不能修改(以火狐为准)
单选按钮Radio:语法<input type="radio"/>
    属性:Name,Value设置初始值,必须得写
复选框:<input type="checkbox"/>
    属性:Name,Value,checked="checked"默认被选中项,
     {[if in_array('1',$shuju.user_hobby)]} checked="checked" {[/if]},smarty中带判断条件的默认选中
多行文本框(双标签):语法<textarea></textarea>---Name、Value(不要出现)、Rows、Cols
<textarea rows="10" clos="80" name="content">请输入留言,我暂时不在</textarea>
下拉列表:
语法<select name="">
    <option value="">内容1</option>
    <option>内容2</option>
    </select>
    select属性:name下拉列表识别名称,value代表每一项初始值selected='selected'默认被选中
隐藏域:隐藏起来,不是给客户看,给程序用的
    <input type="hidden" name="id1"/>------outline:none(去除轮廓线)
文件域:语法<input type="file"/>  属性:Name文件域识别名称 Value:不写value,而是-选择文件就是value
按钮:
    提交按钮<input type="submit" value="按钮上文字"/>,图片按钮<input type="image" src="图片的地址"/>
    重置按钮<input type="reset" value="按钮上文字"/>
    普通按钮<input type="button" value="按钮上文字"/>
Xhtml(可扩展的超文本标记语言)---取代html,pc机--面向移动端
语法
Xhtml语法更严格
    Xhtml输入的标签和属性必须是小写
    Xhtml单标签后必须加/,例如<br/>
         属性必须双引号("")
    必须有dtd(文档类型定义)---是一种验证机制,检验输入的xhtml是否符合规范
    Dtd分类:过渡型xhtml-transitional-允许使用表现的标签和属性<b>,<i>,<font color="red">,<table bordercolor="red">
        严格型xhtml-strict:不允许使用表现的标签和属性,<b><strong><u><table width=”300”>必须使用的是css样式来设置
        框架型xhtml-frameset:给框架用
        可以通过W3c测试dtd声明:http://wwww.w3.org
<td>请填写在工商局注册的公司/商号全称;<br/>无商号个体经营者填写执照上的姓名,如:张三(个体经营)</td>

http://www.runoob.com/相关学习网址

CSS-1(css样式、选择器、CSS属性

问题1、样式优先级?
CSS(Cascading Style sheet)
一、 书写规范:h1{color:red;font-size:14px;}--注意;分号和单位
<style type="text/css">
    p{
        color:red;
        font-size:20px;
    }
</style>
二、书写方式:嵌入式,外链式,行内式
嵌入式:
<style type="text/css">
    选择器{属性:属性值;}
</style>
外链式:
<link rel="stylesheet" type="text/css" href="CSS文件"/>
例:<link rel="stylesheet" type="text/css" href="index.css">
注意:1、可以引入多个2、一定要确认CSS文件被正确引入
行内式:
<标签名 style="格式声明语句1;格式声明语句2;"></style>
例:<div style="width:100px;height:100px;background-color:skyblue;"></div>
三、注释
          格式:/*注释的内容*/
四、选择器:基本选择器、复合选择器、伪类选择器、属性选择器
     并且选择器:p.test{color:red;} <p class="test">并且</p>//注意.test和p之间无空格,“并且”被选中变红色。
     通用选择器:*{margin:0px;}
     标签选择器:标签{属性:属性值;}
     类选择器:.class属性值{属性:属性值;}使用:<h2 class="h">四大名著</h2>
     id选择器:#h{color:#00ff00;}唯一性
五、CSS属性:height、width(auto、length:px、%)
CSS文本与字体样式属性:
    font-size,font-style,font-family,font-weight,color,
    text-align,text-decoration,text-indent(em占一汉字缩进),line-height(当文本高度与盒子一样,则垂直居中)
    text-transform(uppercase,lowercase,capitalize)
     复合选择器:多元素选择器---选择器1,选择器2{格式声明语句;}例:p,h1,h2{margin:0px;}
     后代元素选择器:匹配子代及子代的所有后代    例:.box h3{color:#f00;}
     子元素选择器:匹配子代        例:.box>h3{color:#foo;}
     相邻元素选择器:只匹配同级、紧随且相邻的元素。    例:.box+h3{color:#f00;}
    列表样式属性--指有序列表和无序列表
    list-style-type(none,disc,square,circle)
    list-style-position(inside,outside)
    list-style-image(url)例:list-style-image:url(images/01.jpg)
    list-style:例:list-style:none url(images/01.jpg) inside;//其中outside默认标记在外面
     伪类选择器:给超级链接的不同状态设置样式。
              :link{正常状态(未被访问状态)},:visited{访问过后状态},:hover{鼠标放上状态},:active{激活状态}
              注意:超级链接的不同状态是有顺序的,不遵守则失效。
    超级链接的美化:去除下划线,给超级链接设置一个颜色
              a:link,a:visited{text-decoration:none;color:blue;}
              a:hover{color:red; text-decoration:none;}
    属性选择器:与标签的属性名和属性值有关
              [attr]所有attr,[attr="val"]等于,[attr^="val"]开头,[attr$="val"]结尾,[attr*="val"]包含。例:font[color*="00"]{border:1px solid:red;}
    CSS选择器两特性:继承性和优先级
              继承性:1内层元素会将外层元素的样式继承2如果内层元素设置的样式一样时,内层元素会将外层元素样式覆盖。
              3只有文本与字体样式能够被继承。
              优先级:行内样式1000>id选择器100>类选择器10>标签选择器1
CSS-2(背景、列表、盒子、布局)
一、背景的属性
    Background-color背景颜色,Background-image:url(图片的路径);
    Background-repeat:图片平铺,no-repeat,tepeat-x,repeat-y,repeat(默认横纵平铺)
    Background-position:图片的展开位置 例:background-position:水平 垂直方向;
             水平:left,center,right    垂直:top,center,bottom   
             数值:正值 负值--例:background-position:30px 20px;
    Background-attachment:背景附件,背景是否随着上方的内容一起滚动
         取值:fixed 背景固定 scroll滚动
    可以简写:Background:背景颜色 背景图片 背景图片是否平铺 (附件通常仅用body标签)水平 垂直;
        例:background:blue url(images/01.jpg) no-repeat fixed 30px 20px;
    Background-size:宽度,高度;
二、列表
    1、去掉列表前面的项目符号list-style-:none;---简写list-style:none;
    2、用小图代替列表前面的符号list-style 例:ul ol{list-style-image:url(images/li01.jpg);}
    合并表格边框线
    之前rules="all"在<table>中合并边框线
    Css样式如何实现---Border-collapse:collapse; 合并表格的边框线
    边框线(html标签就可以加边框线)
        上边框top右right下bottom左left
        1、Border-top-color:颜色值;上边框的颜色
        2、Border-top-style;线型;线型有 solid 实线  dashed 虚线 dotted 点状线
        3、Border-top-width;
        简写为:border-top:粗细 线型 颜色;例:border-bottom:1px solid red;
        上右下左四条边框的样式一样--简写为border:粗细 线型 颜色;
    例:border:none;//边框消失    outline:none;//点击输入框,边框颜色无蓝色出现。

三、盒子模型
    内容区:width和height
    边框:border   
    内边距Padding:内容和边框之间的距离--Padding-top:数值;(right,left,bottom)
    内边距简写:Padding:10px 20px 30px 40px;上边距10px,右20px,下30px,左40px
        Padding:10px 20px 30px;上边距10px,左右20px,下30px
        Padding:10px 20px;上下边距10px,左右20px
        Padding:20px;上右下左20px
    外边距Margin:边框以外的距离----Margin-top:数值;(right,left,bottom)

四、网站布局的一个思想
    网站的结构就是两部分(横向和纵向)如果是纵向的就是正常的文档流,设置内容器的宽度和高度,
    设置内容和边框之间的距离 padding ,边框往外的部分margin border调这些属性就可以 
    如果是横向排列,我们就要使用浮动
    浮动Float:left;或right;
    浮动的特点:设置浮动的元素,
     1不占空间;2浮动元素层级高于普通元素;
     3如果在一行中的元素想横向排列,都设置浮动就可以
        如何让盒子水平居中:Margin: xx auto;例如:margin:10px auto;
     4设置浮动之后,无论之前是否是块元素,设置浮动之后一定是块元素;
注意:用margin来水平居中,需给盒子设置宽度,并且只能给块元素可以设置居中,文本、行内元素是不能实现居中的


CSS-3(行内和块Overflow、定位

清除格式:
    清除所有html标签的格式,后期如果使用,再重新设置:
    *{margin:0;padding:0;}或Body,table,p,ul,li,h1,h2,h3,h4,h5,h6,dd,dl,dt,i,b,div,a...{margin:0;padding:0;}
网页的布局思想
    1、清除格式
    2、设置页面属性 body{}
        Body{font-size:14px;font-family:宋体;color:#ooo;background-color:gray;}
        Body{背景颜色/背景图片 文本的大小 文本的颜色 文本的字体 行间距}
    3、把整个页面划分结构
行内元素和块元素
    行内元素:输入完标签之后,不是自己占一行;行内元素的宽度和高度是由内容来决定,宽
        度和高度width height不能用:span b i u a...;
        Css样式:display:inline;     //还可以li{display:inline;}使元素横向排列,但块大小会不同
    块元素:输入完标签之后,自己独占一行,可以设置宽度和高度width和height
        Css样式 display :block;    ---div p table ul li ol dt dl dd h1...
    块---转换---行内:Display:inline;
    行---转换----块:Display:block;
Overflow
    当内容溢出,如何显示。例:overflow:hidden;(溢出的部分隐藏)
    1、Hidden;隐藏-2、Auto;如果盒子装不下,出现滚动条-3、Scroll,无论是否能装下都有滚动条边框
继承:   
    外层元素的样式,会被里面的元素所继承
    文本的属性的可以继承 font-size font-family font-weight font-style:italic;text-decoration:none/underline; color:red;
    注意:自己有的属性,不向外继承,不会继承祖先元素的属性,自己没有的属性则向外继承。
优先级:
    单个选择器的优先级:标签选择器<类选择器<id选择器<行内样式表(style="color:#000000")


盒子深入--注意:里面所有的值加到一起一定不能大于父盒子的内容区的宽度width
    总的宽度=内容区的宽度width+border(左右)+padding(左右)+margin(左右)
    如果是上下的结构,正常的文档流,设置margin,如果有叠加取叠加部分的最大值
    如果设置了浮动,不是正常的文档流,要把所有的margin值相加,之间的距离是两盒子之和。
清除浮动(清除的是浮动带来的不利影响)
经过浮动的元素 它会影响到它下面的元素的排版布局   还有浮动元素的父元素视觉上没有将浮动元素包裹着
clear 属性指定元素两侧不能出现浮动元素。
        clear:left;清除左clear:right;清除右clear:both;清除左和右浮动。
    撑起浮动div的两个方法:
    1在父盒子里面的最下方加<div>,并给该div设置清除浮动的属性clear:both;
    2浏览器的一个bug  ----在父元素的样式中加overflow:hidden;(常用,但要注意内容溢出隐藏)
定位:    Position:定位方式有:static默认 fixedg固定 relative相对 absolutive绝对定位
    坐标的属性:left:数值;(right,top,bottom)
    Fixed固定定位
        1相对浏览器窗口定位;2如果不设置定位坐标,就在原来位置;3层级要比普通标签高
        4结合定位坐标使用,5设置固定定位之后,一定是块元素
    Relative相对定位
        1相对定位占空间,2不结合定位坐标就是在原来位置,3设置定位坐标,相对于自身作为定位的原点。
        4层级高于普通元素并且还占据原来空间
    Absolute绝对定位
        1设置绝对定位不占空间,2层级高于普通元素,3不结合定位坐标就是在原来位置(子绝父(爷……)相)
        如果设置定位坐标,以祖先元素作为坐标参考点,如果祖先元素没有定位,一直往上找,直到找到body,就以body来进行定位

    <style type="text/css">
      .yeye{
        width:600px;
        height:600px;
        background:yellow;
        margin:0 auto;
         position:relative;
      }
     .baba{
       width:300px;
       height:300px;
       background:red;
       margin-left:10px ;   
     }
    .self{
    width:100px;
    height:100px;
    background:blue;
    position:absolute;
    right:20px;
    top:30px;
    }
    </style>
<body>
    <div class="yeye">
        <div class="baba">
              <div class="self"></div>
        </div>
    </div>
</body>

CSS-4(Html5,视频,选择器深入、阴影)

Html5    广义-html5+css3+javascript+api
Html5结构:
<!doctype html>
<html>
    <meta charest="UTF-8">
    <head>
        <title>网站标题</title>
    </head>
    <body>
    </body>
</html>
Html5语法更宽松:可以把所有标签看成双标签。向下兼容。   
Html5新增标签:使用时需要设置样式CSS: <header>网页的头部,<nav>导航,<section>代表网页的一个块--div相似,
<article>网页文章内容,<aside>网页文档的侧边栏,<footer>网页的页脚-版权
Sublime:div.box>ul>li*4,再按Tab键
Html5新增的input属性值:提示placeholder="用户名/邮箱/账号",required="required"设置必填项,    autofocus="autofocus"设置自动获取焦点
Html5新增的表单属性email、url、date、month、time、week、number、search、color、range亮度
具体如最下边示例:示例H5
    例:<input type="email" name="emailc">
    <input type="search" name="searchnews">
    视频---.ogg .mp4 .webm                        音频---.ogg .mp3 .wav
    格式:1、<video src="视频路径" autoplay="autoplay" controls>    格式:1、<audio src="音频路径" autoplay="autoplay" controls>
               2、<video autoplay="autoplay" controls>            2、<audio autoplay="autoplay" controls>……video换为audio其余一样
                 <source src="xx.mp4">
                 <source src="xx.ogg">
                 <source src="xx.webm">
          </video>//以上 autoplay="autoplay"均可省
Css3
    选择器:类选择器 id选择器 标签选择器
    属性选择器:E---element元素 data -----属性
    <标签属性="属性值"></标签>---html元素
        E[data]        选择带有data属性的元素对象,给该元素对象加样式
        E[data="one"]    选择带有data属性的元素对象,并且属性值等于one的加样式
        E[data^="o"]    选择器带有data属性的元素对象,并且属性值以o开头的   ^开头
        E[data$="e"]    选择器带有data属性的元素对象,并且属性值以e结尾的   $结尾
        E[data*="n"]    择器带有data属性的元素对象,并且属性值包含n,*包含
        例:.box li[class]{color:red;}/*带有class属性的给加红色*/
        .box li[class$="o"]{color:blue;}/*结尾带有class属性为o的给加蓝色*/
    css伪类结构
        E---element元素
        E:first-child{ }第一个孩子,E:last-child{ }最后一个孩子,E:only-child{ }只有一个孩子
        E:nth-child(n){ }第n个孩子 n=1 2 3 4 5 …li:nth-child(3){ }
        E:nth-child(2n+1)或E:nth-child(odd)获得奇数孩子,n=1 3 5 7 …,E:nth-child(2n){ }或E:nth-child(even){ }获得偶数孩子 n=2 4 6 8
        例:li:last-child{color:blue;}
    css伪元素选择器
        E:first-letter{ }设置第一个文字,E:first-line{ }设置第一行
        E::after{content: ;}(或E:after)在盒子的里面的后面插入内容,E::before{content: ;}(或E:before)在盒子的里面的前面插入内容
http://iconfont.cn/---小标都可以上这里来找
    设置文本的阴影
        Text-shadow:水平 垂直 模糊强度 颜色;
        正值朝右负值朝左,垂直正值下负值上,可以有多组值,之间用逗号相隔
        例:text-shadow:2px 2px 2px blue,-2px -2px 2px green;
    设置盒子的阴影
        Box-shadow:水平 垂直 模糊强度 模糊尺寸 颜色 内外阴影insert;(默认是外阴影outset)
        例:box-shadow:1px 1px 2px 3px red insert;
    盒子变圆角
        border-radius:左上右上右下左下;//例25 px或者25%
颜色的值:rgba(a透明度) 例:color:rgba(255,0,0,0.3)
    用css3修改背景图尺寸:Background-size:500px 400px;
    Background-size:cover;背景图片会把整个盒子(宽度和高度)都用背景覆盖上
    Background-size:contain背景图片会把盒子的宽度高度覆盖就停止
Html5 兼容
    -webkit-  谷歌浏览器chrome 和safari,-o-  欧朋浏览器,-moz火狐浏览器,-ms-  ie浏览器,例:-ms-background-size:400px 500px;-webkit-background-size:cover;
<body>//示例H5
  <form>
      用户名:<input type="text" name="username" class="myclass" placeholder="用户名/邮箱号/账号"  required="required" autofocus="autofocus"> <br>
      邮箱:<input type="email" name="emailc" ><br>
    网站地址:<input type="url" name="address" ><br>
    日期:<input type="date" name="dat"><br>
    周:<input type="week" name="we">
    面包:<input type="number" name="mianbao">个
    颜色<input type="color" name="co"><br>
    亮度<input type="range" name="ld">
    搜索:<input type="search" name="searchnew" >
<div><!-- movie.mp4,白狐.mp3等文件放在images/ -->
     <video src="F:/PHP视频/基础文件汇总/css_day04/01-视频&笔记&代码/代码/images /movie.mp4" controls>
    <!-- <video controls>
       <source src="images/movie.mp4">
       <source src="images/movie.ogg">
       <source src="images/movie.webm" >
    </video> --><!-- ctrl+shift+/ 块注释的快捷键 -->
</div>
  <audio controls >
    <source src="images/白狐.mp3">
    <source src="images/白狐.OGG">
  </audio>
    <input type="submit" value="提交">     
  </form>
</body>
CSS略



 静态网页书写

一、静态页书写
1 、 清除默认样式
【方式1】*{margin:0;padding:0;text-decoration:none;list-style:none;border:none;font-size:12px;font-family:Arial,Microsoft Yahei;}
img{display:block}
     禁用了CSS的继承
【方式 2 *{margin:0;padding:0; list-style:none;border:none;}
body{text-decoration:none; font-size:12px;font-family: Arial,Microsoft Yahei;}
img{display:block}
2 、 设置常用类
     将经常使用的一些类定义在 css 文件中,想要设置相应属性只需要将类名加在标签的 class 属性中(代码复用,样式与结构分离)
3 、 页面布局
  l 整体布局
图片:网站论坛
     页面布局最外层是全屏和居中两种样式,需要全屏的使用全屏,然后全屏里面使用居中, 不需要全屏的直接使用居中
     【全屏】 width:100%;min-width: 版心宽度 ;     // 如上图蓝框部分
     【居中】 width: 版心宽度 ;margin:0 auto;          // 如上图的红框部分
  l 内部格局划分
               1. 在居中块里面划分各自的结构,先垂直,再水平,将各个地方的结构先用 div 搭建出来
               2. 计算各个盒子的计算方式
               3. 然后在往各个 div 中填写内容
二、常用方法
1、垂直居中
【单行文本】 设置行高等于目标元素高度。
【多行文本】 将外面的父盒子设置 display:table; 和子元素设置 display:table-cell; ,然后可给子元素设置 vertical-align:center; 就可以实现居中。
【块元素】 设置垂直居中,可以将其定位, left top 设置 50% ,将左上角点置于屏幕中间,然后设置 margin ,上是负的高度的一半,左是负的宽度的一半
2、水平居中
【文本】 text-align:center;
【行内元素】 行内元素宽是由内容撑起来的,设置居中没有意义。
【块元素】 margin:0 auto;
3、元素横排
1 】设置浮动,一浮全浮【全部的弟弟元素必须也一起设置浮动】,一浮一清。(对于同一个父元素)【在父元素设置 overflow 属性,或者将该属性抽离出 o 类,为父元素加上 o 类】
2 】清除浮动 1 、额外标签法。 2 、浏览器 bug 法(自然高法)
4、尺寸设置
【块元素】外层块:设宽不设高(内容高度未知,由内容将高度撑起)
内层块(紧挨内容的盒子):设置宽高
【行内元素】设置宽高不生效 , 如想设置最好先变成块元素
5、盒子模型
                    
1 】盒子尺寸 = 2 margin + 2 border + 2 padding + 内容
2 】盒子模型的 padding margin 最好应用在块元素上,用在行内元素上可能不生效,行内元素可以先变成块元素再使用这些属性
3 margin 的两个弊端:
1 、不同文档流和元素排列方向时,设置 margin 取值方式不同,只有正常文档流的上下 margin 取最大值,其余情况下都取和
2 、父元素塌陷
6、浮动
1 】设置浮动后元素变为块元素,不占空间,横向排列,层级升高,不占空间故不能撑开父元素
2 】清除浮动后可以撑开父元素,且仍能保持横向排列
3 】清除浮动(父元素获取自然高):
1 、 额外标签法:弟弟设 clear both (常用) /left/right; 清除哥哥们不占空间的特点 (正规但不常用)
2 、 浏览器 bug 法(自然高法):父亲设置 overflow:hidden; (常用)
4 】设置浮动,一浮全浮【全部的弟弟元素必须也一起设置浮动】,一浮一清。(对于同一个父元素)【在父元素设置 overflow 属性,或者将该属性抽离出 o 类,为父元素加上 o 类】
7、继承
1 】父代文本属性
2 】注意:自己有的属性,不向外继承,不会继承祖先元素的属性
8、优先级
1 】标签选择器 < 类选择器 < id 选择器 < 行内样式表(一票否决权)
2 】同优先级情况下,后写的覆盖前面的【无论是外部样式,还是内嵌样式,还是导入样式】
三、注意事项
1 、 块元素默认宽度为父元素宽度的 100% ,高度为零
     块元素不设高度时,高度由内容撑起来
     设置之后不论内容多少都会保持固定值,不会再被撑开
2 、 行内元素默认宽度和高度都为 0 ,宽高由内容撑起来,设置宽高没有意义
3 、 浮动元素一定要设置宽度(否则必出问题)
4 、 因为浮动元素不占空间,所以不会撑开父元素,当设置清除浮动之后可以撑开。
5 、 浮动要保证浮动元素和其弟弟都设置浮动,然后在父元素设置 overflow 属性,以获取自然高
6  
上图的正确做法是一个 img div 平级,都设置浮动,然后 div 里面有四个 p ,而不是 img 和四个 p 是平级,都设置浮动,是达不到想要的效果的
7 、 在没有边框和背景(颜色或图片)时 padding margin 作用相同
padding margin 作用相同时推荐使用用 padding margin 的两个弊端)
子元素 margin 和父元素 padding 随时可互换
8 、 边框 1px solid black 需同时设置才能生效
9 img 自带宽高可以设置,但在浏览器中显示的尺寸会比设置的大,最好转换成块元素再设宽高。
10 、 样式设置优先级相同时,冲突样式取在 css 文件出现的顺序最晚的
11 、 子绝父相
 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值