前端的基础知识汇总

zoukankan html css js c++ java

前端的基础知识汇总

创建时间： 2017/8/2 19:39

<img src="images/QRCode.jpg"><img src="images/QRCode.jpg" width="300" height="478"><img src="images/QRCode.jpg" width="100" height="478"><img src="images/QRCode.jpg" height="178"><img src="images/QRCode.jpg" width="100"><img src="images/QRCode.jpg" width="100" title="这个是江哥的微信二维码图片"><img src="images/QRCode1.jpg" width="100" alt="对不起, 你需要查看的图片不见了">

 <p>只设置了img标签的src属性</p> <p><img src="images/QRCode.jpg"></p> <p>设置了img标签的src和width以及height属性</p> <p><img src="images/QRCode.jpg" width="300" height="478"></p> <p>设置了img标签的src和width以及height, 但是宽高不是等比拉伸的</p> <p><img src="images/QRCode.jpg" width="100" height="478"></p> <p>设置了img标签的src和height属性</p> <p><img src="images/QRCode.jpg" height="178"></p> <p>设置了img标签的src和width属性</p> <p><img src="images/QRCode.jpg" width="100"></p> <p>设置了img标签的src和width以及title属性</p> <p><img src="images/QRCode.jpg" width="100" title="这个是江哥的微信二维码图片"></p> <p>设置了img标签的src和width以及alt属性</p> <p><img src="images/QRCode1.jpg" width="100" alt="对不起, 你需要查看的图片不见了"></p>

<img src="QRCode.jpg"><img src="images/QRCode.jpg"><img src="../QRCode.jpg"><img src="C:UsersJonathan_LeeDesktopHTML基础QRCode.jpg" >



<a href="https://www.nuomi.com/?cid=002540">糯米</a>

<a href="https://binjiejw.tmall.com/category-1080022346.htm?search=y&parentCatId=1080019249&parentCatName=%A1%A4?catName=??%A1%A4???????spm=a220o.1000855.w5001-10945243352.20.Fq84rf&scene=taobao_shop&ali_trackid=30_e27f91873d121ea29b062a117ba2991b&spm=a21bo.50862.201862-4.1.9GysHu#bd"> <img src="images/QRCode.jpg" width="150"></a>

<a href="08-br标签.html">08-br标签.html</a>

<a href="test/demo/10-路径练习.html">10-路径练习.html</a>

<a href="https://www.nuomi.com/?cid=002540" target="_self">糯米</a>

<a href="https://www.nuomi.com/?cid=002540" target="_blank">糯米</a>

<a href="https://www.nuomi.com/?cid=002540" target="_blank" title="江哥提示: 会跳转到百度糯米的首页">糯米</a>

<title>11-base标签</title> <base target="_blank"></head><body><a href="https://www.nuomi.com/?cid=002540" target="_self">糯米</a>

<a href="http://news.baidu.com/">新闻</a>

<a href="https://www.hao123.com/">hao123</a>

<a href="http://map.baidu.com/">地图</a>

<a href="http://v.baidu.com/">视频</a>

<a href="http://tieba.baidu.com/">贴吧</a>

<title>12-假链接</title>

</head>

<body>



<h1>我是顶部</h1>

<br>

<a href="#">点我丫1</a>

<a href="javascript:">点我丫2</a>

</body>

<title>13-锚点</title></head><body>

<a href="13-锚点测试界面.html#bottom" target="_blank">跳转到锚点测试界面</a>

<h2>我是顶部</h2>

<a href="#center">跳转到中部</a>

<br>

<h2 id="center">我是中部</h2>

<br>

<h2>我是底部</h2>

<br>

</body>

<title>14-无序列表</title> <style type="text/css"> ul {
list-style: none;
}
li {
float: left;
background-color: yellow;
150px;
height:50px;
text-align: center;
line-height: 50px;
}
</style></head><body>

<h2>中国的城市有哪些</h2>

<ul>

<li>广州</li> <li>北京</li> <li>上海</li> <li>武汉</li>

</ul>

</body>



<title>17-无序列表练习3</title></head><body>

<title>18-有序列表</title>

</head>

<body>



<ol>

<li>演员</li>

<li>小丑</li>

<li>女人不应该让男人太累</li>

<li>男人不应该让女人流泪</li>

</ol>

<title>19-定义列表</title></head><body>

<dl>

<dt>北京</dt>

<dd>中国的首都</dd>

<dd>雾都, 雾霾比较严重</dd>

<dt>上海</dt>

<dd>富人集中地</dd>

</dl>

</body>

创建时间： 2017/8/2 20:01

<title>24-表格标签的其它标签</title></head><body>

