html+css
2017-08-03 本文已影响8人
开心糖果的夏天
一、超链接
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>超级链接的使用</title><!--链接必须是回路，有去有回-->
</head>
<body>
首页 <a href="java.html">JAVA课程</a><!--在一个文件夹里，都是站内链接--> .NET课程 PHP课程
</body>
</html>
二、表单
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body >
<fieldset>
<legend>表单练习制作</legend>
<form action="ok.html" method="post">
<table border="1" cellpadding="10" cellspacing="0" bordercolor="blue" width="600" align="center">
<tr>
<td>用户名：</td>
<td><input type="text" name="username" value="请输入用户名" maxlength="3" /></td>
<!--用value属性设置文本框的初始值-->
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="pwd1" /></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" name="pwd2"/></td>
</tr>
<tr>
<td>年龄：</td>
<td><input type="text" name="age" value="25" readonly="readonly" /></td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女
</td>
</tr>
<!--点汉字就可以选中男或女-->
<tr>
<td>性别：</td>
<td>
<fieldset>
<legend>请选择性别</legend>
<input type="radio" name="sex" value="男" id="man" />
<label for="man">男</label>
<input type="radio" name="sex" value="女" id="woman" />
<label for="woman">女</label>
</fieldset>
</td>
</tr>
<tr>
<td>邮箱：</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>所在城市：</td>
<td>
<select name="select">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="天津">天津</option>
<option value="深圳">深圳</option>
<option value="山东">山东</option>
<option value="山西">山西</option>
<option value="陕西" selected="selected">陕西</option>
<option value="四川">四川</option>
</select>
</td>
</tr>
<tr>
<td>城市中的具体地区：</td>
<td>
<select name="select">
<optgroup label="北京">
<option value="朝阳区">朝阳区</option>
<option value="海淀区">海淀区</option>
<option value="东城区">东城区</option>
</optgroup>
<optgroup label="陕西">
<option value="宝鸡市">宝鸡市</option>
<option value="西安市">西安市</option>
<option value="咸阳市">咸阳市</option>
</optgroup>
</select>
</td>
</tr>
<tr>
<td>交友目的：</td>
<td>
<select name="targer" size="3" multiple="multiple">
<option value="同行交流">同行交流</option>
<option value="爱人">爱人</option>
<option value="普通朋友">普通朋友</option>
</select>
</td>
</tr>
<tr>
<td>爱好：</td>
<td>
<input type="checkbox" name="checkbox" checked="checked"/>游泳
<input type="checkbox" name="checkbox1" />旅游
<input type="checkbox" name="checkbox2" />羽毛球
<input type="checkbox" name="checkbox3" />美术
<input type="checkbox" name="checkbox4" />冲浪
</td>
</tr>
<tr>
<td>照片上传：</td>
<td>
<input type="file" name="mypic">
</td>
</tr>
<tr>
<td>个人简介：</td>
<td>
<textarea rows="10" cols="50"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="注册" />
<input type="reset" value="取消" />
<input type="button" value="显示一句欢迎你" onclick="alert('你好！');" />
</td>
</tr>
</table>
</form>
</fieldset>
</body>
</html>
三、CSS基础
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css语法学习</title>
<style type="text/css">/*body表示我们想要控制的范围，针对的对象 {}中是样式的声明*/
body{font-size: 12px;}
h1{font-size: 12px;color: blue;}
span{font-size: 5em;color: green;font-family: "Arial","宋体";}
p{line-height:3em;}
div{
width: 800px;
height: 50px;
background: #ccc;
line-height: 50px;
color: red
}
li{font-size: 18px;
font-weight: bold;
}
h2{font-weight: normal;}
</style>
</head>
<body>
<h1>1.2月14日，在美国华盛顿国会山，美国联邦储备委员房和城市<span>事务委员会 I am HAPPY</span>听证会。</h1>
<h2>2.美国联邦储备委员会主席耶伦14日表示，美国经济正朝着预期方向前进，美联储将在未来几次货。</h2>
<p> 3.新华社华盛顿２月１４日电（记者江宇娟 郑启航）<br/>美国联邦储备委员会主席耶伦
4.美国经济正朝着预期方向前进，美联储将在<br/>未来几次货币政策例会上讨论是否再次加息。</p>
<div>5.耶伦当天在美国参议院银行、住房和城市事务委员会作证时说，美国经济继续朝着充分就业和２％的通胀目标稳步前进。</div>
<p> 6.她表示，美联储预计美国经济将继续保持温和增长势头，就业市场将继续改善，通胀率将继续回升。</p>
<div>7.耶伦再次强调，当前经济形势决定未来渐进加息的节奏是合适的。</div>
<ul>
<li>她表示，等待太久才开始加息是不明智的</li>
<li>这有可能迫使美联储此后不得不加快加息节奏</li>
</ul>
</body>
</html>
四、框架结构
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>框架结构</title>
</head>
<frameset cols="240,*" border="50" bordercolor="blue">
<frame src="left.html" name="left">
<frame src="right.html" name="right">
</frameset>
<noframes>
<body >
</body>
</noframes>
</html>
五、选择符优先权
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css语法学习</title>
<style type="text/css">
p{font-size: 12px;color: blue;}
.waring{color: red;
font-style: italic;
}
#nine{
color:green !important;
color:gold;
}
em{font-size: 18px;font-style: normal;}
#two{
font-size: 18px;
/*text-decoration: underline;*/
/*text-decoration: overline;上划线*/
text-decoration: blink;
/*闪烁，css样式在不同的浏览器中它的默认值是不同的。我们要保证网页的兼容性，尽量使用通用属性，不用存在兼容性差别*/
text-decoration: line-through;
}
.si{
letter-spacing: 2em;/*字符间距*/
}
.se{word-spacing: 2em;/*单词间距：检查或设置对象中的单词之间插入的空格。不存在兼容性问题*/
}
</style>
</head>
<body>
<div>1、最灵繁的人也看不见自己的背脊。——非洲</div>
<p id="two">2、最困难的事情就是认识自己。——希腊</p><!--内联式样式表，针对某一行或者某一个标签-->
<p class="waring">最大的骄傲于最大的自卑都表示心灵的最软弱无力。——斯宾诺莎</p>
<h1 >3、有勇气承担命运这才是英雄好汉。——黑塞</h1>
<p>
4、与肝胆人共事，无字句处读书。——周恩来<br/>
5、阅读使人充实，会谈使人敏捷，写作使人精确。——培根<br/>
6、自知之明是最难得的知识。——西班牙
</p>
<div id="nine" class="waring bigtext" >与肝胆人共事，无字句处读书。——周恩来</div><!--可同时给某个元素应用多个类-->
<div class="si">我是woshi</div>
<div class="se">我 是woshi</div>
<em>我本倾斜</em>
</body>
</html>
六、盒子模型
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css语法学习</title>
<style type="text/css">
#bigBox{
width: 300px;
height: 300px;
background: #ccc;
}
#smallBox{
width: 100px;
height: 100px;
background: pink;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
border:5px solid blue;
padding: 20px;
}
#Box{
width: 100px;
height: 100px;
background: green;
}
</style>
</head>
<body>
<div id="bigBox">
大盒子
<div id="smallBox">
小盒子
</div>
<div id="Box">
第二个盒子
</div>
</div>
</body>
</html>
盒子模型示例
七、CSS继承详解
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css语法学习</title>
<style type="text/css">
/*用到哪些html元素，就给哪些元素重置它的内外边距*/
body,div,ul,li,h1{margin: 0;padding: 0;}
/*利用继承的特点将颜色，大小加给body，这样，子元素就会继承他的这些属性*/
body{
font-size:12px;
line-height: 1.5;
color:black;
margin: 0;
height: 500px;/*不被子元素继承*/
margin-left: 100px;/*在上边已将外边框都设置为0，所以此时都会整体据左边100px*/
}
div{
width: 200px;
height: 200px;
background: #ccc;
border:2px solid blue;
}
/*ul有默认的内边距*/
ul{
width: 200px;
height: 300px;
background: green;
list-style: none;
border-top: 5px dashed red;
border-left: 5px dotted yellow;
}
/*li{
width: 200px;
height: 100px;
background: pink;
}*/
</style>
</head>
<body>
<h1>关于css属性的继承详解</h1>
<div>
1、遵守诺言就象保卫你的荣誉一样。 ——（法）巴尔扎克 <br/>
2、人而无信，不知其可也。 ———孔子
</div>
<p>
3、真话说一半常是弥天大谎。——富兰克林<br/>
4、言而必有信，期而必当，天下之高行也。——淮南子<br/>
5、言而必有信，期而必当，天下之高行也。——淮南子<br/>
</p>
<ul>
<li>8、真话说一半常是弥天大谎。——富兰克林</li>
<li> 9、言而必有信，期而必当，天下之高行也。——淮南子</li>
<li> 10、言而必有信，期而必当，天下之高行也。——淮南子</li>
</ul>
</body>
</html>
八、CSS精灵技术（图片变换效果）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css块与内联元素</title>
<style type="text/css">
body,div{
padding: 0;
margin: 0;
}
body{
padding:100px;
}
/*块元素的宽和高起作用,因此将a元素转换为块元素*/
a{
width:88px;
height: 44px;
background: url(图片/26.jpg);
display: block;
}
a:hover{
background: url(图片/27.jpg);
}
#btn{
margin-top: 10px;
background: url(00.jpg);/*就是将26 27两张图片一上一下放置合并之后的图片*/
}
#btn:hover{
background-position: 0 -44px;
}
</style>
</head>
<body>
<a href="a"></a><!--空链接-->
<a href="a" id="btn"></a>
</body>
</html>
九、CSS布局
CSS布局的方式有3种：
（1）默认的就是按照文档流的顺序。按html的结构顺序。
（2）浮动布局方式（将块元素独占一行的行为取消，允许别人与它一行）。
通过设置html元素的float属性显示。
（3）定位布局方式
通过设置html元素的position属性显示。
语法：
position:static|absolute|fixed|relative
static：表示默认值
absolute：表示采用绝对定位，需要同时使用left、right、top和bottom等属性进行绝对定位。
fixed:表示当页面滚动时，元素不随着滚动。
relative：表示采用相对定位，对象不可层叠。
浮动布局
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css布局</title>
<style type="text/css">
div{
width:100px;
height:100px;
font-size: 24px;
font-weight: bold;
}
/*设置浮动布局后，元素就会移动到父亲的右边，由于div没有父亲，所以移动到屏幕的右边*/
/*#one{background: red;float: right;}*/
#one{background: red;float: left;}
#two{background: green;}
#three{background: blue;}
</style>
</head>
<body>
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
</body>
</html>
绝对定位
将对象从文档流中分离出来，通过设置left、right、top和bottom四个方向相对于父级对象进行绝对定位。如果不存在这样的对象则依据body对象。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css布局</title>
<style type="text/css">
body,div{margin: 0;padding: 0;}
div{
width:100px;
height:100px;
font-size: 24px;
font-weight: bold;
}
#one{background: red;}
#two{
background: green;
position: absolute;/*绝对定位*/
top:100px;
left:100px;
}
#three{background:blue;}
#main{
width:500px;
height:500px;
border:1px solid black;
margin:100px auto;
position: relative;
}
</style>
</head>
<body>
<div id="main">
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
</div>
</body>
</html>
相对定位
对象不从文档流中分离出来，通过设置left、right、top和bottom四个方向相对于自身进行相对定位。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css布局</title>
<style type="text/css">
body,div{margin: 0;padding: 0;}
div{
width:100px;
height:100px;
font-size: 24px;
font-weight: bold;
}
#one{background: red;}
#two{
background: green;
position: relative;
left:100px;
}
#three{background:blue;}
#main{
width:500px;
height:500px;
border:1px solid black;
margin:100px auto;
position: relative;
}
</style>
</head>
<body>
<div id="main">
<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
</div>
</body>
</html>
