html+css

作者: 开心糖果的夏天 | 来源:发表于2017-08-03 22:47 被阅读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>

html+css

一、超链接

二、表单

三、CSS基础

四、框架结构

五、选择符优先权

六、盒子模型

七、CSS继承详解

八、CSS精灵技术（图片变换效果）

九、CSS布局

浮动布局

绝对定位

相对定位

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读