HTML
表单标签属性介绍
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表单标签属性介绍</title> </head> <body> <form action="#" method="get"> 隐藏标签：<input type="hidden" name="id" value="" /><br /> 用户名： <input type="text" name="username" vplaceholder="请输入用户名" required="required" /><br /> 密码： <input type="password" name="password" required="required" /><br /> 确认密码： <input type="password" name="repassword" required="required" /><br /> 性别： <input type="radio" name="sex" value="男" checked="" />男 <input type="radio" name="sex" value="女" />女<br /> 爱好： <input type="checkbox" name="hobby" value="钓鱼" />钓鱼 <input type="checkbox" name="hobby" value="打飞机" />打飞机 <input type="checkbox" name="hobby" value="写代码" checked="checked" />写代码<br /> 头像： <input type="file" name="file" /><br /> 籍贯： <select name="province"> <option>--请选择--</option> <option value="北京">北京</option> <option value="上海" selected="selected">上海</option> <option value="广州">广州</option> </select><br /> 自我介绍： <textarea name="self"></textarea><br /> 提交按钮： <input type="submit" value="注册" /><br /> 重置按钮： <input type="reset" /><br /> </form> </body> </html>
HTML
div演示效果
div是一个html标签，一个块级元素（单独显示一行）。它单独使用没有任何意义，必须结合CSS来使用。它主要用于页面的布局。
span是一个html标签，一个内联元素（显示一行）。它单独使用没有任何意义，必须结合CSS来使用它主要用于对括起来的内容进行样式的修饰。
使用DIV+CSS完成首页重新布局.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<style>
#father {
border: 1px solid red;
width: 1300px;
height: 2100px;
margin: auto;
}
#logo {
border: 1px solid red;
width: 1300px;
height: 50px;
}
.top {
border: 1px solid blue;
width: 431px;
height: 50px;
float: left;
}
#top {
padding-top: 12px;
height: 50px;
}
#menu {
border: 1px solid red;
width: 1300px;
height: 50px;
background-color: orange;
}
ul li {
display: inline;
color: white;
}
#clear {
clear: both;
}
#product {
border: 1px solid red;
width: 1300px;
height: 1000px;
}
#product_top {
border: 1px solid blue;
width: 100%;
height: 45px;
padding-top: 8px;
}
#product_bottom {
border: 1px solid green;
width: 100%;
height: 500px;
}
#product_bottom_left {
border: 1px solid red;
width: 200px;
height: 500px;
float: left;
}
#product_bottom_right {
border: 1px solid blue;
width: 1094px;
height: 500px;
float: left;
}
#big {
border: 1px solid red;
width: 544px;
height: 248px;
float: left;
}
.small {
border: 1px solid blue;
width: 180px;
height: 248px;
float: left;
/*让里面的内容居中*/
text-align: center;
}
#bottom {
text-align: center;
}
</style>
</head>
<body>
<div id="father">
<!--1.logo部分-->
<div id="logo">
<div class="top">
<img src="../../img/微信截图_20170716005056.png" height="46px" />
</div>
<div class="top">
<img src="../../img/微信截图_20170716005056.png" height="46px" />
</div>
<div class="top" id="top">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div>
<div id="clear">
</div>
<!--2.导航栏部分-->
<div id="menu">
<ul>
<a href="#">
<li style="font-size: 20px;">全部产品及服务 </li>
</a>
<a href="#">
<li>首页</li>
</a>
<a href="#">
<li>手机</li>
</a>
<a href="#">
<li>宽带光纤</li>
</a>
<a href="#">
<li>老用户</li>
</a>
<a href="#">
<li>省钱</li>
</a>
<a href="#">
<li>自助服务</li>
</a>
</ul>
</div>
<!--3.轮播图-->
<div id="">
<img src="../../img/微信截图_20170716005056.png" width="100%" />
</div>
<!--4.最新商品-->
<div id="product">
<div id="product_top">
<span style="font-size: 25px;padding-top: 8px;">最新商品</span>
<img src="../../img/微信截图_20170716005056.png" />
</div>
<div id="product_bottom">
<div id="product_bottom_left">
<img src="../../img/微信截图_20170716005056.png" width="100%" height="100%" />
</div>
<div id="product_bottom_right">
<div id="big">
<a href="#"><img src="../../img/微信截图_20170716005056.png" width="100%" height="100%"></a>
</div>
<div class="small">
<img src="../../img/微信截图_20170716005056.png">
<a href="#">
<p style="color: gray;">4G纯流量云卡</p>
</a>
<p style="color: red;">免费送2G流量</p>
<p style="color: red;">￥20</p>
</div>
<div class="small">
<img src="../../img/微信截图_20170716005056.png">
<a href="#">
<p style="color: gray;">4G纯流量云卡</p>
</a>
<p style="color: red;">免费送2G流量</p>
<p style="color: red;">￥20</p>
</div>
<div class="small">
<img src="../../img/微信截图_20170716005056.png">
<a href="#">
<p style="color: gray;">4G纯流量云卡</p>
</a>
<p style="color: red;">免费送2G流量</p>
<p style="color: red;">￥20</p>
</div>
<div class="small">
<img src="../../img/微信截图_20170716005056.png">
<a href="#">
<p style="color: gray;">4G纯流量云卡</p>
</a>
<p style="color: red;">免费送2G流量</p>
<p style="color: red;">￥20</p>
</div>
<div class="small">
<img src="../../img/微信截图_20170716005056.png">
<a href="#">
<p style="color: gray;">4G纯流量云卡</p>
</a>
<p style="color: red;">免费送2G流量</p>
<p style="color: red;">￥20</p>
</div>
<div class="small">
<img src="../../img/微信截图_20170716005056.png">
<a href="#">
<p style="color: gray;">4G纯流量云卡</p>
</a>
<p style="color: red;">免费送2G流量</p>
<p style="color: red;">￥20</p>
</div>
<div class="small">
<img src="../../img/微信截图_20170716005056.png">
<a href="#">
<p style="color: gray;">4G纯流量云卡</p>
</a>
<p style="color: red;">免费送2G流量</p>
<p style="color: red;">￥20</p>
</div>
<div class="small">
<img src="../../img/微信截图_20170716005056.png">
<a href="#">
<p style="color: gray;">4G纯流量云卡</p>
</a>
<p style="color: red;">免费送2G流量</p>
<p style="color: red;">￥20</p>
</div>
</div>
</div>
</div>
<!--5.广告图片-->
<div id="">
<img src="../../img/微信截图_20170716005056.png" width="100%" />
</div>
<!--6.友情链接和版权信息-->
<div id="bottom">
<a href="#">关于我们</a>
<a href="#">电信公告</a>
<a href="#">网站导航</a>
<a href="#">掌上营业厅</a>
</div>
</div>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
