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. yield from语法

    yield from 是在Python3.3才出现的语法.所以这个特性在Python2中是没有的. yield from 后面需要加的是可迭代对象,它可以是普通的可迭代对象,也可以是迭代器,甚至是生成 ...

  2. string::erase

    sequence (1) string& erase (size_t pos = 0, size_t len = npos);两个参数都有默认值,传递的唯一参数匹配第一个 character ...

  3. 【hiho1087】Hamiltonian Cycle

    题目大意:给定一个 N 个点的有向图,计数图上哈密顿回路的条数. 题解:哈密顿回路需要经过除了初始位置,每个点恰好一次.如果已知一条哈密顿回路的方向,那么从这条路上任意一个点出发,得到的都是同样的结果 ...

  4. django 之视图层及模板层 04

    目录 视图层 render方法是Template和Contex两个对象的组合使用 JsonResponse对象 CBV及源码分析 CBV 加装饰器的方式 模板层 模板语法传值 模板语法 变量 过滤器( ...

  5. django 路由层（反向解析）03

    目录 ORM表关系建立 Django请求生命周期流程图 urls.py 路由层 无名分组 有名分组 反向解析 无名分组的反向解析 有名分组的反向解析 以编辑功能为例 路由分发 名称空间 伪静态 虚拟环 ...

  6. HyperSQL 链接参数中文件的路径

    如果我们在系统中配置下面的连接参数: spring.datasource.url=jdbc:hsqldb:file:~/db/cwiki-us-jpetstore 我们怎么知道 hsqldb 数据库的 ...

  7. input输入框如何只能输入非零开头的正整数

    input输入框如何只能输入非零开头的正整数 ********* 废话不多说,先来代码 ********* case1: 原生html + javascript <body> <!- ...

  8. props 父组件给子组件传递参数

    话不多说,直接上代码 父组件: <span><humidity-component ref="soilHumidityBot" :title='title2'&g ...

  9. CF1213E Two Small Strings

    题目链接 问题分析 由于三个字母是等价的,所以大致可以分为如下几种情况: aa, ab ab, ac ab, ba ab, bc 不难发现,第\(3\)中情况可能造成无解(\(n>1\)时),而 ...

  10. 使用Hive-JDBC遇到的一些问题解决

    使用Hive-JDBC遇到的一些问题解决(转) 标签(空格分隔): Hive 1,java.lang.NoClassDefFoundError: org/apache/hive/service/cli ...