<title>25-表格的结构</title></head><body>

<title>26-单元格合并</title></head><body>

<title>28-表单标签</title></head><body><form>  账号:<input type="text"><br>  密码:<input type="password"><br>  账号:<input type="text" value="lnj"><br> 密码:<input type="password" value="123"><br>  性别:
<input type="radio" name="xx" checked>男
<input type="radio" name="xx">女
<input type="radio" name="xx" >保密<br>  爱好:
<input type="checkbox">篮球
<input type="checkbox">足球
<input type="checkbox" checked="checked">棒球

<input type="checkbox" checked="checked">足浴

<title>29-表单标签2</title>

</head>

<body>

<form action="http://www.520it.com">

 账号:<input type="text" name="aa"><br>

 密码:<input type="password" name="bb"><br>

 <input type="button" value="我是按钮">  <input type="image" src="images/register.jpg">  <input type="reset" value="清空">  <input type="submit">
 <input type="hidden" name="cc" value="kukuku"></form>

<title>30-Label标签</title></head><body>

<form action="">

<label for="account">账号:</label><input type="text" id="account"><br>

<label for="pwd">密码:</label><input type="password" id="pwd"><br>

<title>31-Datalist标签</title></head><body>

请输入你的车型:

<input type="text" list="cars">

<datalist id="cars">

<option>奔驰</option>

<option>宝马</option>

<option>奥迪</option>

<option>路虎</option>

<option>宾利</option>

</datalist>

</body>

<title>32-表单标签-H5

</title>

</head>

<body>

<form>

 邮箱:<input type="email"><br>

 域名:<input type="url"><br>

 电话:<input type="number"><br>

 时间:<input type="date"><br>



颜色: <input type="color"><br>

<input type="submit">

</form>

</body>

<title>33-表单标签3</title>

<style type="text/css">

textarea{

resize: none;
}

</style>

</head>

<body>



<select>

<optgroup label="北京">

<option>朝阳区</option>

<option>昌平区</option>

<option>通州区</option>

</optgroup>

<optgroup label="广州">

<option>天河区</option>

<option>越秀区</option>

<option>黄浦区</option>

</optgroup>

</select>

<hr>

<textarea cols="20" rows="5">

</textarea>

</body>

 <fieldset>

     <legend>注册界面</legend>

</fieldset>

<title>35-video标签</title></head><body>

<video src="images/sb1.webm" autoplay="autoplay" loop="loop" muted="muted" width="800px">

</video>

</body>

<title>36-video标签的第二种格式</title></head><body>

<video autoplay="autoplay" controls="controls">

<source src="images/sb1.webm" type="video/webm"></source>

<source src="images/sb1.mp4" type="video/mp4"></source>

<source src="images/sb1.ogg" type="video/ogg"></source>

</video>

</body>

<title>37-audio标签</title>

</head>

<body>





<audio autoplay="autoplay" controls="controls">

<source src="images/yinyue.mp3" type="audio/mp3">

</audio>

</body>

<title>38-详情和概要标签</title></head><body>

<details>

<summary>郑伊健</summary>

简介：郑伊健，1967年10月4日出生于中国香港，籍贯广东恩平，香港影视演员、流行男歌手。1988年参加新秀歌唱大赛加入无线电视，因拍摄“阳光柠檬茶”广告而入行，拜罗文为师。1991年...

</details>

</body>

<title>39-marquee标签</title>

<style>

marquee {

200px;
height:200px;
background-color: skyblue;
}

</style>

</head>

<body>



<marquee>随便写点内容</marquee>

<marquee direction="right">随便写点内容</marquee>

<marquee direction="up">随便写点内容</marquee>

<marquee direction="down">随便写点内容</marquee>

<hr>

<marquee scrollamount="1">随便写点内容</marquee>

<marquee scrollamount="100">随便写点内容</marquee>

<hr>

<marquee loop="1">随便写点内容</marquee>

<hr>

<marquee behavior="slide">随便写点内容</marquee>

<marquee behavior="alternate">随便写点内容</marquee>

<marquee>

<img src="images/NJ.jpg" width="50px">

</marquee>

</body>

<title>40-HTML中被废弃的标签</title>

<style type="text/css">

.one {

font-weight: bold;
}
.two {
text-decoration: underline;
}
.three {
font-style: italic;
}
.four {
text-decoration: line-through;
}

</style>

</head>

<body>



<b>我是文字</b>

<u>我是文字</u>

<i>我是文字</i>

<s>我是文字</s>

<hr>

<strong>我是文字</strong>

<ins>我是文字</ins>

<em>我是文字</em>

<del>我是文字</del>

<hr>

<p class="one">我是文字</p>

