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. Python数据驱动DDT的应用

    在开始之前,我们先来明确一下什么是数据驱动,在百度百科中数据驱动的解释是:数据驱动测试,即黑盒测试(Black-box Testing),又称为功能测试,是把测试对象看作一个黑盒子.利用黑盒测试法进行 ...

  2. 求二叉搜索树的第k小的节点

    题目描述: /** * 给定一棵二叉搜索树,请找出其中的第k小的结点. * 例如, (5,3,7,2,4,6,8)中, * 按结点数值大小顺序第三小结点的值为4. * 这是层序遍历: * 5 * 3 ...

  3. h5转pb的两个坑

    1.需要加上如下设置,否则转换前后输出可能不一致,这个主要针对dropout.BN层训练测试不一致 from keras import backend as K K.set_learning_phas ...

  4. java8学习之自定义收集器深度剖析与并行流陷阱

    自定义收集器深度剖析: 在上次[http://www.cnblogs.com/webor2006/p/8342427.html]中咱们自定义了一个收集器,这对如何使用收集器Collector是极有帮助 ...

  5. 浅析Java web程序之客户端和服务器端交互原理

    原文链接: https://www.iteye.com/topic/470019 1. 协议 a. TCP/IP整体构架概述 TCP/IP协议并不完全符合OSI的七层参考模型.传统的开放式系统互连参考 ...

  6. python中list.sort()与sorted()的区别

    list.sort()和sorted()都是python的内置函数,他们都用来对序列进行排序,区别在于 list.sort()是对列表就地(in-place)排序,返回None:sorted()返回排 ...

  7. JQuery的deferred.promise()

    jQuery提供的deferred.promise()方法的作用是,在原来的Deferred 对象上返回另一个 Deferred 对象,即受限制的 Promise 对象,受限制的 Promise 对象 ...

  8. sublime开发工具各类配置和插件的安装

    1.css颜色提示 惯例两步: ctrl+shift+p Install package 手动输入color Highlighter 注意,一定要手动输入,复制粘贴回车会没有反应,一般手动输入colo ...

  9. json从后台接收时转化格式

    后台传回的json格式为字符串格式 需要通过转化成json对象 方法一:$.get(设置type的属性为json) 方法二:设置response.setContentType("applic ...

  10. CSS3做出条纹大背景

    ㈠实现不等宽背景条纹   实现如上图所示的效果,代码如下: <!DOCTYPE html> <html lang="en"> <head> &l ...