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>

Web02_HTML&CSS的更多相关文章

  1. 【javaweb学习笔记】WEB02_HTML&CSS

    一.表单相关知识 1.表单: 所有需要提交到服务器端的表单项必须使用<form></form>括起来 form标签属性(有两个): 1)action,整个表单提交的位置(可以是 ...

  2. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  3. 【使用DIV+CSS重写网站首页案例】步骤分析与代码实现

    使用DIV+CSS重写网站首页案例 步骤分析: 第一步:先定义一个大的 div(整个页面),然后嵌套 8 个小的 div(共八行): 第二步:(第一行)在第一个 div 里面嵌套 3 个小的 div: ...

  4. CSS的未来

    仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...

  5. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  6. 前端css兼容性与易混淆的点

    一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...

  7. 理解CSS外边距margin

    前面的话   margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...

  8. 理解CSS视觉格式化

    前面的话   CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...

  9. 谈谈一些有趣的CSS题目（十二）-- 你该知道的字体 font-family

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

随机推荐

  1. Linux添加虚拟网卡的多种方法

    Linux添加虚拟网卡的多种方法有时候,一台服务器需要设置多个ip,但又不想添加多块网卡,那就需要设置虚拟网卡.这里介绍几种方式在linux服务器上添加虚拟网卡. 我们向eth0中添加一块虚拟网卡: ...

  2. 高性能mysql 第10章 复制

    复制功能不仅能够构建高可用的应用,同时也是高可用性,可扩展性,灾难恢复,备份以及数据仓库等工作的基础. mysql支持两种复制方式:基于语句的复制和基于行的复制.基于语句的复制(也成为逻辑复制)是早期 ...

  3. 【BZOJ4596】【Luogu P4336】 [SHOI2016]黑暗前的幻想乡 矩阵树定理，容斥

    同样是矩阵树定理的裸题.但是要解决它需要能够想到容斥才可以. \(20\)以内的数据范围一定要试试容斥的想法. #include <bits/stdc++.h> using namespa ...

  4. Python 3标准库 第十一章 网路通信

    网路通信11.1 ipaddress  : Internet 地址 ipaddress模块提供了处理IPv4和IPv6 11.1.2  网络 CMDB  11.2  socket:网络通信 11.2. ...

  5. Android 属性动画监听事件与一个菜单的例子

    简单监听事件 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 3 ...

  6. LeetCode 141、142环形链表

    141题: 首先,先看141题,这个题是比较初级也是比较经典的环形链表题: 给定一个链表,判断链表中是否有环. 进阶:你能否不使用额外空间解决此题? 那么,什么是有环的链表呢: 这个就是有环的链表 题 ...

  7. F - Almost Sorted Array

    F - Almost Sorted Array   We are all familiar with sorting algorithms: quick sort, merge sort, heap ...

  8. HDU 5818 Joint Stacks （优先队列）

    Joint Stacks 题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5818 Description A stack is a data stru ...

  9. input(移动端iOS)输入内容时调用软件盘后页面底部留白问题

    iOS/input输入框调用软键盘底部留白 只需input输入框失去焦点时,让页面自动下移即可恢复 <input placeholder="请输入用户名" v-model=& ...

  10. 01.二维数组中的查找 (Java)

    题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数 ...