<p class="two">我是文字</p>

<p class="three">我是文字</p>

<p class="four">我是文字</p>

</body>

<title>41-字符实体</title>

</head><body>



<p>我   爱你</p>

<p>到此为止我们的HTML的基础标签就学习完毕了, 例如我们学习了<h1>标签, <table>标签, <img>标签....</p>

©

</body>

创建时间： 2017/8/2 21:46

<title>01-体验CSS</title>

<style type="text/css">

        h1{

text-align: center;
color: red;
font-family: "微软雅黑";
}
p{
text-align: center;
color: blue;
font-size: 20px;
}

</style>

</head>

<body>



<h1>成功法则</h1>

<p>迟到毁一生</p>

<p>早退穷三代</p>

<p>按时上下班</p>

<p>必成高富帅</p>

</body>

<title>02-CSS的格式</title>

<style type="text/css">

        p{

text-align: center;
color: red;
}
</style></head><body>

<h1>我是标题</h1>

<p>我是段落</p>

<p>我是段落</p>

<p>我是段落</p>

</body>

<title>03-文字属性</title>

<style>

p{

font-style: italic;
font-weight: bold;
font-size: 10px;
font-family:"楷体";
}
</style></head><body>

<i>我是文字</i>

<b>我是文字</b>

<p>abc我是段落</p>

</body>

<title>04-字体属性补充</title>

<style>

p{

/*
被注释掉的内容
*/
/*font-family:"乱七八糟的字体", "微软雅黑";*/
/*font-family: Arial, "微软雅黑";*/
font-family:"Microsoft YaHei";
}
</style></head><body>

<p>abc我是段落</p>

</body>

<title>05-文字属性的缩写</title>

<style>

p{

/*
font-style: italic;
font-weight: bold;
font-size: 10px;
font-family:"楷体";
*/
font:bold italic 10px "楷体";
}
</style></head><body>

<p>abc我是段落</p>

</body>

<title>06-文本属性</title>

<style>

p{

text-decoration: none;
text-align: left;
text-indent: 2em;
}
a{
text-decoration: none;
}
</style></head><body>

<u>我是文字</u>

<s>我是文字</s>

<p>我是段落我是段落我是段落我是段落落我是段落我是段落我是段落我是段落我是段落我是段落</p>

<a href="#">我是超链接</a>

</body>

<title>07-颜色属性</title>

<style>

p{

/*color: red;*/
/*color: rgb(255,0,0);*/
/*color: rgba(255,0,0,1);*/
color: #FF0000;
color: #F00;
/*color: rgba(255,0,0,0.2);*/
color: #ffee00;
color: #fe0;
color: #769abb;
}
</style></head><body>

<p>我是段落</p>

</body>

创建时间： 2017/8/2 21:56

<title>08-标签选择器</title>

<style>

p{

color: red;
}
h1{
color: blue;
}
</style></head><body>

<title>09-id选择器</title>

<style>

#identity1{

color: red;
}
#identity2{
color: green;
}
#identity3{
color: blue;
}
#identity4{
color: yellow;
}
</style></head><body>

<p id="identity1">迟到毁一生</p>

<p id="identity2">早退穷三代</p>

<p id="identity3">按时上下班</p>

<p id="identity4">必成高富帅</p>

</body>

<title>10-类选择器</title>

<style>

.pp{

color: red;
}
.ppp{
color: green;
}
.pppp{
color: blue;
}
.ppppp{
color: yellow;
}
.para1{
font-size: 100px;
}
.para2{
font-style: italic;
}
</style></head><body>

<p class="pp">迟到毁一生</p>

<p class="ppp">早退穷三代</p>

<p class="pppp">按时上下班</p>

<p class="ppppp">必成高富帅</p>

<p class="para1 para2">我是段落</p>

<p class="para1 para2">我是段落</p>

</body>

<title>11-id选择器和class选择器</title>

<style>

/*

.para1{
color: red;
font-size: 30px;
}
.para2{
font-size: 30px;
text-decoration: underline;
}
.para3{
color: red;
text-decoration: underline;
}
*/
.colorR{
color: red;
}
.size30{
font-size: 30px;
}
.line{
text-decoration: underline;
}
</style></head><body>

<p class="colorR size30">第一段文字</p>

<p class="size30 line">第二段文字</p>

<p class="colorR line">第三段文字</p>

</body>

<title>12-后代选择器</title>

<style>

/*

div p{
color: red;
}
*/
/*
#identity p{
color: red;
}
*/
/*
.para p{
color: blue;
}
*/
/*
#identity #iii{
color: skyblue;
}
*/
/*
#identity .ccc{
color: purple;
}
*/
div ul li p{
color: red;
}

