黑马程序员_学习日记57_702HTML

最新推荐文章于 2024-07-12 20:49:16 发布

kuangjian007

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量385

点赞数

分类专栏： HTML 文章标签： div float html input action table

本文链接：https://blog.csdn.net/kuangjian007/article/details/7716634

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、网站表单

<form>标签
<form method="post" action="">
	<table width="400px" align="center">
		<tr>
			<td><label for="txtName" accesskey="n">用户名：</td>
			<td><input id="txtName" name="txtname" type="text" size="20" readonly="readonly" value="123" ></td>
		</tr>
		<tr>
			<td>密码：</td>
			<td><input type="password" size="20"></td>
		</tr>
		<tr>
			<td>确认密码：</td>
			<td><input type="password" size="20"></td>
		</tr>
		<tr>
			<td>性别：</td>
			<td><input type="radio" name="sex" value="male"><label for=""></label></td>
		</tr>
		<tr>
			<td>
				<input type="checkbox">吃饭
				<input type="checkbox">吃饭
				<input type="checkbox">吃饭
			</td>
		</tr>
		<tr>
			<td><input type="submit" value="提交"/></td>
			<td><input type="reset" value="重置"/></td>
		</tr>
	</table>
</form>

二、用ul和li做菜单(横向)

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #navi
        {
            list-style-type:none;
            cursor:pointer;
        }
        #navi li
        {
            margin-left:10px;
            text-align:center;
            float:left;
            width:100px;
            border-bottom:1px dashed red;
        }
    </style>
</head>
<body>
    <ul id="navi">
        <li>资源</li>
        <li>博客</li>
        <li>空间</li>
        <li>论坛</li>
    </ul>
</body>
</html>

三、DivCss布局一个页面框架

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        *
        {
            margin:0px;
            padding:0px;    
        }
        #container
        {
           
            margin:0px auto;/* margin属性的auto值可以使控件居中显示 */
            background-color:Gray;
            width:90%;
            height:900px;    
        }
        #header
        {
            background-color:Red;
            height:150px; 
               
        }
        #sideBar
        {
            background-color:Blue;
            height:600px;
            width:15%;  
            float:left;  
        }
        #content
        {
            background-color:Green;
            height:600px;
            width:85%;  
            float:left;
        }
        #footer
        {
            background-color:Yellow;
            height:150px;  
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="header"></div>
        <div id="body">
            <div id="sideBar"></div>
            <div id="content"></div>
        </div>
        <div style="clear:both"></div><!-- 用clear清除控件的float属性 -->
        <div id="footer"></div>
    </div>
</body>
</html>

四、控件盒子模型