html

html文件

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Form表单</title>

<link rel="stylesheet" type="text/css" href="./form.css" />

</head>

<body>

<div id="form">

<h3>表单学习</h3>

<form style="padding-top:20px;" action="demoget.php" method="get">

 

    <p><span>用户名:</span><input type="text" name="username" /></p><br />

 

    <p><span>密码:</span><input type="password" name="password" /></p><br />

 

    <p><span>性别:</span><input type="radio" name="sex" value=1 checked="checked" />男&nbsp;&nbsp;&nbsp;

                    <input type="radio" name="sex" value=0 />女</p><br />

 

    <p><span>爱好:</span>

            <input type="checkbox" name="intrest" value="basketball" />篮球

            <input type="checkbox" name="intrest" value="football" />足球

            <input type="checkbox" name="intrest" value="volleyball" />排球

    </p><br />

 

    <p><span>学历:</span>

    <select name="education">

        <option selected="selected">请选择</option>

        <option value="院士">院士</option>

        <option value="博士后">博士后</option>

        <option value="博士">博士</option>

        <option value="硕士">硕士</option>

        <option value="本科">本科</option>

        <option value="大专">大专</option>

    </select></p><br />

 

    <p><span>备注:</span><textarea name="text_area"></textarea></p><br />

 

    <input style="margin-left:111px; width:60px;height:25px;" type="submit" name="sub" value="提交" />

 

</form>

</div>

</body>

</html>

 

 

 

 

盒子模型

 

 

 

margin

padding

 

可以将上面的图片看成一个盒子

红色箭头:

margin: 上右下左

margin-top

margin-right

margin-bottom

margin-left

 

网页布局可以看成是一块一块组合起来的,那么两个盒子直接间距就是通过这个margin控制的

 

padding:上右下左

padding-top

padding-right

padding-bottom

padding-left

 

在盒子里面肯定是有内容的,红色框的线宽度虽然只有2mm这个就是控制盒子跟盒子内部文本距离的

 

相对定位、绝对定位

盒子参照物是什么这个很重要;

要想将盒子放在页面正中间,那么一定要先给盒子指定一个具体的参照物;

 

行内元素、块级别元素

div p ul li...都是块级别的元素

span 行内元素

 

CSS样式的两种方式,第一种就是放在html文件的<head></head>中间

<style type="text/css">

 

</style>

第二种就是引入.css 文件

<link rel="stylesheet" type="text/css" href="" />

 

常用的属性跟值

 * {

        margin: 0;

        padding: 0;

    }

 

width: 850px;

宽度

 

height: 90px;

line-height: 90px;

当高度跟行高后面的值一样的时候,这个时候显示的文本会垂直居中;

 

background:#fff;

背景颜色

 

color:red; 

字体颜色

 

font-size:14px;

字体大小

 

ul{

    list-style-type:none;

}

去除列表标签前面的点

 

text-indent:10px;

 

text-align:right;

text-align:center;

text-align:left;

盒子里面的文本到底是居中还是居右

 

display:block;

行内元素转成块元素

 

display:inline;

块元素转成行内元素

 

float:right;

float:left;

浮动

为什么要有浮动?

要是你想让两个div(块级别元素)放在一行,那么就必须要浮动,块级别的元素默认是霸占一行的,不管它的width是否有整个页面宽

 

clear:both;

清除浮动

 

border-top

border-right

border-bottom

border-left

盒子四边的宽度控制,也是能设置是实现还是虚线还有颜色的border-bottom:1px solid red;

 

text-decoration:none;

超链接下划线去掉

 

text-decoration:underline;

超链接下划线加上

 

找元素(html文件就是一个树,你要找到树的那个枝,就需要一步步定位到枝,通过选择器)

这个比较关键

id选择器

class选择器

元素选择器

 

eg:

#newslist ul li a {

    color:#666;

    text-decoration:none;

}

 

就是找到id选择器是:newslist  下面的ul ul下面的li li下面的a标签,这样一级级找

没有好的办法只能慢慢试,熟练之后就知道怎么找了;

 

 

下面是一个例子:

新建一个后缀是.html的文件

<!DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="UTF-8">

    <title>HTML CSS</title>

    <style type="text/css">

    * {

        /*

        目的就是去掉所有标签的自身的margin padding默认值

        不这么干由于浏览器对各种标签的margin padding默认值不一样调起来相当头疼

        */

        margin: 0;

        padding: 0;

    }

 

    #main {

        width: 850px;

        /*宽度*/

        height: 500px;

        /*高度*/

        margin: 0 auto;

        /*表示的意思是:margin-top:0 margin-bottom:0 左右两边自动*/

        border: 1px solid red;

        /*给盒子边框 1表示的是边框的宽度,solid是实线,deshed是虚线,后面是边框颜色*/

        position: relative;

    }

 

    #main div.show {

        width: 500px;

        height: 300px;

        border: 1px solid blue;

        position: absolute;

        top: 50px;

        left: 200px;

    }

    </style>

</head>

 

<body>

    <div id="main">

        <div class="show">

            class:show要是想相对定位的话,那么先要给class:show设置一个参照物;

            <br /> 设置参照物需要在参照物盒子样式里面加上:position: relative;

            <br /> 准备绝对定位的盒子自己样式里面需要加上:position: absolute;

            <br />

            <br /> 在自己样式里面利用top left bottom right设置要放到什么位置即可

        </div>

    </div>

</body>

 

</html>

 

posted @ 2016-03-17 09:49  Curitis  阅读(182)  评论(0编辑  收藏  举报