</style>

</head>

<body>





<p>我是段落</p>

<div id="identity" class="para">

     <p>我是段落</p>

     <p>我是段落</p>

        <ul>

        <li>



     <p>我是段落</p>

     </li>

     <li>

     <p>我是段落</p>

     </li>

     </ul>

     </div>

     <p>我是段落</p>

</body>

<title>13-子元素选择器</title>

<style>

/*

div>p{
color: red;
}
*/
/*
#identity>p{
color: blue;
}
*/
div>ul>li>p{
color: purple;
}
</style></head><body>



<p>我是段落</p>

<div id="identity">

<p>我是段落</p>

<p>我是段落</p>

<ul>

<li>

<p>我是段落</p>

</li>

</ul>

</div>

<p>我是段落</p>

</body>

<title>15-交集选择器</title>

<style>

/*

p.para1{
color: red;
}
*/
.para1#identity{
color: blue;
}
</style></head><body>

<p>我是段落</p>

<p>我是段落</p>

<p class="para1" id="identity">我是段落</p>

<p class="para1">我是段落</p>

<p>我是段落</p>

</body>

<title>16-并集选择器</title>

<style>

/*

.ht{
color: red;
}
.para{
color: red;
}
*/
.ht,.para{
color: red;
}
</style></head><body>

<h1 class="ht">我是标题</h1>

<p class="para">我是段落</p>

<p>我是段落</p>

<p>我是段落</p>

</body>

<title>17-兄弟选择器</title>

<style>

/*

h1+p{
color: red;
}
*/
h1~p{
color: green;
}
</style></head><body>

<h1>我是标题</h1>

<a href="#">我是超链接</a>

<p>我是段落</p>

<p>我是段落</p>

<a href="#">我是超链接</a>

<p>我是段落</p>

<h1>我是标题</h1>

<p>我是段落</p>

<p>我是段落</p>

<p>我是段落</p>

</body>

<title>18-序选择器</title>

<style>

/*

p:first-child{
color: red;
}
*/
/*
p:first-of-type{
color: blue;
}
*/
/*
p:last-child{
color: red;
}
*/
/*
p:last-of-type{
color: blue;
}
*/
/*
p:nth-child(3){
color: red;
}
*/
/*
p:nth-of-type(3){
color: blue;
}
*/
/*
p:nth-last-child(2){
color: red;
}
*/
/*
p:nth-last-of-type(2){
color: red;
}
*/
/*
p:only-child{
color: purple;
}
*/
/*
p:only-of-type {
color: red;
}
*/
.para:only-of-type {
color: red;
}
</style></head><body>

<p class="para">我是段落1</p>

<div> <p class="para">我是段落2</p>

<p class="para">我是段落2</p>

<h1>我是标题</h1>

</div>

</body>

<title>19-序选择器下</title>

<style>

/*

p:nth-child(odd){
color: red;
}
p:nth-child(even){
color: blue;
}
*/
/*
p:nth-of-type(odd){
color: red;
}
p:nth-of-type(even){
color: blue;
}
*/
/*
p:nth-child(2n+0){
color: red;
}
p:nth-child(2n+1){
color: blue;
}
*/
p:nth-child(3n+0){
color: red;
}
</style></head><body>

<p>我是项目</p>

<p>我是项目</p>

<p>我是项目</p>

<p>我是项目</p>

<p>我是项目</p>

<p>我是项目</p>

<p>我是项目</p>

</body>

<title>20-属性选择器上</title>

<style>

/*

p[id]{
color: red;
}
*/
p[class=cc]{
color: blue;
}
</style></head><body>

<p id="identity1">我是段落1</p>

<p id="identity2" class="cc">我是段落2</p>

<p class="cc">我是段落3</p>

<p id="identity3" class="para">我是段落4</p>

<p>我是段落5</p>

</body>

<title>21-属性选择器下</title>

<style>

/*

img[alt^=abc]{
color: red;
}
*/
/*
img[alt|=abc]{
color: red;
}
img[alt$=abc]{
color: blue;
}
*/
/*
img[alt*=abc]{
color: red;
}
*/
img[alt~=abc]{
color: red;
}
</style></head><body>



<img src="" alt="abcwwwmmm">

<img src="" alt="wwwmmmabc">

<img src="" alt="wwwabcmmm">

<img src="" alt="www-abc-mmm">

<img src="" alt="www abc mmm">

<img src="" alt="qq">

</body>

<title>22-通配符选择器</title>

<style>

/*

.cc{
color: red;
}
*/
*{
color: red;
}
</style></head><body>

<h1>我是标题</h1>

<p>我是段落</p>

