lesson01~lesson02基础
<!DOCTYPE html> <html lang="en"> <!-- ########################## lesson01 #########################--> <head> <!-- 注释：对代码的解释说明的文字，不会执行 --> <meta charset="UTF-8"> <title>网页的标题</title> <!-- link标签，是用来引入一个外部的css文件的标签 --> <!-- rel表示引入的文件的格式 stylesheet表示样式表文件 --> <!-- href表示链接到的css文件的位置 --> <link rel="stylesheet" href="./demo66.css"> <!-- 宽度， height:高度， background:背景颜色，red:红色， color:字体颜色， --> <style> header{100%;height:100px;background:red;color:white;} </style> </head> <body> <header>网页头部内容</header> <section>网页中间的主体内容</section> <footer>网页底部内容：页脚</footer> <!-- 标题标签 --> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <!-- h1~h6，网页中有六级标题，常用的是前三个 --> <hr/> <!-- 分割线 --> <br/> <!-- 换行 --> <h1>静夜思 <small>——李白</small></h1> <!-- small标签字体大小是父类字体大小的80%--> <p>p标签，段落标签，自动换行</p> <!-- video:html5中的用于视频播放的标签； src:标签的属性，指定要播放的视频内容 controls:控制台 --> <video src="jzc.mp4" controls></video> <!-- audio音频标签，用于播放音乐；为了对网页进行优化，建议使用mp3格式的音频数据 --> <!-- img标签，用于展示图片 -->  <!-- 表格 border表示表格的边框 cellpadding：单元格边距 cellspacing： 单元格间距 --> <table border="1" cellpadding="10" cellspacing="0"> <tr> <!-- th标题 --> <th>标题</th> <th>标题</th> <th>标题</th> </tr> <tr> <!-- 纵向合并 --> <!-- colspan=2表示占用两列的空间 --> <td colspan="2">内容</td> <td>内容</td> </tr> <tr> <td>内容</td> <td>内容</td> <td>内容</td> </tr> <tr> <td>内容</td> <td>内容</td> <td>内容</td> </tr> </table> <hr/> <table border="1" cellpadding="10" cellspacing="0"> <tr> <!-- 横向合并 --> <!-- rowspan=2表示占用两行的空间 --> <td rowspan="2">内容</td> <td>内容</td> <td>内容</td> </tr> <tr> <td>内容</td> <td>内容</td> </tr> <tr> <td>内容</td> <td>内容</td> <td>内容</td> </tr> </table> <!-- 其他扩展标签 --> <!-- b加粗文本 --> <!-- i斜体显示文本--> <!-- u标签用于添加下划线--> <!-- del删除线标签--> <p>这是一个<b>段落</b>，段落中会出现很多<i>文本数据</i>，这些数据<u>一个一个</u>非常<del>你重要</del></p> <!-- overflow:充满，溢出 hidden:隐藏 border-radius:圆角度，边框圆角 border::1px red solid 边框1px,红色，实线 --> <div style="200px;overflow:hidden;border-radius:10px;border:1px red solid;">  <p>alienware 17外星人笔记本</p> <!-- font-weight:bold 字体粗细：加粗 font-size:22px 字体大小：22px --> <p>约<span style="color:red;font-weight:bold;font-size:22px;">￥15999.00</span></p> <!-- color:gray 字体颜色：灰色 --> <p style="color:gray;">299人购买</p> </div> <!-- 给标签增加一个id属性，这个属性 --> <p id="one">曾经有一份真挚的爱情摆在我的面前</p> <!-- 在标签的属性中，可以增加一个style属性 --> <!-- style属性中，可以增加css样式 --> <!-- css样式 --> <!-- font-family:'隶书'; 字体类型：隶书 --> <p style="font-family:'隶书';">如果非要在这份爱上加一个期限的话</p> <!-- 网页中的特殊字符 --> <!-- 空格：常规情况下，通过 大于号：grant than > 小于号：little than < --> <hr/> <b>lesson02</b> <hr/> <!-- ########################## lesson02 #########################--> <!-- 块标签 --> <!-- <div style="1000px;height:300px;border:solid 1px orange"></div> --> <!-- 列表标签 ul ：无序列表--> <!-- list-style-image:url('kw.png') 列表样式图片--> <ul style="list-style-image:url('kw.png')"> <li>四川山体塌陷，造成大量伤亡</li> <li>贵州洪水，淹没整个城市</li> <li>翻开废墟，看到了感动所有人的一幕</li> </ul> <ul style=""> <li>四川山体塌陷，造成大量伤亡</li> <li>贵州洪水，淹没整个城市</li> <li>翻开废墟，看到了感动所有人的一幕</li> </ul> <hr> <!-- 有序列表 ol --> <!-- list-style:none;列表样式：无 --> <ol style="list-style:none;"> <li>四川山体塌陷，造成大量伤亡</li> <li>贵州洪水，淹没整个城市</li> <li>翻开废墟，看到了感动所有人的一幕</li> </ol> <ol style=""> <li>四川山体塌陷，造成大量伤亡</li> <li>贵州洪水，淹没整个城市</li> <li>翻开废墟，看到了感动所有人的一幕</li> </ol> <ul style="list-style:none;300px;height:200px;border:solid 1px #888;font-size:16px;"> <!-- border-bottom:1px #888 dashed; 底部边框：1px #888 虚线 --> <li style="height:26px;border-bottom:1px #888 dashed;"> <!-- background:背景--> <i style="background:url('kw.png')"></i> 四川山体塌陷，造成大量伤亡 </li> <li style="height:26px;border-bottom:1px #888 dashed;"> 贵州洪水，淹没整个城市 </li> <li style="height:26px;">  翻开废墟，看到了感动所有人的一幕 </li> </ul> <!-- 定义一个申请单：表单标签 --> <!-- form：表单标签，类似于生活中那张申请单的白纸 action:提交到的地方，类似于申请单要上交给某个人 method:提交方式，常规情况下一般是get/post,默认是get get方式，传递的数据不涉及隐私数据，传递的数据比较简单，会显示在url地址中 post方式，传递的数据比较隐私，传递的数据量较大，会包装在请求对象中。 get方式较post方式速度比较快 --> <form action="http://www.baidu.com" method="post"> <!-- 表单标签要配合表单元素标签一起使用 表单元素标签：文本输入框、密码输入框、单选按钮、复选框、下拉列表框、文件选择框各种框框 --> <!-- label用来写输入框的提示信息， for属性：表示这是哪个标签的提示信息，for的值是另一个标签的id值 --> <label for="username">账号</label> <!-- placeholder:输入框提示信息 type="text" 输入框内容类型：文本类型 --> <input type="text" id="username" name="username" placeholder="请输入账号"/> <br /> <label for="password">密码</label> <!-- placeholder:输入框提示信息 type="password" 输入框内容类型：密码类型 --> <input type="password" id="password" name="password" placeholder="请输入密码"> <br /> <!-- value:提交按钮值 type="submit" 提交按钮 --> <input type="submit" value="登录"/> <br /> <label for="gender">性别</label> <!-- radio 单选框 checked="true" 默认选中 --> <input type="radio" id="gender1" name="gender">男 <input type="radio" id="gender2" name="gender">女 <input type="radio" id="gender3" checked="true" name="gender">待定 <br /> <label for="fav">爱好</label> <!-- checkbox 复选框 --> <input type="checkbox" value="LOL" checked>英雄联盟 <input type="checkbox" value="WZRY">王者荣耀 <input type="checkbox" value="SWXF">守望先锋 <input type="checkbox" value="DOTA">DOTA2 <br /> <!-- label用来写输入框的提示信息， for属性：表示这是哪个标签的提示信息，for的值是另一个标签的id值 type="file" 文件类型 --> <label for="headerImg">头像</label> <input type="file" id="headerImg"> <br /> <label for="address">地址</label> <!-- 下拉框选项 --> <select id="address" name="address"> <option value="ZZ">郑州</option> <option value="PDS">平顶山</option> <option value="ZM">中牟</option> </select> <br /> <label for="introduction">自我介绍</label> <!-- <textarea>文本区域标签 --> <textarea rows="10" cols="80"></textarea> <br /> <!-- type="button" 普通按钮 --> <input type="button" value="普通按钮"> <button>H5普通按钮</button> <input type="reset" value="重置"> <input type="submit" value="注册"> </form> <!-- a超链接标签 href属性，表示要打开的网络地址 可以指向一个网络地址 可以指向一个本地文件 --> <!-- 链接到某个网络地址 --> <a href="http://www.baidu.com" style="font-size:32px;">百度</a> <hr/> <!-- 链接到某个本地文件 --> <a href="demo03注册表单.html" style="font-size:30px;">跳转到我的注册页面</a> <hr/> <!-- 超链接的打开方式 --> <a href="http://www.baidu.com" target="_blank">新的打开方式:百度</a> <hr/> <!-- 备注：web项目开发时常见的文件名称 网站首页：index.html / index.htm / main.html / main.htm / default.html / default.htm 登录页面： login.html / login.htm / signin.html / signin.htm 注册页面： regist.html / register.html / signup.html --> <!-- 行标签的特点 --> <p style="1000px;border:solid red 1px;"> 我眼中的 <span style="color:red;1000px;height:800px;border:solid blue 1px;">爱情 </span>，是你的样子 </p> <p>最好的爱情，是活成了你的样子</p> <!-- <style>样式一般写在头部，写在body处也可以 --> <style> #info{color:blue;font-size:18px;font-weight:bold;border:#069 1px dashed;} </style> <p> 样式操作有三种写法 </p> <ol> <li style="300px;color:orange;font-weight:bold">样式写在标签行内:优点是操作方便，易于理解，对于新手开发来说有着得天独厚的宠幸程度！缺点是如果样式内容太多，就会让一个简单的标签变得非常的臃肿，不利于代码的维护(一个页面中充斥了大量的HTML代码和CSS代码，混合在一起不方便操作)！</li> <li id="info">样式写在网页中的<style>标签中，将样式代码集中起来进行管理;优点是将我们的HTML标签和CSS代码进行了分离，方便我们对HTML代码或者CSS样式进行修改；缺点是HTML代码和CSS代码还是在一个文件中！</li> <li id="desc">样式写在一个单独的文件中，这个文件的后缀名称为 .css，在这个文件中独立管理样式，然后将样式通过<link>标签，引入到使用样式的HTML文件中;优点是将HTML代码和CSS代码完全分离了，非常有利于我们项目的开发和维护，也是当下很多项目组通常使用的方式；缺点：由于HTML代码和CSS代码分别放在不同的位置，对于入门的新手来说，是一个不小的挑战！</li> </ol> <style> *{}/* padding:0;margin:0; padding表示内边距，margin表示外边距*/ p{}/* color:red;*/ /* #是id选择器 .是类选择器 p是标签选择器 */ #choice{color:orange;font-size:28px;} .intro{color:blue;font-size:22px;} /* 1. 其他选择器*/ /* 群组选择器：可以将多个基本选择器，使用逗号进行分割，然后添加统一的样式*/ /* p,span,div,#choice,.intro{color:red;} */ /* 子标签选择器:修饰的是当前标签的直接子元素，不会影响孙子元素; */ /* #list > li{color:orange;font-weight:bold;} */ /* 包含选择器：修饰当前标签中指定的所有被包含的元素*/ /* #list li {color:blue;font-weight:bold;} */ /* 2. 选择器的优先级 */ /*标签选择器修饰input,样式也是有优先级，如class选择器的优先级就没有id选择器高*/ /* input,#username{border:none;border-bottom:solid 2px #888;} .username{border-bottom:solid 2px red;} */ /* 3. 属性选择器 */ /* 完整属性 */ /* input[type="password"]{border:solid 1px red;} */ /* input[type^="pass"]{border:solid 1px blue;} */ [type^="pass"]{border:solid 1px red;} /* 4. 伪类选择器 是在后面添加冒号，然后添加一个关键词，来选择特殊的标签*/ /* 慎重使用 ，通常情况下，可以通过id/class/标签选择器完全替代*/ /* 因为伪类选择器的代码可读性较低 */ /* 在使用的过程中，类似这样的样式，不需要记忆~ 因为通常情况下开发工具都会有智能提示*/ /* #list li:nth-child(2){color:red;} */ #list li:hover{color:red;} </style> <p>使用标签选择器</p> <p>标签选择器，可以通过标签名称来选择页面中所有的该名称的标签</p> <p>直接在css代码中，写标签的名称，然后在后面的大括号中添加样式</p> <p>慎重使用，选择范围太大</p> <hr/> <span id="choice">id选择器</span> <span>id选择器通过在CSS代码中，使用符号“#name”，name指的就是标签的id属性值</span> <span>id选择器，只会选择唯一的一个标签，用来修饰网页中一些特殊标签的样式</span> <hr/> <div class="intro">class选择器</div> <span class="intro">class选择器，通过符号".name"，name指代的是标签的class属性值</span> <b class="intro">class表示类型的意思</b> <hr/> <div>通配符选择器：*，可以选择页面中所有的标签</div> <div>慎重使用，一般情况下，使用*来清除页面中的标签的边距</div> <ul id="list"> <li>这是一个列表</li> <li>这是一个列表</li> <li>这是一个列表</li> <li>这是一个列表</li> <ul> <li>这是列表中的一个子列表</li> <li>这是列表中的一个子列表</li> <li>这是列表中的一个子列表</li> <li>这是列表中的一个子列表</li> </ul> </ul> <hr/> <form action=""> <input id="username" class="username" type="text" placeholder="请输入账号"><br /> <input type="password" username="password" placeholder="请输入账号"><br /> </form> <p>常见样式</p> <style> /* *{margin:0;padding:0;} */ #container{ /*内容样式*/ color:#fff; font-size:40px; font-family:"楷体"; font-weight:bolder; text-align:center; /* 水平对齐：居中*/ line-height:300px; /* 行高*/ text-shadow: 10px -10px 10px red; /* 文本阴影，第一个10px表示水平向右倾斜，-10表示向左倾斜， 第二个-10px表示垂直向上倾斜，10表示垂直向下倾斜， 第三个10 表示虚化度， red表示阴影颜色 */ /* box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色; box-shadow和text-shadow一样可以使用一个或多个投影，如果使用多个投影时必须需要用逗号“，”分开。 取值： box-shadow属性至多有6个参数设置，他们分别取值： 阴影类型：此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果取其唯一值“inset”,就是将外阴影变成内阴影，也就是说设置阴影类型为“inset”时，其投影就是内阴影； X-offset:是指阴影水平偏移量其值可以是正负值可以取正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边； Y-offset:是指阴影的垂直偏移量，其值也可以是正负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部； 阴影模糊半径：此参数是可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊； 阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小 阴影颜色：此参数可选，如果不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数。 */ /*尺寸样式*/ 1000px; height:300px; border:solid 2px orange; border-bottom:10px solid red; border-radius:10px;/* 边框圆角*/ box-shadow:5px 5px 3px #888; background:#069; } #container a{color:white; text-decoration:none;/* 文本装饰，none作用去下划线*/ } #th{160px;padding:5px;border:solid 2px #888;border-radius:5px;} #th img{160px;height:180px;border-radius:5px;} </style> <div id="container"> 包含了很多内容<a href="">百度</a> </div> <div id="th">  </div> </body> </html>
lesson03
- 背景定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>背景图片</title>
<link rel="stylesheet" href="">
<style>
*{margin:0;padding:0;}
body{
background-image:url("images/bg01.jpg");
background-repeat:no-repeat;
/*扩展：背景的定位，一般使用图片整合的方式处理【图片精灵】*/
background-position:center center;
}
</style>
</head>
<body>
<!-- 网页导航 -->
<div class="nav">
</div>
</body>
</html>
- 背景图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>背景图片</title>
<link rel="stylesheet" href="">
<style>
*{margin:0;padding:0;}
body{
/* background-image:url("images/bg01.jpg"); */
/* background-repeat:no-repeat; */
/* background-repeat:repeat-x; */
/* background-repeat:repeat-y; */
}
.nav{
1000px;
height:38px;
background-image:url("images/navbg.png");
}
</style>
</head>
<body>
<!-- 网页导航 -->
<div class="nav">
</div>
</body>
</html>
- 背景颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>背景颜色</title>
<link rel="stylesheet" href="">
<style>
*{margin:0;padding:0;}
body{background-color:#006699;}
.container{1200px;height:1800px;background-color:#ffffff;}
</style>
</head>
<body>
<!-- 网页内容区域 -->
<div class="container">
</div>
</body>
</html>
- 固定背景
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>固定背景</title>
<link rel="stylesheet" href="">
<style>
*{margin:0;padding:0;}
body{background-image:url("images/bg01.jpg");
background-attachment:fixed;/*背景滚动模式：固定*/
}
.container{margin:auto;1200px;background-color:#ffffff;}
</style>
</head>
<body>
<!-- 网页内容区域 -->
<div class="container">
<p>无名1天1地00001</p>
<p>无名2天2地00002</p>
<p>无名3天3地00003</p>
<p>无名4天4地00004</p>
<p>无名5天5地00005</p>
<p>无名6天6地00006</p>
<p>无名7天7地00007</p>
<p>无名8天8地00008</p>
<p>无名9天9地00009</p>
<p>无名10天10地00010</p>
<p>无名11天11地00011</p>
<p>无名12天12地00012</p>
<p>无名13天13地00013</p>
<p>无名14天14地00014</p>
<p>无名15天15地00015</p>
<p>无名16天16地00016</p>
<p>无名17天17地00017</p>
<p>无名18天18地00018</p>
<p>无名19天19地00019</p>
<p>无名20天20地00020</p>
<p>无名21天21地00021</p>
<p>无名22天22地00022</p>
<p>无名23天23地00023</p>
<p>无名24天24地00024</p>
<p>无名25天25地00025</p>
<p>无名26天26地00026</p>
<p>无名27天27地00027</p>
<p>无名28天28地00028</p>
<p>无名29天29地00029</p>
<p>无名30天30地00030</p>
<p>无名31天31地00031</p>
<p>无名32天32地00032</p>
<p>无名33天33地00033</p>
<p>无名34天34地00034</p>
<p>无名35天35地00035</p>
<p>无名36天36地00036</p>
<p>无名37天37地00037</p>
<p>无名38天38地00038</p>
<p>无名39天39地00039</p>
<p>无名40天40地00040</p>
<p>无名41天41地00041</p>
<p>无名42天42地00042</p>
<p>无名43天43地00043</p>
<p>无名44天44地00044</p>
<p>无名45天45地00045</p>
<p>无名46天46地00046</p>
<p>无名47天47地00047</p>
<p>无名48天48地00048</p>
<p>无名49天49地00049</p>
<p>无名50天50地00050</p>
<p>无名51天51地00051</p>
<p>无名52天52地00052</p>
<p>无名53天53地00053</p>
<p>无名54天54地00054</p>
<p>无名55天55地00055</p>
<p>无名56天56地00056</p>
<p>无名57天57地00057</p>
<p>无名58天58地00058</p>
<p>无名59天59地00059</p>
<p>无名60天60地00060</p>
<p>无名61天61地00061</p>
<p>无名62天62地00062</p>
<p>无名63天63地00063</p>
<p>无名64天64地00064</p>
<p>无名65天65地00065</p>
<p>无名66天66地00066</p>
<p>无名67天67地00067</p>
<p>无名68天68地00068</p>
<p>无名69天69地00069</p>
<p>无名70天70地00070</p>
<p>无名71天71地00071</p>
<p>无名72天72地00072</p>
<p>无名73天73地00073</p>
<p>无名74天74地00074</p>
<p>无名75天75地00075</p>
<p>无名76天76地00076</p>
<p>无名77天77地00077</p>
<p>无名78天78地00078</p>
<p>无名79天79地00079</p>
<p>无名80天80地00080</p>
</div>
</body>
</html>
- 相对于父元素进行定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>相对于父元素进行定位</title>
<style>
/*
通常情况下，如果元素要使用绝对定位方式[position:absolute]，请切记一定要将它的父元素设置为相对定位方式【position:relative】，此时子元素的定位就会和父元素有关。
如果不给父元素设置定位，子元素的绝对定位就会相对于浏览器进行定位，就会造成网页中的元素的位置错乱。
定位方式通常有四种
默认定位方式static：一般是在网页的常规布局下使用的定位
绝对定位方式absolute：一般是在设置页面上的弹出窗口、广告等等类似这样的效果时使用
固定定位方式fixed：固定在页面上的一个元素，不会随着页面的滚动而发生位置的变化，一般用来做 侧边栏固定导航，页面固定水平导航条，浏览器侧边栏广告、固定的联系我们、
相对定位方式relative：主要是用来配合【绝对定位/固定定位】来设置定位的位置的，强制要求【绝对定位/固定定位】定位方式相对于当前标签定位而不是相对于浏览器！
*/
*{margin:0;padding:0;}
#container{
margin:auto;
background-color:#069;
color:#fff;
1000px;
position:relative;
}
#box{
260px;
height:200px;
background-color:#efefef;
color:#069;
/*
绝对定位的方式
如果父元素使用的是默认定位：postion:static;，此时子元素的绝对定位是相对于浏览器窗口的定位位置。
如果父元素指定了定位方式为相对定位或者绝对定位
postion:relative | absolute;
此时子元素就会相对于父元素进行定位
*/
position:absolute;
left:50px;
top:50px;
}
#contact{
150px;
height:300px;
background-color:#666;
color:#fff;
/* fixed第一种定位方式样式
通常来做网页的侧边栏固定导航
*/
/* position:fixed;
margin-left:-150px; */
/* fixed第二种定位方式样式
通常是用来恶心人的广告！
*/
position:fixed;
margin-top:200px;
}
</style>
</head>
<body>
<!-- fixed第二种定位方式 -->
<ul id="contact">
<li>客服小美</li>
<li>客服小丽</li>
<li>客服小毛</li>
<li>客服小刘</li>
<li>客服旺财</li>
</ul>
<div id="container">
<!-- fixed第一种定位方式 -->
<!-- <ul id="contact">
<li>客服小美</li>
<li>客服小丽</li>
<li>客服小毛</li>
<li>客服小刘</li>
<li>客服旺财</li>
</ul> -->
<div id="box">
账号登录框
</div>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
<p>页面中的数据页面中的数据页面中的数据页面中的数据</p>
</div>
</body>
</html>
- 相对于浏览器绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>相对于浏览器绝对定位</title>
<style>
*{
margin:0;
padding:0;
}
#box{
200px;
height:180px;
background:#ddd;
/*绝对 定位*/
/* 绝对定位，不会对页面中的内容占用的空间影响*/
position:absolute;
left:200px;
top:50px;
}
#container{
1200px;
background:#069;
color:#fff;
}
</style>
</head>
<body>
<div id="box">
账号：<input type="text"><br />
密码：<input type="password"><br />
<input type="submit" value="登录">
</div>
<div id="container">
<p>网页中的内容网页中的内容网页中的内容网页中的内容网页中的内容</p>
<p>网页中的内容网页中的内容网页中的内容网页中的内容网页中的内容</p>
<p>网页中的内容网页中的内容网页中的内容网页中的内容网页中的内容</p>
<p>网页中的内容网页中的内容网页中的内容网页中的内容网页中的内容</p>
<p>网页中的内容网页中的内容网页中的内容网页中的内容网页中的内容</p>
<p>网页中的内容网页中的内容网页中的内容网页中的内容网页中的内容</p>
<p>网页中的内容网页中的内容网页中的内容网页中的内容网页中的内容</p>
<p>网页中的内容网页中的内容网页中的内容网页中的内容网页中的内容</p>
<p>网页中的内容网页中的内容网页中的内容网页中的内容网页中的内容</p>
<p>网页中的内容网页中的内容网页中的内容网页中的内容网页中的内容</p>
<p>网页中的内容网页中的内容网页中的内容网页中的内容网页中的内容</p>
<p>网页中的内容网页中的内容网页中的内容网页中的内容网页中的内容</p>
<p>网页中的内容网页中的内容网页中的内容网页中的内容网页中的内容</p>
<p>网页中的内容网页中的内容网页中的内容网页中的内容网页中的内容</p>
<p>网页中的内容网页中的内容网页中的内容网页中的内容网页中的内容</p>
<p>网页中的内容网页中的内容网页中的内容网页中的内容网页中的内容</p>
<p>网页中的内容网页中的内容网页中的内容网页中的内容网页中的内容</p>
<p>网页中的内容网页中的内容网页中的内容网页中的内容网页中的内容</p>
<p>网页中的内容网页中的内容网页中的内容网页中的内容网页中的内容</p>
<p>网页中的内容网页中的内容网页中的内容网页中的内容网页中的内容</p>
</div>
</body>
</html>
- 盒子模型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>盒子模型</title>
<style>
*{margin:0;padding:0;}
#outer{border:solid 1px red;300px;}/*餐桌*/
#inner{border:solid 1px blue;
padding:50px;/*设置内边距*/
margin:50px;/*设置外边距*/
}/* 目标：盒子盘子*/
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<span>烤全羊</span>
</div>
</div>
</body>
</html>
- 样式补充
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>样式补充</title>
<!--
元素[标签]的尺寸
宽度
height:高度
min-height:最小占据多少高度
min-最小占据多少宽度
max-height:最大占据多少高度
max-width：最大占据多少宽度
display:本来的意思是控制元素的显示或者隐藏
block:显示元素
none:隐藏元素
block:可以将一个行级元素转换成 块元素
inline-block:可以将一个行级元素， 转变成 行内块元素
inline:可以将一个块元素转变成行元素{基本不用}
-->
<style>
#box{
300px;
height:200px;
border:solid 2px orange;
/* display:none; *//*隐藏指定的元素*/
/* 块级元素，默认情况下 display:block*/
}
a{
400px;
height:200px;
border:solid 2px blue;
font-size:22px;
/* display:none; */
/* display:inline; */
/* 行级元素，默认不支持设置宽度和高度，默认display:inline*/
/* display:block; */
/* 可以通过display:block;将一个行级元素变成块级元素,此时标签前后会自动添加换行*/
display:inline-block;
/* 可以通过display:inline-block;将一个行元素转变成 行级块元素，元素前后不会换行*/
}
</style>
</head>
<body>
<div id="box">我们志向高远，同样在意似水流年</div>
<a href="http://www.baidu.com">那些年我们一起找过的种子</a>共同走过那些诗和远方的田野
</body>
</html>
- 浮动样式的使用（简单浮动）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>浮动样式的使用</title>
<style>
*{margin:0px;padding:0px;}
#box{1000px;height:500px;margin:auto;border:solid 5px red;}
/*浮动样式：使用float样式进行修饰，取值left/right*/
/* #one,#two,#three{float:left;100px;height:100px;background:#069;} */
#one,#two,#three{float:right;100px;height:100px;background:#069;}
#two{background:orange;}
#three{background:pink;}
</style>
</head>
<body>
<div id="box">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</div>
</body>
</html>
- 商品列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>商品列表</title>
<style>
*{margin:0;padding:0;}
#goodslist{margin:auto;1000px;background:#eee;}
.goods{float:left;margin-left:5px;margin-top:5px;190px;height:260px;background:orange;}
</style>
</head>
<body>
<div id="goodslist">
<div class="goods"></div>
<div class="goods"></div>
<div class="goods"></div>
<div class="goods"></div>
<div class="goods"></div>
<div class="goods"></div>
<div class="goods"></div>
<div class="goods"></div>
<div class="goods"></div>
<div class="goods"></div>
<div class="goods"></div>
<div class="goods"></div>
<div class="goods"></div>
<div class="goods"></div>
<div class="goods"></div>
<div class="goods"></div>
<div class="goods"></div>
<div class="goods"></div>
<div class="goods"></div>
<div class="goods"></div>
<div style="clear:both;"></div>
</div>
</body>
</html>
- 导航菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>导航菜单</title>
<style>
*{margin:0;padding:0;}
.nav{float:right;height:57px;1000px;background-image:url("images/navbg.png");list-style:none;}/*list-style:none; 列表样式;无，会去掉列表的小圆点*/
.nav li{float:left;height:57px;100px;text-align:center;line-height:57px;}
.nav li a{font-size:18px;color:#fff;text-decoration:none;}
.nav li a:hover{font-size:20px;color:red;font-weight:bolder;}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">首页</a></li>
<li><a href="#">新闻动态</a></li>
<li><a href="#">通知公告</a></li>
<li><a href="#">博客园</a></li>
<li><a href="#">官方商城</a></li>
<li><a href="#">旅游导向</a></li>
<li><a href="#">鱼香肉丝</a></li>
<li><a href="#">宫保鸡丁</a></li>
<li><a href="#">骨肉相连</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</body>
</html>
- 带分隔线导航1边框分隔
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
*{
margin:0;
padding:0;
}
.nav{
list-style:none;
background:#069;
height:60px;
}
.item{
margin-top:5px;
float:left;
height:50px;
border-right:solid 1px #efefef;
}
.item a{
display:inline-block;
padding:0 10px 0 10px;/*设置包含内容的内边距,导航的宽度根据内容调整*/
line-height:50px;
text-align:center;
height:;
font-size:18px;
color:#fff;
text-decoration:none;
}
.item a:hover{
color:red;
font-size:18px;
font-weight:bolder;
}
</style>
</head>
<body>
<!--
分隔线：使用样式的边框进行处理
-->
<ul class="nav">
<li class="item first"><a href="#">导航</a></li>
<li class="item"><a href="#">导航导航</a></li>
<li class="item"><a href="#">导航</a></li>
<li class="item"><a href="#">导航导航</a></li>
<li class="item"><a href="#">导航</a></li>
<li class="item"><a href="#">导航导航导航导航</a></li>
<li class="item"><a href="#">导航</a></li>
<li class="item"><a href="#">导航</a></li>
<li class="item"><a href="#">导航导航</a></li>
<li class="item"><a href="#">导航</a></li>
<div style="clear:both;"></div>
</ul>
</body>
</html>
- 带分隔线导航2背景图分隔线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
*{
margin:0;
padding:0;
}
.nav{
list-style:none;
background:#069;
height:60px;
}
.item{
float:left;
height:60px;
background-image: url("nav.png");
background-repeat: no-repeat;
background-position:right center;
}
.item a{
display:inline-block;
padding:0 10px 0 10px;/*设置包含内容的内边距,导航的宽度根据内容调整*/
line-height:60px;
text-align:center;
height:;
font-size:18px;
color:#fff;
text-decoration:none;
}
.item a:hover{
color:red;
font-size:18px;
font-weight:bolder;
}
</style>
</head>
<body>
<!--
分隔线：使用背景样式进行处理
通过background-image/repeat/position来进行背景图片的定位
-->
<ul class="nav">
<li class="item first"><a href="#">导航</a></li>
<li class="item"><a href="#">导航导航</a></li>
<li class="item"><a href="#">导航</a></li>
<li class="item"><a href="#">导航导航</a></li>
<li class="item"><a href="#">导航</a></li>
<li class="item"><a href="#">导航导航导航导航</a></li>
<li class="item"><a href="#">导航</a></li>
<li class="item"><a href="#">导航</a></li>
<li class="item"><a href="#">导航导航</a></li>
<li class="item"><a href="#">导航</a></li>
<div style="clear:both;"></div>
</ul>
</body>
</html>
- 等宽导航条
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
*{
margin:0;
padding:0;
}
.nav{
list-style:none;
background:#069;
height:60px;
}
.item{
float:left;
}
.item a{
display:inline-block;
100px;
line-height:60px;
text-align:center;
height:;
font-size:18px;
color:#ccc;
text-decoration:none;
}
.item a:hover{
color:red;
font-size:22px;
font-weight:bolder;
}
.first > a{
font-size:22px;
text-align:left;
background:#bbb;
color:#069;
font-weight:bolder;
}
</style>
</head>
<body>
<!--
等宽导航条中，一定注意菜单文本的长度，不能超过设置的宽度，否则就显示出现问题了
-->
<ul class="nav">
<li class="item first"><a href="#">导航</a></li>
<li class="item"><a href="#">导航导航</a></li>
<li class="item"><a href="#">导航</a></li>
<li class="item"><a href="#">导航导航导航导航</a></li>
<li class="item"><a href="#">导航</a></li>
<li class="item"><a href="#">导航导航</a></li>
<li class="item"><a href="#">导航</a></li>
<li class="item"><a href="#">导航</a></li>
<li class="item"><a href="#">导航导航</a></li>
<li class="item"><a href="#">导航</a></li>
<div style="clear:both;"></div>
</ul>
</body>
</html>
- 内容适应导航
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
*{
margin:0;
padding:0;
}
.nav{
list-style:none;
background:#069;
height:60px;
}
.item{
float:left;
}
.item a{
display:inline-block;
padding:0 10px 0 10px;/*设置包含内容的内边距,导航的宽度根据内容调整*/
line-height:60px;
text-align:center;
height:;
font-size:18px;
color:#fff;
text-decoration:none;
}
.item a:hover{
color:red;
font-size:18px;
font-weight:bolder;
}
.first > a{
padding-right:50px;
font-size:22px;
text-align:left;
background:#bbb;
color:#069;
font-weight:bolder;
}
</style>
</head>
<body>
<!--
自适应导航：导航条的宽度，根据导航的文本内容自动调整
-->
<ul class="nav">
<li class="item first"><a href="#">导航</a></li>
<li class="item"><a href="#">导航导航</a></li>
<li class="item"><a href="#">导航</a></li>
<li class="item"><a href="#">导航导航</a></li>
<li class="item"><a href="#">导航</a></li>
<li class="item"><a href="#">导航导航导航导航</a></li>
<li class="item"><a href="#">导航</a></li>
<li class="item"><a href="#">导航</a></li>
<li class="item"><a href="#">导航导航</a></li>
<li class="item"><a href="#">导航</a></li>
<div style="clear:both;"></div>
</ul>
</body>
</html>
- 新闻列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<style>
*{margin:0;padding:0;}
.news{
500px;
padding:10px 10px;
list-style:none;
border:solid 1px #888;
display: block;
float: left;
margin: 10px;
}
.icon{
display:inline-block;
10px;
height:10px;
background-image:url("list.jpg");
background-size:10px 10px;
}
.news li{
border-bottom:dashed 1px #888;
}
.news a{
display:inline-block;
font-size:14px;
height:30px;
line-height:30px;
}
.news span{
float:right;
font-size:14px;
color:#aaa;
line-height:30px;
}
</style>
</head>
<body>
<!-- ul.news>li*20>i.icon+a[href="#"]{新闻$新闻$新闻$$$$$$}+span{2017-01-01} -->
<ul class="news">
<li>
<i class="icon"></i>
<a href="#">新闻1新闻1新闻000001</a>
<span>2017-01-01</span>
</li>
<li>
<i class="icon"></i>
<a href="#">新闻2新闻2新闻000002</a>
<span>2017-01-01</span>
</li>
<li>
<i class="icon"></i>
<a href="#">新闻3新闻3新闻000003</a>
<span>2017-01-01</span>
</li>
<li>
<i class="icon"></i>
<a href="#">新闻4新闻4新闻000004</a>
<span>2017-01-01</span>
</li>
<li>
<i class="icon"></i>
<a href="#">新闻5新闻5新闻000005</a>
<span>2017-01-01</span>
</li>
<li>
<i class="icon"></i>
<a href="#">新闻6新闻6新闻000006</a>
<span>2017-01-01</span>
</li>
<li>
<i class="icon"></i>
<a href="#">新闻7新闻7新闻000007</a>
<span>2017-01-01</span>
</li>
<li>
<i class="icon"></i>
<a href="#">新闻8新闻8新闻000008</a>
<span>2017-01-01</span>
</li>
<li>
<i class="icon"></i>
<a href="#">新闻9新闻9新闻000009</a>
<span>2017-01-01</span>
</li>
<li>
<i class="icon"></i>
<a href="#">新闻10新闻10新闻000010</a>
<span>2017-01-01</span>
</li>
</ul>
<ul class="news">
<li>
<i class="icon"></i>
<a href="#">新闻1新闻1新闻000001</a>
<span>2017-01-01</span>
</li>
<li>
<i class="icon"></i>
<a href="#">新闻2新闻2新闻000002</a>
<span>2017-01-01</span>
</li>
<li>
<i class="icon"></i>
<a href="#">新闻3新闻3新闻000003</a>
<span>2017-01-01</span>
</li>
<li>
<i class="icon"></i>
<a href="#">新闻4新闻4新闻000004</a>
<span>2017-01-01</span>
</li>
<li>
<i class="icon"></i>
<a href="#">新闻5新闻5新闻000005</a>
<span>2017-01-01</span>
</li>
<li>
<i class="icon"></i>
<a href="#">新闻6新闻6新闻000006</a>
<span>2017-01-01</span>
</li>
<li>
<i class="icon"></i>
<a href="#">新闻7新闻7新闻000007</a>
<span>2017-01-01</span>
</li>
<li>
<i class="icon"></i>
<a href="#">新闻8新闻8新闻000008</a>
<span>2017-01-01</span>
</li>
<li>
<i class="icon"></i>
<a href="#">新闻9新闻9新闻000009</a>
<span>2017-01-01</span>
</li>
<li>
<i class="icon"></i>
<a href="#">新闻10新闻10新闻000010</a>
<span>2017-01-01</span>
</li>
</ul>
<ul class="news">
<li>
<i class="icon"></i>
<a href="#">新闻1新闻1新闻000001</a>
<span>2017-01-01</span>
</li>
<li>
<i class="icon"></i>
<a href="#">新闻2新闻2新闻000002</a>
<span>2017-01-01</span>
</li>
<li>
<i class="icon"></i>
<a href="#">新闻3新闻3新闻000003</a>
<span>2017-01-01</span>
</li>
<li>
<i class="icon"></i>
<a href="#">新闻4新闻4新闻000004</a>
<span>2017-01-01</span>
</li>
<li>
<i class="icon"></i>
<a href="#">新闻5新闻5新闻000005</a>
<span>2017-01-01</span>
</li>
<li>
<i class="icon"></i>
<a href="#">新闻6新闻6新闻000006</a>
<span>2017-01-01</span>
</li>
<li>
<i class="icon"></i>
<a href="#">新闻7新闻7新闻000007</a>
<span>2017-01-01</span>
</li>
<li>
<i class="icon"></i>
<a href="#">新闻8新闻8新闻000008</a>
<span>2017-01-01</span>
</li>
<li>
<i class="icon"></i>
<a href="#">新闻9新闻9新闻000009</a>
<span>2017-01-01</span>
</li>
<li>
<i class="icon"></i>
<a href="#">新闻10新闻10新闻000010</a>
<span>2017-01-01</span>
</li>
</ul>
</body>
</html>
- 图文混排
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
*{
margin:0;
padding:0;
}
.box{
500px;
background:#069;
}
.box a{
font-size:22px;
color:#fff;
display:block;
height:50px;
line-height:50px;
}
.index{
display:inline-block;
30px;
height:30px;
margin-top:10px;
background-image:url("index.png");
}
</style>
</head>
<body>
<div class="box">
<a href="#">
<i class="index"></i>
<span class="txt">首页</span>
</a>
</div>
</body>
</html>
- 图文混排居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
*{
margin:0;
padding:0;
}
.box{
500px;
background:#069;
}
.box a{
font-size:22px;
color:#fff;
display:block;
height:50px;
line-height:50px;
}
.index{
display:block;
30px;
height:30px;
margin-top:10px;
background-image:url("index.png");
margin-left:10px;
float:left;
}
.txt{
display:block;
margin-left:10px;
80px;
height:30px;
float:left;
}
</style>
</head>
<body>
<div class="box">
<a href="#">
<i class="index"></i>
<span class="txt">首页</span>
</a>
</div>
</body>
</html>