<a href="#">我是超链接</a>

</body>

<title>23-选择器练习</title>

<style>

/*标签选择器

p{
color: red;
}
*/
/*id选择器
#identity1{
color: red;
}
#identity2{
color: red;
}
*/
/*类选择器
.para{
color: red;
}
*/
/*后代选择器
div p{
color: red;
}
*/
/*子元素选择器
div>p{
color: red;
}
*/
/*交集选择器
p.para{
color: red;
}
*/
/*并集选择器
#identity1,#identity2{
color: red;
}
*/
/*通用兄弟选择器
h1~p{
color: red;
}
*/
/*序选择器
p:nth-of-type(n+1){
color: red;
}
*/
/*属性选择器*/
p[id]{
color: red;
font-size: 10px;
text-decoration: underline;
}

</style>

</head>

<body>

<div>

<h1>我是标题</h1>

<p id="identity1" class="para">我是段落1</p>

<p id="identity2" class="para">我是段落2</p>

</div>

</body>

创建时间： 2017/8/2 22:36

<title>24-CSS三大特性之继承性</title>

<style>

div{

color: red;
text-decoration: none;
font-size: 30px;
}
</style></head><body>

<div>

<p>我是段落</p></div><div>

<ul>

<li>

<p>我是段落</p>

</li>

</ul>

</div>

<div>

<a href="#">我是超链接</a>

</div>

<div>

<h1>我是大标题</h1>

</div>

</body>

<title>25-CSS三大特性之层叠性</title>

<style>

p{

color: red;
}
.para{
color: blue;
}
</style></head><body>

<p id="identity" class="para">我是段落</p>

</body>

<title>26-CSS三大特性之优先级</title>

<style>

/*

li{
color: blue;
}
ul{
color: red;
}
*/
/*
p{
color: blue;
}
p{
color: red;
}
*/
#identity{
color: purple;
}
.para{
color: pink;
}
p{
color: green;
}
*{
color: blue;
}
li{
color: red;
}
</style></head><body>0

<ul>

<li>

<p id="identity" class="para">我是段落</p>

</li>

</ul>

</body>

<title>27-优先级之important</title>

<style>

#identity{

color: purple;
font-size: 50px;
}
.para{
color: pink ;
}
p{
color: green;
}
*{
color: blue !important;
font-size:10px;
}
li{
color: red ;
}
</style></head><body>

<ul>

<li>

<p id="identity" class="para">我是段落</p>

</li>

</ul>

</body

<title>28-优先级之权重问题</title>

<style> /*

#identity1 .box2{
color: red;
}
.box1 .box2{
color: green;
}
div ul li p{
color: blue;
}
*/
/*
.box1 .box2{
color: blue;
}
div .box2{
color: green;
}
*/
/*
#identity1 ul li p{
color: red;
}
#identity1 ul p{
color: green;
}
*/
/*
.box1 li #identity2{
color: blue;
}
#identity1 ul .box2{
color: red;
}
*/
.box2{
color: red;
}
li{
color: blue;
}
</style></head><body>

<div id="identity1" class="box1">

<ul>

<li>

<p id="identity2" class="box2">我是段落</p>

</li>

</ul>

</div>

</body>

<title>29-div和span标签</title>

<style>

.header{

980px;
height: 100px;
background: red;
margin: auto;
margin-bottom: 10px;
}
.content{
980px;
height: 500px;
background: green;
margin: auto;
margin-bottom: 10px;
}
.footer{
980px;
height: 100px;
background: blue;
margin: auto;
}
.logo{
200px;
height: 50px;
background: pink;
float: left;
margin: 20px;
}
.nav{
600px;
height: 50px;
background: yellow;
float: right;
margin: 20px;
}
.aside{
250px;
height: 460px;
background: purple;
float: left;
margin: 20px;
}
.article{
650px;
height: 460px;
background: deepskyblue;
float: right;
margin: 20px;
}
span{
color: red;
}
</style></head><body>











<h1>我是标题

<p>我是段落</p>

</h1>

</body>

<title>30-CSS元素的显示模式</title>

<style>

div{

background: red;
200px;
height: 200px;
}
span{
background: blue;
200px;
height: 200px;
}
img{
50px;
height: 50px;
}
</style></head><body>

<div>我是div</div>

<p>我是段落</p>

<h1>我是标题</h1>

<hr>

<span>我是span</span>

<b>我是加粗</b>

<strong>我是强调</strong>

<hr>

<img src="images/picture.jpg" alt="">

<img src="images/picture.jpg" alt="">

</body>

<title>31-CSS元素显示模式转换</title>

<style>

div{

display: inline;
background: red;
200px;
height: 200px;
}
span{
display: block;
background: green;
200px;
height: 200px;
}
.cc{
background: blue;
200px;
height: 200px;
display: inline-block;
}

</style>

</head>

<body>



<div>我是div</div>

<div>我是div</div>

<span>我是span</span>

<span>我是span</span>

<p class="cc">我是段落</p>

<b class="cc">我是加粗</b>

</body>

创建时间： 2017/8/2 23:02

<title>33-背景颜色</title> <style> div{
500px;
height: 500px;
}
.box1{
background-color: red;
}
.box2{
background-color: rgb(0,255,0);
}
.box3{
background-color: rgba(0,0,255,0.7);
}
.box4{
background-color: #0ff;
}
</style></head><body>

<div class="box1"></div>

<div class="box2"></div>

<div class="box3"></div>

<div class="box4"></div>

</body>

<title>34-背景图片</title> <style> div{
500px;
height: 500px;
}
.box1{
background-image: url(images/girl.jpg);
/*background-image: url(http://img4.imgtn.bdimg.com/it/u=2278032206,4196312526&fm=21&gp=0.jpg);*/
}
</style></head><body>

<div class="box1"></div>

</body>

<title>35-背景平铺属性</title>

<style>

/*

div{
500px;
height: 500px;
}
.box1{
background-image: url(images/girl.jpg);
background-repeat: repeat-y;
}
*/
/*
body{
background-image: url(images/bg2.jpg);
}
*/
div{
980px;
height: 60px;
background-image: url(images/1.png);
}
</style></head><body>

<div class="box1">

</div>

</body>

<title>36-背景定位属性</title>

<style>

div{

/* 500px;*/
height: 500px;
}
.box1{
/*background-color: red;*/
/*background-image: url(images/girl.jpg);*/
/*background-repeat: no-repeat;*/
/*background-position: left top;*/
/*background-position: right top;*/
/*background-position: right bottom;*/
/*background-position: left bottom;*/
/*background-position: center center;*/
/*background-position: left center;*/
/*background-position: center top;*/
/*background-position: 100px 0;*/
/*background-position: 100px 200px;*/
/*background-position: -100px -100px;*/
background-image: url(images/yxlm.jpg);
background-position: center top;
}
</style></head><body>

<div class="box1">



</div>

</body>

-------

<title>37-背景缩写</title> <style> div{
/* 500px;*/
/*height: 500px;*/
/*
background-color: red;
background-image: url(images/girl.jpg);
background-repeat: no-repeat;
background-position: left bottom;
*/
/*background: red url(images/girl.jpg) no-repeat left bottom;*/
/*background: red;*/
/*background: url(images/girl.jpg);*/
}
body{
background-image: url(images/girl.jpg);
background-repeat: no-repeat;
/*background-attachment: scroll;*/
background-attachment:fixed;
}
</style></head><body>

<title>38-背景图片和插入图片区别</title> <style> div{
/* 150px;*/
/*height: 170px;*/
300px;
height: 300px;
background-color: red;
}
.box1{
background-image: url(images/girl.jpg);
background-repeat:no-repeat;
background-position: right bottom;
}
</style></head><body>

<div class="box1">我是文字</div>

<div class="box2">

<img src="images/girl.jpg" alt=""> 我是文字

</div>

</body>

<title>40-CSS精灵图</title> <style> .box{
86px;
height: 28px;
background-image: url(images/weibo.png);
background-position: -425px -200px;
}
</style></head><body><div class="box"></div></body>

<title>42-边框属性上</title> <style> .box{
100px;
height: 100px;
background-color: red;
/*border: 5px solid blue;*/
/*border: 5px solid;*/
/*border: 5px blue;*/
/*border: solid blue;*/
border-top:5px solid blue;
border-right:10px dashed green;
border-bottom:15px dotted purple;
border-left:20px double pink;
}
</style></head><body><div class="box"></div></body>

<title>43-边框属性下</title> <style> .box{
500px;
height: 500px;
background-color: red;
/*border- 5px 10px 15px 20px;*/
/*border-style: solid dashed dotted double;*/
/*border-color: blue green purple pink;*/
/*border-color: blue green purple;*/
/*border-color: blue green;*/
/*border-color: blue;*/
border-top- 5px;
border-top-style: solid;
border-top-color: blue;
border-right- 10px;
border-right-style: dashed;
border-right-color: green;
border-bottom- 15px;
border-bottom-style: dotted;
border-bottom-color: purple;
border-left- 20px;
border-left-style: double;
border-left-color: pink;
}
</style></head><body>

<div class="box"></div>

</body>

<title>45-内边距属性</title> <style> div{
98px;
height: 90px;
border: 1px solid #000;
background-color: red;
}
.box1{
padding-top: 20px;
}
.box2{
padding-right:40px;
}
.box3{
padding-bottom:80px;
}
.box4{
padding-left:160px;
}
.box5{
/*padding:20px 40px 80px 160px;*/
/*padding:20px 40px 80px;*/
/*padding:20px 40px;*/
padding:20px;
}
</style></head><body>

<title>46-外边距属性</title> <style> *{
padding:0;
margin:0;
}
span{
display: inline-block;
100px;
height: 100px;
border: 1px solid #000;
background-color: red;
}
div{
height: 100px;
border: 1px solid #000;
}
.box1{
/*
margin-top:20px;
margin-right:40px;
margin-bottom:80px;
margin-left:160px;
*/
/*margin:20px 40px 80px 160px;*/
/*margin:20px 40px 80px;*/
/*margin:20px 40px;*/
margin:20px;
}
</style></head><body>

<title>51-盒子box-sizing属性</title> <style> .content{
300px;
height: 300px;
background-color: red;
}
.aside{
100px;
height: 200px;
background-color: green;
float: left;
}
.article{
/*
1.CSS3中新增了一个box-sizing属性, 这个属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变
2.box-sizing属性是如何保证增加padding和border之后, 盒子元素的宽度和高度不变
和我们前面学习的原理一样, 增加padding和border之后要想保证盒子元素的宽高不变, 那么就必须减去一部分内容的宽度和高度
3.box-sizing取值
3.1content-box
元素的宽高 = 边框 + 内边距 + 内容宽高
3.2border-box
元素的宽高 = width/height的宽高
*/
box-sizing: border-box;
200px;
height: 200px;
background-color: blue;
float: right;
border: 20px solid #000;
padding: 20px;

<title>49-盒子模型宽度和高度</title></head><body>

<div class="big">

<div class="small">

</div></div>

</body>

<title>53-盒子居中和内容居中</title> <style> .father{
800px;
height: 500px;
background-color: red;
/*text-align: center;*/
margin:0 auto;
}
.son{
100px;
height: 100px;
background-color: blue;
}
</style></head><body><div class="father"> 我是文字<br/> <img src="images/girl.jpg" alt=""> </div></body>

创建时间： 2017/8/3 14:35

<title>54-清空默认边距</title>

<style> /*

*{
margin: 0;
padding: 0;
}
*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
margin:0;padding:0
}
p{
610px;
height: 110px;
background-color: #cdcdcd;
border: 1px solid #000000;
}
</style></head><body>





<div>我是文字我是文字我是文字</div>

</body>











<title>64-浮动元素高度问题</title> <style> *{
margin: 0;
padding: 0;
}
div{
border: 1px solid #000;
}
p{
float: left;
50px;
height: 50px;
background-color: red;
}
</style></head><body>

<div>

<p></p>

</div>

</body>





1.什么是伪元素选择器?
伪元素选择器作用就是给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素
2.格式:
标签名称::before{
属性名称:值;
}
给指定标签的内容前面添加一个子元素
标签名称::after{
属性名称:值;
}
给指定标签的内容后面添加一个子元素

-->



-











-------------



<title>86-a标签的伪类选择器</title>

<style>

/*

a:link{
color: tomato;
}
a:visited{
color: green;
}
a:hover{
color: orange;
}
a:active{
color: pink;
}
*/
a{
// 简写格式
color: green;
}
/*a:link{*/
/*color: green;*/
/*}*/
/*a:visited{*/
/*color: green;*/
/*}*/
a:hover{
color: orange;
}
a:active{
color: pink;
}
</style></head><body>

<a href="http://www.taobao.com">taobao</a>

<a href="http://www.jd.com">jd</a>

</body>

<title>87-a标签的伪类选择器练习</title>

<style>

*{

margin: 0;
padding: 0;
}
ul{
960px;
height: 40px;
background-color: green;
margin: 100px auto;
}
ul li{
list-style: none;
120px;
height: 40px;
float: left;
background-color: purple;
text-align: center;
line-height: 40px;
}
/*
1.在企业开发中编写a标签的伪类选择器最好写在标签选择器的后面
2.在企业开发中和a标签盒子相关的属性都写在标签选择器中(显示模式/宽度/高度/padding/margin)
3.在企业开发中和a标签文字/背景相关的都写在伪类选择器中
*/
ul li a{
120px;
height: 40px;
display: inline-block;
}
ul li a:link{
background-color: pink;
color: white;
text-decoration: none;
}
ul li a:hover{
color: red;
background-color: #ccc;
}
ul li a:active{
color: yellow;
}

</style>

</head>

<body>

<ul>

<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>

创建时间： 2017/8/3 15:48

<title>88-过渡模块</title>

<style>

*{

margin: 0;
padding: 0;
}
div{
100px;
height: 50px;
background-color: red;
/*告诉系统哪个属性需要执行过渡效果*/
transition-property: width, background-color;
/*告诉系统过渡效果持续的时长*/
transition-duration: 5s, 5s;
/*transition-property: background-color;*/
/*transition-duration: 5s;*/
}
/*:hover这个伪类选择器除了可以用在a标签上, 还可以用在其它的任何标签上*/
div:hover{
300px;
background-color: blue;
}
</style></head><body><div>

</div>

</body>

<title>89-过渡模块-其它属性</title> <style> *{
margin: 0;
padding: 0;
}
div {
100px;
height: 50px;
background-color: red;
transition-property: width;
transition-duration: 5s;
/*告诉系统延迟多少秒之后才开始过渡动画*/
/*transition-delay: 2s;*/
}
div:hover{
300px;
}
ul{
800px;
height: 500px;
margin: 0 auto;
background-color: pink;
border: 1px solid #000;
}
ul li{
list-style: none;
100px;
height: 50px;
margin-top: 50px;
background-color: blue;
transition-property: margin-left;
transition-duration: 10s;
}
ul:hover li{
margin-left: 700px;
}
ul li:nth-child(1){
/*告诉系统过渡动画的运动的速度*/
transition-timing-function: linear;
}
ul li:nth-child(2){
transition-timing-function: ease;
}
ul li:nth-child(3){
transition-timing-function: ease-in;
}
ul li:nth-child(4){
transition-timing-function: ease-out;
}
ul li:nth-child(5){
transition-timing-function: ease-in-out;
}

</style>

</head>

<body>



<ul>

<li>linear</li>

<li>ease</li>

<li>ease-in</li>

<li>ease-out</li>

<li>ease-in-out</li>

</ul>

</body>

<title>90-过渡模块-连写</title>

<style>

*{

margin: 0;
padding: 0;
}
div {
100px;
height: 50px;
background-color: red;
/*transition-property: width;*/
/*transition-duration: 5s;*/
/*transition: width 5s linear 0s,background-color 5s linear 0s;*/
/*transition: background-color 5s linear 0s;*/
/*transition: width 5s,background-color 5s,height 5s;*/
transition: all 5s;
}
div:hover{
300px;
height: 300px;
background-color: blue;
}

</style>

</head>

<body>



<div></div>

</body>

<title>91-过渡模块-弹性效果</title>

<style>

*{

margin: 0;
padding: 0;
}
div{
height: 100px;
background-color: red;
margin-top: 100px;
text-align: center;
line-height: 100px;
}
div span{
font-size: 80px;
/*transition-property: margin;*/
/*transition-duration: 3s;*/
transition: margin 3s;
}
div:hover span{
margin: 0 20px;
}

</style>

</head>

<body>



<div>

<span>江</span>

<span>哥</span>

<span>带</span>

<span>你</span>

<span>狂</span>

<span>虐</span>

<span>H</span>

<span>5</span>

</div>

</body>

<title>92-过渡模块-手风琴效果</title>

<style>

*{

margin: 0;
padding: 0;
}
ul{
960px;
height: 300px;
margin: 100px auto;
border: 1px solid #000;
overflow: hidden;
}
ul li{
list-style: none;
160px;
height: 300px;
background-color: red;
float: left;
/*border: 1px solid #000;*/
/*box-sizing: border-box;*/
/*transition-property: width;*/
/*transition-duration: 0.5s;*/
transition: width 0.5s;
}
ul:hover li{
100px;
}
ul li:hover{
460px;
}

</style>

</head>

<body>

<ul>

<li><img src="images/ad1.jpg" alt=""></li>

<li><img src="images/ad2.jpg" alt=""></li>

<li><img src="images/ad3.jpg" alt=""></li>

<li><img src="images/ad4.jpg" alt=""></li>

<li><img src="images/ad5.jpg" alt=""></li>

<li><img src="images/ad6.jpg" alt=""></li>

</ul>

</body>

查看全文

相关阅读:
iOS－按钮的代码封装
 MAC_talk 笔记-之mac使用技巧
 关于简历
 win7系统下VS2010配置glew
NOIP模拟:饼干(简单规律推导)
c++ string and wstring conversion
c++ 使用PID获取可执行文件路径
 c++ 使用PID获取顶级窗口句柄和标题
 c++ 去掉字符串首尾空格
 git include只包含某些文件

原文地址：https://www.cnblogs.com/gyh04541/p/7295975.html